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 on GitHub.

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


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!
 GUIslice is a great library - Thank you! I ma having a issue with the behavior of the text box created with gslc_ElemXTextboxCreate. The text always seesm to start in the middle of the box, even after a call to text box reset. I am using an adafruit feather M0 and an adafruit 480x320 display. Eveything else appears to work. You can see this behavior using gslc_ex10_ard. I experimented by reducing the TBOX_ROWS value to force "a no scroll" and the text then starts at the top of the text box, but then wraps in the middle of the display. any help would be greatly appreciated.
 Thanks - glad to hear it!

You are right, the current positioning is a little unintuitive. I have filed an issue on GitHub and am in the process of modifying the way this element works. Thanks for noticing this!

UPDATE 180430: Updated XTextbox code now integrated in the repository.


Leave a comment or suggestion for this page:

(Never Shown - Optional)