diagram.json

# Wokwi Library List
# See https://docs.wokwi.com/guides/libraries

U8g2
tcMenu
IoAbstraction

libraries.txt

#include "MENU_menu.h"
#include <U8g2lib.h>
U8G2_SSD1306_128X64_NONAME_1_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);
void setup() {
    setupMenu();
   // u8g2.begin();   

}

void loop() {
    taskManager.runLoop();

}


MENU.ino

/*
    The code in this file uses open source libraries provided by thecoderscorner

    DO NOT EDIT THIS FILE, IT WILL BE GENERATED EVERY TIME YOU USE THE UI DESIGNER
    INSTEAD EITHER PUT CODE IN YOUR SKETCH OR CREATE ANOTHER SOURCE FILE.

    All the variables you may need access to are marked extern in this file for easy
    use elsewhere.
 */

#include <tcMenu.h>
#include "MENU_menu.h"
#include "ThemeMonoBordered.h"

// Global variable declarations
const  ConnectorLocalInfo applicationInfo = { "Lap Time", "7a885f6e-f5dd-4844-926f-46acc0f5eb24" };

U8G2_SSD1306_128X64_NONAME_F_HW_I2C gfx(U8G2_R0, U8X8_PIN_NONE, U8X8_PIN_NONE, U8X8_PIN_NONE);
U8g2Drawable gfxDrawable(&gfx);
GraphicsDeviceRenderer renderer(30, applicationInfo.name, &gfxDrawable);

// Global Menu Item declarations
const BooleanMenuInfo minfoSubMenuNewBoolItem = { "New BoolItem", 4, 0xffff, 1, NO_CALLBACK, NAMING_ON_OFF };
BooleanMenuItem menuSubMenuNewBoolItem(&minfoSubMenuNewBoolItem, true, nullptr, INFO_LOCATION_PGM);
const SubMenuInfo minfoSubMenu = { "SubMenu", 2, 0xffff, 0, NO_CALLBACK };
BackMenuItem menuBackSubMenu(&minfoSubMenu, &menuSubMenuNewBoolItem, INFO_LOCATION_PGM);
SubMenuItem menuSubMenu(&minfoSubMenu, &menuBackSubMenu, nullptr, INFO_LOCATION_PGM);
const AnalogMenuInfo minfoNewSubMenuTest = { "test", 3, 0xffff, 255, NO_CALLBACK, 0, 1, "" };
AnalogMenuItem menuNewSubMenuTest(&minfoNewSubMenuTest, 0, nullptr, INFO_LOCATION_PGM);
const SubMenuInfo minfoMenu1 = { "Menu 1", 1, 0xffff, 0, NO_CALLBACK };
BackMenuItem menuBackMenu1(&minfoMenu1, &menuNewSubMenuTest, INFO_LOCATION_PGM);
SubMenuItem menuMenu1(&minfoMenu1, &menuBackMenu1, &menuSubMenu, INFO_LOCATION_PGM);

void setupMenu() {
    // First we set up eeprom and authentication (if needed).
    setSizeBasedEEPROMStorageEnabled(false);
    // Code generated by plugins.
    gfx.begin();
    renderer.setUpdatesPerSecond(10);
    switches.init(internalDigitalIo(), SWITCHES_POLL_EVERYTHING, true);
    menuMgr.initForUpDownOk(&renderer, &menuMenu1, 3, 2, 4, 20);
    renderer.setTitleMode(BaseGraphicalRenderer::TITLE_FIRST_ROW);
    renderer.setUseSliderForAnalog(false);
    installMonoBorderedTheme(renderer, MenuFontDef(nullptr, 1), MenuFontDef(nullptr, 1), true);
}



MENU_menu.cpp

/*
    The code in this file uses open source libraries provided by thecoderscorner

    DO NOT EDIT THIS FILE, IT WILL BE GENERATED EVERY TIME YOU USE THE UI DESIGNER
    INSTEAD EITHER PUT CODE IN YOUR SKETCH OR CREATE ANOTHER SOURCE FILE.

    All the variables you may need access to are marked extern in this file for easy
    use elsewhere.
 */

#ifndef MENU_GENERATED_CODE_H
#define MENU_GENERATED_CODE_H

#include <Arduino.h>
#include <tcMenu.h>
#include "tcMenuU8g2.h"
#include <IoAbstraction.h>
#include <EepromItemStorage.h>

// variables we declare that you may need to access
extern const PROGMEM ConnectorLocalInfo applicationInfo;
extern U8G2_SSD1306_128X64_NONAME_F_HW_I2C gfx;
extern U8g2Drawable gfxDrawable;
extern GraphicsDeviceRenderer renderer;

// Any externals needed by IO expanders, EEPROMs etc


