4

I've been trying to figure out a way to store an image on the Arduino, and I couldn't figure it out. What I've been trying to do with this image is the following:

  • Test that the arduino has the image by displaying on a touchscreen (I have the adafruit 2.8 inch touch screen)
  • Break down the image into an array, in which contains pixel by pixel color RGB color info of the image

int pictureData = [[100,50,0],[176,255,5],...]; // RGB Values within the array

How can I store an image and break it down as shown? Is there no way to do this? I would appreciate any help! Thank you very much!

I am using Arduino IDE for code and I have Arduino Uno/MEGA, which ever is necessary for this task. All info of screen is on adafruit: https://www.adafruit.com/product/376

The below image shows an example of displaying the image:

enter image description here

2
  • Please edit your question to include part number and a link to “adafruit 2.8 inch touch screen” and general specs, and image format (jpg, bmp, whatever) and its stored size. This will reduce the amount of time people spend guessing the display's pixel count and the number of bytes in the image May 24, 2017 at 23:51
  • @JamesWaldby-jwpat7 Thank you for your time. I added it to the question. May 24, 2017 at 23:56

2 Answers 2

5

I presume you are trying to create a system that has one image stored, and want the image to be available without needing an SD card reader on the system.

If the logic of your program is small enough to fit into about 18KB of flash memory, you can store one 230KB image in flash on a Mega. (230KB+18KB+8KB = 256KB = Mega flash size. 8KB is Mega bootloader size.) See the PROGMEM page at arduino.cc for examples of declaring and accessing arrays from flash.

If you end up needing lots more flash for the logic of your program, consider compressing the 18 bits of each pixel to 16 bits. The 230KB figure is 240·320·3. Each pixel on the display uses six bits per color, stored in three bytes per pixel. Instead of keeping all the bits, you could clip the blue to its high four bits; ie, save 6-6-4 for RGB in two bytes instead of 6-6-6 in three bytes. Or could clip two of the colors to their high five bits; eg, save 6-5-5 or 5-6-5. At two bytes per pixel, an image would take 240·320·2 = 153600 bytes of flash, leaving roughly 94KB for program logic.

In all of these approaches, image data would be brought into RAM row by row or column by column, unpacked, and copied to the RAM buffers in the display.

One could also apply some compression algorithms to the image instead of using BMP format.

If you need more images than one, you could further reduce image quality, for example could save 3-3-2 high bits of color per pixel, or could save only every other pixel in a row or column or both, reducing storage to a half or fourth as much. Or you could have one reasonably good image stored 6-6-4 at 16 bits per pixel, so about 154KB, plus several monochrome images stored one bit per pixel, or about 10KB each.


Edit 1: Re “how would I take an image and convert it into the RGB array?”, one straightforward approach is to write an image-converter program (that runs on your development system) to read an image file and output C code representing the image data in arrays; that is, to produce C-style arrays printed in ASCII. Again, this recommendation is predicated on the notion that you are trying to create a system that has one image stored, and want the image to be available without needing an SD card reader on the system.

I recommend writing the image-converter program in Python. See, for example, the accepted answer at Convert an image to 2D array in python, to which you would need to add a few lines of code to write out C code to a file, so that you could include that code into a sketch. Also see How to get an array from RGB values of a bitmap image? and Working with .bmp files in python 3.

Some C-language examples appear in answers to How to convert a .bmp image into Byte array using C Program and How to convert an image to WORD (uint16) array?, which are among the first links in a stackexchange search for “convert bmp image to array”.

Wikipedia's BMP file format article shows the layout of BMP files in general. Using various image-handling libraries (as recommended in SE questions listed above) sidesteps having to deal with low-level BMP details. However, you may be able to use a simple program or application to produce RGB565 color format files, eg as at Bitmap to RGB565 format on codeguru.com, and then write a simple program to convert that particular form to C-style arrays printed in ASCII.

3
  • Thanks, that was very helpful. But how would I take an image and convert it into the RGB array? May 25, 2017 at 14:15
  • @AssafiCohen-Arazi, see edit 1 May 25, 2017 at 15:36
  • Note that if you have an image conversion program, you can convert the image to binary PPM, which is a format trivial to parse, or even to XPM, which is actually valid C code. May 25, 2017 at 19:49
5

240 by 320 pixels. That's 76800 pixels. In your example it looks like you want 3 bytes per pixel, so that's 230400 bytes. An Arduino Mega has 8K bytes of SRAM memory. There's enough room in the memory on the Arduino Mega to hold 0.003% of your image.

Maybe you could store the image on an SD card and put it on the screen little piece by little piece, but that is going to be painfully slow.

5
  • Is there still a way to store the data of the image in an array? May 25, 2017 at 3:49
  • And a follow up, how can you transfer the data of the image as the RGB array shown? May 25, 2017 at 4:59
  • 1
    Is there still a way to store the data? Do you really not understand that 230KB is never going to fit into an 8KB space? Think of it this way, is there any way to put 230 gallons of water in an 8 gallon bucket?
    – Delta_G
    May 25, 2017 at 5:02
  • 2
    You don't need to load the whole image (230KB) from flash memory (256 KB) into SRAM (8KB). And 8KiB out of 230.4KB is 3.6% not 0.003%.
    – gre_gor
    May 25, 2017 at 13:53
  • @Delta_G O meant with the micro SD card so there is enough room, sorry for not explaining. May 25, 2017 at 14:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.