By dave | July 6, 2019

TcMenu - Using U8G2 to render menus

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

The U8G2 library supports a lot of different displays, with very different capabilities. This library concentrates on monochrome displays, mainly OLED that are supported by this library. It’s worth reading this guide fully so that you understand how we manage the various capabilities.

Before proceeding, you’ll need to make sure you’ve installed the U8G2 library (usually through library manager). Also, I’d recommend taking a read through the U8G2 library documentation if you’re not familiar with the library already. We’ll also assume you’ve got a menu structure already prepared in the menu designer UI.

Configuring U8G2 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, to the right of the current display type will be a button named “Change”. Click this button and choose the following new driver by clicking select on the right.

U8G2 rendering option

Image showing U8G2 renderer choice

Once you’ve chosen this display type, the following properties will be added to the table at the bottom:

Property Choices for this renderer

Image showing property choices for U8G2 rendering


As there are so many variations of display, you create the display variable in the sketch. This property is the name of the variable from your sketch. We’ll export it on your behalf so it can be used by the renderer.


This is the type of the graphics variable that you created. It must exactly match the variable type used for the display driver in your sketch.

DISPLAY_CONFIG and the U8g2GfxMenuConfig structure

When using this driver, you may well need to change the settings to suit your display. There are a lot of available options to customise how you display the menu. If you don’t specify this value, the default settings assume a mono, medium resolution screen (128x64).

If you want to override drawing, in your sketch create a global variable to hold the configuration such as the one below, then specify this variable name (eg: myConfig) in the DISPLAY_CONFIG parameter:

U8g2GfxMenuConfig myConfig;

Prepare the structure yourself before calling setupMenu() in setup, the recommended way is to create a function that initialises all the fields. You can set the fonts, edit and active icons to NULL, these will then default, all other parameters must be provided:

void prepareDisplayConfig() {
    // first we set the padding around the title, each item and any widgets.
    makePadding(myConfig.titlePadding, top, right, bottom, left);
    makePadding(myConfig.itemPadding, top, right, bottom, left);
    makePadding(myConfig.widgetPadding, top, right, bottom, left);

    // we set the forground and background of any item
    // WHITE and BLACK are always defined.
    myConfig.bgTitleColor = WHITE;
    myConfig.fgTitleColor = BLACK;
    // we can override the title font, NULL for default.
    myConfig.titleFont = NULL;
    // we add some space after the title.
    myConfig.titleBottomMargin = 1;
    // we set the colour for the widgets
    // colours can be defined using RGB, always use 8 bit values 0..255.
    myConfig.widgetColor = RGB(255, 100, 0);
    // not used on u8g2, set to 0 or 1
    myConfig.titleFontMagnification = 1;

    // We need to set the item colours, both normal and when selected
    myConfig.bgItemColor = RGB(255, 0, 0);
    myConfig.fgItemColor = RGB(200, 200, 200);
    myConfig.bgSelectColor = BLACK;
    myConfig.fgSelectColor = WHITE;
    // we can change the item font - NULL is default
    myConfig.itemFont = NULL;
    // not used on u8g2, set to 0 or 1
    myConfig.itemFontMagnification = 1;
    // the LoRes icons for editing and selecting can be changed from the high res ones.
    // if you leave both icons as NULL, the default will be used, you can redefine your
    // own, see bitmap docs on u8g2 site.
    myConfig.editIcon = loResEditingIcon;
    myConfig.activeIcon = loResActiveIcon;
    myConfig.editIconHeight = 6;
    myConfig.editIconWidth = 8;
    // The hi-res icons for editing and selecting that are built in, you can redefine your
    // own, see bitmap docs on u8g2 site. 
    myConfig.editIcon = defEditingIcon;
    myConfig.activeIcon = defActiveIcon;
    myConfig.editIconWidth = 16;
    myConfig.editIconHeight = 12;

Back to tcMenu main page

Other pages within this category

comments powered by Disqus

We use cookies to analyse traffic and to personalise content. We also embed Twitter, Youtube and Disqus content on some pages, these companies have their own privacy policies.

Please see our privacy policy should you need more information or wish to adjust your settings.

Send a message

This message will be securely transmitted to Nutricherry LTD servers.