// Global Menu Item exports
extern BooleanMenuItem menuSubMenuNewBoolItem;
extern BackMenuItem menuBackSubMenu;
extern SubMenuItem menuSubMenu;
extern AnalogMenuItem menuNewSubMenuTest;
extern BackMenuItem menuBackMenu1;
extern SubMenuItem menuMenu1;

// Provide a wrapper to get hold of the root menu item and export setupMenu
inline MenuItem& rootMenuItem() { return menuMenu1; }
void setupMenu();

// Callback functions must always include CALLBACK_FUNCTION after the return type
#define CALLBACK_FUNCTION


#endif // MENU_GENERATED_CODE_H


MENU_menu.h

/*
 * Copyright (c) 2018 https://www.thecoderscorner.com (Dave Cherry).
 * This product is licensed under an Apache license, see the LICENSE file in the top-level directory.
 */

/**
 * @file tcMenuU8g2.h
 *
 * U8g2 renderer that renders menus onto this type of display. This file is a plugin file and should not
 * be directly edited, it will be replaced each time the project is built. If you want to edit this file in place,
 * make sure to rename it first.
 *
 * LIBRARY REQUIREMENT
 * This library requires the u8g2 library available for download from your IDE library manager.
 */

#include <U8g2lib.h>
#include <Wire.h>
#include "tcMenuU8g2.h"
#include <tcUnicodeU8G2.h>

using namespace tcgfx;

const uint8_t* safeGetFont(const void* fnt) {
    if(fnt) return static_cast<const uint8_t *>(fnt);
    return u8g2_font_6x10_tf;
}

#define TC_USE_UTF_8_ENCODING false

#if WANT_TASK_MANAGER_FRIENDLY_YIELD == 1
static uint8_t bytesSent = 0;
TwoWire* U8g2Drawable::pWire = nullptr;
uint8_t u8g2_byte_with_yield(u8x8_t *u8x8, uint8_t msg, uint8_t arg_int, void *arg_ptr) {
    if(!U8g2Drawable::pWire) return 0;
    switch(msg)
    {
        case U8X8_MSG_BYTE_SEND:
            bytesSent+= arg_int;
            U8g2Drawable::pWire->write((uint8_t *)arg_ptr, (int)arg_int);
            if(bytesSent > 16) {
                taskManager.yieldForMicros(0);
                bytesSent = 0;
            }
            break;
        case U8X8_MSG_BYTE_START_TRANSFER:
            U8g2Drawable::pWire->beginTransmission(u8x8_GetI2CAddress(u8x8)>>1);
            break;
        case U8X8_MSG_BYTE_END_TRANSFER:
            U8g2Drawable::pWire->endTransmission();
            break;
        case U8X8_MSG_BYTE_INIT:
        case U8X8_MSG_BYTE_SET_DC:
            break;
        default:
            return 0;
    }
    return 1;
}
#endif // WANT_TASK_MANAGER_FRIENDLY_YIELD

U8g2Drawable::U8g2Drawable(U8G2 *u8g2, TwoWire* wireImpl) : u8g2(u8g2) {
#if WANT_TASK_MANAGER_FRIENDLY_YIELD == 1
    pWire = wireImpl;
    if(wireImpl) {
        u8g2->getU8x8()->byte_cb = u8g2_byte_with_yield;
    }
#endif
}

void U8g2Drawable::internalDrawText(const Coord &where, const void *font, int mag, const char *text) {
    u8g2->setFont(safeGetFont(font));
    u8g2->setFontMode(drawColor == 2);
    auto extraHeight = u8g2->getMaxCharHeight();
    u8g2->setDrawColor(drawColor);
#ifdef TC_USE_UTF_8_ENCODING
    u8g2->drawUTF8(where.x, where.y + extraHeight, text);
#else
    u8g2->setCursor(where.x, where.y + extraHeight);
    u8g2->print(text);
#endif
}

void U8g2Drawable::drawBitmap(const Coord &where, const DrawableIcon *icon, bool selected) {
    u8g2->setDrawColor(backgroundColor);
    u8g2->drawBox(where.x, where.y, icon->getDimensions().x, icon->getDimensions().y);
    u8g2->setDrawColor(drawColor);
    if(icon->getIconType() == DrawableIcon::ICON_XBITMAP) {
#if defined(__AVR__) || defined(ESP8266)
        u8g2->drawXBMP(where.x, where.y, icon->getDimensions().x, icon->getDimensions().y, icon->getIcon(selected));
#else
        u8g2->drawXBM(where.x, where.y, icon->getDimensions().x, icon->getDimensions().y, icon->getIcon(selected));
#endif
    }
}

