TcMenu - Using TFT_eSPI library to render menus

In this guide we show how to use the TFT_eSPI library to renderer menu items with tcMenu. This rendering driver for TFT_eSPI library is built into the core menu designer download, meaning it’s available right out of the box from 2.1 onwards.

The TFT_eSPI library supports a lot of different displays, that cover a range of resolutions. However, we have mainly tested with an ILI9341 based TFT at 320x240 resolution, but it should work with most supported displays. When working with this library, you generally create a User_Setup.h file somewhere in your project, and reference it from User_Setup_Select.h within the library itself. The tcMenu plugin will include the required headers for you, leaving you to define only the menu specific settings.

Thanks to the outstanding performance of this library, we are able to render menus in near real time without any flicker, and also support double buffering for menu items up to a given height. Providing near flicker free updates on our ESP32 test bed.

It’s worth reading both this guide, and also the TFT_eSPI library documentation fully so that you understand both the library and how we use it.

Related documentation:

• Core menu rendering class guide
• How to take over the display

Configuring the rendering for your display

First, ensure your menu structure is saved and then choose Code -> Generate Code from the menu. Once the code generation dialog appears, you can change the display renderer by clicking on the image to the left of the renderer.

Configuration

The following configuration options are available on this renderer.

Variable Name

The graphics variable that the generator will generate on your behalf, it will be exported with this name to use in your own code.

Display rotation

You can specify the initial rotation of the display as a value from 0 to 3.

Double Buffer rows

Menu items are drawn one at a time, and they can be double buffered in memory; which avoids even the slightest of flicker. You can specify a number of rows that will be used for this buffering. Every row uses a 4 bit per pixel buffer, so a 320px width results in 160 bytes. If you picked a maximum height of 40px, it would take 6400 bytes.

This uses the sprite support that is built into the library, and if you have PSRAM available, it would that first.

Title font

The numerical index of the font to use for the title.

Item font

The numerical index of the font to use for the item.

Updates per second

How many times the menu structure should be scanned for changes and redrawn if needed. TcMenu tries to minimise redraws where reasonably possible.

Back to tcMenu main page