Close

Display Programming (1) - Adafruit 2.8" Resistive Touch Screen

A project log for MyComm

A portable, solar powered, handheld device that provides truly global messaging when you have no alternative.

jack-wellsJack Wells 05/23/2016 at 10:430 Comments

Displays come in all shapes and sizes. Selection can be difficult with many factors to consider; power consumption, size, readability, touch input and of course there's the actual programming of a micro-controller in order to make full use of your choice. The Adafruit 2.8" Touch screen display is driven by the ILI9341 display driver, while the resistive touch data is output on 2 digital pins and 2 analogue pins. The Adafruit site are pretty good with their documentation so there are easy to follow wiring diagrams and an Arduino library with example sketches available through their site. I'm not going to cover the basics of connecting the display, instead I'm going to discuss some of the GUI elements I've created for this project and lesson learned working with this screen over a couple of logs.

Before diving into the programming whole, the project goals need to be considered. Using the touch screen as the main input to the MyComm device makes it very similar in appearance to a smartphone. In order to achieve smartphone functionality would require a much higher level of processing than the Teensy micro-controller can handle. This can be observed when writing images to the screen. The Teensy doesn't have a large enough ram to buffer the entire screen and run other code. This means when an image is loaded from external storage, the image is written on a "line-by-line" basis. Using micro-sd as the storage device bottlenecks this method further and results in being able to see the image as it is drawn in. See the example video below:

The advantage of using a small micro-controller is power! Then Teensy at very maximum draw only uses 120mA; The raspberry pi typically draws 200-400mA depending on version. So, with the limitation of the Teensy in mind, it's much more reasonable to think of pre-smartphone era devices as the model for our interface.

Starting out with images; it's simple enough to draw some basic shapes in paint to produce a small size image to make a button or display information. A really useful example in the ILI9341 library is "pictureEmbed". This uses an image broken down into an array of bytes in order to store the image in the micro-controller program memory. This means we can utilise the Teensy's 256KB of flash storage to hold small images. The writer of the example sketch also includes a Link that will convert files for us for free! The flash stored images load much faster as it bypasses the need for the micro-sd card. And thus we have GUI icons:

From a timing/speed perspective I ran some simple draw tests for comparison. The results below:

File NameStorage MethodFile Size / Program MemoryFile Dimension Write to Screen Time
Scotsat LogoSD Card161kB240 x 104220mS (visually see write)
Scotsat LogoProg Memory

49.920kB (19% of prog memory)

240x1043.65ms
Envelope (small)SD Card246B8x82.2mS
Envelope (small)Prog Memory128B (0.05% prog memory)8x80.057ms
Envlope LargeSD Card2.74kB30x3029.7ms
Envlope LargeProg Memory1.8kB30x300.68ms

Clearly the program memory for loading images is substantially faster. I'll have to keep an eye on my memory usage to ensure I have enough room on the Teensy for the actual running code.

JW

Discussions