void U8g2Drawable::drawXBitmap(const Coord &where, const Coord &size, const uint8_t *data) {
    u8g2->setDrawColor(backgroundColor);
    u8g2->drawBox(where.x, where.y, size.x, size.y);
    u8g2->setDrawColor(drawColor);
#if defined(__AVR__) || defined(ESP8266)
    u8g2->drawXBMP(where.x, where.y, size.x, size.y, data);
#else
    u8g2->drawXBM(where.x, where.y, size.x, size.y, data);
#endif
}

void U8g2Drawable::drawBox(const Coord &where, const Coord &size, bool filled) {
    u8g2->setDrawColor(drawColor);
    if(filled) {
        u8g2->drawBox(where.x, where.y, size.x, size.y);
    }
    else {
        u8g2->drawFrame(where.x, where.y, size.x, size.y);
    }
}

void U8g2Drawable::drawCircle(const Coord &where, int radius, bool filled) {
    u8g2->setDrawColor(drawColor);
    u8g2->drawCircle(where.x, where.y, radius);
}

void U8g2Drawable::drawPolygon(const Coord *points, int numPoints, bool filled) {
    if(numPoints == 2) {
        u8g2->drawLine(points[0].x, points[0].y, points[1].x, points[1].y);
    }
    else if(numPoints == 3) {
        u8g2->drawTriangle(points[0].x, points[0].y, points[1].x, points[1].y, points[2].x, points[2].y);
    }
}


void U8g2Drawable::transaction(bool isStarting, bool redrawNeeded) {
    if(isStarting) {
        u8g2->setFontPosBottom();
        u8g2->setFontRefHeightExtendedText();
    }
    else if(redrawNeeded) {
        u8g2->sendBuffer();
    }
}

Coord U8g2Drawable::internalTextExtents(const void *font, int mag, const char *text, int *baseline) {
    u8g2->setFont(safeGetFont(font));
    if(baseline) *baseline = (int)u8g2->getFontDescent();
#ifdef TC_USE_UTF_8_ENCODING
    return Coord(u8g2->getUTF8Width(text), u8g2->getMaxCharHeight());
#else
    return Coord(u8g2->getStrWidth(text), u8g2->getMaxCharHeight());
#endif
}

void U8g2Drawable::drawPixel(uint16_t x, uint16_t y) {
    u8g2->drawPixel(x, y);
}

UnicodeFontHandler* U8g2Drawable::createFontHandler() {
    return new UnicodeFontHandler(newU8G2TextPipeline(u8g2), ENCMODE_UTF8);
}


tcMenuU8g2.cpp

/*
 * Copyright (c) 2018 https://www.thecoderscorner.com (Dave Cherry).
 * This product is licensed under an Apache license, see the LICENSE file in the top-level directory.
 */

/**
 * @file tcMenuU8g2.h
 * 
 * U8g2 renderer that renders menus onto this type of display. This file is a plugin file and should not
 * be directly edited, it will be replaced each time the project is built. If you want to edit this file in place,
 * make sure to rename it first.
 * 
 * LIBRARY REQUIREMENT
 * This library requires the u8g2 library available for download from your IDE library manager.
 */

#ifndef _TCMENU_U8G2_H_
#define _TCMENU_U8G2_H_

#include <tcMenu.h>
#include <tcUtil.h>
#include <Wire.h>
#include <U8g2lib.h>
#include <graphics/BaseGraphicalRenderer.h>
#include <graphics/GraphicsDeviceRenderer.h>
#include <BaseDialog.h>
#include <tcUtil.h>


// If you DONT want task manager yield code in I2C set to 0
#ifndef WANT_TASK_MANAGER_FRIENDLY_YIELD
#define WANT_TASK_MANAGER_FRIENDLY_YIELD 0
#endif // WANT_TASK_MANAGER_FRIENDLY_YIELD

using namespace tcgfx;

/**
 * A standard menu render configuration that describes how to renderer each item and the title.
 * Specialised for u8g2 fonts.
 */
typedef struct ColorGfxMenuConfig<const uint8_t*> U8g2GfxMenuConfig;

// some colour displays don't create this value
#ifndef BLACK
#define BLACK 0
#endif

// some colour displays don't create this value
#ifndef WHITE
#define WHITE 1
#endif

/**
 * This is used to draw to I2C including a task manager yield to improve performance on slower I2C devices.
 * Not really needed for SPI as we are talking in low order millis for a full refresh.
 */
uint8_t u8g2_byte_with_yield(u8x8_t *u8x8, uint8_t msg, uint8_t arg_int, void *arg_ptr);

/**
 * A basic renderer that can use the AdaFruit_GFX library to render information onto a suitable
 * display. It is your responsibility to fully initialise and prepare the display before passing
 * it to this renderer. The usual procedure is to create a display variable globally in your
 * sketch and then provide that as the parameter to setGraphicsDevice. If you are using the
 * designer you provide the display variable name in the code generation parameters.
 *
 * You can also override many elements of the display using AdaColorGfxMenuConfig, to use the defaults
 * just call prepareAdaColorDefaultGfxConfig(..) passing it a pointer to your config object. Again the
 * designer UI takes care of this.
 */
