web analytics
July 12, 2015

Display – Drawing images

To draw images, the first step is preparing the image data. Drawing high-color images is slow, requiring a lot of bytes to be read to perform the final drawing. Instead, it can be a good idea to first convert the image into a lower-color count image format. For this, we created the LCD image format.

toolkit_image_conversion

The LCD image format is a simple 16-bit palette-supported image format. BMP Bitmap images are supported as well, although those will be slower because color conversion is needed. You can convert images into a variety of formats using the Phoenard toolkit:

  • 16-Bit: ‘True color’ format, Allowing all 65536 colors to be used (slowest)
  • 8-Bit: Support of up to 256 colors
  • 4-Bit: Support of up to 16 colors
  • 2-Bit: Support of up to 4 colors
  • 1-Bit: Support of up to 2 colors (fastest)

Exporting your image

toolkit_save_code

Once you have prepared your image, you will need to decide where you will export the image. You have an option to save it as a file and store it on the Micro-SD, or to export it as ‘code’ and paste the generated code in your Arduino sketch. For portability and sharing sketches, exporting as code is the best option. For large images, you will need to store it on the Micro-SD, since there is a hard limit of 32KB for images stored in program flash.

Drawing images

To draw images, you can make use of the drawImage function specifying a stream of data to read from:

display.drawImage(myStream, x, y)


Images stored in flash memory

To draw images stored in program flash memory, you can make use of the FlashMemoryStream provided by the Phoenard library. Below is an example of how this is done:

#include "Phoenard.h"

// Define an array of image data stored in program memory
const unsigned char my_image PROGMEM = {
  0x4C, 0x43, 0x44, 0x01, 0x40, 0x00, 0x40, 0x00, 
  ...
  0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF
};

void setup() {
  // Define a flash memory stream pointing at our image data
  FlashMemoryStream imgStream(my_image);
  
  // Draw the image at (x=20, y=30)
  display.drawImage(imgStream, 20, 30);
}

void loop() {
}

 

Images stored on the Micro-SD card

To draw images stored externally on the Micro-SD card, you can make use of the standard SD library. Below is an example of how this is done:

#include "Phoenard.h"
#include "SD.h"

void setup() {
  // Initialize card and open the file
  SD.begin(SD_CS_PIN);
  File imgFile = SD.open("myImage.lcd", FILE_READ);
  
  // Draw the image at (x=20, y=30)
  display.drawImage(imgFile, 20, 30);
}

void loop() {
}


Color mapping

images_mapping_icons

For interactive icons such as those for buttons and status icons, there is an easy way to re-use the same image: color mapping. For color-indexed images (LCD 1/2/4/8-bit) you can provide your own colors to use while drawing dynamically. Example code is below:

#include "Phoenard.h"
#include "SD.h"

void setup() {
  // Initialize card and open the file
  SD.begin(SD_CS_PIN);
  File imgFile = SD.open("myImage.lcd", FILE_READ);
  
  // Define a color palette to use
  color_t colormap[2] = {RED, WHITE};
  
  // Draw the image at (x=20, y=30) using a color palette
  display.drawImage(imgFile, 20, 30, colormap);
}

void loop() {
}


Next up: Widgets