Go Down

Topic: Easier Way to Layout TFT LCD Text Screens? (Read 1 time) previous topic - next topic


I've been using an Adafruit 480 x 320 TFT LCD display with their GFX font library. Everything is working well, but I find the method of laying out the screen, that is, positioning the text very tedious.

For example if I have a screen displaying sensor outputs that might look something like this:


Temp:  35  Humidity 58%

The placement of each word requires and x, y pixel address. Now say I want to change "Temp" to "Temperature" or add a new line between the two existing lines, I have to recalculate each of the x, y coordinates by trial and error.

Since I'm using the GFX proportional fonts, I have to guess the pixel width of any added letters since each may have a slightly different pixel width.

Am I missing something? Is there any easier way to layout and modify the text placement on a TFT screen with variable-sized fonts? On a conventional computer screen with keyboard, I would use the spacebar and Enter key to add and move around new text and lines.


It is fairly straightforward to design your "start" position

There are GFX methods to give you the "rectangle" used by a string.   (so you can redraw the background)
Or you can read the current cursor print position.

You can calculate the width of "Temp" and "Temperature"

Or just write a helper function to centre or right-align your print.



Nov 15, 2018, 03:07 pm Last Edit: Nov 16, 2018, 01:53 pm by pconti31
GUIslice is an C API package that allows you to have buttons, progress bars,  graphs, and other UI bits.

Written by Calvin Hass its been on github for a few years and is quite stable.  It support Adafruit's 2.8 TFT along with others.   Of course, being an API you need to do the various booking to use it.

To make it easier to use I have written a Java Based program that is now available for beta testing.

I call it the GUIslice Builder it's a standalone desktop application that is designed to help generate layouts for GUIslice.

The cross-platform utility includes a graphical editor that enables drag & drop placement of UI elements. Once a GUI has been laid out, the Builder can then generate a functional GUIslice skeleton framework code, for both Arduino and LINUX targets.

The generated output code (.c, .ino) includes all of the necessary defines, UI storage elements and initialization in addition to the placement of the UI elements. This should greatly improve the ease in creating a new GUI.

For more details:



Thanks for the information. The GUIslice Builder looks impressive. If the standard, java-based Arduino IDE is already installed, is it still necessary to install the Java executable (development kit)?


An interesting idea.   I just tried the beta and it fails to load because arduino is using an earlier version of java then the GUIsliceBuilder which requires java 10 or 11.

Something to look at for the real release of GUIsliceBuilder, though.

Thanks for the idea.


When do you expect the real release of GUIsliceBuilder to happen? 


Sorry, "real" was the wrong word to use. 
I meant to say "full" release which will include source code.

I really don't have a time frame for that.


Thanks for the information. The GUIslice Builder looks impressive. If the standard, java-based Arduino IDE is already installed, is it still necessary to install the Java executable (development kit)?
DonpK -- that was a great suggestion! Thanks to your pointer, Paul today managed to release a new version of the Builder (0.10.4-beta5 at GUIslice) that should utilize your existing Arduino IDE Java installation. It should be very easy to create the sort of sensor display you described.

If, instead, you'd like to calculate the spacing programmatically, the Adafruit-GFX library provides you with a function that returns the extents of your string in the current proportional font (as David alluded to earlier). For example:

Code: [Select]

 int16_t    nCurX,nCurY;
 int16_t    nTxtX,nTxtY;
 uint16_t   nTxtSzW,nTxtSzH;

 // Set the font characteristics

 // Fetch the dimensions of char array pStr

 // Now you can advance your current position by nTxtSzW or nTxtSzH

Arduino GUI - https://github.com/ImpulseAdventure/GUIslice

Go Up