The last part of testing electronics is the Seeed Studio 2.8″ TFT LCD shield, used for displaying pictures. The pictures must be 320×240, and 24-bit depth, and bitmap format.

While it sounds simple to resize a 24-bit, 320×240 BMP image from another image, it can throw off the sketch and image display. If the conversion was not as successful as it appeared on the computer screen, it may not display at all, leaving you with a blank display. I used “convert” from ImageMagick on the pictures already in landscape. Portrait pictures will require more manipulation and cropping.

 

 

Paint a Pretty Picture

The Seeed Studio product page has a direct download link to their TFT Touch Shield v2 library, hosted on GitHub. For this example, I’ll upload their tftbmp sketch, which displays the bitmap images stored on the microSD card, mounted on the back of the TFT display, called upon by the sketch; their example code provides the bitmap images, too. When displaying the images provided, they were mirrored (flipped vertically). I couldn’t find a solution to this issue, on this library, but the “hack” to this was to flip the image when I convert and manipulate the image itself. Also, the image must be exactly 320×240, or it will not display at all.

 

 

Image Conversion

I used GIMP (GNU Image Manipulation Program) to test the results. It’s a good idea to check the data on the image, ensuring the image is 320×240, 24-bit, and saved as BMP (bitmap) format. After having a working image, I began batch conversions using “convert” from ImageMagick. This is the command I used:

for f in *.jpg ; do convert -resize 320x240 -depth 24 -compress none -extent 320x240 -gravity center -background black -rotate 90 -flip "${f}" "${f/%jpg/bmp}" ; done

 

What Does it All Mean?

The one-liner is in a “for loop,” processing each file, and converting the output from JPG to BMP format. The “f” variable, containing the image file name, will be passed lastly, as “imageName.jpg imageName.bmp”, to provide the input and output file. While this will convert my JPG images to BMP, it can also convert from other image types by substituting the format where necessary.

Depending on your TFT display, these options may not be necessary, but this is what I needed to use, in order to have a working bitmap image.

• -resize 320×240
  • The picture must be 320×240, and will do that, as best as it can (refer to -extent)
• -depth 24
  • The bitmap image must be 24-bit
• -compress none
  • This one typically isn’t needed, but enforcing to ensure there is no image compression
• -extent 320×240
  • The original image may not be able to cleanly scale to 320×240, but this ensures the picture size (canvas) is 320×240
• -gravity center
  • This goes well for “-extent 320×240”, as it centers the image within the 320×240 canvas size
• -background black
  • I prefer to have a black background, rather than a white (bright!) background, when displaying on the screen
• -rotate 90
  • The TFT display is 240×320 (portrait), but I want landscape
• -flip
  • A vertical flip (mirror) of the image, due to an issue with the TFT display module, and possibly the library

 

Results

The image at the start of this post is 4928×3264. When using ‘-resize 320×240‘, the actual dimensions are 320×212. ImageMagick (convert) will scale to the best size possible, without going over on either dimension. Setting all the options above, this is the result of the image, as seen on the computer, not the TFT display.

 

 

The post-edit image was resized, rotated, flipped, and centered on a 240×320 canvas. This bitmap image can be placed on the microSD card on the back of the TFT display module, and loaded with the sketch to display on the screen.

 

 

Conclusion

After much testing with image manipulation, it was good to finally see my pictures being displayed properly on the 2.8″ display. I thought the screen would suffice for what my original idea was, but as it became more, I was thinking the screen size was too small. Now, after seeing it with other components, it might be the perfect display for this project.