class U8g2Drawable : public DeviceDrawable {
private:
	U8G2* u8g2;
#if WANT_TASK_MANAGER_FRIENDLY_YIELD == 1
    static TwoWire* pWire;
    friend uint8_t u8g2_byte_with_yield(u8x8_t *u8x8, uint8_t msg, uint8_t arg_int, void *arg_ptr);
#endif // WANT_TASK_MANAGER_FRIENDLY_YIELD
public:
    explicit U8g2Drawable(U8G2* u8g2, TwoWire* wire = nullptr);
    ~U8g2Drawable() override = default;

    DeviceDrawable* getSubDeviceFor(const Coord &where, const Coord &size, const color_t *palette, int paletteSize) override {return nullptr; }

    void internalDrawText(const Coord &where, const void *font, int mag, const char *text) override;
    void drawBitmap(const Coord &where, const DrawableIcon *icon, bool selected) override;
    void drawXBitmap(const Coord &where, const Coord &size, const uint8_t *data) override;
    void drawBox(const Coord &where, const Coord &size, bool filled) override;
    void drawCircle(const Coord &where, int radius, bool filled) override;
    void drawPolygon(const Coord *points, int numPoints, bool filled) override;

    Coord getDisplayDimensions() override {  return Coord(u8g2->getWidth(), u8g2->getHeight()); }
    void transaction(bool isStarting, bool redrawNeeded) override;
    Coord internalTextExtents(const void *font, int mag, const char *text, int *baseline) override;
    color_t getUnderlyingColor(color_t col) override { return (col<4) ? col : 1; }
protected:
    void drawPixel(uint16_t x, uint16_t y) override;
    UnicodeFontHandler *createFontHandler() override;
};

#endif // _TCMENU_U8G2_H_


tcMenuU8g2.h

#ifndef TCMENU_THEME_MONO_BORDER
#define TCMENU_THEME_MONO_BORDER

color_t defaultItemPaletteMono[] = {WHITE, BLACK, WHITE, WHITE};

#define TITLE_BORDER_THICKNESS 2
#define TITLE_SPACING 2

void installMonoBorderedTheme(GraphicsDeviceRenderer& bgr, const MenuFontDef& itemFont, const MenuFontDef& titleFont, bool needEditingIcons) {
    bgr.setDisplayDimensions(bgr.getDeviceDrawable()->getDisplayDimensions().x, bgr.getDeviceDrawable()->getDisplayDimensions().y);
    auto& factory = bgr.getGraphicsPropertiesFactory();

    factory.setSelectedColors(0, 1);

    MenuPadding titlePadding(1);
    MenuPadding itemPadding(1);
    int titleHeight = bgr.heightForFontPadding(titleFont.fontData, titleFont.fontMag, titlePadding);
    int itemHeight = bgr.heightForFontPadding(itemFont.fontData, itemFont.fontMag, itemPadding);

    factory.addImageToCache(DrawableIcon(SPECIAL_ID_EDIT_ICON, Coord(8, 6),DrawableIcon::ICON_XBITMAP, loResEditingIcon));
    factory.addImageToCache(DrawableIcon(SPECIAL_ID_ACTIVE_ICON, Coord(8, 6),DrawableIcon::ICON_XBITMAP, loResActiveIcon));

    factory.setDrawingPropertiesDefault(ItemDisplayProperties::COMPTYPE_TITLE, defaultItemPaletteMono, titlePadding, titleFont.fontData, titleFont.fontMag,
                                        TITLE_SPACING, titleHeight + 1, GridPosition::JUSTIFY_TITLE_LEFT_WITH_VALUE,
                                        MenuBorder(0, 0, TITLE_BORDER_THICKNESS, 0));
    factory.setDrawingPropertiesDefault(ItemDisplayProperties::COMPTYPE_ITEM, defaultItemPaletteMono, itemPadding, itemFont.fontData, itemFont.fontMag,
                                        1, itemHeight, GridPosition::JUSTIFY_TITLE_LEFT_VALUE_RIGHT , MenuBorder(0));
    factory.setDrawingPropertiesDefault(ItemDisplayProperties::COMPTYPE_ACTION, defaultItemPaletteMono, itemPadding, itemFont.fontData, itemFont.fontMag,
                                        1, itemHeight, GridPosition::JUSTIFY_TITLE_LEFT_WITH_VALUE, MenuBorder(0));

    tcgfx::ConfigurableItemDisplayPropertiesFactory::refreshCache();
}

#endif //TCMENU_THEME_MONO_BORDER
