By dave | May 10, 2019

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:

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.

TFT_eSPI menu rendering choice

Image showing TFT_eSPI menu rendering choice


The following configuration options are available on this renderer.

TFT_eSPI menu rendering properties

Image showing TFT_eSPI menu rendering properties

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

Other pages within this category

comments powered by Disqus

This site uses cookies to analyse traffic, serve ads by Google AdSense (non-personalized in EEA/UK), and to record consent. We also embed Twitter, Youtube and Disqus content on some pages, these companies have their own privacy policies.

Our privacy policy applies to all pages on our site

Should you need further guidance on how to proceed: External link for information about cookie management.

Send a message

Please use the forum for help with UI & libraries.

This message will be securely transmitted to our servers.