Return to Robotics Tutorials

How to create touch screen GUI for Arduino

Embedded applications using an Arduino can be made even more exciting when you add a touchscreen GUI!

Arduino Touchscreen GUI
GUIslice GUI with touch shield on ATmega2560

GUIslice for Arduino

GUIslice is a free C library that provides interactive GUI elements for Arduino with TFT displays. A touchscreen GUI for Arduino can be created in a few lines of code.

GUIslice extends the excellent Adafruit-GFX framework and associated display / touch drivers by incorporating numerous controls and display elements commonly found in GUIs (Graphical User Interfaces).

In addition to support for Arduino, the same user code can also target Raspberry Pi (LINUX) and ARM Cortex M0!

Download GUIslice

To download the code, and for more details on the installation, please see the main GUIslice page.

Arduino Touchscreen GUI

Supported Hardware

The C GUI library has been tested on a number of Arduino and Arduino-compatible processors, including:

  • Arduino Pro Mini
    16MHz / 8MHz, 32KB Flash, 2KB RAM
  • Arduino UNO R3 / ATmega328
    16Mhz, 32KB Flash, 2KB RAM
  • ATmega2560
    16MHz, 256KB Flash, 8KB RAM
  • ARM Cortex M0 ATSAMD21 (Adafruit Feather M0)
    48MHz, 256KB Flash, 32KB RAM

Future testing plans also include STM32duino and ESP8266.

Enhancements for Arduino

A touchscreen GUI needs to reserve RAM for each element in the interface. The base Arduino (ATmega328) has very limited RAM resources available (2KB), so care must be taken to optimize RAM utilization as much as possible, particularly if your design contains many menu buttons, controls or other dynamic elements. With that in mind, GUIslice has been designed with a few key features that support such resource-constrained devices:

  • No dynamic memory allocation
    By avoiding new() / malloc(), reduced memory due to fragmentation can be avoided
  • Pure C code
  • Strings & read-only GUI elements can be located in Flash memory (PROGMEM)
    Some elements in a GUI are static (ie. they don't change at runtime). These elements can be created in the user code via ElemCreate*_P() functions which allocates space for the element in Flash memory instead of RAM. Relocating these read-only elements to PROGMEM (Program Memory) reduces the overall RAM requirement and can make it possible to run more complex touch screen GUIs on basic Arduino devices.
Feather M0 Touchscreen GUI
GUIslice on Cortex M0 / Adafruit Feather M0

Arduino with more RAM

To support a large number of GUI elements, it is recommended to use AVR / ATmega CPUs that have more memory than the Arduino / ATmega328. Typically, the amount of SRAM is the limiting factor as updateable elements must be stored in RAM.

The following devices are Arduino-compatible devices that offer more SRAM than the ATmega328. Most of these devices can programmed from within the Arduino IDE with minimal adjustments.

Comparison of Arduino RAM sizes:

  • ATmega2560 (MEGA 2560):
    16MHz, 256KB Flash, 8KB RAM
  • ARM Cortex M0 (Adafruit Feather M0):
    48MHz, 256KB Flash, 32KB RAM
  • ARM Cortex M3 (STM32duino): [untested]
    72MHz, 64+KB Flash, 20KB RAM
  • ARM Cortex M0+ (Teensy LC): [untested]
    48MHz, 62KB Flash, 8KB RAM
  • ARM Cortex M4 (Teensy 3.0): [untested]
    48MHz, 128KB Flash, 16KB RAM
  • ARM Cortex M4 (Teensy 3.1 / 3.2): [untested]
    72MHz, 256KB Flash, 64KB RAM

Example Memory Consumption for GUI

The following provides a summary of the approximate memory consumed by one of the GUI examples (gslc_ex07) that are included with the C library. The code incorporates a page with three slider controls, a dynamic color box, a couple buttons and several static elements (separator lines, boxes, text, etc.).

  • Program Memory (Flash) = 20,070B
  • RAM = 960B

If one requires support for loading of external images from an SD card, the Arduino SD library can be used. Note that the Arduino SD library is rather heavy-weight since it incorporates large buffers in RAM:

  • Program Memory (Flash) += 11,042B
  • RAM += 964B

Configuration

TFT displays can be connected to the Arduino in a number of ways. The most common use-case is to purchase a TFT touchscreen display as a "shield", though it is also possible to connect on a breadboard via a "breakout board". Arduino TFT shields plug directly on top of the headers of boards such as the Arduino UNO R3 or Mega2560 and have a fixed connection between the TFT control pins and specific processor pins. When using a breakout board, it is up to the user how these pin mappings are made.

GUIslice supports flexibility in the way the TFT modules are connected by updating the pin configuration included in the GUIslice_config.h file.

As the ATmega328 and related CPUs have limited memory, some features, such as support for SD card access, can be disabled within the header file. Please see the Configuring GUIslice wiki page for details.

 


Reader's Comments:

Please leave your comments or suggestions below!

 


Leave a comment or suggestion for this page:

(Never Shown - Optional)
 

Visits!