Merge pull request #32 from CommanderRedYT/bicycle

Add build script

.gitignore

@@ -0,0 +1,2 @@
+build-*
+build/

CMakeLists.txt

@@ -28,11 +28,14 @@ set(headers
     src/errorhandlerinterface.h
     src/fontinterface.h
     src/graphdisplay.h
-    src/icon.h
     src/iconinterface.h
+    src/keyboardhelper.h
     src/icons/back.h
     src/icons/checked.h
     src/icons/unchecked.h
+    src/icons/back_grey.h
+    src/icons/checked_grey.h
+    src/icons/unchecked_grey.h
     src/marginmenuitem.h
     src/menudisplay.h
     src/menuitem.h
@@ -45,13 +48,18 @@ set(headers
     src/splitgraphdisplay.h
     src/textinterface.h
     src/textwithvaluehelper.h
-    src/tftinstance.h
+    src/tftcolors.h
+    src/titleinterface.h
     src/visibleinterface.h
+    src/widgets/centeredlabel.h
     src/widgets/graph.h
+    src/widgets/iconwidget.h
     src/widgets/label.h
     src/widgets/progressbar.h
     src/widgets/reverseprogressbar.h
     src/widgets/slider.h
+    src/widgets/variablerangeprogressbar.h
+    src/widgets/variablerangereverseprogressbar.h
     src/widgets/verticalmeter.h
     src/widgets/vumeter.h
 )
@@ -73,15 +81,22 @@ set(sources
     src/screenmanager.cpp
     src/splitgraphdisplay.cpp
     src/popupdisplay.cpp
+    src/richtexthelper.cpp
     src/richtextrenderer.cpp
-    src/tftinstance.cpp
     src/icons/back.cpp
     src/icons/checked.cpp
     src/icons/unchecked.cpp
+    src/icons/back_grey.cpp
+    src/icons/checked_grey.cpp
+    src/icons/unchecked_grey.cpp
+    src/widgets/centeredlabel.cpp
+    src/widgets/iconwidget.cpp
     src/widgets/label.cpp
     src/widgets/progressbar.cpp
     src/widgets/reverseprogressbar.cpp
     src/widgets/slider.cpp
+    src/widgets/variablerangeprogressbar.cpp
+    src/widgets/variablerangereverseprogressbar.cpp
     src/widgets/verticalmeter.cpp
     src/widgets/vumeter.cpp
 )
@@ -91,10 +106,10 @@ set(dependencies
     cxx-ring-buffer
     espchrono
     espcpputils
-    expected
     espwifistack
-    fmt
     TFT_eSPI
+    esptftlib
+    espfontlib
 )
 
 idf_component_register(
@@ -107,6 +122,8 @@ idf_component_register(
         ${dependencies}
 )
 
+set_property(TARGET ${COMPONENT_LIB} PROPERTY CXX_STANDARD 23)
+
 target_compile_options(${COMPONENT_TARGET}
     PRIVATE
         -fstack-reuse=all

Kconfig.projbuild

@@ -4,4 +4,8 @@ config ESPGUI_MENUDISPLAY_ROWS
     int "Number of rows for MenuDisplays"
     default 10
 
+config ESPGUI_MENUITEM_BACKGROUND_COLOR
+    hex "MenuItem background color"
+    default 0x5AEB
+
 endmenu

README.md

@@ -1,2 +1,10 @@
 # esp-gui-lib
 ESP32 gui library
+
+## How to compile the iconconverter for dummies
+```
+mkdir build-iconconvert-Desktop_Qt_6_4_1-Debug
+cd build-iconconvert-Desktop_Qt_6_4_1-Debug
+qmake ../iconconvert
+make
+```

converticons.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+for i in icons/*
+do
+    build-iconconvert-Desktop_Qt_6_4_1-Debug/iconconvert $i src/icons/ icon_templ.h.tmpl icon_templ.cpp.tmpl
+
+    ICON_NAME="$(basename "$i" .png)"
+    case "$ICON_NAME" in
+        icons_to_exclude)
+            echo no grey version needed
+            ;;
+        *)
+            build-iconconvert-Desktop_Qt_6_4_1-Debug/iconconvert "$i" src/icons/ icon_templ.h.tmpl icon_templ.cpp.tmpl --background-color "#5c5c5c" --name-override "${ICON_NAME}_grey"
+            ;;
+    esac
+done

icon_templ.cpp.tmpl

@@ -0,0 +1,9 @@
+#include "${name}.h"
+
+namespace espgui {
+namespace icons {
+const Icon<${width}, ${height}> ${name} {{
+${bytes}
+}};
+} // namespace icons
+} // namespace espgui

icon_templ.h.tmpl

@@ -0,0 +1,10 @@
+#pragma once
+
+// local
+#include "icon.h"
+
+namespace espgui {
+namespace icons {
+extern const Icon<${width}, ${height}> ${name};
+} // namespace icons
+} // namespace espgui

iconconvert/.gitignore

@@ -0,0 +1 @@
+/*.pro.user*

iconconvert/build.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+if [[ $PWD != *"esp-gui-lib/iconconvert"* ]] || [[ $0 != *"build.sh"* ]]; then
+    echo "This script must be run from the iconconvert directory"
+    exit 1
+fi
+
+
+# check if qmake is installed
+if ! command -v qmake; then
+    echo "Qmake is not installed"
+    exit 1
+fi
+
+# check if make is installed
+if ! command -v make; then
+    echo "Make is not installed"
+    exit 1
+fi
+
+mkdir -p build
+cd build || exit 1
+qmake ..
+make
+cd ..

iconconvert/iconconvert.pro

@@ -0,0 +1,8 @@
+QT = core gui
+
+CONFIG += c++latest
+
+DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000
+
+SOURCES += \
+        main.cpp

iconconvert/main.cpp

@@ -0,0 +1,218 @@
+#include <QCoreApplication>
+#include <QCommandLineParser>
+#include <QCommandLineOption>
+#include <QFileInfo>
+#include <QImage>
+#include <QDir>
+#include <QDebug>
+
+namespace {
+QColor backgroundColor;
+
+constexpr uint16_t color565(uint8_t red, uint8_t green, uint8_t blue) noexcept
+{
+    return __builtin_bswap16(((red & 0xF8) << 8) | ((green & 0xFC) << 3) | (blue >> 3));
+}
+uint16_t color565(const QColor &color) noexcept
+{
+    return color565(
+        color.red() * color.alphaF() + ((1-color.alphaF())*backgroundColor.red()),
+        color.green() * color.alphaF() + ((1-color.alphaF())*backgroundColor.green()),
+        color.blue() * color.alphaF() + ((1-color.alphaF())*backgroundColor.blue())
+    );
+}
+} // namespace
+
+int main(int argc, char *argv[])
+{
+    QCoreApplication app{argc, argv};
+    QCoreApplication::setApplicationName("iconconvert");
+    QCoreApplication::setApplicationVersion("1.0");
+
+    QCommandLineParser parser;
+    parser.setApplicationDescription("Converts icons to .h/.cpp sources");
+    parser.addHelpOption();
+    parser.addVersionOption();
+    parser.addPositionalArgument("icon-file", QCoreApplication::translate("main", "Icon file."));
+    parser.addPositionalArgument("destination-dir", QCoreApplication::translate("main", "Destination directory."));
+    parser.addPositionalArgument("header-templ", QCoreApplication::translate("main", "Header template"));
+    parser.addPositionalArgument("footer-templ", QCoreApplication::translate("main", "Footer template"));
+    QCommandLineOption backgroundColorOption{
+        {"b", "background-color"},
+        QCoreApplication::translate("main", "Background color for transparent icons"),
+        "name", "#000000"
+    };
+    parser.addOption(backgroundColorOption);
+    QCommandLineOption nameOverrideOption{
+        {"n", "name-override"},
+        QCoreApplication::translate("main", "Override name for generated .h .cpp files"),
+        "name"
+    };
+    parser.addOption(nameOverrideOption);
+
+    parser.process(app);
+
+    backgroundColor = QColor{parser.value(backgroundColorOption)};
+    if (!backgroundColor.isValid())
+    {
+        qWarning() << "invalid background color, falling back to #000000";
+        backgroundColor = QColor{0, 0, 0};
+    }
+
+    const QStringList args = parser.positionalArguments();
+    if (args.size() < 1)
+    {
+        qCritical("icon missing!");
+        parser.showHelp();
+        return -1;
+    }
+
+    if (args.size() < 2)
+    {
+        qCritical("destination missing!");
+        parser.showHelp();
+        return -2;
+    }
+
+    if (args.size() < 3)
+    {
+        qCritical("header-templ missing!");
+        parser.showHelp();
+        return -3;
+    }
+
+    if (args.size() < 4)
+    {
+        qCritical("footer-templ missing!");
+        parser.showHelp();
+        return -4;
+    }
+
+    QFileInfo fileInfo{args.at(0)};
+    if (!fileInfo.exists())
+    {
+        qCritical("icon not found!");
+        return -5;
+    }
+
+    QImage image;
+    if (!image.load(args.at(0)) || image.size().isEmpty())
+    {
+        qCritical("could not load icon!");
+        return -6;
+    }
+
+    QString bytes;
+    {
+        std::size_t i{};
+
+        for (int y = 0; y < image.height(); y++)
+            for (int x = 0; x < image.width(); x++)
+            {
+                if (i == 0)
+                {
+                    bytes += "    ";
+                }
+                else
+                    bytes += ", ";
+
+                bytes += QStringLiteral("0x%0").arg(color565(image.pixelColor(x, y)), 4, 16, QLatin1Char('0'));
+
+                if (++i == 16)
+                {
+                    i = 0;
+                    bytes += ",\n";
+                }
+            }
+    }
+
+    QDir dir{args.at(1)};
+    if (!dir.exists())
+    {
+        if (!dir.mkpath(dir.absolutePath()))
+        {
+            qCritical("could not create target directory");
+            return -7;
+        }
+    }
+
+    const auto &nameOverrideValue = parser.value(nameOverrideOption);
+    const auto &basename = nameOverrideValue.isEmpty() ? fileInfo.baseName() : nameOverrideValue;
+
+    {
+        QString templ;
+
+        {
+            QFile file{args.at(2)};
+            if (!file.open(QIODevice::ReadOnly | QIODevice::Text))
+            {
+                qCritical("could not open header template (for reading) %s", qPrintable(file.errorString()));
+                return -8;
+            }
+
+            templ = file.readAll();
+        }
+
+        {
+            QFile file{dir.absoluteFilePath(QStringLiteral("%0.h").arg(basename))};
+            if (!file.open(QIODevice::WriteOnly | QIODevice::Text | QIODevice::Truncate))
+            {
+                qCritical("could not open .h file for writing %s", qPrintable(file.errorString()));
+                return -9;
+            }
+
+            const auto content = templ
+                                     .replace("${name}", basename)
+                                     .replace("${width}", QString::number(image.width()))
+                                     .replace("${height}", QString::number(image.height()))
+                                     .toUtf8();
+            const std::size_t contentSize = content.size();
+            if (const std::size_t written = file.write(content); written != contentSize)
+            {
+                qCritical("error while writing %zd != %zd %s", written, contentSize, qPrintable(file.errorString()));
+                return -10;
+            }
+        }
+    }
+
+    {
+        QString templ;
+
+        {
+            QFile file{args.at(3)};
+            if (!file.open(QIODevice::ReadOnly | QIODevice::Text))
+            {
+                qCritical("could not open source template (for reading) %s", qPrintable(file.errorString()));
+                return -8;
+            }
+
+            templ = file.readAll();
+        }
+
+        {
+            QFile file{dir.absoluteFilePath(QStringLiteral("%0.cpp").arg(basename))};
+            if (!file.open(QIODevice::WriteOnly | QIODevice::Text | QIODevice::Truncate))
+            {
+                qCritical("could not open .cpp file for writing %s", qPrintable(file.errorString()));
+                return -8;
+            }
+
+            const auto content = templ
+                                     .replace("${name}", basename)
+                                     .replace("${width}", QString::number(image.width()))
+                                     .replace("${height}", QString::number(image.height()))
+                                     .replace("${bytes}", bytes)
+                                     .toUtf8();
+            const std::size_t contentSize = content.size();
+            if (const std::size_t written = file.write(content); written != contentSize)
+            {
+                qCritical("error while writing %zd != %zd %s", written, contentSize, qPrintable(file.errorString()));
+                return -10;
+            }
+        }
+    }
+
+    qDebug() << basename << image.width() << image.height();
+
+    return 0;
+}

src/accessorinterface.h

@@ -1,13 +1,14 @@
 #pragma once
 
-// 3rdparty lib includes
-#include <tl/expected.hpp>
+// system includes
+#include <string>
+#include <expected>
 
 namespace espgui {
 template<typename T>
 struct AccessorInterface
 {
-    using setter_result_t = tl::expected<void, std::string>;
+    using setter_result_t = std::expected<void, std::string>;
 
     virtual T getValue() const = 0;
     virtual setter_result_t setValue(T value) = 0;
@@ -21,6 +22,6 @@ struct RefAccessor : public virtual AccessorInterface<T>
     virtual T& getRef() const = 0;
 
     T getValue() const override { return getRef(); };
-    tl::expected<void, std::string> setValue(T value) override { getRef() = value; return {}; };
+    std::expected<void, std::string> setValue(T value) override { getRef() = value; return {}; };
 };
 } // namespace espgui

src/actions/setvalueaction.h

@@ -25,7 +25,7 @@ public:
         if (auto result = m_accessorInterface.setValue(m_value); result)
             m_confirmInterface.confirm();
         else
-            m_errorHandlerInterface.errorOccured(std::move(result).error());
+            m_errorHandlerInterface.errorOccurred(std::move(result).error());
     }
 
     T value() const { return m_value; }

src/actions/toggleboolaction.h

@@ -15,7 +15,7 @@ public:
     void triggered() override
     {
         if (auto result = setValue(!getValue()); !result)
-            errorOccured(std::move(result).error());
+            errorOccurred(std::move(result).error());
     }
 };
 } // namespace espgui

src/buttonsinterface.h

@@ -2,6 +2,7 @@
 
 //system includes
 #include <cstdint>
+#include <string>
 
 namespace espgui {
 
@@ -14,6 +15,18 @@ enum Button
     ButtonMax = Down
 };
 
+inline std::string toString(Button button)
+{
+    switch (button)
+    {
+    case Button::Left: return "Left";
+    case Button::Right: return "Right";
+    case Button::Up: return "Up";
+    case Button::Down: return "Down";
+    default: return "Unknown";
+    }
+}
+
 class ButtonsInterface
 {
 public:

src/changevaluedisplay.cpp

@@ -1,31 +1,45 @@
 #include "changevaluedisplay.h"
 
+// system includes
+#include <format>
+
 // 3rdparty lib includes
-#include <fmt/core.h>
+#include <fontrenderer.h>
+
+// local includes
+#include "tftinterface.h"
+#include "tftcolors.h"
 
 namespace espgui {
-void ChangeValueDisplayInterface::initScreen()
+void ChangeValueDisplayInterface::initScreen(TftInterface &tft)
 {
-    Base::initScreen();
+    Base::initScreen(tft);
 
-    tft.drawRect(25, 75, 190, 65, TFT_WHITE);
-    m_valueLabel.start();
+    FontRenderer fontRenderer{tft};
 
-    tft.setTextFont(4);
-    tft.setTextColor(TFT_WHITE);
-    tft.drawString("Change value and", 10, 160);
-    tft.drawString("press button to", 10, 185);
-    tft.drawString("confirm and go", 10, 210);
-    tft.drawString("back.", 10, 235);
+    tft.drawRoundRect(35, 65, 190, 65, 8, TFT_WHITE);
+    m_valueLabel.start(tft);
+
+    if (espgui::isLandscape(tft))
+    {
+        fontRenderer.drawString("Change value and press", 10, 152, TFT_WHITE, TFT_BLACK, 4);
+        fontRenderer.drawString("button to confirm and", 10, 177, TFT_WHITE, TFT_BLACK, 4);
+        fontRenderer.drawString("go back", 10, 202, TFT_WHITE, TFT_BLACK, 4);
+    }
+    else
+    {
+        fontRenderer.drawString("Change value and", 10, 160, TFT_WHITE, TFT_BLACK, 4);
+        fontRenderer.drawString("press button to", 10, 185, TFT_WHITE, TFT_BLACK, 4);
+        fontRenderer.drawString("confirm and go", 10, 210, TFT_WHITE, TFT_BLACK, 4);
+        fontRenderer.drawString("back.", 10, 235, TFT_WHITE, TFT_BLACK, 4);
+    }
 }
 
 template<>
-void ChangeValueDisplay<float>::redraw()
+void ChangeValueDisplay<float>::redraw(TftInterface &tft)
 {
-    Base::redraw();
+    Base::redraw(tft);
 
-    tft.setTextColor(TFT_WHITE, TFT_BLACK);
-    tft.setTextFont(7);
-    m_valueLabel.redraw(fmt::format("{:.02f}", m_value));
+    m_valueLabel.redraw(tft, std::format("{:.02f}", m_value), TFT_WHITE, TFT_BLACK, 7);
 }
 } // namespace espgui

src/changevaluedisplay.h

@@ -2,8 +2,14 @@
 
 // system includes
 #include <type_traits>
+#include <optional>
+
+// 3rdparty lib includes
+#include <espchrono.h>
 
 // local includes
+#include "tftinterface.h"
+#include "tftcolors.h"
 #include "displaywithtitle.h"
 #include "textinterface.h"
 #include "confirminterface.h"
@@ -11,7 +17,6 @@
 #include "errorhandlerinterface.h"
 #include "accessorinterface.h"
 #include "widgets/label.h"
-#include "tftinstance.h"
 
 namespace espgui {
 
@@ -24,7 +29,7 @@ class ChangeValueDisplayInterface :
     using Base = DisplayWithTitle;
 
 public:
-    void initScreen() override;
+    void initScreen(TftInterface &tft) override;
 
     ChangeValueDisplayInterface *asChangeValueDisplayInterface() override { return this; }
     const ChangeValueDisplayInterface *asChangeValueDisplayInterface() const override { return this; }
@@ -33,14 +38,14 @@ public:
     virtual void setShownValue(int value) = 0;
 
 protected:
-    Label m_valueLabel{26, 81}; // 188, 53
+    Label m_valueLabel{36, 71}; // 188, 53
 };
 
 template<typename Tvalue>
 class ChangeValueDisplaySettingsInterface
 {
 public:
-    virtual Tvalue step() const { return 1; };
+    virtual Tvalue step() const { return Tvalue{1}; }
 };
 
 template<typename Tvalue, typename Tratio>
@@ -63,7 +68,7 @@ class ChangeValueDisplay :
 public:
     void start() override;
     void update() override;
-    void redraw() override;
+    void redraw(TftInterface &tft) override;
 
     void buttonPressed(Button button) override;
     void buttonReleased(Button button) override;
@@ -76,6 +81,15 @@ private:
 
     int m_rotateOffset;
     bool m_pressed{};
+
+    struct ButtonHeldInfo
+    {
+        espchrono::millis_clock::time_point nextTimestamp;
+        int counter{};
+    };
+
+    std::optional<ButtonHeldInfo> m_upHeld;
+    std::optional<ButtonHeldInfo> m_downHeld;
 };
 
 template<typename Tvalue>
@@ -87,6 +101,9 @@ void ChangeValueDisplay<Tvalue>::start()
 
     m_rotateOffset = 0;
     m_pressed = false;
+
+    m_upHeld = std::nullopt;
+    m_downHeld = std::nullopt;
 }
 
 template<typename Tvalue>
@@ -94,35 +111,49 @@ void ChangeValueDisplay<Tvalue>::update()
 {
     Base::update();
 
-    if (!m_pressed)
+    const auto now = espchrono::millis_clock::now();
+    if (m_upHeld && now >= m_upHeld->nextTimestamp)
+    {
+        using namespace std::chrono_literals;
+        m_upHeld->nextTimestamp += m_upHeld->counter > 10 ? 50ms : (m_upHeld->counter > 3 ? 100ms : 200ms);
+        m_upHeld->counter++;
+        m_rotateOffset--;
+    }
+    if (m_downHeld && now >= m_downHeld->nextTimestamp)
+    {
+        using namespace std::chrono_literals;
+        m_downHeld->nextTimestamp += m_downHeld->counter > 10 ? 50ms : (m_downHeld->counter > 3 ? 100ms : 200ms);
+        m_downHeld->counter++;
+        m_rotateOffset++;
+    }
+
     {
         const auto rotateOffset = m_rotateOffset;
         m_rotateOffset = 0;
 
         m_value -= rotateOffset * this->step();
     }
-    else
+
+    if (m_pressed)
     {
         m_pressed = false;
         if (auto result = static_cast<AccessorInterface<Tvalue>*>(this)->setValue(m_value); result)
             confirm();
         else
-            errorOccured(std::move(result).error());
+            errorOccurred(std::move(result).error());
     }
 }
 
 template<typename Tvalue>
-void ChangeValueDisplay<Tvalue>::redraw()
+void ChangeValueDisplay<Tvalue>::redraw(TftInterface &tft)
 {
-    Base::redraw();
+    Base::redraw(tft);
 
-    tft.setTextColor(TFT_WHITE, TFT_BLACK);
-    tft.setTextFont(7);
-    m_valueLabel.redraw(std::to_string(m_value));
+    m_valueLabel.redraw(tft, std::to_string(m_value), TFT_WHITE, TFT_BLACK, 7);
 }
 
 template<>
-void ChangeValueDisplay<float>::redraw();
+void ChangeValueDisplay<float>::redraw(TftInterface &tft);
 
 template<typename Tvalue>
 void ChangeValueDisplay<Tvalue>::buttonPressed(Button button)
@@ -133,8 +164,15 @@ void ChangeValueDisplay<Tvalue>::buttonPressed(Button button)
     {
     case Button::Left: this->back(); break;
     case Button::Right: m_pressed = true; break;
-    case Button::Up: m_rotateOffset--; break;
-    case Button::Down: m_rotateOffset++; break;
+    using namespace std::chrono_literals;
+    case Button::Up:
+        m_rotateOffset--;
+        m_upHeld = ButtonHeldInfo { .nextTimestamp = espchrono::millis_clock::now() + 300ms };
+        break;
+    case Button::Down:
+        m_rotateOffset++;
+        m_downHeld = ButtonHeldInfo { .nextTimestamp = espchrono::millis_clock::now() + 300ms };
+        break;
     }
 }
 
@@ -143,7 +181,16 @@ void ChangeValueDisplay<Tvalue>::buttonReleased(Button button)
 {
     //Base::buttonPressed(button);
 
-    // TODO stop auto scroll
+    switch (button)
+    {
+    case Button::Up:
+        m_upHeld = std::nullopt;
+        break;
+    case Button::Down:
+        m_downHeld = std::nullopt;
+        break;
+    default:;
+    }
 }
 
 } // namespace espgui

src/changevaluedisplay_bool.cpp

@@ -4,6 +4,7 @@
 #include "actions/setvalueaction.h"
 #include "actions/backproxyaction.h"
 #include "icons/back.h"
+#include "icons/back_grey.h"
 
 namespace espgui {
 namespace {
@@ -16,7 +17,7 @@ ChangeValueDisplay<bool>::ChangeValueDisplay()
 {
     constructMenuItem<makeComponentArgs<MenuItem, SetValueAction<bool>, StaticText<TEXT_TRUE>>>(true, *this, *this, *this);
     constructMenuItem<makeComponentArgs<MenuItem, SetValueAction<bool>, StaticText<TEXT_FALSE>>>(false, *this, *this, *this);
-    constructMenuItem<makeComponentArgs<MenuItem, BackProxyAction, StaticText<TEXT_BACK>, StaticMenuItemIcon<&icons::back>>>(*this);
+    constructMenuItem<makeComponentArgs<MenuItem, BackProxyAction, StaticText<TEXT_BACK>, StaticMenuItemIcon<&icons::back, &icons::back_grey>>>(*this);
 }
 
 void ChangeValueDisplay<bool>::start()

src/changevaluedisplay_chrono.h

@@ -5,9 +5,12 @@
 
 // 3rdparty lib includes
 #include <espchrono.h>
+#include <fontrenderer.h>
 
 // local includes
 #include "changevaluedisplay.h"
+#include "tftinterface.h"
+#include "tftcolors.h"
 #include "displaywithtitle.h"
 #include "confirminterface.h"
 #include "backinterface.h"
@@ -23,24 +26,36 @@ class ChangeValueDisplayChrono :
     public virtual AccessorInterface<T>,
     public virtual ConfirmInterface,
     public virtual BackInterface,
-    public virtual ErrorHandlerInterface
+    public virtual ErrorHandlerInterface,
+    public virtual ChangeValueDisplaySettingsInterface<T>
 {
     using Base = DisplayWithTitle;
 
 public:
     void start() override;
-    void initScreen() override;
+    void initScreen(TftInterface &tft) override;
     void update() override;
-    void redraw() override;
+    void redraw(TftInterface &tft) override;
 
     void buttonPressed(Button button) override;
     void buttonReleased(Button button) override;
 
 private:
     T m_value;
+
+    int m_rotateOffset;
     bool m_pressed{};
 
-    Label m_valueLabel{26, 81}; // 188, 53
+    Label m_valueLabel{36, 71}; // 188, 53
+
+    struct ButtonHeldInfo
+    {
+        espchrono::millis_clock::time_point nextTimestamp;
+        int counter{};
+    };
+
+    std::optional<ButtonHeldInfo> m_upHeld;
+    std::optional<ButtonHeldInfo> m_downHeld;
 };
 
 template<typename T>
@@ -54,19 +69,28 @@ void ChangeValueDisplayChrono<T>::start()
 }
 
 template<typename T>
-void ChangeValueDisplayChrono<T>::initScreen()
+void ChangeValueDisplayChrono<T>::initScreen(TftInterface &tft)
 {
-    Base::initScreen();
+    Base::initScreen(tft);
 
-    tft.drawRect(25, 75, 190, 65, TFT_WHITE);
-    m_valueLabel.start();
+    FontRenderer fontRenderer{tft};
 
-    tft.setTextFont(4);
-    tft.setTextColor(TFT_WHITE);
-    tft.drawString("Change value and", 10, 160);
-    tft.drawString("press button to", 10, 185);
-    tft.drawString("confirm and go", 10, 210);
-    tft.drawString("back.", 10, 235);
+    tft.drawRoundRect(32, 65, 190, 34, 8, TFT_WHITE);
+    m_valueLabel.start(tft);
+
+    if (espgui::isLandscape(tft))
+    {
+        fontRenderer.drawString("Change value and press", 10, 152, TFT_WHITE, TFT_BLACK, 4);
+        fontRenderer.drawString("button to confirm and", 10, 177, TFT_WHITE, TFT_BLACK, 4);
+        fontRenderer.drawString("go back", 10, 202, TFT_WHITE, TFT_BLACK, 4);
+    }
+    else
+    {
+        fontRenderer.drawString("Change value and", 10, 160, TFT_WHITE, TFT_BLACK, 4);
+        fontRenderer.drawString("press button to", 10, 185, TFT_WHITE, TFT_BLACK, 4);
+        fontRenderer.drawString("confirm and go", 10, 210, TFT_WHITE, TFT_BLACK, 4);
+        fontRenderer.drawString("back.", 10, 235, TFT_WHITE, TFT_BLACK, 4);
+    }
 }
 
 template<typename T>
@@ -74,24 +98,45 @@ void ChangeValueDisplayChrono<T>::update()
 {
     Base::update();
 
+    const auto now = espchrono::millis_clock::now();
+    if (m_upHeld && now >= m_upHeld->nextTimestamp)
+    {
+        using namespace std::chrono_literals;
+        m_upHeld->nextTimestamp += m_upHeld->counter > 10 ? 50ms : (m_upHeld->counter > 3 ? 100ms : 200ms);
+        m_upHeld->counter++;
+        m_rotateOffset--;
+    }
+    if (m_downHeld && now >= m_downHeld->nextTimestamp)
+    {
+        using namespace std::chrono_literals;
+        m_downHeld->nextTimestamp += m_downHeld->counter > 10 ? 50ms : (m_downHeld->counter > 3 ? 100ms : 200ms);
+        m_downHeld->counter++;
+        m_rotateOffset++;
+    }
+
+    {
+        const auto rotateOffset = m_rotateOffset;
+        m_rotateOffset = 0;
+
+        m_value -= rotateOffset * this->step();
+    }
+
     if (m_pressed)
     {
         m_pressed = false;
         if (auto result = this->setValue(m_value); result)
             confirm();
         else
-            errorOccured(std::move(result).error());
+            errorOccurred(std::move(result).error());
     }
 }
 
 template<typename T>
-void ChangeValueDisplayChrono<T>::redraw()
+void ChangeValueDisplayChrono<T>::redraw(TftInterface &tft)
 {
-    Base::redraw();
+    Base::redraw(tft);
 
-    tft.setTextColor(TFT_WHITE, TFT_BLACK);
-    tft.setTextFont(4);
-    m_valueLabel.redraw(espchrono::toString(m_value));
+    m_valueLabel.redraw(tft, espchrono::toString(m_value), TFT_WHITE, TFT_BLACK, 4);
 }
 
 template<typename T>
@@ -103,8 +148,15 @@ void ChangeValueDisplayChrono<T>::buttonPressed(Button button)
     {
     case Button::Left: this->back(); break;
     case Button::Right: m_pressed = true; break;
-    case Button::Up: m_value += T{1}; break;
-    case Button::Down: m_value -= T{1}; break;
+        using namespace std::chrono_literals;
+    case Button::Up:
+        m_rotateOffset--;
+        m_upHeld = ButtonHeldInfo { .nextTimestamp = espchrono::millis_clock::now() + 300ms };
+        break;
+    case Button::Down:
+        m_rotateOffset++;
+        m_downHeld = ButtonHeldInfo { .nextTimestamp = espchrono::millis_clock::now() + 300ms };
+        break;
     default:;
     }
 }
@@ -114,7 +166,16 @@ void ChangeValueDisplayChrono<T>::buttonReleased(Button button)
 {
     //Base::buttonPressed(button);
 
-    // TODO stop auto scroll
+    switch (button)
+    {
+    case Button::Up:
+        m_upHeld = std::nullopt;
+        break;
+    case Button::Down:
+        m_downHeld = std::nullopt;
+        break;
+    default:;
+    }
 }
 
 } // namespace detail

src/changevaluedisplay_daylightsavingmode.cpp

@@ -3,13 +3,11 @@
 // esp-idf includes
 #include <esp_log.h>
 
-// 3rdparty lib includes
-#include <futurecpp.h>
-
 // local includes
 #include "actions/setvalueaction.h"
 #include "actions/backproxyaction.h"
 #include "icons/back.h"
+#include "icons/back_grey.h"
 
 namespace espgui {
 namespace {
@@ -26,7 +24,7 @@ ChangeValueDisplay<espchrono::DayLightSavingMode>::ChangeValueDisplay()
     constructMenuItem<makeComponentArgs<MenuItem, SetValueAction<espchrono::DayLightSavingMode>, StaticText<TEXT_NONE>>>(espchrono::DayLightSavingMode::None, *this, *this, *this);
     constructMenuItem<makeComponentArgs<MenuItem, SetValueAction<espchrono::DayLightSavingMode>, StaticText<TEXT_EUROPEANSUMMERTIME>>>(espchrono::DayLightSavingMode::EuropeanSummerTime, *this, *this, *this);
     constructMenuItem<makeComponentArgs<MenuItem, SetValueAction<espchrono::DayLightSavingMode>, StaticText<TEXT_USDAYLIGHTTIME>>>(espchrono::DayLightSavingMode::UsDaylightTime, *this, *this, *this);
-    constructMenuItem<makeComponentArgs<MenuItem, BackProxyAction, StaticText<TEXT_BACK>, StaticMenuItemIcon<&icons::back>>>(*this);
+    constructMenuItem<makeComponentArgs<MenuItem, BackProxyAction, StaticText<TEXT_BACK>, StaticMenuItemIcon<&icons::back, &icons::back_grey>>>(*this);
 }
 
 void ChangeValueDisplay<espchrono::DayLightSavingMode>::start()

src/changevaluedisplay_ip_address_t.cpp

@@ -1,7 +1,11 @@
 #include "changevaluedisplay_ip_address_t.h"
 
+// 3rdparty lib includes
+#include <fontrenderer.h>
+
 // local includes
-#include "tftinstance.h"
+#include "tftinterface.h"
+#include "tftcolors.h"
 
 namespace espgui {
 
@@ -14,24 +18,29 @@ void ChangeValueDisplay<wifi_stack::ip_address_t>::start()
     m_currentIndex = 0;
 }
 
-void ChangeValueDisplay<wifi_stack::ip_address_t>::initScreen()
+void ChangeValueDisplay<wifi_stack::ip_address_t>::initScreen(TftInterface &tft)
 {
-    Base::initScreen();
+    Base::initScreen(tft);
 
-    tft.setTextColor(TFT_WHITE);
-    tft.drawString("Change IP", 0, 50);
+    FontRenderer fontRenderer{tft};
+
+    fontRenderer.drawString("Change IP Address", 0, 50, TFT_WHITE, TFT_BLACK, 4);
 
     for(int i = 0; i <= 3; i++)
     {
-        drawRect(i, 3, TFT_WHITE);
-        drawRect(i, 4, TFT_WHITE);
+        drawRect(tft, i, 3, TFT_WHITE);
+        drawRect(tft, i, 4, TFT_WHITE);
     }
 
     for (auto &label : m_labels)
-        label.start();
+        label.start(tft);
 
-    drawRect(m_currentIndex, 1, TFT_YELLOW);
-    drawRect(m_currentIndex, 2, TFT_YELLOW);
+    fontRenderer.drawString(".", spacing+boxWidth+spacing/4, y, TFT_WHITE, TFT_BLACK, 4);
+    fontRenderer.drawString(".", spacing*2+boxWidth*2+spacing/4, y, TFT_WHITE, TFT_BLACK, 4);
+    fontRenderer.drawString(".", spacing*3+boxWidth*3+spacing/4, y, TFT_WHITE, TFT_BLACK, 4);
+
+    drawRect(tft, m_currentIndex, 1, TFT_YELLOW);
+    drawRect(tft, m_currentIndex, 2, TFT_YELLOW);
 
     m_lastIndex = m_currentIndex;
 }
@@ -43,27 +52,23 @@ void ChangeValueDisplay<wifi_stack::ip_address_t>::update()
     // TODO auto scroll
 }
 
-void ChangeValueDisplay<wifi_stack::ip_address_t>::redraw()
+void ChangeValueDisplay<wifi_stack::ip_address_t>::redraw(TftInterface &tft)
 {
-    Base::redraw();
-
-    tft.setTextColor(TFT_WHITE, TFT_BLACK);
+    Base::redraw(tft);
 
     if (m_lastIndex != m_currentIndex)
     {
-        drawRect(m_lastIndex, 1, TFT_BLACK);
-        drawRect(m_lastIndex, 2, TFT_BLACK);
+        drawRect(tft, m_lastIndex, 1, TFT_BLACK);
+        drawRect(tft, m_lastIndex, 2, TFT_BLACK);
 
-        drawRect(m_currentIndex, 1, TFT_YELLOW);
-        drawRect(m_currentIndex, 2, TFT_YELLOW);
+        drawRect(tft, m_currentIndex, 1, TFT_YELLOW);
+        drawRect(tft, m_currentIndex, 2, TFT_YELLOW);
 
         m_lastIndex = m_currentIndex;
     }
 
-    tft.setTextFont(4);
-
     for (auto i = 0; i < 4; i++)
-        m_labels[i].redraw(std::to_string(m_value.bytes()[i]));
+        m_labels[i].redraw(tft, std::to_string(m_value.bytes()[i]), TFT_WHITE, TFT_BLACK, 4);
 }
 
 void ChangeValueDisplay<wifi_stack::ip_address_t>::buttonPressed(Button button)
@@ -86,7 +91,7 @@ void ChangeValueDisplay<wifi_stack::ip_address_t>::buttonPressed(Button button)
             if (auto result = this->setValue(m_value); result)
                 confirm();
             else
-                errorOccured(std::move(result).error());
+                errorOccurred(std::move(result).error());
         }
         break;
     case Button::Up:
@@ -106,9 +111,9 @@ void ChangeValueDisplay<wifi_stack::ip_address_t>::buttonReleased(Button button)
     // TODO stop auto scroll
 }
 
-void ChangeValueDisplay<wifi_stack::ip_address_t>::drawRect(int index, int offset, uint32_t color) const
+void ChangeValueDisplay<wifi_stack::ip_address_t>::drawRect(TftInterface &tft, int index, int offset, uint32_t color) const
 {
-    tft.drawRect(m_labels[index].x()-offset, m_labels[index].y()-offset, boxWidth+(offset*2), boxHeight+(offset*2), color);
+    tft.drawRoundRect(m_labels[index].x()-offset, m_labels[index].y()-offset, boxWidth+(offset*2), boxHeight+(offset*2), 3, color);
 }
 
 } // namespace espgui

src/changevaluedisplay_ip_address_t.h

@@ -34,9 +34,9 @@ public:
     const ChangeValueDisplay<wifi_stack::ip_address_t> *asChangeValueDisplayIpAddress() const override { return this; }
 
     void start() override;
-    void initScreen() override;
+    void initScreen(TftInterface &tft) override;
     void update() override;
-    void redraw() override;
+    void redraw(TftInterface &tft) override;
 
     void buttonPressed(Button button) override;
     void buttonReleased(Button button) override;
@@ -45,7 +45,7 @@ public:
     void setShownValue(wifi_stack::ip_address_t value) { m_value = value; }
 
 private:
-    void drawRect(int index, int offset, uint32_t color) const;
+    void drawRect(TftInterface &tft, int index, int offset, uint32_t color) const;
 
     wifi_stack::ip_address_t m_value;
 

src/changevaluedisplay_sntp_sync_mode_t.cpp

@@ -3,13 +3,11 @@
 // esp-idf includes
 #include <esp_log.h>
 
-// 3rdparty lib includes
-#include <futurecpp.h>
-
 // local includes
 #include "actions/setvalueaction.h"
 #include "actions/backproxyaction.h"
 #include "icons/back.h"
+#include "icons/back_grey.h"
 
 namespace espgui {
 namespace {
@@ -24,7 +22,7 @@ ChangeValueDisplay<sntp_sync_mode_t>::ChangeValueDisplay()
 {
     constructMenuItem<makeComponentArgs<MenuItem, SetValueAction<sntp_sync_mode_t>, StaticText<TEXT_IMMED>>>(SNTP_SYNC_MODE_IMMED, *this, *this, *this);
     constructMenuItem<makeComponentArgs<MenuItem, SetValueAction<sntp_sync_mode_t>, StaticText<TEXT_SMOOTH>>>(SNTP_SYNC_MODE_SMOOTH, *this, *this, *this);
-    constructMenuItem<makeComponentArgs<MenuItem, BackProxyAction, StaticText<TEXT_BACK>, StaticMenuItemIcon<&icons::back>>>(*this);
+    constructMenuItem<makeComponentArgs<MenuItem, BackProxyAction, StaticText<TEXT_BACK>, StaticMenuItemIcon<&icons::back, &icons::back_grey>>>(*this);
 }
 
 void ChangeValueDisplay<sntp_sync_mode_t>::start()

src/changevaluedisplay_string.cpp

@@ -1,70 +1,113 @@
 #include "changevaluedisplay_string.h"
 
+// 3rdparty lib includes
+#include <espchrono.h>
+#include <fontrenderer.h>
+
 // local includes
-#include "tftinstance.h"
+#include "tftinterface.h"
+#include "tftcolors.h"
+
+using namespace std::chrono_literals;
 
 void espgui::ChangeValueDisplay<std::string>::start()
 {
     Base::start();
 
     m_value = this->getValue();
-
-    m_pressed = false;
 }
 
-void espgui::ChangeValueDisplay<std::string>::initScreen()
+void espgui::ChangeValueDisplay<std::string>::initScreen(TftInterface &tft)
 {
-    Base::initScreen();
+    Base::initScreen(tft);
 
-    tft.drawRect(25, 75, 190, 65, TFT_WHITE);
-    m_valueLabel.start();
+    tft.drawRoundRect(10, 50, tft.width() - 20, 34, 5, TFT_WHITE);
+    m_valueLabel.start(tft);
 
-    tft.setTextFont(4);
-    tft.setTextColor(TFT_WHITE);
-    tft.drawString("Change value and", 10, 160);
-    tft.drawString("press button to", 10, 185);
-    tft.drawString("confirm and go", 10, 210);
-    tft.drawString("back.", 10, 235);
+    m_keyboard.start(tft);
+
+    m_needsClear = std::nullopt;
+
+    m_locked = false;
 }
 
 void espgui::ChangeValueDisplay<std::string>::update()
 {
     Base::update();
 
-    if (m_pressed)
-    {
-        m_pressed = false;
-        if (auto result = this->setValue(m_value); result)
-            confirm();
-        else
-            errorOccured(std::move(result).error());
-    }
+    m_keyboard.update();
 }
 
-void espgui::ChangeValueDisplay<std::string>::redraw()
+void espgui::ChangeValueDisplay<std::string>::redraw(TftInterface &tft)
 {
-    Base::redraw();
+    Base::redraw(tft);
 
-    tft.setTextColor(TFT_WHITE, TFT_BLACK);
-    tft.setTextFont(4);
-    m_valueLabel.redraw(m_value);
+    FontRenderer fontRenderer{tft};
+
+    const auto now_ts = espchrono::millis_clock::now().time_since_epoch();
+    const uint16_t char_width = fontRenderer.textWidth(m_value, 4) / ((!m_value.empty()) ? m_value.size() : 1);
+    const int16_t maxChars = char_width > 0 ? ((tft.width() - 40) / char_width) : 0;
+    const auto substr_from = std::max(0, m_value.size() < maxChars ? 0 : static_cast<int>(m_value.size()) - maxChars);
+    const auto string = m_value.substr(substr_from);
+
+    if (m_needsClear)
+    {
+        tft.drawRect(m_valueLabel.x() + fontRenderer.textWidth(*m_needsClear, 4) + 3, m_valueLabel.y(), 2, fontRenderer.fontHeight(4), TFT_BLACK);
+        m_needsClear = std::nullopt;
+    }
+
+    m_valueLabel.redraw(tft, string, TFT_WHITE, TFT_BLACK, 4);
+
+    tft.drawRect(m_valueLabel.x() + fontRenderer.textWidth(string, 4) + 3, m_valueLabel.y(), 2, fontRenderer.fontHeight(4), (now_ts % 1000ms < 500ms) ? TFT_WHITE : TFT_BLACK);
+
+    m_keyboard.redraw(tft);
+
+    m_locked = false;
+}
+
+void espgui::ChangeValueDisplay<std::string>::setShownValue(std::string &&value)
+{
+    if (m_locked)
+    {
+        return;
+    }
+
+    m_locked = true;
+
+    m_needsClear = std::move(m_value);
+    m_value = std::move(value);
 }
 
 void espgui::ChangeValueDisplay<std::string>::buttonPressed(Button button)
 {
     //Base::buttonPressed(button);
-
-    switch (button)
-    {
-    case Button::Left: this->back(); break;
-    case Button::Right: m_pressed = true; break;
-    default:;
-    }
+    m_keyboard.buttonPressed(button);
 }
 
 void espgui::ChangeValueDisplay<std::string>::buttonReleased(Button button)
 {
     //Base::buttonReleased(button);
-
-    // TODO stop auto scroll
+    m_keyboard.buttonReleased(button);
+}
+
+void espgui::ChangeValueDisplay<std::string>::confirmValue()
+{
+    if (auto result = this->setValue(m_value); result)
+        confirm();
+    else
+        errorOccurred(std::move(result).error());
+}
+
+void espgui::ChangeValueDisplay<std::string>::removeLastCharFromShownValue()
+{
+    if (m_locked)
+    {
+        return;
+    }
+
+    if (auto val = this->shownValue(); !val.empty())
+    {
+        val.pop_back();
+        this->setShownValue(std::move(val));
+    }
 }

src/changevaluedisplay_string.h

@@ -2,13 +2,15 @@
 
 // system includes
 #include <string>
+#include <optional>
 
 // local includes
-#include "changevaluedisplay.h"
-#include "displaywithtitle.h"
-#include "confirminterface.h"
 #include "backinterface.h"
+#include "changevaluedisplay.h"
+#include "confirminterface.h"
+#include "displaywithtitle.h"
 #include "errorhandlerinterface.h"
+#include "keyboardhelper.h"
 #include "widgets/label.h"
 
 namespace espgui {
@@ -28,21 +30,30 @@ public:
     const ChangeValueDisplay<std::string> *asChangeValueDisplayString() const override { return this; }
 
     void start() override;
-    void initScreen() override;
+    void initScreen(TftInterface &tft) override;
     void update() override;
-    void redraw() override;
+    void redraw(TftInterface &tft) override;
 
     void buttonPressed(Button button) override;
     void buttonReleased(Button button) override;
 
+    void confirmValue();
+
     const std::string &shownValue() const { return m_value; }
-    void setShownValue(std::string &&value) { m_value = std::move(value); }
+    void setShownValue(std::string &&value);
+    void appendToShownValue(char c) { m_value.push_back(c); }
+    void appendToShownValue(const std::string &s) { m_value.append(s); }
+    void removeLastCharFromShownValue();
 
 private:
-    std::string m_value;
-    bool m_pressed{};
+    bool m_locked{false};
 
-    Label m_valueLabel{26, 81}; // 188, 53
+    std::string m_value;
+
+    Label m_valueLabel{12, 55}; // 188, 53
+    Keyboard<ChangeValueDisplay<std::string>> m_keyboard{*this};
+
+    std::optional<std::string> m_needsClear;
 };
 
 } // namespace espgui

src/changevaluedisplay_wifi_auth_mode_t.cpp

@@ -3,13 +3,11 @@
 // esp-idf includes
 #include <esp_log.h>
 
-// 3rdparty lib includes
-#include <futurecpp.h>
-
 // local includes
 #include "actions/setvalueaction.h"
 #include "actions/backproxyaction.h"
 #include "icons/back.h"
+#include "icons/back_grey.h"
 
 namespace espgui {
 namespace {
@@ -38,7 +36,7 @@ ChangeValueDisplay<wifi_auth_mode_t>::ChangeValueDisplay()
     constructMenuItem<makeComponentArgs<MenuItem, SetValueAction<wifi_auth_mode_t>, StaticText<TEXT_WPA3_PSK>>>(WIFI_AUTH_WPA3_PSK, *this, *this, *this);
     constructMenuItem<makeComponentArgs<MenuItem, SetValueAction<wifi_auth_mode_t>, StaticText<TEXT_WPA2_WPA3_PSK>>>(WIFI_AUTH_WPA2_WPA3_PSK, *this, *this, *this);
     constructMenuItem<makeComponentArgs<MenuItem, SetValueAction<wifi_auth_mode_t>, StaticText<TEXT_WAPI_PSK>>>(WIFI_AUTH_WAPI_PSK, *this, *this, *this);
-    constructMenuItem<makeComponentArgs<MenuItem, BackProxyAction, StaticText<TEXT_BACK>, StaticMenuItemIcon<&espgui::icons::back>>>(*this);
+    constructMenuItem<makeComponentArgs<MenuItem, BackProxyAction, StaticText<TEXT_BACK>, StaticMenuItemIcon<&icons::back, &icons::back_grey>>>(*this);
 }
 
 void ChangeValueDisplay<wifi_auth_mode_t>::start()

src/changevaluedisplay_wifi_mode_t.cpp

@@ -3,13 +3,11 @@
 // esp-idf includes
 #include <esp_log.h>
 
-// 3rdparty lib includes
-#include <futurecpp.h>
-
 // local includes
 #include "actions/setvalueaction.h"
 #include "actions/backproxyaction.h"
 #include "icons/back.h"
+#include "icons/back_grey.h"
 
 namespace espgui {
 namespace {
@@ -28,7 +26,7 @@ ChangeValueDisplay<wifi_mode_t>::ChangeValueDisplay()
     constructMenuItem<makeComponentArgs<MenuItem, SetValueAction<wifi_mode_t>, StaticText<TEXT_STA>>>(WIFI_MODE_STA, *this, *this, *this);
     constructMenuItem<makeComponentArgs<MenuItem, SetValueAction<wifi_mode_t>, StaticText<TEXT_AP>>>(WIFI_MODE_AP, *this, *this, *this);
     constructMenuItem<makeComponentArgs<MenuItem, SetValueAction<wifi_mode_t>, StaticText<TEXT_APSTA>>>(WIFI_MODE_APSTA, *this, *this, *this);
-    constructMenuItem<makeComponentArgs<MenuItem, BackProxyAction, StaticText<TEXT_BACK>, StaticMenuItemIcon<&espgui::icons::back>>>(*this);
+    constructMenuItem<makeComponentArgs<MenuItem, BackProxyAction, StaticText<TEXT_BACK>, StaticMenuItemIcon<&icons::back, &icons::back_grey>>>(*this);
 }
 
 void ChangeValueDisplay<wifi_mode_t>::start()

src/checkboxicon.h

@@ -4,15 +4,17 @@
 #include "menuitem.h"
 #include "accessorinterface.h"
 #include "icons/checked.h"
+#include "icons/checked_grey.h"
 #include "icons/unchecked.h"
+#include "icons/unchecked_grey.h"
 
 namespace espgui {
 class CheckboxIcon : public virtual MenuItemIconInterface, public virtual AccessorInterface<bool>
 {
 public:
-    const MenuItemIcon *icon() const override
+    const MenuItemIcon *icon(bool selected) const override
     {
-        return getValue() ? &icons::checked : &icons::unchecked;
+        return getValue() ? (selected ? &icons::checked_grey : &icons::checked) : (selected ? &icons::unchecked_grey : &icons::unchecked);
     }
 };
 } // namespace espgui

src/colorinterface.h

@@ -3,6 +3,9 @@
 // 3rdparty lib includes
 #include <TFT_eSPI.h>
 
+// local includes
+#include "tftcolors.h"
+
 namespace espgui {
 class ColorInterface {
 public:

src/display.cpp

@@ -1,11 +1,15 @@
 #include "display.h"
 
+// 3rdparty lib includes
+#include "TFT_eSPI.h"
+
 // local includes
-#include "tftinstance.h"
+#include "tftinterface.h"
+#include "tftcolors.h"
 
 namespace espgui {
 
-void Display::initScreen()
+void Display::initScreen(TftInterface &tft)
 {
     tft.fillScreen(TFT_BLACK);
 }

src/display.h

@@ -9,7 +9,9 @@
 
 // forward declares
 namespace espgui {
+class TftInterface;
 class TextInterface;
+class TitleInterface;
 class MenuDisplay;
 class ChangeValueDisplayInterface;
 template<typename Tvalue> class ChangeValueDisplay;
@@ -59,6 +61,18 @@ public:
     }
 };
 
+template <typename T1, typename T2, typename T3, typename ...T4>
+class makeComponentArgs12 : public T1, public T2, public T3, public T4...
+{
+public:
+    template<typename Targ1, typename Targ2, typename Targ3>
+    makeComponentArgs12(Targ1&& arg1, Targ2&& arg2, Targ3&& arg3) :
+        T2{std::forward<Targ1>(arg1)},
+        T3{std::forward<Targ2>(arg2), std::forward<Targ3>(arg3)}
+    {
+    }
+};
+
 class Display : public virtual ButtonsInterface
 {
 public:
@@ -68,13 +82,13 @@ public:
     virtual void start() {}
 
     //! Display needs to fully initialize screen
-    virtual void initScreen();
+    virtual void initScreen(TftInterface &tft);
 
     //! Display can do work needed to update correctly
     virtual void update() {}
 
     //! Display can update screen incrementally
-    virtual void redraw() {}
+    virtual void redraw(TftInterface &tft) {}
 
     //! Display goes out of existance, is not shown anymore
     virtual void stop() {}
@@ -82,6 +96,9 @@ public:
     virtual TextInterface *asTextInterface() { return nullptr; }
     virtual const TextInterface *asTextInterface() const { return nullptr; }
 
+    virtual TitleInterface *asTitleInterface() { return nullptr; }
+    virtual const TitleInterface *asTitleInterface() const { return nullptr; }
+
     virtual MenuDisplay *asMenuDisplay() { return nullptr; }
     virtual const MenuDisplay *asMenuDisplay() const { return nullptr; }
 

src/displaywithtitle.cpp

@@ -1,25 +1,27 @@
 #include "displaywithtitle.h"
 
 // local includes
-#include "tftinstance.h"
+#include "tftinterface.h"
+#include "tftcolors.h"
 
 namespace espgui {
 
-void DisplayWithTitle::initScreen()
+void DisplayWithTitle::initScreen(TftInterface &tft)
 {
-    Base::initScreen();
+    Base::initScreen(tft);
 
-    m_titleLabel.start();
-    tft.fillRect(0, 33, tft.width(), 3, TFT_WHITE);
+    m_titleLabel.start(tft);
+
+//    tft.fillRect(0, 0, tft.width(), 35, TFT_GREY);
+
+    tft.fillRect(0, TITLE_HEIGHT, tft.width(), TITLE_BORDER, TFT_GREY);
 }
 
-void DisplayWithTitle::redraw()
+void DisplayWithTitle::redraw(TftInterface &tft)
 {
-    Base::redraw();
+    Base::redraw(tft);
 
-    tft.setTextFont(4);
-    tft.setTextColor(TFT_YELLOW, TFT_BLACK);
-    m_titleLabel.redraw(text());
+    m_titleLabel.redraw(tft, title(), TFT_GREY, TFT_BLACK, 4);
 }
 
 } // namespace espgui

src/displaywithtitle.h

@@ -2,23 +2,26 @@
 
 // local includes
 #include "display.h"
-#include "textinterface.h"
+#include "titleinterface.h"
 #include "widgets/label.h"
 
 namespace espgui {
 
 class DisplayWithTitle :
     public Display,
-    public virtual TextInterface
+    public virtual TitleInterface
 {
     using Base = Display;
 
 public:
-    TextInterface *asTextInterface() override { return this; }
-    const TextInterface *asTextInterface() const override { return this; }
+    constexpr static int TITLE_HEIGHT = 34;
+    constexpr static int TITLE_BORDER = 2;
 
-    void initScreen() override;
-    void redraw() override;
+    TitleInterface *asTitleInterface() override { return this; }
+    const TitleInterface *asTitleInterface() const override { return this; }
+
+    void initScreen(TftInterface &tft) override;
+    void redraw(TftInterface &tft) override;
 
 private:
     Label m_titleLabel{5, 5}; // 230, 25

src/errorhandlerinterface.h

@@ -8,13 +8,13 @@ namespace espgui {
 class ErrorHandlerInterface
 {
 public:
-    virtual void errorOccured(std::string &&error) = 0;
+    virtual void errorOccurred(std::string &&error) = 0;
 };
 
 class DummyErrorHandler : public virtual ErrorHandlerInterface
 {
 public:
-    void errorOccured(std::string &&error) override {}
+    void errorOccurred(std::string &&error) override {}
 };
 
 } // namespace espgui

src/graphdisplay.h

@@ -8,7 +8,6 @@
 #include "textinterface.h"
 #include "widgets/label.h"
 #include "widgets/graph.h"
-#include "tftinstance.h"
 #include "confirminterface.h"
 #include "backinterface.h"
 
@@ -51,8 +50,8 @@ class GraphDisplay :
     using Base = DisplayWithTitle;
 
 public:
-    void initScreen() override;
-    void redraw() override;
+    void initScreen(TftInterface &tft) override;
+    void redraw(TftInterface &tft) override;
 
     void buttonPressed(Button button) override;
 
@@ -64,19 +63,19 @@ private:
 };
 
 template<size_t COUNT>
-void GraphDisplay<COUNT>::initScreen()
+void GraphDisplay<COUNT>::initScreen(TftInterface &tft)
 {
-    Base::initScreen();
+    Base::initScreen(tft);
 
-    m_graph.start(static_cast<const GraphAccessorInterface<COUNT> &>(*this).getBuffers());
+    m_graph.start(tft, static_cast<const GraphAccessorInterface<COUNT> &>(*this).getBuffers());
 }
 
 template<size_t COUNT>
-void GraphDisplay<COUNT>::redraw()
+void GraphDisplay<COUNT>::redraw(TftInterface &tft)
 {
-    Base::redraw();
+    Base::redraw(tft);
 
-    m_graph.redraw(static_cast<const GraphAccessorInterface<COUNT> &>(*this).getBuffers());
+    m_graph.redraw(tft, static_cast<const GraphAccessorInterface<COUNT> &>(*this).getBuffers());
 }
 
 template<size_t COUNT>

src/icon.h

@@ -1,17 +0,0 @@
-#pragma once
-
-// system includes
-#include <cstdint>
-
-namespace espgui {
-template<uint16_t width, uint16_t height>
-struct Icon
-{
-    static constexpr auto WIDTH=width;
-    static constexpr auto HEIGHT=height;
-
-    const unsigned short buffer[width*height];
-    const char * const name{};
-    
-};
-} // namespace espgui

src/iconinterface.h

@@ -4,6 +4,7 @@
 #include "icon.h"
 
 namespace espgui {
+
 template<uint16_t width, uint16_t height>
 class IconInterface
 {
@@ -15,6 +16,7 @@ template<uint16_t width, uint16_t height, const Icon<width, height> *T>
 class StaticIcon : public virtual IconInterface<width, height>
 {
 public:
-    virtual const Icon<width, height> *icon() const { return T; }
+    virtual const Icon<width, height> *icon() const override { return T; }
 };
+
 } // namespace espgui

src/icons/back.cpp

@@ -2,43 +2,44 @@
 
 namespace espgui {
 namespace icons {
-const Icon<24, 24> back{{
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x016C, 0x014B, 0x010B, 0x01AC, 0x018C, 0x018C, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0010 (16) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x014B, 0x0009, 0x0000,   // 0x0020 (32) pixels
-    0x2AD0, 0x3331, 0x00CB, 0x09CD, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0030 (48) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x012B, 0x0007, 0x0000, 0x1A6F, 0x5CD7, 0x5C96, 0x0003, 0x09ED, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0040 (64) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x010B, 0x0006, 0xFFFF, 0x022F, 0x6518,   // 0x0050 (80) pixels
-    0x75FB, 0x5C96, 0x0000, 0x1AB0, 0x2312, 0x22F1, 0x1AB0, 0x1A6F, 0x0A0E, 0x016C, 0x0048, 0x00EA, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0060 (96) pixels
-    0x0000, 0x0000, 0x010A, 0x0029, 0x0000, 0x022F, 0x6538, 0x761B, 0x761B, 0x5CD7, 0x024F, 0x22D0, 0x22D0, 0x1AB0, 0x1A6F, 0x124F,   // 0x0070 (112) pixels
-    0x01CD, 0x002A, 0x0000, 0x018C, 0x0007, 0x014B, 0x0000, 0x0000, 0x0002, 0x0003, 0x0A2E, 0x0000, 0x1A90, 0x6518, 0x7E3C, 0x761C,   // 0x0080 (128) pixels
-    0x761C, 0x6E1C, 0x65BB, 0x5D9A, 0x5D7A, 0x5539, 0x54F8, 0x4CB7, 0x4C76, 0x3BD4, 0x2B11, 0x1A6F, 0x016C, 0x43F5, 0x012B, 0x00A6,   // 0x0090 (144) pixels
-    0x0006, 0x024F, 0x0000, 0x22F1, 0x6518, 0x7E3C, 0x7E5C, 0x765C, 0x765C, 0x6E3C, 0x661C, 0x65FC, 0x5DBB, 0x559A, 0x4D5A, 0x44F9,   // 0x00A0 (160) pixels
-    0x44D8, 0x3C97, 0x4456, 0x3BD4, 0x2AF1, 0x09CD, 0x5D7C, 0x00AA, 0x022F, 0x0000, 0x2AF1, 0x6518, 0x863C, 0x7E3C, 0x6E3C, 0x663C,   // 0x00B0 (176) pixels
-    0x663D, 0x5E3D, 0x5E1C, 0x5DFC, 0x55DB, 0x559B, 0x4D5A, 0x4519, 0x3CB8, 0x3477, 0x3436, 0x33F5, 0x3BD4, 0x2AF1, 0x018C, 0x0000,   // 0x00C0 (192) pixels
-    0x014B, 0x22B0, 0x54B7, 0x5D9A, 0x4D7A, 0x3D7B, 0x357B, 0x2D9C, 0x2DDC, 0x2DDC, 0x2DBC, 0x2D7B, 0x355A, 0x3D5A, 0x453A, 0x4519,   // 0x00D0 (208) pixels
-    0x3CD8, 0x3477, 0x3436, 0x2BD5, 0x2BB5, 0x3394, 0x1A6F, 0x014C, 0x016B, 0x1A90, 0x3436, 0x24D9, 0x14D9, 0x1D1A, 0x1D5B, 0x1D9C,   // 0x00E0 (224) pixels
-    0x25DD, 0x25DD, 0x1D9C, 0x1D5B, 0x1D1A, 0x1CD9, 0x1CB8, 0x2CB8, 0x3CB8, 0x3477, 0x2C36, 0x2BD5, 0x2394, 0x33D5, 0x22F1, 0x11CC,   // 0x00F0 (240) pixels
-    0x022F, 0x0004, 0x1AD0, 0x2C57, 0x24F9, 0x1D1A, 0x1D5B, 0x1D7C, 0x1DBC, 0x25BC, 0x1D9C, 0x1D5B, 0x1D1A, 0x1CD9, 0x1C98, 0x1457,   // 0x0100 (256) pixels
-    0x1C37, 0x2C36, 0x2C16, 0x23D5, 0x2394, 0x23B5, 0x2B32, 0x11CD, 0x0000, 0x0A0E, 0x0000, 0x22F1, 0x2C77, 0x251A, 0x1D3A, 0x1D5B,   // 0x0110 (272) pixels
-    0x1D7B, 0x1D7B, 0x1D5B, 0x1D3A, 0x1CFA, 0x1CB9, 0x1C78, 0x1457, 0x1416, 0x13D5, 0x23D5, 0x23B5, 0x1B94, 0x1B94, 0x2B52, 0x11ED,   // 0x0120 (288) pixels
-    0x0023, 0x0000, 0x0A4F, 0x0000, 0x22F1, 0x3497, 0x251A, 0x1D1A, 0x1D3A, 0x2D5B, 0x2D3A, 0x2D1A, 0x24F9, 0x24D9, 0x1478, 0x1437,   // 0x0130 (304) pixels
-    0x13F6, 0x13B5, 0x1394, 0x1B74, 0x1B74, 0x1B94, 0x2B52, 0x11ED, 0x0000, 0x0087, 0x0000, 0x124F, 0x0000, 0x1AB0, 0x3497, 0x1D1A,   // 0x0140 (320) pixels
-    0x1CFA, 0x3497, 0x1B32, 0x2373, 0x2393, 0x2BD4, 0x3415, 0x2C57, 0x13F6, 0x1395, 0x1374, 0x1353, 0x1354, 0x2394, 0x2B32, 0x11ED,   // 0x0150 (336) pixels
-    0x0000, 0x0000, 0x0000, 0x00EA, 0x00EA, 0x0000, 0x126F, 0x3497, 0x24D9, 0x3435, 0x0000, 0x1270, 0x0000, 0x0029, 0x01AC, 0x22F1,   // 0x0160 (352) pixels
-    0x33F5, 0x1395, 0x1354, 0x1333, 0x0B33, 0x2394, 0x22F1, 0x22B0, 0x0000, 0x0000, 0x0000, 0x0000, 0x010B, 0x0008, 0x0000, 0x1A6F,   // 0x0170 (368) pixels
-    0x3477, 0x3435, 0x0006, 0x09ED, 0x0027, 0x00EA, 0x01AC, 0x0000, 0x22B0, 0x2BB4, 0x0B33, 0x1333, 0x0B34, 0x2B73, 0x22B0, 0x09AD,   // 0x0180 (384) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x012B, 0x0009, 0x0000, 0x1A90, 0x3352, 0x004A, 0x09CD, 0x0000, 0x0000, 0x010A, 0x012B,   // 0x0190 (400) pixels
-    0x09CD, 0x2B53, 0x1354, 0x0B33, 0x1B54, 0x2B32, 0x228F, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x014B, 0x010B,   // 0x01A0 (416) pixels
-    0x0007, 0x018D, 0x01AC, 0x01AC, 0x0000, 0x0000, 0x0000, 0x014B, 0x09CD, 0x2B32, 0x1374, 0x0B33, 0x2353, 0x2AF1, 0x08EA, 0x1A0D,   // 0x01B0 (432) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x01AD, 0x09ED, 0x00CA, 0x018C, 0x018C, 0x0000, 0x0000, 0x0000, 0x018C,   // 0x01C0 (448) pixels
-    0x09ED, 0x2B53, 0x1354, 0x1B53, 0x2B32, 0x224E, 0x2B11, 0x0800, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x01D0 (464) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x00A8, 0x09ED, 0x122E, 0x2B73, 0x1B54, 0x2B53, 0x32D0, 0x43D4, 0x0004, 0x0000,   // 0x01E0 (480) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0049, 0x451B,   // 0x01F0 (496) pixels
-    0x1AB0, 0x2BB4, 0x2B53, 0x32F0, 0x5D3A, 0x0008, 0x00C9, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0200 (512) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x018C, 0x010B, 0x3332, 0x3393, 0x2AD0, 0x873F, 0x012B, 0x11ED, 0x0000, 0x0000,   // 0x0210 (528) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0109, 0x01AD, 0x018C,   // 0x0220 (544) pixels
-    0x22B0, 0x32F0, 0x761E, 0x016C, 0x1A2E, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0230 (560) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x014B, 0x018C, 0x018C, 0x09CD, 0x4C77, 0x012B, 0x1A0E, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0240 (576) pixels
-},"back"};
+const Icon<24, 24> back {{
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x4200, 0x2100, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0611, 0xae2a, 0x2200, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0609, 0x965c, 0x1454, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0701, 0xb65c,
+    0xfb75, 0x144c, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0701, 0xf764, 0x1b76, 0x1b76, 0x965c, 0x6901, 0x8911, 0xa911, 0x8911, 0x4809, 0x0709,
+    0x8400, 0x0100, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x2709, 0xd75c, 0x3c7e, 0x1c76,
+    0x1c76, 0x1c6e, 0xbb65, 0x9a5d, 0x7a5d, 0x3955, 0xf854, 0xb74c, 0x764c, 0xb33b, 0x4d22, 0xc508, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x6811, 0xd75c, 0x3c7e, 0x5c7e, 0x5c76, 0x5c76, 0x3c6e, 0x1c66, 0xfc65, 0xbb5d, 0x9a55, 0x5a4d, 0xf944,
+    0xd844, 0x973c, 0x5644, 0xb43b, 0xeb19, 0x4100, 0x0000, 0x0000, 0x0000, 0x0000, 0x6811, 0xd764, 0x3c86, 0x3c7e, 0x3c6e, 0x3c66,
+    0x3d66, 0x3d5e, 0x1c5e, 0xfc5d, 0xdb55, 0x9b55, 0x5a4d, 0x1945, 0xb83c, 0x7734, 0x3634, 0xf533, 0xd43b, 0x0b1a, 0x2100, 0x0000,
+    0x0000, 0x6811, 0x974c, 0x9a5d, 0x7a4d, 0x7b3d, 0x7b35, 0x9c2d, 0xdc2d, 0xdc2d, 0xbc2d, 0x7b2d, 0x5a35, 0x5a3d, 0x3a45, 0x1945,
+    0xd83c, 0x7734, 0x3634, 0xd52b, 0xb52b, 0x9433, 0x0609, 0x0000, 0x0000, 0x6809, 0x3634, 0xd924, 0xd914, 0x1a1d, 0x5b1d, 0x9c1d,
+    0xdd25, 0xdd25, 0x9c1d, 0x5b1d, 0x1a1d, 0xd91c, 0xb81c, 0xb82c, 0xb83c, 0x7734, 0x362c, 0xd52b, 0x9423, 0xd533, 0x2d1a, 0x0000,
+    0x0000, 0x0000, 0x8911, 0x562c, 0xf924, 0x1a1d, 0x5b1d, 0x7c1d, 0xbc1d, 0xbc25, 0x9c1d, 0x5b1d, 0x1a1d, 0xd91c, 0x981c, 0x5714,
+    0x371c, 0x362c, 0x162c, 0xd523, 0x9423, 0xb523, 0xf122, 0x2100, 0x0000, 0x0000, 0x0000, 0xa911, 0x562c, 0x1a25, 0x3a1d, 0x5b1d,
+    0x7b1d, 0x7b1d, 0x5b1d, 0x3a1d, 0xfa1c, 0xb91c, 0x781c, 0x5714, 0x1614, 0xd513, 0xd523, 0xb523, 0x941b, 0x941b, 0x322b, 0x4200,
+    0x0000, 0x0000, 0x0000, 0x0000, 0xa911, 0x772c, 0x1a25, 0x1a1d, 0x3a1d, 0x5b2d, 0x3a2d, 0x1a2d, 0xf924, 0xd924, 0x7814, 0x3714,
+    0xf613, 0xb513, 0x9413, 0x741b, 0x741b, 0x941b, 0x112b, 0x4200, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x8909, 0x7734, 0x1a1d,
+    0xfa1c, 0x7634, 0x6e12, 0xae1a, 0xf022, 0x932b, 0x1534, 0x572c, 0xf613, 0x9513, 0x7413, 0x5313, 0x5413, 0x9423, 0xaf22, 0x2100,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x6909, 0x9734, 0xd924, 0xb32b, 0x0000, 0x0000, 0x0000, 0x0000, 0x6300, 0x0c1a,
+    0xd52b, 0x9513, 0x5413, 0x3313, 0x330b, 0x9423, 0xeb19, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x6909,
+    0x7634, 0xb333, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xaa11, 0xb42b, 0x330b, 0x3313, 0x340b, 0x732b, 0x0609, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x6811, 0xf02a, 0x0100, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x6300, 0x522b, 0x5413, 0x330b, 0x541b, 0x8e22, 0x4100, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x8400, 0x2100, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x4200, 0x1123, 0x7413, 0x330b, 0x5323, 0x2711, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x6300, 0x322b, 0x5413, 0x531b, 0x2c1a, 0x2100, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xe600, 0x732b, 0x541b, 0xd022, 0xa308, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0xcb11, 0xb42b, 0xf022, 0xe510, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x2100, 0x112b, 0x102b, 0xe508, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xa500,
+    0xeb19, 0x8308, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x2100, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+
+}};
 } // namespace icons
 } // namespace espgui

src/icons/back.h

@@ -1,6 +1,6 @@
 #pragma once
 
-// local includes
+// local
 #include "icon.h"
 
 namespace espgui {

src/icons/back_grey.cpp

@@ -0,0 +1,45 @@
+#include "back_grey.h"
+
+namespace espgui {
+namespace icons {
+const Icon<24, 24> back_grey {{
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xcb5a, 0xab4a, 0xcb52, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xcb5a,
+    0xcd4a, 0x103b, 0x6b4a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xcb5a, 0xad3a, 0xb65c, 0x755c, 0x6a4a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0x8d2a, 0xf764,
+    0xfb75, 0x755c, 0x8a52, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xcb5a, 0x8d2a, 0x1765, 0x1b76, 0x1b76, 0xd75c, 0x6e22, 0xce3a, 0xce3a, 0xce3a, 0xad3a, 0x8d3a,
+    0x6c3a, 0x6b4a, 0xcb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xcb5a, 0xad3a, 0xf764, 0x3c7e, 0x1c76,
+    0x1c76, 0x1c6e, 0xbb65, 0x9a5d, 0x7a5d, 0x3955, 0xf854, 0xb74c, 0x764c, 0xd43b, 0x103b, 0xac42, 0xcb52, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xaa52, 0xee42, 0xf764, 0x3c7e, 0x5c7e, 0x5c76, 0x5c76, 0x3c6e, 0x1c66, 0xfc65, 0xbb5d, 0x9a55, 0x5a4d, 0xf944,
+    0xd844, 0x973c, 0x5644, 0xb43b, 0xef3a, 0xab4a, 0xeb5a, 0xeb5a, 0xeb5a, 0xcb5a, 0xee42, 0xf764, 0x3c86, 0x3c7e, 0x3c6e, 0x3c66,
+    0x3d66, 0x3d5e, 0x1c5e, 0xfc5d, 0xdb55, 0x9b55, 0x5a4d, 0x1945, 0xb83c, 0x7734, 0x3634, 0xf533, 0xd43b, 0xef3a, 0xcb52, 0xeb5a,
+    0xcb5a, 0xce3a, 0xb754, 0x9a5d, 0x7a4d, 0x7b3d, 0x7b35, 0x9c2d, 0xdc2d, 0xdc2d, 0xbc2d, 0x7b2d, 0x5a35, 0x5a3d, 0x3a45, 0x1945,
+    0xd83c, 0x7734, 0x3634, 0xd52b, 0xb52b, 0x9433, 0xad42, 0xcb5a, 0xcb5a, 0xad3a, 0x3634, 0xd924, 0xd914, 0x1a1d, 0x5b1d, 0x9c1d,
+    0xdd25, 0xdd25, 0x9c1d, 0x5b1d, 0x1a1d, 0xd91c, 0xb81c, 0xb82c, 0xb83c, 0x7734, 0x362c, 0xd52b, 0x9423, 0xd533, 0xef32, 0xcb5a,
+    0xeb5a, 0xcb5a, 0xce3a, 0x562c, 0xf924, 0x1a1d, 0x5b1d, 0x7c1d, 0xbc1d, 0xbc25, 0x9c1d, 0x5b1d, 0x1a1d, 0xd91c, 0x981c, 0x5714,
+    0x371c, 0x362c, 0x162c, 0xd523, 0x9423, 0xb523, 0x322b, 0xab52, 0xeb5a, 0xeb5a, 0xaa52, 0xee3a, 0x7734, 0x1a25, 0x3a1d, 0x5b1d,
+    0x7b1d, 0x7b1d, 0x5b1d, 0x3a1d, 0xfa1c, 0xb91c, 0x781c, 0x5714, 0x1614, 0xd513, 0xd523, 0xb523, 0x941b, 0x941b, 0x522b, 0xab4a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xaa52, 0xee3a, 0x7734, 0x1a25, 0x1a1d, 0x3a1d, 0x5b2d, 0x3a2d, 0x1a2d, 0xf924, 0xd924, 0x7814, 0x3714,
+    0xf613, 0xb513, 0x9413, 0x741b, 0x741b, 0x941b, 0x322b, 0xab4a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xaa52, 0xce3a, 0x9734, 0x1a1d,
+    0xfa1c, 0x973c, 0x302b, 0x5133, 0x7233, 0xb42b, 0x1534, 0x572c, 0xf613, 0x9513, 0x7413, 0x5313, 0x5413, 0x9423, 0x1133, 0xcb52,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xcb5a, 0x8d32, 0x9734, 0xd924, 0xf433, 0x694a, 0xeb5a, 0xcb5a, 0x8b52, 0x8b42, 0xef32,
+    0xd533, 0x9513, 0x5413, 0x3313, 0x330b, 0x9423, 0xef3a, 0xcb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xcb5a, 0x8d32,
+    0x7634, 0xf43b, 0x6a4a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xcb5a, 0xae32, 0xb42b, 0x330b, 0x3313, 0x340b, 0x732b, 0xcd42, 0xcb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xcb5a, 0xae3a, 0x5133, 0x6b4a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0x8b4a, 0x532b, 0x5413, 0x330b, 0x541b, 0x3133, 0xcb52, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xab52, 0x6c3a, 0xab52, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xab4a, 0x322b, 0x7413, 0x330b, 0x5323, 0xed42, 0xcb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xcb5a, 0xcb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xab4a, 0x522b, 0x5413, 0x531b, 0x103b, 0xcb52, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0x8c3a, 0x732b, 0x541b, 0x3133, 0xcc52, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xae32, 0xb42b, 0x522b, 0xed4a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0x8b4a, 0x3133, 0x723b, 0xcd4a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0x4c32,
+    0xae32, 0xec52, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xab52, 0xcb52, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+
+}};
+} // namespace icons
+} // namespace espgui

src/icons/back_grey.h

@@ -0,0 +1,10 @@
+#pragma once
+
+// local
+#include "icon.h"
+
+namespace espgui {
+namespace icons {
+extern const Icon<24, 24> back_grey;
+} // namespace icons
+} // namespace espgui

src/icons/checked.cpp

@@ -2,43 +2,44 @@
 
 namespace espgui {
 namespace icons {
-const Icon<24, 24> checked{{
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0010 (16) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0020 (32) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0030 (48) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0040 (64) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x2945, 0x6B4D, 0x5AEB, 0x5AEB,   // 0x0050 (80) pixels
-    0x5AEB, 0x5AEB, 0x5AEB, 0x5AEB, 0x5AEB, 0x5AEB, 0x5AEB, 0x8BF1, 0x0240, 0x01E0, 0x02C0, 0x0280, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0060 (96) pixels
-    0x0000, 0x0000, 0xA514, 0xA534, 0xA534, 0xBDD7, 0xBDF7, 0xBDF7, 0xBDF7, 0xBDF7, 0xBDF7, 0xBDF7, 0xBDF7, 0xBDF7, 0xBDF7, 0x8C91,   // 0x0070 (112) pixels
-    0x3807, 0x0000, 0x0000, 0x0260, 0x0260, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xC618, 0xBDD7, 0xCE59, 0xAD75, 0xB596, 0xB596,   // 0x0080 (128) pixels
-    0xB596, 0xB596, 0xAD75, 0xAD75, 0xAD75, 0xB596, 0xAD75, 0x9CD3, 0x0300, 0x8E31, 0x00E0, 0x0240, 0x0260, 0x0000, 0x0000, 0x0000,   // 0x0090 (144) pixels
-    0x0000, 0x8431, 0xA534, 0xA514, 0xA534, 0xAD75, 0xAD75, 0xAD75, 0xAD75, 0xAD75, 0xAD75, 0xAD55, 0xAD75, 0xAD75, 0xA554, 0x5BEB,   // 0x00A0 (160) pixels
-    0x4508, 0xBF77, 0x1C43, 0x0240, 0x01C0, 0x02C0, 0x0000, 0x0000, 0x0000, 0x8C51, 0xFFFF, 0x9492, 0xCE59, 0xF7BE, 0xFFBF, 0xF79E,   // 0x00B0 (176) pixels
-    0xF79E, 0xF79E, 0xEF7D, 0xEF7D, 0xF7BE, 0xEF9D, 0x8D51, 0x34E6, 0xA6F4, 0xA734, 0xA6F4, 0x54EA, 0x02E0, 0x0240, 0x0000, 0x0000,   // 0x00C0 (192) pixels
-    0x0000, 0x7BCF, 0x0000, 0x8C72, 0x7C8F, 0x6CCD, 0xC698, 0xF79E, 0xEF7D, 0xEF7D, 0xEF5D, 0xF79E, 0xF79E, 0x8510, 0x34C6, 0x9EB3,   // 0x00D0 (208) pixels
-    0x9692, 0x9672, 0x9692, 0x44C8, 0x02E0, 0x0220, 0x0000, 0x0000, 0x0160, 0x632C, 0x02A0, 0x3B27, 0x3426, 0x8E30, 0x23C4, 0xCEB9,   // 0x00E0 (224) pixels
-    0xF77E, 0xEF7D, 0xF79E, 0xF79E, 0x8D51, 0x2463, 0x8E51, 0x8630, 0x8610, 0x8610, 0x44A8, 0x02A0, 0x0160, 0x0000, 0x0000, 0x0000,   // 0x00F0 (240) pixels
-    0x0240, 0x02A0, 0x0260, 0x1BA3, 0x75AD, 0x860F, 0x656B, 0x4C29, 0xCED9, 0xF7BE, 0xEF7D, 0x8D31, 0x2C24, 0x7E0E, 0x7DEE, 0x7DCE,   // 0x0100 (256) pixels
-    0x7DCE, 0x4CA9, 0x02A0, 0x1843, 0x0220, 0x0280, 0x0000, 0x0000, 0x0240, 0x0000, 0x0321, 0x6D6B, 0x75AC, 0x75AC, 0x75EC, 0x654A,   // 0x0110 (272) pixels
-    0x33A6, 0xCED9, 0x9D73, 0x3C26, 0x7E0D, 0x75CC, 0x75AC, 0x6D8C, 0x5CEA, 0x2AE5, 0x634D, 0x2288, 0x7BCE, 0x0000, 0x0000, 0x0000,   // 0x0120 (288) pixels
-    0x0260, 0x0220, 0x0200, 0x1361, 0x6549, 0x658A, 0x6DCA, 0x760B, 0x5CE8, 0x02E0, 0x33C4, 0x760B, 0x6DCA, 0x6DCA, 0x6DAA, 0x7D6D,   // 0x0130 (304) pixels
-    0x646C, 0x6B6D, 0x6B6E, 0x8C4E, 0x52AD, 0x0000, 0x0000, 0x0000, 0x0200, 0x5B0B, 0x0220, 0x2A85, 0x2B83, 0x6568, 0x5DC8, 0x65E8,   // 0x0140 (320) pixels
-    0x7649, 0x6D49, 0x75EA, 0x6E09, 0x65C8, 0x65A9, 0x6CEB, 0x3BA8, 0xE75C, 0x7BD0, 0x634D, 0x73B1, 0x5ACA, 0x0000, 0x0000, 0x0000,   // 0x0150 (336) pixels
-    0x0000, 0x5AAD, 0x000A, 0x630D, 0x5BCB, 0x2344, 0x65A6, 0x4D84, 0x55C4, 0x4DC4, 0x4DA3, 0x4D83, 0x4563, 0x4463, 0x1B83, 0xE73C,   // 0x0160 (352) pixels
-    0xFFDF, 0x7BF0, 0x6B4D, 0x7BEE, 0x52AC, 0x0000, 0x0000, 0x0000, 0x0000, 0x630E, 0x0010, 0x5AEC, 0xCE79, 0x9DB3, 0x1300, 0x5DC3,   // 0x0170 (368) pixels
-    0x4E01, 0x4E22, 0x4E21, 0x4E02, 0x5D24, 0x4388, 0xE73C, 0xF79E, 0xFFDF, 0x8410, 0x6B6E, 0x840D, 0x630E, 0x0000, 0x0000, 0x0000,   // 0x0180 (384) pixels
-    0x0000, 0x73AE, 0x8C6A, 0x630D, 0xC638, 0xFFFF, 0xADF5, 0x0B60, 0x6664, 0x56A1, 0x66C3, 0x5503, 0x3B48, 0xDF3B, 0xF7BE, 0xF79E,   // 0x0190 (400) pixels
-    0xFFDF, 0x8431, 0x73AF, 0x6B4F, 0x73AE, 0x0000, 0x0000, 0x0000, 0x0000, 0x738D, 0x5280, 0x6B4D, 0xC638, 0xFFFF, 0xFFFF, 0xA5D4,   // 0x01A0 (416) pixels
-    0x1280, 0x7F45, 0x5D83, 0x0300, 0xEF9D, 0xFFFF, 0xFFDF, 0xF7BE, 0xFFFF, 0x8C51, 0x7BCF, 0x7BF2, 0x738D, 0x0000, 0x0000, 0x0000,   // 0x01B0 (432) pixels
-    0x0000, 0x738D, 0x0000, 0x6B6E, 0xC638, 0xFFFF, 0xFFFF, 0xFFFF, 0x9572, 0x32A5, 0x53C9, 0xEF9D, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFDF,   // 0x01C0 (448) pixels
-    0xFFFF, 0x8C72, 0x7BF0, 0x8C53, 0x738D, 0x0000, 0x0000, 0x0000, 0x0000, 0x7BD0, 0xA510, 0x7BCF, 0xA535, 0xCE59, 0xCE59, 0xCE59,   // 0x01D0 (464) pixels
-    0xCE79, 0x84B0, 0xADB5, 0xCE59, 0xCE59, 0xCE59, 0xCE59, 0xCE59, 0xC638, 0x8C51, 0x8410, 0x8430, 0x7BD0, 0x0000, 0x0000, 0x0000,   // 0x01E0 (480) pixels
-    0x0000, 0x8C71, 0x8431, 0x8431, 0x7BF0, 0x7BF0, 0x7BF0, 0x7BF0, 0x7BF0, 0x8410, 0x83F0, 0x7BF0, 0x7BF0, 0x7BF0, 0x7BF0, 0x7BF0,   // 0x01F0 (496) pixels
-    0x7BF0, 0x8410, 0x8C51, 0x8431, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x9CD3, 0x9492, 0xB593, 0x9493, 0x9491, 0x94B1,   // 0x0200 (512) pixels
-    0x94B1, 0x94B1, 0x94B1, 0x94B1, 0x94B1, 0x94B1, 0x94B1, 0x9491, 0x9CF3, 0x4200, 0x8430, 0x9492, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0210 (528) pixels
-    0x0000, 0x0020, 0x0000, 0x630D, 0x8C71, 0x8C51, 0x8C51, 0x8C51, 0x8C51, 0x8C51, 0x8C51, 0x8C51, 0x8C51, 0x8C51, 0x8C51, 0x8C51,   // 0x0220 (544) pixels
-    0x8C71, 0x8410, 0x8C51, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0230 (560) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0240 (576) pixels
-}, "checked"};
+const Icon<24, 24> checked {{
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x2100, 0xab01, 0x9102, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0xd202, 0x4801, 0x0000, 0x0000, 0x0000, 0x0000, 0x6200, 0x1403, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x9944, 0xddbe, 0xbfef, 0xffff, 0xddbe, 0x3a5d, 0x1403, 0x6200, 0x0000,
+    0x0000, 0x1403, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0xbb7d, 0xffff,
+    0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xbb7d, 0x1403, 0x2100, 0x4801, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x3a65, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0x9944, 0xab01,
+    0xd202, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0xddbe, 0xffff, 0xffff,
+    0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xddbe, 0x9102, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xbfef, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0xbfef, 0xffff, 0xffff,
+    0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0x7603, 0x9102, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0xddbe, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xddbe, 0xd202,
+    0xab01, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x9944, 0xffff, 0xffff,
+    0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0x3a5d, 0x4801, 0x2100, 0x1403, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0xbb85, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xbb85, 0x1403, 0x0000,
+    0x0000, 0x6200, 0x1403, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x3a65,
+    0xddbe, 0xffff, 0xbfef, 0xddbe, 0x9944, 0x1403, 0x6200, 0x0000, 0x0000, 0x0000, 0x0000, 0x4801, 0xd202, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x9102, 0xab01, 0x2100, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+
+}};
 } // namespace icons
 } // namespace espgui

src/icons/checked.h

@@ -1,6 +1,6 @@
 #pragma once
 
-// local includes
+// local
 #include "icon.h"
 
 namespace espgui {

src/icons/checked_grey.cpp

@@ -0,0 +1,45 @@
+#include "checked_grey.h"
+
+namespace espgui {
+namespace icons {
+const Icon<24, 24> checked_grey {{
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xec52, 0x312b, 0x5413, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x5413, 0x0f3b, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xec52, 0x550b, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x9944, 0xddbe, 0xbfef, 0xffff, 0xddbe, 0x3a5d, 0x550b, 0xec52, 0xeb5a,
+    0xeb5a, 0x550b, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0xbb7d, 0xffff,
+    0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xbb7d, 0x550b, 0xec52, 0x0f3b, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x3a65, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0x9944, 0x312b,
+    0x5413, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0xddbe, 0xffff, 0xffff,
+    0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xddbe, 0x5413, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xbfef, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0xbfef, 0xffff, 0xffff,
+    0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0x7603, 0x5413, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0xddbe, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xddbe, 0x5413,
+    0x312b, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x9944, 0xffff, 0xffff,
+    0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0x3a5d, 0x0f3b, 0xec52, 0x550b, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0xbb85, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xbb85, 0x550b, 0xeb5a,
+    0xeb5a, 0xec52, 0x550b, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x3a65,
+    0xddbe, 0xffff, 0xbfef, 0xddbe, 0x9944, 0x550b, 0xec52, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0x0f3b, 0x5413, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x5413, 0x312b, 0xec52, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+
+}};
+} // namespace icons
+} // namespace espgui

src/icons/checked_grey.h

@@ -0,0 +1,10 @@
+#pragma once
+
+// local
+#include "icon.h"
+
+namespace espgui {
+namespace icons {
+extern const Icon<24, 24> checked_grey;
+} // namespace icons
+} // namespace espgui

src/icons/unchecked.cpp

@@ -2,43 +2,44 @@
 
 namespace espgui {
 namespace icons {
-const Icon<24, 24> unchecked{{
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0010 (16) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0020 (32) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0030 (48) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0040 (64) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x2945, 0x6B4D, 0x5AEB, 0x5AEB,   // 0x0050 (80) pixels
-    0x5AEB, 0x5AEB, 0x5AEB, 0x5AEB, 0x2124, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0060 (96) pixels
-    0x0000, 0x0000, 0xA514, 0xA534, 0xA534, 0xBDD7, 0xBDF7, 0xBDF7, 0xBDF7, 0xBDF7, 0xBDD7, 0xB5B6, 0xB5B6, 0x31A6, 0x31A6, 0x39E7,   // 0x0070 (112) pixels
-    0x0180, 0x0000, 0x11E3, 0x4269, 0x4229, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xC618, 0xBDD7, 0xCE59, 0xAD75, 0xB596, 0xB596,   // 0x0080 (128) pixels
-    0xB596, 0xB596, 0xAD75, 0xAD55, 0xA514, 0xA514, 0xA514, 0xA514, 0xA514, 0x8C71, 0x8C51, 0x5B0C, 0x4AC9, 0x0000, 0x0000, 0x0000,   // 0x0090 (144) pixels
-    0x0000, 0x8431, 0xA534, 0xA514, 0xA534, 0xAD75, 0xAD75, 0xAD75, 0xAD75, 0xAD75, 0xAD75, 0xAD75, 0xAD75, 0xAD75, 0xAD75, 0xAD75,   // 0x00A0 (160) pixels
-    0xB596, 0x8C71, 0x8431, 0x5BCC, 0x2A85, 0x52AC, 0x0000, 0x0000, 0x0000, 0x8C51, 0xFFFF, 0x9492, 0xC638, 0xF7BE, 0xFFDF, 0xFFDF,   // 0x00B0 (176) pixels
-    0xF7BE, 0xF7BE, 0xFFDF, 0xF7BE, 0xF7DE, 0xF7BE, 0xFFDF, 0xFFDF, 0xFFFF, 0x8C51, 0x6B6E, 0x538A, 0x2A85, 0x528C, 0x0000, 0x0000,   // 0x00C0 (192) pixels
-    0x5ACB, 0x52AA, 0xFFFF, 0x8451, 0xC638, 0xF7BE, 0xF7BE, 0xF7BE, 0xF79E, 0xF79E, 0xF79E, 0xF7BE, 0xF7BE, 0xF79E, 0xF7BE, 0xF7BE,   // 0x00D0 (208) pixels
-    0xFFDF, 0x8C51, 0x6B6E, 0x53AA, 0x2284, 0x52AC, 0x0000, 0x0000, 0xEF7D, 0xFFFF, 0xEF5D, 0x632D, 0xBDF7, 0xF7BE, 0xF7BE, 0xF79E,   // 0x00E0 (224) pixels
-    0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF79E, 0xF7BE, 0xF7BE, 0xFFDF, 0x8431, 0x6B6E, 0x4B0A, 0x52CB, 0x528C, 0x0000, 0x0000,   // 0x00F0 (240) pixels
-    0xF7BE, 0xE73C, 0x8CD1, 0x738E, 0xBDF7, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE,   // 0x0100 (256) pixels
-    0xFFDF, 0x8431, 0x6B6E, 0x5B0C, 0x5ACC, 0x39C8, 0x0000, 0x0000, 0xF7BE, 0xF79E, 0xB616, 0x73CF, 0xC638, 0xFFDF, 0xF79E, 0xF7BE,   // 0x0110 (272) pixels
-    0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF79E, 0xF7BE, 0xFFDF, 0xF7BE, 0xFFDF, 0x8431, 0x6B6E, 0x630D, 0x5AED, 0x0000, 0x0000, 0x0000,   // 0x0120 (288) pixels
-    0xF79E, 0xFFFF, 0x8CD1, 0x52CB, 0xC618, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF79E, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE,   // 0x0130 (304) pixels
-    0xFFDF, 0x8431, 0x6B6E, 0x5AEC, 0x52AC, 0x0000, 0x0000, 0x0000, 0x10A2, 0xBDF7, 0x634B, 0x4A4A, 0xC618, 0xF7DE, 0xF7BE, 0xF7BE,   // 0x0140 (320) pixels
-    0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xFFFF, 0x8C51, 0x6B6E, 0x7BCF, 0x5AED, 0x0000, 0x0000, 0x0000,   // 0x0150 (336) pixels
-    0x0000, 0x0000, 0x528C, 0x4A6A, 0xC618, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7DF, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF79E, 0xF7BE,   // 0x0160 (352) pixels
-    0xFFDF, 0x8431, 0x6B6E, 0x7BCF, 0x5AED, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x5ACD, 0x4A4A, 0xBDF8, 0xF7BE, 0xF7BE, 0xF7BE,   // 0x0170 (368) pixels
-    0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xFFFF, 0x8C51, 0x738E, 0x73AE, 0x632E, 0x0000, 0x0000, 0x0000,   // 0x0180 (384) pixels
-    0x0000, 0x0000, 0x6B6D, 0x4209, 0xC618, 0xFFDF, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xF7BE, 0xFFDF, 0xF7BE,   // 0x0190 (400) pixels
-    0xFFDF, 0x8C51, 0x73AF, 0x738F, 0x73AE, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x6B4C, 0x4A6A, 0xC638, 0xFFFF, 0xFFFF, 0xF7BE,   // 0x01A0 (416) pixels
-    0xFFDF, 0xFFDF, 0xF7BE, 0xFFDF, 0xF7BE, 0xF7BE, 0xFFDF, 0xF7BE, 0xFFFF, 0x8C51, 0x7BCF, 0x7BF1, 0x738D, 0x0000, 0x0000, 0x0000,   // 0x01B0 (432) pixels
-    0x0000, 0x0000, 0x6B4C, 0x5ACB, 0xC638, 0xFFFF, 0xFFFF, 0xFFDF, 0xF7BE, 0xFFDF, 0xFFDF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFDF,   // 0x01C0 (448) pixels
-    0xFFFF, 0x8C72, 0x7BF0, 0x8C53, 0x738D, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x9492, 0x738E, 0xA534, 0xCE59, 0xCE59, 0xCE59,   // 0x01D0 (464) pixels
-    0xCE59, 0xC638, 0xC618, 0xCE59, 0xCE59, 0xCE59, 0xCE59, 0xCE59, 0xC638, 0x8C51, 0x8410, 0x8430, 0x7BD0, 0x0000, 0x0000, 0x0000,   // 0x01E0 (480) pixels
-    0x0000, 0x0000, 0x8C51, 0x8431, 0x7BF0, 0x7BF0, 0x7BF0, 0x7BF0, 0x7BF0, 0x7BF0, 0x7BF0, 0x7BF0, 0x7BF0, 0x7BF0, 0x7BF0, 0x7BF0,   // 0x01F0 (496) pixels
-    0x7BF0, 0x8410, 0x8C51, 0x8431, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x9CD3, 0x9492, 0xB593, 0x9493, 0x9491, 0x94B1,   // 0x0200 (512) pixels
-    0x94B1, 0x94B1, 0x94B1, 0x94B1, 0x94B1, 0x94B1, 0x94B1, 0x9491, 0x9CF3, 0x4200, 0x8430, 0x9492, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0210 (528) pixels
-    0x0000, 0x0020, 0x0000, 0x630D, 0x8C71, 0x8C51, 0x8C51, 0x8C51, 0x8C51, 0x8C51, 0x8C51, 0x8C51, 0x8C51, 0x8C51, 0x8C51, 0x8C51,   // 0x0220 (544) pixels
-    0x8C71, 0x8410, 0x8C51, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0230 (560) pixels
-    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,   // 0x0240 (576) pixels
-},"unchecked"};
+const Icon<24, 24> unchecked {{
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x4100, 0xe839, 0xec52, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073,
+    0xf073, 0xf073, 0xf073, 0x2d5b, 0x6629, 0x0000, 0x0000, 0x0000, 0x0000, 0x8208, 0x6e63, 0xec52, 0xe418, 0x4100, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xe418, 0x6a4a, 0x6e63, 0x8208, 0x0000,
+    0x0000, 0x6e63, 0xe839, 0x8208, 0xec52, 0xaf6b, 0xf073, 0xab52, 0x8208, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xe839, 0x6e63, 0x2100, 0x6629, 0x6a4a, 0x8208, 0xaf6b, 0xf073, 0xf073, 0xf073, 0xf073,
+    0xaf6b, 0x8208, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xec52, 0xe839,
+    0x2d5b, 0x0419, 0xab52, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xec52, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xe418, 0xec52, 0xf073, 0x0000, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073,
+    0xf073, 0xaf6b, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x4100, 0xf073,
+    0xf073, 0x2100, 0xaf6b, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xf073, 0xec52, 0x0419, 0xec52, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073,
+    0xf073, 0xab52, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xe418, 0x2d5b,
+    0xe839, 0xec52, 0x8208, 0xaf6b, 0xf073, 0xf073, 0xf073, 0xf073, 0xaf6b, 0x8208, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x6a4a, 0x6629, 0x4100, 0x6e63, 0xe839, 0x8208, 0xab52, 0xf073, 0xaf6b, 0xec52,
+    0x8208, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xe839, 0x6e63, 0x0000,
+    0x0000, 0x8208, 0x6e63, 0x6a4a, 0x0419, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x4100, 0x0419, 0xec52, 0x6e63, 0x8208, 0x0000, 0x0000, 0x0000, 0x0000, 0x6629, 0x2d5b, 0xf073, 0xf073, 0xf073,
+    0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xec52, 0xe839, 0x4100, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+
+}};
 } // namespace icons
 } // namespace espgui

src/icons/unchecked.h

@@ -1,6 +1,6 @@
 #pragma once
 
-// local includes
+// local
 #include "icon.h"
 
 namespace espgui {

src/icons/unchecked_grey.cpp

@@ -0,0 +1,45 @@
+#include "unchecked_grey.h"
+
+namespace espgui {
+namespace icons {
+const Icon<24, 24> unchecked_grey {{
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0x6e6b, 0xaf6b, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073,
+    0xf073, 0xf073, 0xf073, 0xaf73, 0x4d63, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0x0c5b, 0xcf73, 0xaf6b, 0x0c63, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0x0c63, 0x8e6b, 0xcf73, 0x0c5b, 0xeb5a,
+    0xeb5a, 0xcf73, 0x6d6b, 0x0c5b, 0xaf6b, 0xd073, 0xf073, 0x8f6b, 0x0c5b, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0x6d6b, 0xcf73, 0xeb5a, 0x4d63, 0x8e6b, 0x0c5b, 0xd073, 0xf073, 0xf073, 0xf073, 0xf073,
+    0xd073, 0x0c5b, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xaf6b, 0x6d6b,
+    0xaf73, 0x2c63, 0x8e6b, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xaf6b, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0x0c63, 0xaf6b, 0xf073, 0xeb5a, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073,
+    0xf073, 0xd073, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xf073,
+    0xf073, 0xeb5a, 0xd073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xf073, 0xaf6b, 0x2c63, 0xaf6b, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073,
+    0xf073, 0x8f6b, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0x0c63, 0xaf73,
+    0x6d6b, 0xaf6b, 0x0c5b, 0xd073, 0xf073, 0xf073, 0xf073, 0xf073, 0xd073, 0x0c5b, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0x8e6b, 0x4d63, 0xeb5a, 0xcf73, 0x6e6b, 0x0c5b, 0xae6b, 0xf073, 0xd073, 0xaf6b,
+    0x0c5b, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0x6e6b, 0xcf73, 0xeb5a,
+    0xeb5a, 0x0c5b, 0xcf73, 0x8e6b, 0x2c63, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0x2c63, 0xaf6b, 0xcf73, 0x0c5b, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0x4d63, 0xaf73, 0xf073, 0xf073, 0xf073,
+    0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xaf6b, 0x6d6b, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+    0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a, 0xeb5a,
+
+}};
+} // namespace icons
+} // namespace espgui

src/icons/unchecked_grey.h

@@ -0,0 +1,10 @@
+#pragma once
+
+// local
+#include "icon.h"
+
+namespace espgui {
+namespace icons {
+extern const Icon<24, 24> unchecked_grey;
+} // namespace icons
+} // namespace espgui

src/keyboardhelper.h

@@ -0,0 +1,429 @@
+#pragma once
+
+// esp-idf includes
+#include <esp_log.h>
+
+// 3rdparty lib includes
+#include <strutils.h>
+#include <fontrenderer.h>
+
+// local includes
+#include "tftinterface.h"
+#include "tftcolors.h"
+#include "display.h"
+#include "screenmanager.h"
+
+namespace espgui {
+namespace {
+    constexpr const char * const TAG = "KeyboardHelper";
+    // all ascii chars from '!' to '~'
+    constexpr const char * const KEYBOARD_SCREEN_1 =  "\"!$%&/()=?QWERTZUIOPASDFGHJKL YXCVBNM";
+    constexpr const char * const KEYBOARD_SCREEN_2 =   "1234567890qwertzuiopasdfghjkl yxcvbnm";
+    constexpr const char * const KEYBOARD_SCREEN_3 = "#'*+-,.;:_<|>\\@[]^_`{}~\"!$%&/ ()=?+-*";
+    constexpr const char * const SHIFT = "Shift";
+    constexpr const char * const SPACE = "Space";
+    constexpr const char * const BACKSPACE = "Back";
+    constexpr const char * const ENTER = "Enter";
+} // namespace
+
+template<typename TDisplay = espgui::Display>
+class Keyboard
+{
+public:
+    explicit Keyboard(TDisplay &display) : m_display(display) {}
+
+    void start(TftInterface &tft);
+    void update();
+    void redraw(TftInterface &tft);
+
+    void buttonPressed(Button button);
+    void buttonReleased(Button button);
+
+    void moveSelectorUp();
+    void moveSelectorDown();
+    void moveSelectorLeft();
+    void moveSelectorRight();
+
+private:
+    void updateCharLength();
+
+    void drawKeyboard(TftInterface &tft, bool dont_draw_string = false);
+
+    void nextScreen();
+
+    int32_t m_char_length{0};
+    std::string m_keyboard{KEYBOARD_SCREEN_1};
+    std::string m_keyset{};
+
+    TDisplay &m_display;
+    int32_t m_keyboard_start_y{0};
+
+    int32_t m_char_index{10};
+    int32_t m_last_char_index{-1};
+
+    enum class Screen : uint8_t {
+        SCREEN_1,
+        SCREEN_2,
+        SCREEN_3,
+        SCREEN_MAX
+    };
+    Screen m_current_screen{Screen::SCREEN_2};
+
+    bool m_needsStart{};
+    bool m_needsRedraw{};
+
+    std::optional<espchrono::millis_clock::time_point> m_back_pressed_time{};
+    std::optional<espchrono::millis_clock::time_point> m_confirm_pressed_time{};
+
+    struct ButtonHeldInfo
+    {
+        espchrono::millis_clock::time_point nextTimestamp;
+        int counter{};
+    };
+
+    std::optional<ButtonHeldInfo> m_upHeld;
+    std::optional<ButtonHeldInfo> m_downHeld;
+};
+
+template<typename TDisplay>
+void Keyboard<TDisplay>::moveSelectorUp()
+{
+    m_last_char_index = m_char_index;
+
+    m_char_index -= 10;
+    if (m_char_index < 0)
+        m_char_index = (m_char_length + 4) - m_char_index;
+}
+
+template<typename TDisplay>
+void Keyboard<TDisplay>::moveSelectorDown()
+{
+    m_last_char_index = m_char_index;
+
+    m_char_index += 10;
+    if (m_char_index >= (m_char_length + 4))
+        m_char_index = m_char_index - (m_char_length + 4);
+}
+
+template<typename TDisplay>
+void Keyboard<TDisplay>::nextScreen()
+{
+
+    m_current_screen = static_cast<Screen>(static_cast<uint8_t>(m_current_screen) + uint8_t{1});
+    if (m_current_screen >= Screen::SCREEN_MAX)
+        m_current_screen = Screen::SCREEN_1;
+
+    updateCharLength();
+
+    m_needsStart = true;
+    m_needsRedraw = true;
+}
+
+template<typename TDisplay>
+void Keyboard<TDisplay>::drawKeyboard(TftInterface &tft, bool dont_draw_string)
+{
+    FontRenderer fontRenderer{tft};
+
+    constexpr const int FONT = 4;
+
+    size_t char_index{0};
+    std::string keyboard_screen{m_keyboard};
+
+    std::vector<std::string> keyboard_lines;
+
+    for (size_t i = 0; i < keyboard_screen.size(); i += 10)
+    {
+        std::string line = keyboard_screen.substr(i, 10);
+        if (line.ends_with(" "))
+            line.pop_back();
+
+        keyboard_lines.push_back(line);
+    }
+
+    for (size_t i = 0; i < keyboard_lines.size(); i++)
+    {
+        const int32_t y = m_keyboard_start_y + (i * fontRenderer.fontHeight(FONT) + 9);
+        std::string line = keyboard_lines[i];
+        const int16_t x = tft.width() / (line.size() + 1);
+        for (size_t j = 0; j < line.size(); j++)
+        {
+            const std::string _char{line[j]};
+            const int32_t x_pos = x * (j + 1);
+            const int32_t y_pos = y;
+
+            const auto width = fontRenderer.textWidth(_char, FONT) + 2;
+            const auto height = fontRenderer.fontHeight(FONT) + 4;
+
+            tft.drawRoundRect(x_pos-width/2-1, y_pos-height/2, width+2, height-4, 3, espgui::TFT_BLACK);
+
+            if (char_index == m_char_index)
+                tft.drawRoundRect(x_pos-width/2-1, y_pos-height/2, width+2, height-4, 3, espgui::TFT_DARKGREY);
+
+            if (!dont_draw_string || char_index == m_char_index || char_index == m_last_char_index)
+            {
+                fontRenderer.drawString(_char, x_pos, y_pos, (char_index == m_char_index ? espgui::TFT_WHITE : espgui::TFT_GREY), espgui::TFT_BLACK, FONT, 4); // 4 = center
+            }
+            char_index++;
+        }
+    }
+
+    // draw 3 extra buttons, back, space and enter (x=10, x=tft.width()/2, x=tft.width()-10)
+    const int32_t y = m_keyboard_start_y + (keyboard_lines.size() * fontRenderer.fontHeight(FONT));
+
+    if (isLandscape(tft))
+    {
+        // align left (SHIFT, SPACE)
+        tft.drawRoundRect(15 - 2, y - 1, fontRenderer.textWidth(SHIFT, FONT) + 4, fontRenderer.fontHeight(FONT) + 2, 3, espgui::TFT_DARKGREY);
+        tft.drawRoundRect(30 + fontRenderer.textWidth(SHIFT, FONT) - 2, y - 1, fontRenderer.textWidth(SPACE, FONT) + 4, fontRenderer.fontHeight(FONT) + 2, 3,
+                          espgui::TFT_DARKGREY);
+
+        // align right (BACKSPACE, ENTER); align from tft.width()
+        tft.drawRoundRect(tft.width() - 30 - fontRenderer.textWidth(ENTER, FONT) - fontRenderer.textWidth(BACKSPACE, FONT) - 2, y - 1,
+                          fontRenderer.textWidth(BACKSPACE, FONT) + 4, fontRenderer.fontHeight(FONT) + 2, 3, espgui::TFT_DARKGREY);
+        tft.drawRoundRect(tft.width() - 15 - fontRenderer.textWidth(ENTER, FONT) - 2, y - 1, fontRenderer.textWidth(ENTER, FONT) + 4,
+                          fontRenderer.fontHeight(FONT) + 2, 3, espgui::TFT_DARKGREY);
+
+        // if (!dont_draw_string)
+        {
+            // align left (SHIFT, SPACE)
+            fontRenderer.drawString(SHIFT, 15, y, (m_char_index == m_char_length ? espgui::TFT_BLACK : espgui::TFT_WHITE), (m_char_index == m_char_length ? espgui::TFT_WHITE : espgui::TFT_BLACK), FONT);
+            fontRenderer.drawString(SPACE, 30 + fontRenderer.textWidth(SHIFT, FONT), y, (m_char_index == m_char_length + 1 ? espgui::TFT_BLACK : espgui::TFT_WHITE), (m_char_index == m_char_length +1 ? espgui::TFT_WHITE : espgui::TFT_BLACK), FONT);
+
+            // align right (BACKSPACE, ENTER); align from tft.width()
+            fontRenderer.drawString(BACKSPACE, tft.width() - 30 - fontRenderer.textWidth(ENTER, FONT) - fontRenderer.textWidth(BACKSPACE, FONT), y, (m_char_index == m_char_length + 2 ? espgui::TFT_BLACK : espgui::TFT_WHITE), (m_char_index == m_char_length + 2 ? espgui::TFT_WHITE : espgui::TFT_BLACK), FONT);
+            fontRenderer.drawString(ENTER, tft.width() - 15 - fontRenderer.textWidth(ENTER, FONT), y, (m_char_index == m_char_length + 3 ? espgui::TFT_BLACK : espgui::TFT_WHITE), (m_char_index == m_char_length + 3 ? espgui::TFT_WHITE : espgui::TFT_BLACK), FONT);
+        }
+    }
+    else
+    {
+        const int32_t y_2 = y + fontRenderer.fontHeight(FONT) + 4;
+        // align left (SHIFT, SPACE)
+        tft.drawRoundRect(15 - 2,   y - 1, fontRenderer.textWidth(SHIFT, FONT) + 4, fontRenderer.fontHeight(FONT) + 2, 3, espgui::TFT_DARKGREY);
+        tft.drawRoundRect(15 - 2, y_2 - 1, fontRenderer.textWidth(SPACE, FONT) + 4, fontRenderer.fontHeight(FONT) + 2, 3, espgui::TFT_DARKGREY);
+
+        // align right (BACKSPACE, ENTER); align from tft.width()
+        tft.drawRoundRect(tft.width() - 15 - fontRenderer.textWidth(ENTER, FONT) - 2, y - 1, fontRenderer.textWidth(ENTER, FONT) + 4,
+                          fontRenderer.fontHeight(FONT) + 2, 3, espgui::TFT_DARKGREY);
+        tft.drawRoundRect(tft.width() - 15 - fontRenderer.textWidth(BACKSPACE, FONT) - 2, y_2 - 1, fontRenderer.textWidth(BACKSPACE, FONT) + 4,
+                          fontRenderer.fontHeight(FONT) + 2, 3, espgui::TFT_DARKGREY);
+
+        // if (!dont_draw_string)
+        {
+            // align left (SHIFT, SPACE)
+            fontRenderer.drawString(SHIFT, 15, y, (m_char_index == m_char_length ? espgui::TFT_BLACK : espgui::TFT_WHITE), (m_char_index == m_char_length ? espgui::TFT_WHITE : espgui::TFT_BLACK), FONT);
+            fontRenderer.drawString(SPACE, 15, y_2, (m_char_index == m_char_length + 1 ? espgui::TFT_BLACK : espgui::TFT_WHITE), (m_char_index == m_char_length + 1 ? espgui::TFT_WHITE : espgui::TFT_BLACK), FONT);
+
+            // align right (BACKSPACE, ENTER); align from tft.width()
+            fontRenderer.drawString(BACKSPACE, tft.width() - 15 - fontRenderer.textWidth(BACKSPACE, FONT), y_2, (m_char_index == m_char_length + 2 ? espgui::TFT_BLACK : espgui::TFT_WHITE), (m_char_index == m_char_length + 2 ? espgui::TFT_WHITE : espgui::TFT_BLACK), FONT);
+            fontRenderer.drawString(ENTER, tft.width() - 15 - fontRenderer.textWidth(ENTER, FONT), y, (m_char_index == m_char_length + 3 ? espgui::TFT_BLACK : espgui::TFT_WHITE), (m_char_index == m_char_length + 3 ? espgui::TFT_WHITE : espgui::TFT_BLACK), FONT);
+        }
+    }
+}
+
+template<typename TDisplay>
+void Keyboard<TDisplay>::updateCharLength()
+{
+    std::string tmpstr;
+
+    switch (m_current_screen)
+    {
+    case Screen::SCREEN_1:
+        tmpstr = KEYBOARD_SCREEN_1;
+        break;
+    case Screen::SCREEN_2:
+        tmpstr = KEYBOARD_SCREEN_2;
+        break;
+    case Screen::SCREEN_3:
+        tmpstr = KEYBOARD_SCREEN_3;
+        break;
+    default:
+        ESP_LOGE(TAG, "Unknown screen");
+        return;
+    }
+
+    m_keyboard = tmpstr;
+    cpputils::stringReplaceAll(" ", "", tmpstr);
+    m_char_length = tmpstr.length();
+    m_keyset = tmpstr;
+}
+
+template<typename TDisplay>
+void Keyboard<TDisplay>::moveSelectorRight()
+{
+    m_last_char_index = m_char_index;
+
+    if (m_char_index == (m_char_length + 4) - 1)
+        m_char_index = 0;
+    else
+        m_char_index++;
+}
+
+template<typename TDisplay>
+void Keyboard<TDisplay>::moveSelectorLeft()
+{
+    m_last_char_index = m_char_index;
+
+    if (m_char_index == 0)
+        m_char_index = (m_char_length + 4) - 1;
+    else
+        m_char_index--;
+}
+
+template<typename TDisplay>
+void Keyboard<TDisplay>::start(TftInterface &tft)
+{
+    const auto isLandscape = espgui::isLandscape(tft);
+    m_keyboard_start_y = isLandscape ? 98 : 120;
+
+    tft.fillRect(1, m_keyboard_start_y - 10, tft.width()-1, tft.height() - m_keyboard_start_y - (isLandscape ? 0 : 30), TFT_BLACK);
+    tft.drawSunkenRect(1, m_keyboard_start_y - 10, tft.width()-1, tft.height() - m_keyboard_start_y - (isLandscape ? 0 : 30), TFT_WHITE, TFT_GREY, TFT_BLACK);
+
+    updateCharLength();
+    drawKeyboard(tft);
+
+    m_upHeld = std::nullopt;
+    m_downHeld = std::nullopt;
+}
+
+template<typename TDisplay>
+void Keyboard<TDisplay>::redraw(TftInterface &tft)
+{
+    const auto isLandscape = espgui::isLandscape(tft);
+
+    if (m_needsStart)
+    {
+        m_needsStart = false;
+        tft.fillRect(1, m_keyboard_start_y - 10, tft.width()-1, tft.height() - m_keyboard_start_y - (isLandscape ? 0 : 30), TFT_BLACK);
+        tft.drawSunkenRect(1, m_keyboard_start_y - 10, tft.width()-1, tft.height() - m_keyboard_start_y - (isLandscape ? 0 : 30), TFT_WHITE, TFT_GREY, TFT_BLACK);
+        updateCharLength();
+    }
+
+    if (m_needsRedraw)
+    {
+        m_needsRedraw = false;
+        drawKeyboard(tft);
+    }
+}
+
+template<typename TDisplay>
+void Keyboard<TDisplay>::buttonPressed(Button button)
+{
+    using namespace std::chrono_literals;
+
+    switch (button)
+    {
+    case Right:
+    {
+        m_confirm_pressed_time = espchrono::millis_clock::now();
+        break;
+    }
+    case Left:
+        m_back_pressed_time = espchrono::millis_clock::now();
+        break;
+    case Up:
+        moveSelectorLeft();
+        m_needsRedraw = true;
+        m_upHeld = ButtonHeldInfo { .nextTimestamp = espchrono::millis_clock::now() + 300ms };
+        break;
+    case Down:
+        moveSelectorRight();
+        m_needsRedraw = true;
+        m_downHeld = ButtonHeldInfo { .nextTimestamp = espchrono::millis_clock::now() + 300ms };
+        break;
+    default:;
+    }
+}
+
+template<typename TDisplay>
+void Keyboard<TDisplay>::buttonReleased(espgui::Button button)
+{
+    using namespace std::chrono_literals;
+
+    switch (button)
+    {
+    case Left:
+        if (!m_back_pressed_time)
+            return;
+
+        if (espchrono::ago(*m_back_pressed_time) < 350ms)
+            m_display.removeLastCharFromShownValue();
+
+        m_back_pressed_time = std::nullopt;
+        break;
+    case Right:
+        if (!m_confirm_pressed_time)
+            return;
+
+        if (espchrono::ago(*m_confirm_pressed_time) < 350ms)
+        {
+            if (m_char_index < m_char_length)
+                m_display.setShownValue(m_display.shownValue() + m_keyset[m_char_index]);
+            else if (m_char_index == m_char_length) // shift
+            {
+                nextScreen();
+            }
+            else if (m_char_index == m_char_length + 1) // space
+            {
+                m_display.setShownValue(m_display.shownValue() + " ");
+            }
+            else if (m_char_index == m_char_length + 2) // backspace
+            {
+                m_display.removeLastCharFromShownValue();
+            }
+            else if (m_char_index == m_char_length + 3) // enter
+            {
+                m_display.confirmValue();
+            }
+        }
+        m_confirm_pressed_time = std::nullopt;
+        break;
+    case Up:
+        m_upHeld = std::nullopt;
+        break;
+    case Down:
+        m_downHeld = std::nullopt;
+        break;
+    default:;
+    }
+}
+
+template<typename TDisplay>
+void Keyboard<TDisplay>::update()
+{
+    using namespace std::chrono_literals;
+
+    const auto now = espchrono::millis_clock::now();
+    if (m_back_pressed_time)
+    {
+        if (espchrono::ago(*m_back_pressed_time) > 350ms)
+        {
+            m_back_pressed_time = std::nullopt;
+            popScreen();
+        }
+    }
+
+    if (m_confirm_pressed_time)
+    {
+        if (espchrono::ago(*m_confirm_pressed_time) > 350ms)
+        {
+            m_confirm_pressed_time = std::nullopt;
+            nextScreen();
+        }
+    }
+
+    if (m_upHeld && now >= m_upHeld->nextTimestamp)
+    {
+        m_upHeld->nextTimestamp += m_upHeld->counter > 3 ? 100ms : 200ms;
+        m_upHeld->counter++;
+        moveSelectorLeft();
+        m_needsRedraw = true;
+    }
+    if (m_downHeld && now >= m_downHeld->nextTimestamp)
+    {
+        m_downHeld->nextTimestamp += m_downHeld->counter > 3 ? 100ms : 200ms;
+        m_downHeld->counter++;
+        moveSelectorRight();
+        m_needsRedraw = true;
+    }
+}
+} // namespace espgui

src/menudisplay.cpp

@@ -1,7 +1,10 @@
 #include "menudisplay.h"
 
 // local includes
-#include "tftinstance.h"
+#include "tftinterface.h"
+#include "tftcolors.h"
+
+using namespace std::chrono_literals;
 
 namespace espgui {
 void MenuDisplay::start()
@@ -13,14 +16,17 @@ void MenuDisplay::start()
 
     m_rotateOffset = 0;
     m_pressed = false;
+
+    m_upHeld = std::nullopt;
+    m_downHeld = std::nullopt;
 }
 
-void MenuDisplay::initScreen()
+void MenuDisplay::initScreen(TftInterface &tft)
 {
-    Base::initScreen();
+    Base::initScreen(tft);
 
     for (auto &label : m_labels)
-        label.start();
+        label.start(tft);
 
     runForEveryMenuItem([](MenuItem &item){
         item.start();
@@ -35,25 +41,43 @@ void MenuDisplay::update()
 {
     Base::update();
 
-    if (!m_pressed)
+    const auto now = espchrono::millis_clock::now();
+    if (m_upHeld && now >= m_upHeld->nextTimestamp)
+    {
+        m_upHeld->nextTimestamp += m_upHeld->counter > 3 ? 100ms : 200ms;
+        m_upHeld->counter++;
+        m_rotateOffset--;
+    }
+    if (m_downHeld && now >= m_downHeld->nextTimestamp)
+    {
+        m_downHeld->nextTimestamp += m_downHeld->counter > 3 ? 100ms : 200ms;
+        m_downHeld->counter++;
+        m_rotateOffset++;
+    }
+
     {
         const auto offset = m_rotateOffset;
         m_rotateOffset = 0;
 
-        const auto itemCount = menuItemCount();
-
-        if (itemCount)
+        if (const auto itemCount = menuItemCount())
         {
             if (m_selectedIndex == -1)
                 m_selectedIndex = 0;
 
-            m_selectedIndex = m_selectedIndex + offset;
+            m_selectedIndex += offset;
 
             if (m_selectedIndex < 0)
                 m_selectedIndex += itemCount;
             if (m_selectedIndex >= itemCount)
                 m_selectedIndex -= itemCount;
 
+            if (getMenuItem(m_selectedIndex).skipScroll())
+            {
+                m_selectedIndex = offset >= 0 ?
+                    getNextAccessibleMenuItemIndex(m_selectedIndex) :
+                getPreviousAccessibleMenuItemIndex(m_selectedIndex);
+            }
+
             if (m_selectedIndex < m_scrollOffset)
                 m_scrollOffset = m_selectedIndex;
             if (m_selectedIndex >= m_scrollOffset + m_labels.size())
@@ -68,33 +92,19 @@ void MenuDisplay::update()
         runForEveryMenuItem([&](MenuItem &item){
             item.update();
         });
-
-        if (m_selectedIndex >= 0 && getMenuItem(m_selectedIndex).skipScroll())
-        {
-            if (offset > 0)
-            {
-                m_rotateOffset++;
-            }
-            else if (offset < 0)
-            {
-                m_rotateOffset--;
-            }
-        }
     }
-    else
+
+    if (m_pressed)
     {
         m_pressed = false;
-        if (m_selectedIndex >= 0)
+        if (m_selectedIndex >= 0 && m_selectedIndex < m_menuItems.size())
             getMenuItem(m_selectedIndex).triggered();
     }
 }
 
-void MenuDisplay::redraw()
+void MenuDisplay::redraw(TftInterface &tft)
 {
-    Base::redraw();
-
-    tft.setTextFont(4);
-    tft.setTextColor(TFT_YELLOW, TFT_BLACK);
+    Base::redraw(tft);
 
     int i{0};
 
@@ -104,21 +114,25 @@ void MenuDisplay::redraw()
 
     int newHighlightedIndex{-1};
 
-    const auto drawItemRect = [](const auto &label, const auto color){
-        tft.drawRect(5,
+    const auto drawItemRect = [&tft](const auto &label, const auto color){
+        tft.fillRect(5,
                      label.y()-1,
                      tft.width() - 10,
                      lineHeight+1,
                      color);
+        //tft.drawRoundRect(5,
+        //                  label.y()-1,
+        //                  tft.width() - 10,
+        //                  lineHeight+1,
+        //                  5,
+        //                  color);
     };
 
     runForEveryMenuItem([&](MenuItem &item){
         const auto index = i++;
 
         if (!item.visible())
-        {
             return;
-        }
 
         if (index < m_scrollOffset)
             return;
@@ -130,32 +144,43 @@ void MenuDisplay::redraw()
         const auto selected = index == m_selectedIndex;
 
         if (selected)
-            newHighlightedIndex = relativeIndex;
-        else if (relativeIndex == m_highlightedIndex)
-            drawItemRect(*labelsIter, TFT_BLACK);
-
-        tft.setTextFont(item.font());
-        tft.setTextColor(item.color(), TFT_BLACK);
-        labelsIter->redraw(item.text());
-
-        if (item.icon() != *iconsIter)
         {
-            tft.fillRect(6, labelsIter->y()+1, 24, 24, TFT_BLACK);
+            newHighlightedIndex = relativeIndex;
 
-            auto icon = item.icon();
-            if (icon)
+            if (relativeIndex != m_highlightedIndex)
             {
-                tft.setSwapBytes(true);
-                tft.pushImage(6, labelsIter->y()+1, icon->WIDTH, icon->HEIGHT, icon->buffer);
-                tft.setSwapBytes(false);
+                drawItemRect(*labelsIter, CONFIG_ESPGUI_MENUITEM_BACKGROUND_COLOR);
+                *iconsIter = nullptr;
+                labelsIter->start(tft);
+
+                if (auto icon = item.selectedIcon())
+                {
+                    tft.pushImage(tft.width() - 6 - icon->WIDTH, labelsIter->y() + 1, *icon);
+                }
             }
+        }
+        else if (relativeIndex == m_highlightedIndex)
+        {
+            drawItemRect(*labelsIter, TFT_BLACK);
+            *iconsIter = nullptr;
+            labelsIter->start(tft);
+        }
+
+        labelsIter->redraw(tft, item.text(), item.color(), selected ? CONFIG_ESPGUI_MENUITEM_BACKGROUND_COLOR : TFT_BLACK, item.font());
+
+        if (const auto icon = item.icon(selected); icon != *iconsIter)
+        {
+            if (icon)
+                tft.pushImage(6, labelsIter->y() + 1, *icon);
+            else if (*iconsIter)
+                tft.fillRect(6, labelsIter->y() + 1, 24, 24, selected ? CONFIG_ESPGUI_MENUITEM_BACKGROUND_COLOR : TFT_BLACK);
             *iconsIter = icon;
         }
 
-        if (selected && (relativeIndex != m_highlightedIndex))
-        {
-            drawItemRect(*labelsIter, TFT_WHITE);
-        }
+//        if (selected && (relativeIndex != m_highlightedIndex))
+//        {
+//            drawItemRect(*labelsIter, CONFIG_ESPGUI_MENUITEM_BACKGROUND_COLOR);
+//        }
 
         labelsIter++;
         iconsIter++;
@@ -168,7 +193,7 @@ void MenuDisplay::redraw()
         if (relativeIndex == m_highlightedIndex)
             drawItemRect(*labelsIter, TFT_BLACK);
 
-        labelsIter->clear();
+        labelsIter->clear(tft, TFT_BLACK);
 
         if (*iconsIter)
         {
@@ -197,14 +222,30 @@ void MenuDisplay::buttonPressed(Button button)
     {
     case Button::Left: this->back(); break;
     case Button::Right: m_pressed = true; break;
-    case Button::Up: m_rotateOffset--; break;
-    case Button::Down: m_rotateOffset++; break;
+    case Button::Up:
+        m_rotateOffset--;
+        m_upHeld = ButtonHeldInfo { .nextTimestamp = espchrono::millis_clock::now() + 300ms };
+        break;
+    case Button::Down:
+        m_rotateOffset++;
+        m_downHeld = ButtonHeldInfo { .nextTimestamp = espchrono::millis_clock::now() + 300ms };
+        break;
     }
 }
 
 void MenuDisplay::buttonReleased(Button button)
 {
     //Base::buttonPressed(button);
-    // TODO stop auto scroll
+
+    switch (button)
+    {
+    case Button::Up:
+        m_upHeld = std::nullopt;
+        break;
+    case Button::Down:
+        m_downHeld = std::nullopt;
+        break;
+    default:;
+    }
 }
 } // namespace espgui

src/menudisplay.h

@@ -8,6 +8,10 @@
 #include <functional>
 #include <cassert>
 #include <memory>
+#include <optional>
+
+// 3rdparty lib includes
+#include <espchrono.h>
 
 // local includes
 #include "displaywithtitle.h"
@@ -25,9 +29,9 @@ class MenuDisplay :
 
 public:
     void start() override;
-    void initScreen() override;
+    void initScreen(TftInterface &tft) override;
     void update() override;
-    void redraw() override;
+    void redraw(TftInterface &tft) override;
     void stop() override;
 
     void buttonPressed(Button button) override;
@@ -38,7 +42,6 @@ public:
 
     int selectedIndex() const { return m_selectedIndex; }
 
-
     std::size_t menuItemCount() const { return m_menuItems.size(); }
 
     MenuItem& getMenuItem(std::size_t index)
@@ -53,6 +56,32 @@ public:
         return *m_menuItems[index].get();
     }
 
+    int getNextAccessibleMenuItemIndex(int index) const
+    {
+        for (std::size_t i = index + 1; i < m_menuItems.size(); ++i)
+            if (!m_menuItems[i]->skipScroll())
+                return i;
+
+        for (std::size_t i = 0; i < index; ++i)
+            if (!m_menuItems[i]->skipScroll())
+                return i;
+
+        return -1;
+    }
+
+    int getPreviousAccessibleMenuItemIndex(int index) const
+    {
+        for (std::size_t i = index - 1; i < m_menuItems.size(); --i)
+            if (!m_menuItems[i]->skipScroll())
+                return i;
+
+        for (std::size_t i = m_menuItems.size() - 1; i > index; --i)
+            if (!m_menuItems[i]->skipScroll())
+                return i;
+
+        return -1;
+    }
+
     void runForEveryMenuItem(std::function<void(MenuItem&)> &&callback)
     {
         for (const auto &ptr : m_menuItems)
@@ -92,6 +121,11 @@ public:
         return ptr;
     }
 
+    void rotate(int offset)
+    {
+        m_rotateOffset += offset;
+    }
+
 protected:
     void setSelectedIndex(int selectedIndex) { m_selectedIndex = selectedIndex; }
 
@@ -146,5 +180,14 @@ private:
     bool m_pressed;
 
     std::vector<std::unique_ptr<MenuItem>> m_menuItems;
+
+    struct ButtonHeldInfo
+    {
+        espchrono::millis_clock::time_point nextTimestamp;
+        int counter{};
+    };
+
+    std::optional<ButtonHeldInfo> m_upHeld;
+    std::optional<ButtonHeldInfo> m_downHeld;
 };
 } // namespace espgui

src/menuitem.h

@@ -10,12 +10,82 @@
 #include "scrollinterface.h"
 
 namespace espgui {
-using MenuItemIconInterface = IconInterface<24, 24>;
 
 using MenuItemIcon = Icon<24, 24>;
 
+template<uint16_t width, uint16_t height>
+class SelectableIconInterface
+{
+public:
+    virtual const Icon<width, height> *icon(bool selected) const { return nullptr; }
+};
+
+template<uint16_t width, uint16_t height, const Icon<width, height> *T, const Icon<width, height> *Tselected>
+class StaticSelectableIcon : public virtual SelectableIconInterface<width, height>
+{
+public:
+    virtual const Icon<width, height> *icon(bool selected) const override { return selected ? Tselected : T; }
+};
+
+template<uint16_t width, uint16_t height>
+class SelectedIconInterface
+{
+public:
+    virtual const Icon<width, height> *selectedIcon() const { return nullptr; }
+};
+
+template<uint16_t width, uint16_t height, const Icon<width, height> *T>
+class StaticSelectedIcon : public virtual SelectedIconInterface<width, height>
+{
+public:
+    virtual const Icon<width, height> *selectedIcon() const override { return T; }
+};
+
+template<uint16_t width, uint16_t height>
+class ChangeableSelectableIcon : public virtual SelectableIconInterface<width, height>
+{
+public:
+    virtual const Icon<width, height> *icon(bool selected) const override { return selected ? m_selectedIcon : m_icon; }
+
+    void setIcon(const Icon<width, height> *icon, const Icon<width, height> *selectedIcon)
+    {
+        m_icon = icon;
+        m_selectedIcon = selectedIcon;
+    }
+
+    void setIcon(const Icon<width, height> *icon) { m_icon = icon; }
+    void setSelectedIcon(const Icon<width, height> *selectedIcon) { m_selectedIcon = selectedIcon; }
+
+private:
+    const Icon<width, height> *m_icon = nullptr;
+    const Icon<width, height> *m_selectedIcon = nullptr;
+};
+
+template<uint16_t width, uint16_t height>
+class ChangeableSelectedIcon : public virtual SelectedIconInterface<width, height>
+{
+public:
+    virtual const Icon<width, height> *selectedIcon() const override { return m_selectedIcon; }
+
+    void setSelectedIcon(const Icon<width, height> *selectedIcon) { m_selectedIcon = selectedIcon; }
+
+private:
+    const Icon<width, height> *m_selectedIcon = nullptr;
+};
+
+using MenuItemIconInterface = SelectableIconInterface<24, 24>;
+
+using MenuItemSelectedIconInterface = SelectedIconInterface<24, 24>;
+
+template<const MenuItemIcon *T, const MenuItemIcon *Tselected>
+using StaticMenuItemIcon = StaticSelectableIcon<24, 24, T, Tselected>;
+
 template<const MenuItemIcon *T>
-using StaticMenuItemIcon = StaticIcon<24, 24, T>;
+using StaticMenuItemSelectedIcon = StaticSelectedIcon<24, 24, T>;
+
+using ChangeableMenuItemIcon = ChangeableSelectableIcon<24, 24>;
+
+using ChangeableMenuItemSelectedIcon = ChangeableSelectedIcon<24, 24>;
 
 class MenuItem :
     public virtual ActionInterface,
@@ -23,6 +93,7 @@ class MenuItem :
     public virtual FontInterface,
     public virtual ColorInterface,
     public virtual MenuItemIconInterface,
+    public virtual MenuItemSelectedIconInterface,
     public virtual VisibleInterface,
     public virtual ScrollInterface
 {
@@ -44,8 +115,8 @@ protected:
 };
 
 class EmptyMenuItem :
-        public MenuItem,
-        public EmptyText
+    public MenuItem,
+    public EmptyText
 {
 public:
     void triggered() override {}

src/messagepopupdisplay.cpp

@@ -1,9 +1,16 @@
 #include "messagepopupdisplay.h"
 
+// system includes
+#include <string_view>
+
 // 3rdparty lib includes
-#include <tftinstance.h>
 #include <screenmanager.h>
 #include <cppmacros.h>
+#include <fontrenderer.h>
+
+// local includes
+#include "tftinterface.h"
+#include "tftcolors.h"
 
 namespace espgui {
 
@@ -28,8 +35,10 @@ void MessagePopupDisplay::buttonPressed(Button button)
     }
 }
 
-void MessagePopupDisplay::initOverlay()
+void MessagePopupDisplay::initOverlay(TftInterface &tft)
 {
+    FontRenderer fontRenderer{tft};
+
     const auto leftMargin = 20;
     const auto rightMargin = leftMargin;
     const auto topMargin = tft.height() > 300 ? 50 : 20;
@@ -47,21 +56,20 @@ void MessagePopupDisplay::initOverlay()
                                color565(100, 100, 100),
                                color565(30, 30, 30));
 
-    tft.setTextColor(TFT_WHITE, color565(30, 30, 30));
-
     int x = leftMargin + 5;
     int y = topMargin + 5;
+
     for (char c : m_message)
     {
         if (c == '\n' || x > tft.width() - rightMargin - 10)
         {
             x = leftMargin + 5;
-            y += tft.fontHeight(4);
+            y += fontRenderer.fontHeight(4);
         }
 
         if (c != '\n')
         {
-            const auto addedWidth = tft.drawChar(tft.decodeUTF8(c), x, y, 4);
+            const auto addedWidth = fontRenderer.drawString(std::string_view{&c, 1}, x, y, TFT_WHITE, color565(30, 30, 30), 4);
             x += addedWidth;
         }
 
@@ -69,8 +77,6 @@ void MessagePopupDisplay::initOverlay()
             break;
     }
 
-    tft.setTextColor(TFT_BLACK, color565(170, 170, 170));
-
     if constexpr (false)
     {
         tft.drawSunkenRect(leftMargin + 15, bottom - 40,
@@ -80,7 +86,7 @@ void MessagePopupDisplay::initOverlay()
                                    color565(100, 100, 100),
                                    color565(170, 170, 170));
 
-        tft.drawString("Retry", leftMargin + 18, bottom - 37);
+        fontRenderer.drawString("Retry", leftMargin + 18, bottom - 37, TFT_BLACK, color565(170, 170, 170), 4);
     }
 
     tft.drawSunkenRect(leftMargin + 15 + ((width - 15 - 30 - 15) / 2) + 15, bottom - 40,
@@ -90,7 +96,7 @@ void MessagePopupDisplay::initOverlay()
                                color565(100, 100, 100),
                                color565(170, 170, 170));
 
-    tft.drawString("Ok", leftMargin + 18 + ((width - 15 - 30 - 15) / 2) + 15 + 1, bottom - 37);
+    fontRenderer.drawString("Ok", leftMargin + 18 + ((width - 15 - 30 - 15) / 2) + 15 + 1, bottom - 37, TFT_BLACK, color565(170, 170, 170), 4);
 }
 
 } // namespace espgui

src/messagepopupdisplay.h

@@ -14,7 +14,7 @@ public:
 
     void buttonPressed(Button button) override;
 
-    void initOverlay() override;
+    void initOverlay(TftInterface &tft) override;
 
 private:
     std::string m_message;

src/popupdisplay.cpp

@@ -1,7 +1,6 @@
 #include "popupdisplay.h"
 
 // 3rdparty lib includes
-#include <tftinstance.h>
 #include <screenmanager.h>
 
 namespace espgui {
@@ -11,20 +10,27 @@ PopupDisplay::PopupDisplay(std::unique_ptr<Display> &&lastDisplay) :
 {
 }
 
-void PopupDisplay::initScreen()
+void PopupDisplay::initScreen(TftInterface &tft)
 {
-    Base::initScreen();
+    Base::initScreen(tft);
 
-    m_lastDisplay->initScreen();
+    m_lastDisplay->initScreen(tft);
 
-    initOverlay();
+    initOverlay(tft);
 }
 
 void PopupDisplay::closeOverlay()
+{
+    espgui::changeScreenCallback = [this](espgui::TftInterface &tft){
+        closeOverlay(tft);
+    };
+}
+
+void PopupDisplay::closeOverlay(TftInterface &tft)
 {
     auto guard = std::move(espgui::currentDisplay);
     espgui::currentDisplay = std::move(m_lastDisplay);
-    espgui::currentDisplay->initScreen();
+    espgui::currentDisplay->initScreen(tft);
 }
 
 } // namespace espgui

src/popupdisplay.h

@@ -15,10 +15,11 @@ class PopupDisplay : public Display
 public:
     PopupDisplay(std::unique_ptr<Display> &&lastDisplay);
 
-    void initScreen() override;
+    void initScreen(TftInterface &tft) override;
 
-    virtual void initOverlay() = 0;
+    virtual void initOverlay(TftInterface &tft) = 0;
     void closeOverlay();
+    void closeOverlay(TftInterface &tft);
 
 private:
     std::unique_ptr<Display> m_lastDisplay;

src/richtexthelper.cpp

@@ -0,0 +1,18 @@
+#include "richtexthelper.h"
+
+// 3rdparty lib includes
+#include <strutils.h>
+
+namespace espgui {
+
+void richTextEscape(std::string &subject)
+{
+    cpputils::stringReplaceAll('&', "&&", subject);
+}
+
+std::string richTextEscape(std::string_view subject)
+{
+    return cpputils::stringReplaceAll('&', "&&", subject);
+}
+
+} // namespace espgui

src/richtexthelper.h

@@ -1,5 +1,9 @@
 #pragma once
 
+// system includes
+#include <string>
+#include <string_view>
+
 namespace espgui {
 namespace colors {
 constexpr char RED[] = "&1";    // #ff0000 (TFT_RED)
@@ -17,4 +21,8 @@ constexpr char SMALL[] = "&s";  // tft.setTextFont(2)
 constexpr char MEDIUM[] = "&m"; // tft.setTextFont(4)
 constexpr char RESTORE[] = "&f";  // restore original font
 } // namespace fonts
+
+void richTextEscape(std::string &subject);
+std::string richTextEscape(std::string_view subject);
+
 } // namespace espgui

src/richtextrenderer.cpp

@@ -4,47 +4,42 @@
 #include <string_view>
 
 // 3rdparty lib includes
-#include <strutils.h>
+#include <fontrenderer.h>
+
+// local includes
+#include "tftinterface.h"
+#include "tftcolors.h"
 
 namespace espgui {
 
-void richTextEscape(std::string &subject)
+int16_t renderRichText(TftInterface &tft, std::string_view str, int32_t poX, int32_t poY, uint16_t color, uint16_t bgcolor, uint8_t font)
 {
-    cpputils::stringReplaceAll('&', "&&", subject);
+    FontRenderer fontRenderer{tft};
+    return renderRichText(tft, fontRenderer, str, poX, poY, color, bgcolor, font);
 }
 
-std::string richTextEscape(std::string_view subject)
-{
-    return cpputils::stringReplaceAll('&', "&&", subject);
-}
-
-int16_t renderRichText(std::string_view str, int32_t poX, int32_t poY)
-{
-    return renderRichText(str, poX, poY, tft.textfont);
-}
-
-int16_t renderRichText(std::string_view str, int32_t poX, int32_t poY, uint8_t font)
+int16_t renderRichText(TftInterface &tft, FontRenderer &fontRenderer, std::string_view str, int32_t poX, int32_t poY, uint16_t color, uint16_t bgcolor, uint8_t font)
 {
     if (str.empty())
         return 0;
 
-    const int16_t fontHeight = tft.fontHeight(font);
+    const int16_t fontHeight = fontRenderer.fontHeight(font);
 
+    const uint16_t oldColor = color;
     const uint8_t oldFont = font;
-    const uint16_t oldColor = tft.textcolor;
 
     int16_t width{};
 
-    const auto drawString = [&poX, &poY, &font, &width, &fontHeight, &oldFont](std::string_view str) {
-        const auto addedWith = tft.drawString(str, poX, poY, font);
+    const auto drawString = [&tft, &fontRenderer, &poX, &poY, &color, &bgcolor, &font, &width, &fontHeight, &oldFont](std::string_view str) {
+        const auto addedWith = fontRenderer.drawString(str, poX, poY, color, bgcolor, font);
 
         if (font != oldFont)
         {
-            if (const int16_t newFontHeight = tft.fontHeight(font); newFontHeight < fontHeight)
+            if (const int16_t newFontHeight = fontRenderer.fontHeight(font); newFontHeight < fontHeight)
             {
                 tft.fillRect(poX, poY + newFontHeight,
                              addedWith, fontHeight - newFontHeight,
-                             tft.textbgcolor);
+                             bgcolor);
             }
         }
 
@@ -77,7 +72,7 @@ again:
             case '8':
             case '9':
             {
-                const auto color = [&controlChar,&oldColor](){
+                color = [&controlChar,&oldColor](){
                     switch (controlChar)
                     {
                     case 'c': return oldColor;
@@ -94,8 +89,6 @@ again:
                     __builtin_unreachable();
                 }();
 
-                tft.setTextColor(color, tft.textbgcolor);
-
                 auto newNewIter = newIter + 1;
                 if (newNewIter != std::end(str))
                 {
@@ -106,18 +99,30 @@ again:
             }
             case 'f':
             case 's':
+            case 'S':
             case 'm':
             {
-                font = [&controlChar,&oldFont]() -> uint8_t {
+                bool changeHeight = false;
+                font = [&controlChar,&oldFont,&changeHeight]() -> uint8_t {
                     switch (controlChar)
                     {
                     case 'f': return oldFont;
                     case 's': return 2;
+                    case 'S': {
+                        changeHeight = true;
+                        return 2;
+                    }
                     case 'm': return 4;
                     }
                     __builtin_unreachable();
                 }();
 
+                if (changeHeight)
+                {
+                    // adjust y rendering position to new font height
+                    poY += fontRenderer.fontHeight(oldFont) - fontRenderer.fontHeight(font);
+                }
+
                 auto newNewIter = newIter + 1;
                 if (newNewIter != std::end(str))
                 {
@@ -152,8 +157,6 @@ again:
         drawString(str);
     }
 
-    tft.setTextColor(oldColor, tft.textbgcolor);
-
     return width;
 }
 

src/richtextrenderer.h

@@ -4,15 +4,12 @@
 #include <string_view>
 #include <string>
 
-// local includes
-#include "tftinstance.h"
+// forward declares
+namespace espgui { class TftInterface; class FontRenderer; }
 
 namespace espgui {
 
-void richTextEscape(std::string &subject);
-std::string richTextEscape(std::string_view subject);
-
-int16_t renderRichText(std::string_view str, int32_t poX, int32_t poY);
-int16_t renderRichText(std::string_view str, int32_t poX, int32_t poY, uint8_t font);
+int16_t renderRichText(TftInterface &tft, std::string_view str, int32_t poX, int32_t poY, uint16_t color, uint16_t bgcolor, uint8_t font);
+int16_t renderRichText(TftInterface &tft, FontRenderer &fontRenderer, std::string_view str, int32_t poX, int32_t poY, uint16_t color, uint16_t bgcolor, uint8_t font);
 
 } // namespace espgui

src/screenmanager.cpp

@@ -1,13 +1,21 @@
 #include "screenmanager.h"
 
+// system includes
 #include <cassert>
 
+// esp-idf includes
+#include <esp_log.h>
+
 namespace espgui {
 
+namespace {
+constexpr const char * const TAG = "SCREENMANAGER";
+} // namespace
+
 std::unique_ptr<Display> currentDisplay;
 std::stack<std::unique_ptr<Display>> displayStack;
 
-std::function<void()> changeScreenCallback;
+std::function<void(TftInterface&)> changeScreenCallback;
 
 void deconstructScreen()
 {
@@ -28,19 +36,27 @@ void pushScreenInternal()
     }
 }
 
-void popScreen()
+void popScreenImpl(TftInterface &tft)
 {
     deconstructScreen();
 
     if (displayStack.empty())
+    {
+        ESP_LOGW(TAG, "displayStack is empty");
         return;
+    }
 
     currentDisplay = std::move(displayStack.top());
     displayStack.pop();
     currentDisplay->start();
-    currentDisplay->initScreen();
+    currentDisplay->initScreen(tft);
     currentDisplay->update();
-    currentDisplay->redraw();
+    currentDisplay->redraw(tft);
+}
+
+void popScreen()
+{
+    changeScreenCallback = [](TftInterface &tft){ popScreenImpl(tft); };
 }
 
 } // namespace espgui

src/screenmanager.h

@@ -9,102 +9,78 @@
 // local includes
 #include "display.h"
 
+// forward declares
+namespace espgui { class TftInterface; }
+
 namespace espgui {
 
 extern std::unique_ptr<Display> currentDisplay;
 
 extern std::stack<std::unique_ptr<Display>> displayStack;
 
-extern std::function<void()> changeScreenCallback;
+extern std::function<void(TftInterface&)> changeScreenCallback;
 
 void deconstructScreen();
 
 void pushScreenInternal();
 
+void popScreenImpl(TftInterface &tft);
 void popScreen();
 
-template<typename T, typename... Args>
-void switchScreenImpl(Args... args)
-{
-    deconstructScreen();
-
-    currentDisplay = std::make_unique<T>(args...);
-    currentDisplay->start();
-    currentDisplay->initScreen();
-    currentDisplay->update();
-    currentDisplay->redraw();
-}
-
-template<typename T, typename... Args>
-void switchScreenRefImpl(Args&&... args)
-{
-    deconstructScreen();
-
-    currentDisplay = std::make_unique<T>(std::forward<Args>(args)...);
-    currentDisplay->start();
-    currentDisplay->initScreen();
-    currentDisplay->update();
-    currentDisplay->redraw();
-}
-
 template<typename T, typename... Args>
 void switchScreen(Args... args)
 {
-    if (currentDisplay)
-        changeScreenCallback = [args...](){ switchScreenImpl<T>(args...); };
-    else
-        switchScreenImpl<T>(args...);
+    changeScreenCallback = [args...](TftInterface &tft){
+        deconstructScreen();
+
+        currentDisplay = std::make_unique<T>(args...);
+        currentDisplay->start();
+        currentDisplay->initScreen(tft);
+        currentDisplay->update();
+        currentDisplay->redraw(tft);
+    };
 }
 
 template<typename T, typename... Args>
 void switchScreenRef(Args&&... args)
 {
-    if (currentDisplay)
-        changeScreenCallback = [args...](){ switchScreenRefImpl<T>(std::forward<Args>(args)...); };
-    else
-        switchScreenRefImpl<T>(std::forward<Args>(args)...);
-}
+    changeScreenCallback = [args...](TftInterface &tft){
+        deconstructScreen();
 
-template<typename T, typename... Args>
-void pushScreenImpl(Args... args)
-{
-    pushScreenInternal();
-
-    currentDisplay = std::make_unique<T>(args...);
-    currentDisplay->start();
-    currentDisplay->initScreen();
-    currentDisplay->update();
-    currentDisplay->redraw();
-}
-
-template<typename T, typename... Args>
-void pushScreenRefImpl(Args&&... args)
-{
-    pushScreenInternal();
-
-    currentDisplay = std::make_unique<T>(std::forward<Args>(args)...);
-    currentDisplay->start();
-    currentDisplay->initScreen();
-    currentDisplay->update();
-    currentDisplay->redraw();
+        currentDisplay = std::make_unique<T>(std::forward<Args>(args)...);
+        currentDisplay->start();
+        currentDisplay->initScreen(tft);
+        currentDisplay->update();
+        currentDisplay->redraw(tft);
+    };
 }
 
 template<typename T, typename... Args>
 void pushScreen(Args... args)
 {
-    if (currentDisplay)
-        changeScreenCallback = [args...](){ pushScreenImpl<T>(args...); };
-    else
-        pushScreenImpl<T>(args...);
+    changeScreenCallback = [args...](TftInterface &tft){
+        pushScreenInternal();
+
+        currentDisplay = std::make_unique<T>(args...);
+        currentDisplay->start();
+        currentDisplay->initScreen(tft);
+        currentDisplay->update();
+        currentDisplay->redraw(tft);
+    };
 }
 
 template<typename T, typename... Args>
 void pushScreenRef(Args&&... args)
 {
-    if (currentDisplay)
-        changeScreenCallback = [args...](){ pushScreenRefImpl<T>(std::forward<Args>(args)...); };
-    else
-        pushScreenRefImpl<T>(std::forward<Args>(args)...);
+    changeScreenCallback = [args...](TftInterface &tft){
+        pushScreenInternal();
+
+        currentDisplay = std::make_unique<T>(std::forward<Args>(args)...);
+        currentDisplay->start();
+        currentDisplay->initScreen(tft);
+        currentDisplay->update();
+        currentDisplay->redraw(tft);
+    };
 }
 
 } // namespace espgui

src/scrollinterface.h

@@ -7,8 +7,11 @@ public:
 };
 
 template<bool TScroll>
-class StaticScrollBehaviour : public ScrollInterface {
+class StaticScrollBehaviour : public virtual ScrollInterface {
 public:
     bool skipScroll() const override { return TScroll; }
 };
+
+using SkipScroll = StaticScrollBehaviour<true>;
+
 } // namespace espgui

src/splitgraphdisplay.h

@@ -2,7 +2,9 @@
 
 // local includes
 #include "display.h"
-#include "textinterface.h"
+#include "tftinterface.h"
+#include "tftcolors.h"
+#include "titleinterface.h"
 #include "widgets/label.h"
 #include "widgets/graph.h"
 #include "confirminterface.h"
@@ -47,15 +49,17 @@ public:
 template<std::size_t COUNT0, std::size_t COUNT1>
 class SplitGraphDisplay :
     public Display,
-    public virtual TextInterface,
+    public virtual TitleInterface,
     public virtual TopGraphAccessorInterface<COUNT0>,
     public virtual BottomGraphAccessorInterface<COUNT1>,
     public virtual ConfirmInterface,
     public virtual BackInterface
 {
+    using Base = Display;
+
 public:
-    void initScreen() override;
-    void redraw() override;
+    void initScreen(TftInterface &tft) override;
+    void redraw(TftInterface &tft) override;
 
     void buttonPressed(Button button) override;
 
@@ -67,26 +71,24 @@ private:
 };
 
 template<std::size_t COUNT0, std::size_t COUNT1>
-void SplitGraphDisplay<COUNT0, COUNT1>::initScreen()
+void SplitGraphDisplay<COUNT0, COUNT1>::initScreen(TftInterface &tft)
 {
-    tft.fillScreen(TFT_BLACK);
+    Base::initScreen(tft);
 
-    m_titleLabel.start();
+    m_titleLabel.start(tft);
     tft.fillRect(0, 34, tft.width(), 3, TFT_WHITE);
 
-    m_graph0.start(static_cast<const TopGraphAccessorInterface<COUNT0>&>(*this).getTopBuffers());
-    m_graph1.start(static_cast<const BottomGraphAccessorInterface<COUNT1>&>(*this).getBottomBuffers());
+    m_graph0.start(tft, static_cast<const TopGraphAccessorInterface<COUNT0>&>(*this).getTopBuffers());
+    m_graph1.start(tft, static_cast<const BottomGraphAccessorInterface<COUNT1>&>(*this).getBottomBuffers());
 }
 
 template<std::size_t COUNT0, std::size_t COUNT1>
-void SplitGraphDisplay<COUNT0, COUNT1>::redraw()
+void SplitGraphDisplay<COUNT0, COUNT1>::redraw(TftInterface &tft)
 {
-    tft.setTextFont(4);
-    tft.setTextColor(TFT_YELLOW, TFT_BLACK);
-    m_titleLabel.redraw(text());
+    m_titleLabel.redraw(tft, title(), TFT_YELLOW, TFT_BLACK, 4);
 
-    m_graph0.redraw(static_cast<const TopGraphAccessorInterface<COUNT0>&>(*this).getTopBuffers());
-    m_graph1.redraw(static_cast<const BottomGraphAccessorInterface<COUNT1>&>(*this).getBottomBuffers());
+    m_graph0.redraw(tft, static_cast<const TopGraphAccessorInterface<COUNT0>&>(*this).getTopBuffers());
+    m_graph1.redraw(tft, static_cast<const BottomGraphAccessorInterface<COUNT1>&>(*this).getBottomBuffers());
 }
 
 template<std::size_t COUNT0, std::size_t COUNT1>

src/textwithvaluehelper.h

@@ -1,7 +1,9 @@
 #pragma once
 
+// system includes
+#include <format>
+
 // 3rdparty lib includes
-#include <fmt/core.h>
 #include <strutils.h>
 #include <espstrutils.h>
 #include <espwifiutils.h>
@@ -26,7 +28,7 @@ struct TextWithValueHelper : public Taccessor, public virtual TextInterface
         using espchrono::toString;
         using wifi_stack::toString;
 
-        return fmt::format("{} {}", Tprefix, richTextEscape(toString(Taccessor::getValue())));
+        return std::format("{} {}", Tprefix, richTextEscape(toString(Taccessor::getValue())));
     }
 };
 
@@ -42,7 +44,7 @@ struct ChangeableTextWithValueHelper : public Taccessor, public virtual TextInte
         using espchrono::toString;
         using wifi_stack::toString;
 
-        return fmt::format("{} {}", m_prefix, richTextEscape(toString(Taccessor::getValue())));
+        return std::format("{} {}", m_prefix, richTextEscape(toString(Taccessor::getValue())));
     }
 
     const std::string &prefix() const { return m_prefix; }
@@ -65,7 +67,7 @@ struct TextWithHighlightedValueHelper : public Taccessor, public virtual TextInt
         using espchrono::toString;
         using wifi_stack::toString;
 
-        return fmt::format("{} {}{}", Tprefix, Tguilib_color, richTextEscape(toString(Taccessor::getValue())));
+        return std::format("{} {}{}", Tprefix, Tguilib_color, richTextEscape(toString(Taccessor::getValue())));
     }
 };
 
@@ -81,7 +83,7 @@ struct ChangeableTextWithHighlightedValueHelper : public Taccessor, public virtu
         using espchrono::toString;
         using wifi_stack::toString;
 
-        return fmt::format("{} {}{}", m_prefix, Tguilib_color, richTextEscape(toString(Taccessor::getValue())));
+        return std::format("{} {}{}", m_prefix, Tguilib_color, richTextEscape(toString(Taccessor::getValue())));
     }
 
     const std::string &prefix() const { return m_prefix; }

src/tftcolors.h

@@ -0,0 +1,46 @@
+#pragma once
+
+// system includes
+#include <cstdint>
+
+namespace espgui {
+
+// Colour conversion
+// Convert 8 bit red, green and blue to 16 bits
+constexpr uint16_t color565(uint8_t red, uint8_t green, uint8_t blue) noexcept
+{
+    return ((red & 0xF8) << 8) | ((green & 0xFC) << 3) | (blue >> 3);
+}
+
+/***************************************************************************************
+**                         Section 6: Colour enumeration
+***************************************************************************************/
+// Default color definitions
+constexpr uint16_t TFT_BLACK       = color565(  0,   0,   0);
+constexpr uint16_t TFT_NAVY        = color565(  0,   0, 128);
+constexpr uint16_t TFT_DARKGREEN   = color565(  0, 128,   0);
+constexpr uint16_t TFT_DARKCYAN    = color565(  0, 128, 128);
+constexpr uint16_t TFT_MAROON      = color565(128,   0,   0);
+constexpr uint16_t TFT_PURPLE      = color565(128,   0, 128);
+constexpr uint16_t TFT_OLIVE       = color565(128, 128,   0);
+constexpr uint16_t TFT_LIGHTGREY   = color565(211, 211, 211);
+constexpr uint16_t TFT_DARKGREY    = color565(128, 128, 128);
+constexpr uint16_t TFT_BLUE        = color565(  0,   0, 255);
+constexpr uint16_t TFT_GREEN       = color565(  0, 255,   0);
+constexpr uint16_t TFT_CYAN        = color565(  0, 255, 255);
+constexpr uint16_t TFT_RED         = color565(255,   0,   0);
+constexpr uint16_t TFT_MAGENTA     = color565(255,   0, 255);
+constexpr uint16_t TFT_YELLOW      = color565(255, 255,   0);
+constexpr uint16_t TFT_WHITE       = color565(255, 255, 255);
+constexpr uint16_t TFT_GREY        = 0x5AEB;
+constexpr uint16_t TFT_ORANGE      = color565(255, 180,   0);
+constexpr uint16_t TFT_GREENYELLOW = color565(180, 255,   0);
+constexpr uint16_t TFT_PINK        = color565(255, 192, 203); //Lighter pink, was 0xFC9F
+constexpr uint16_t TFT_BROWN       = color565(150,  75,   0);
+constexpr uint16_t TFT_GOLD        = color565(255, 215,   0);
+constexpr uint16_t TFT_SILVER      = color565(192, 192, 192);
+constexpr uint16_t TFT_SKYBLUE     = color565(135, 206, 235);
+constexpr uint16_t TFT_VIOLET      = color565(180,  46, 226);
+constexpr uint16_t TFT_NICEBLUE    = color565(59, 163, 255);
+
+} // namespace espgui

src/tftinstance.cpp

@@ -1,5 +0,0 @@
-#include "tftinstance.h"
-
-namespace espgui {
-TFT_eSPI tft;
-}

src/tftinstance.h

@@ -1,8 +0,0 @@
-#pragma once
-
-// 3rdparty lib includes
-#include <TFT_eSPI.h>
-
-namespace espgui {
-extern TFT_eSPI tft;
-}

src/titleinterface.h

@@ -0,0 +1,75 @@
+#pragma once
+
+// system includes
+#include <string>
+#include <utility>
+
+namespace espgui {
+
+class TitleInterface {
+public:
+    virtual std::string title() const = 0;
+};
+
+class EmptyTitle : public virtual TitleInterface
+{
+public:
+    std::string title() const override { return {}; }
+};
+
+template<const char *Ttitle>
+class StaticTitle : public virtual TitleInterface
+{
+public:
+    static constexpr const char *STATIC_TITLE = Ttitle;
+
+    std::string title() const override { return Ttitle; }
+};
+
+class ChangeableTitle : public virtual TitleInterface
+{
+public:
+    ChangeableTitle() = default;
+    ChangeableTitle(std::string &&title) : m_title{std::move(title)} {}
+    ChangeableTitle(std::string_view title) : m_title{title} {}
+
+    std::string title() const override { return m_title; }
+    void setTitle(std::string &&title) { m_title = std::move(title); }
+    void setTitle(const std::string &title) { m_title = title; }
+
+private:
+    std::string m_title;
+};
+
+template<typename T>
+class CachedTitle : public virtual T
+{
+public:
+    std::string title() const override
+    {
+        if (!m_loaded)
+        {
+            m_title = T::title();
+            m_loaded = true;
+        }
+
+        return m_title;
+    }
+
+private:
+    mutable bool m_loaded{};
+    mutable std::string m_title;
+};
+
+template<typename T>
+class StaticallyCachedTitle : public virtual T
+{
+public:
+    std::string title() const override
+    {
+        static const auto title = T::title();
+        return title;
+    }
+};
+
+} // namespace espgui

src/widgets/centeredlabel.cpp

@@ -0,0 +1,82 @@
+#include "centeredlabel.h"
+
+// 3rdparty lib includes
+#include <fontrenderer.h>
+
+// local includes
+#include "tftinterface.h"
+
+namespace espgui {
+CenteredLabel::CenteredLabel(int x, int y) :
+    m_x{x},
+    m_y{y}
+{
+}
+
+void CenteredLabel::start(TftInterface &tft)
+{
+    m_lastStr.clear();
+    m_lastFont = -1;
+    m_lastColor = -1;
+
+    m_lastWidth = 0;
+    m_lastHeight = 0;
+}
+
+void CenteredLabel::redraw(TftInterface &tft, std::string_view str, uint16_t color, uint16_t bgcolor, uint8_t font, bool forceRedraw)
+{
+    espgui::FontRenderer fontRenderer{tft};
+    redraw(tft, fontRenderer, str, color, bgcolor, font, forceRedraw);
+}
+
+void CenteredLabel::redraw(TftInterface &tft, FontRenderer &fontRenderer, std::string_view str, uint16_t color, uint16_t bgcolor, uint8_t font, bool forceRedraw)
+{
+    if (m_lastStr == str &&
+        m_lastColor == color &&
+        m_lastFont == font &&
+        !forceRedraw)
+        return;
+
+    const auto renderedWidth = fontRenderer.drawCentreString(str, m_x, m_y, color, bgcolor, font);
+    const auto renderedHeight = fontRenderer.fontHeight(font);
+
+    if (renderedWidth < m_lastWidth)
+    {
+        const auto oldLeftX = m_x - (m_lastWidth / 2);
+        const auto newLeftX = m_x - (renderedWidth / 2);
+
+        tft.fillRect(oldLeftX, m_y,
+                     newLeftX - oldLeftX,
+                     renderedHeight,
+                     bgcolor);
+
+        const auto oldRightX = m_x + (m_lastWidth / 2);
+        const auto newRightX = m_x + (renderedWidth / 2);
+
+        tft.fillRect(newRightX, m_y,
+                     oldRightX - newRightX,
+                     renderedHeight,
+                     bgcolor);
+    }
+
+//    if (renderedHeight < m_lastHeight)
+//        tft.fillRect(m_x, m_y + renderedHeight,
+//                     renderedWidth, m_lastHeight - renderedHeight,
+//                     bgcolor);
+
+    m_lastStr = str;
+    m_lastColor = color;
+    m_lastFont = font;
+
+    m_lastWidth = renderedWidth;
+    m_lastHeight = renderedHeight;
+}
+
+void CenteredLabel::clear(TftInterface &tft, uint16_t bgcolor)
+{
+    if (m_lastWidth || m_lastHeight)
+        tft.fillRect(m_x - (m_lastWidth / 2), m_y, m_lastWidth, m_lastHeight, bgcolor);
+
+    start(tft);
+}
+}

src/widgets/centeredlabel.h

@@ -0,0 +1,37 @@
+#pragma once
+
+// system includes
+#include <string>
+
+// forward declares
+namespace espgui {
+class TftInterface;
+class FontRenderer;
+} // namespace espgui
+
+namespace espgui {
+class CenteredLabel
+{
+public:
+    CenteredLabel(int x, int y);
+
+    int x() const { return m_x; }
+    int y() const { return m_y; }
+
+    void start(TftInterface &tft);
+    void redraw(TftInterface &tft, std::string_view str, uint16_t color, uint16_t bgcolor, uint8_t font, bool forceRedraw = false);
+    void redraw(TftInterface &tft, FontRenderer &fontRenderer, std::string_view str, uint16_t color, uint16_t bgcolor, uint8_t font, bool forceRedraw = false);
+    void clear(TftInterface &tft, uint16_t bgcolor);
+
+private:
+    const int m_x;
+    const int m_y;
+
+    std::string m_lastStr;
+    uint16_t m_lastColor;
+    uint8_t m_lastFont;
+
+    int m_lastWidth;
+    int m_lastHeight;
+};
+} // namespace espgui

src/widgets/graph.h

@@ -2,6 +2,7 @@
 
 // system includes
 #include <functional>
+#include <limits>
 
 // 3rdparty lib includes
 #include <ring-buffer.h>
@@ -9,7 +10,8 @@
 
 // local includes
 #include "label.h"
-#include "tftinstance.h"
+#include "tftinterface.h"
+#include "tftcolors.h"
 
 namespace espgui {
 template<size_t LENGTH, size_t COUNT>
@@ -24,11 +26,11 @@ public:
 
     Graph(int x, int y, int height);
 
-    void start(const Container &buffers);
-    void redraw(const Container &buffers);
+    void start(TftInterface &tft, const Container &buffers);
+    void redraw(TftInterface &tft, const Container &buffers);
 
 private:
-    void render(const Container &buffers, bool delta);
+    void render(TftInterface &tft, const Container &buffers, bool delta);
 
     const int m_x, m_y, m_height;
 
@@ -54,7 +56,7 @@ Graph<LENGTH, COUNT>::Graph(int x, int y, int height) :
 }
 
 template<size_t LENGTH, size_t COUNT>
-void Graph<LENGTH, COUNT>::start(const Container &buffers)
+void Graph<LENGTH, COUNT>::start(TftInterface &tft, const Container &buffers)
 {
     m_min = 0.f;
     m_max = 10.f;
@@ -64,20 +66,20 @@ void Graph<LENGTH, COUNT>::start(const Container &buffers)
     for (auto iter = std::begin(m_labels); iter != std::end(m_labels); iter++)
     {
         tft.drawFastHLine(m_x+leftMargin-5, float(m_y)+(float(m_height)/(m_labels.size()-1)*std::distance(std::begin(m_labels), iter)), 4, TFT_WHITE);
-        iter->start();
+        iter->start(tft);
     }
 
-    render(buffers, false);
+    render(tft, buffers, false);
 }
 
 template<size_t LENGTH, size_t COUNT>
-void Graph<LENGTH, COUNT>::redraw(const Container &buffers)
+void Graph<LENGTH, COUNT>::redraw(TftInterface &tft, const Container &buffers)
 {
-    render(buffers, true);
+    render(tft, buffers, true);
 }
 
 template<size_t LENGTH, size_t COUNT>
-void Graph<LENGTH, COUNT>::render(const Container &buffers, bool delta)
+void Graph<LENGTH, COUNT>::render(TftInterface &tft, const Container &buffers, bool delta)
 {
     float min{std::numeric_limits<float>::quiet_NaN()}, max{std::numeric_limits<float>::quiet_NaN()};
     bool first{true};
@@ -113,10 +115,8 @@ void Graph<LENGTH, COUNT>::render(const Container &buffers, bool delta)
     if (m_min < 0 && m_max < 0)
         m_max = 0;
 
-    tft.setTextFont(2);
-    tft.setTextColor(TFT_WHITE, TFT_BLACK);
     for (auto iter = std::begin(m_labels); iter != std::end(m_labels); iter++)
-        iter->redraw(std::to_string(int(m_max+((m_min-m_max)/(m_labels.size()-1)*std::distance(std::begin(m_labels), iter)))));
+        iter->redraw(tft, std::to_string(int(m_max+((m_min-m_max)/(m_labels.size()-1)*std::distance(std::begin(m_labels), iter)))), TFT_WHITE, TFT_BLACK, 2);
 
     int x{leftMargin};
     for (auto pixelsIter = std::begin(m_lastPixels); pixelsIter!=std::end(m_lastPixels); pixelsIter++)

src/widgets/iconwidget.cpp

@@ -0,0 +1,68 @@
+#include "iconwidget.h"
+
+namespace espgui {
+void IconWidget::start(TftInterface &tft)
+{
+    m_lastIcon = nullptr;
+}
+
+void IconWidget::start(TftInterface &tft, const int32_t iconWidth, const int32_t iconHeight, const uint16_t *icon)
+{
+    if (m_iconWidth != iconWidth || m_iconHeight != iconHeight)
+    {
+        ESP_LOGE(TAG, "Icon size mismatch: %dx%d vs %ldx%ld", m_iconWidth, m_iconHeight, iconWidth, iconHeight);
+        return;
+    }
+
+    m_lastIcon = icon;
+
+    if (icon)
+        tft.pushImage(m_x, m_y, m_iconWidth, m_iconHeight, icon);
+}
+
+void IconWidget::redraw(TftInterface &tft, const int32_t iconWidth, const int32_t iconHeight, const uint16_t *icon, uint16_t bgcolor, bool forceRedraw)
+{
+    if (m_iconWidth != iconWidth || m_iconHeight != iconHeight)
+    {
+        ESP_LOGE(TAG, "Icon size mismatch: %dx%d vs %ldx%ld", m_iconWidth, m_iconHeight, iconWidth, iconHeight);
+        return;
+    }
+
+    if (forceRedraw || m_lastIcon != icon)
+    {
+        if (icon)
+            tft.pushImage(m_x, m_y, m_iconWidth, m_iconHeight, icon);
+        else if (m_lastIcon)
+            tft.fillRect(m_x, m_y, m_iconWidth, m_iconHeight, bgcolor);
+
+        m_lastIcon = icon;
+    }
+}
+
+void IconWidget::redraw(TftInterface &tft, const int32_t iconWidth, const int32_t iconHeight, const uint16_t *icon, bool forceRedraw)
+{
+    redraw(tft, iconWidth, iconHeight, icon, m_bgcolor, forceRedraw);
+}
+
+void IconWidget::clear(TftInterface &tft, uint16_t bgcolor)
+{
+    if (m_lastIcon)
+        tft.fillRect(m_x, m_y, m_iconWidth, m_iconHeight, bgcolor);
+
+    m_lastIcon = nullptr;
+}
+
+void IconWidget::clear(TftInterface &tft)
+{
+    clear(tft, m_bgcolor);
+}
+
+IconWidget::IconWidget(int x, int y, int iconWidth, int iconHeight, uint16_t bgcolor):
+        m_x{x},
+        m_y{y},
+        m_iconWidth{iconWidth},
+        m_iconHeight{iconHeight},
+        m_bgcolor{bgcolor},
+        m_lastIcon{nullptr}
+{}
+} // namespace espgui

src/widgets/iconwidget.h

@@ -0,0 +1,46 @@
+#pragma once
+
+// esp-idf includes
+#include <esp_log.h>
+
+// local includes
+#include "icon.h"
+#include "tftcolors.h"
+#include "tftinterface.h"
+
+namespace espgui {
+
+class IconWidget
+{
+    static constexpr const char * const TAG = "IconWidget";
+public:
+    IconWidget(int x, int y, int iconWidth, int iconHeight, uint16_t bgcolor = espgui::TFT_BLACK);
+
+    void start(TftInterface &tft);
+
+    void start(TftInterface &tft, int32_t iconWidth, int32_t iconHeight, const uint16_t *icon);
+
+    void redraw(TftInterface &tft, int32_t iconWidth, int32_t iconHeight, const uint16_t *icon, uint16_t bgcolor, bool forceRedraw = false);
+
+    void redraw(TftInterface &tft, int32_t iconWidth, int32_t iconHeight, const uint16_t *icon, bool forceRedraw = false);
+
+    void clear(espgui::TftInterface &tft, uint16_t bgcolor);
+
+    void clear(espgui::TftInterface &tft);
+
+    int x() const { return m_x; }
+
+    int y() const { return m_y; }
+
+private:
+    const int m_x;
+    const int m_y;
+    const int m_iconWidth;
+    const int m_iconHeight;
+
+    uint16_t m_bgcolor;
+
+    const uint16_t *m_lastIcon;
+};
+
+} // namespace espgui

src/widgets/label.cpp

@@ -1,7 +1,10 @@
 #include "label.h"
 
+// 3rdparty lib includes
+#include <fontrenderer.h>
+
 // local includes
-#include "tftinstance.h"
+#include "tftinterface.h"
 #include "richtextrenderer.h"
 
 namespace espgui {
@@ -11,7 +14,7 @@ Label::Label(int x, int y) :
 {
 }
 
-void Label::start()
+void Label::start(TftInterface &tft)
 {
     m_lastStr.clear();
     m_lastFont = -1;
@@ -21,40 +24,46 @@ void Label::start()
     m_lastHeight = 0;
 }
 
-void Label::redraw(std::string_view str, bool forceRedraw)
+void Label::redraw(TftInterface &tft, std::string_view str, uint16_t color, uint16_t bgcolor, uint8_t font, bool forceRedraw)
+{
+    espgui::FontRenderer fontRenderer{tft};
+    redraw(tft, fontRenderer, str, color, bgcolor, font, forceRedraw);
+}
+
+void Label::redraw(TftInterface &tft, FontRenderer &fontRenderer, std::string_view str, uint16_t color, uint16_t bgcolor, uint8_t font, bool forceRedraw)
 {
     if (m_lastStr == str &&
-        m_lastFont == tft.textfont &&
-        m_lastColor == tft.textcolor &&
+        m_lastColor == color &&
+        m_lastFont == font &&
         !forceRedraw)
         return;
 
-    const auto renderedWidth = renderRichText(str, m_x, m_y);
-    const auto renderedHeight = tft.fontHeight();
+    const auto renderedWidth = renderRichText(tft, fontRenderer, str, m_x, m_y, color, bgcolor, font);
+    const auto renderedHeight = fontRenderer.fontHeight(font);
 
     if (renderedWidth < m_lastWidth)
         tft.fillRect(m_x + renderedWidth, m_y,
                      m_lastWidth - renderedWidth, m_lastHeight,
-                     tft.textbgcolor);
+                     bgcolor);
 
     if (renderedHeight < m_lastHeight)
         tft.fillRect(m_x, m_y + renderedHeight,
                      renderedWidth, m_lastHeight - renderedHeight,
-                     tft.textbgcolor);
+                     bgcolor);
 
     m_lastStr = str;
-    m_lastFont = tft.textfont;
-    m_lastColor = tft.textcolor;
+    m_lastColor = color;
+    m_lastFont = font;
 
     m_lastWidth = renderedWidth;
     m_lastHeight = renderedHeight;
 }
 
-void Label::clear()
+void Label::clear(TftInterface &tft, uint16_t bgcolor)
 {
     if (m_lastWidth || m_lastHeight)
-        tft.fillRect(m_x, m_y, m_lastWidth, m_lastHeight, tft.textbgcolor);
+        tft.fillRect(m_x, m_y, m_lastWidth, m_lastHeight, bgcolor);
 
-    start();
+    start(tft);
 }
 }

src/widgets/label.h

@@ -3,26 +3,33 @@
 // system includes
 #include <string>
 
+// forward declares
+namespace espgui {
+class TftInterface;
+class FontRenderer;
+} // namespace espgui
+
 namespace espgui {
 class Label
 {
 public:
     Label(int x, int y);
 
-    int x() const { return m_x; };
-    int y() const { return m_y; };
+    int x() const { return m_x; }
+    int y() const { return m_y; }
 
-    void start();
-    void redraw(std::string_view str, bool forceRedraw = false);
-    void clear();
+    void start(TftInterface &tft);
+    void redraw(TftInterface &tft, std::string_view str, uint16_t color, uint16_t bgcolor, uint8_t font, bool forceRedraw = false);
+    void redraw(TftInterface &tft, FontRenderer &fontRenderer, std::string_view str, uint16_t color, uint16_t bgcolor, uint8_t font, bool forceRedraw = false);
+    void clear(TftInterface &tft, uint16_t bgcolor);
 
 private:
     const int m_x;
     const int m_y;
 
     std::string m_lastStr;
-    int m_lastFont;
-    int m_lastColor;
+    uint16_t m_lastColor;
+    uint8_t m_lastFont;
 
     int m_lastWidth;
     int m_lastHeight;

src/widgets/progressbar.cpp

@@ -4,29 +4,49 @@
 #include <cpputils.h>
 
 // local includes
-#include "tftinstance.h"
+#include "tftinterface.h"
+#include "tftcolors.h"
 
 namespace espgui {
-ProgressBar::ProgressBar(int x, int y, int width, int height, int min, int max, uint32_t color) :
-    m_x{x}, m_y{y}, m_width{width}, m_height{height}, m_min{min}, m_max{max}, m_color{color}
+ProgressBar::ProgressBar(int x, int y, int width, int height, int min, int max, uint32_t color, uint32_t backgroundColor) :
+    m_x{x}, m_y{y}, m_width{width}, m_height{height}, m_min{min}, m_max{max}, m_color{color}, m_backgroundColor{backgroundColor}
 {
 }
 
-void ProgressBar::start()
+void ProgressBar::start(TftInterface &tft)
 {
     m_lastValue = m_x+1;
     tft.drawRect(m_x, m_y, m_width, m_height, TFT_WHITE);
+    tft.fillRect(m_x+1, m_y+1, m_width-2, m_height-2, m_backgroundColor);
 }
 
-void ProgressBar::redraw(int value)
+void ProgressBar::redraw(TftInterface &tft, int value)
 {
     value = cpputils::mapValueClamped(value, m_min, m_max, m_x+1, m_x+m_width-1);
 
     if (value < m_lastValue)
-        tft.fillRect(value, m_y+1, m_lastValue-value, m_height-2, TFT_BLACK);
+        tft.fillRect(value, m_y+1, m_lastValue-value, m_height-2, m_backgroundColor);
     else if (value > m_lastValue)
         tft.fillRect(m_lastValue, m_y+1, value-m_lastValue, m_height-2, m_color);
 
     m_lastValue = value;
 }
+
+void ProgressBar::changeColor(TftInterface &tft, const uint32_t color, const uint32_t backgroundColor)
+{
+    if (color != m_color)
+    {
+        // redraw already drawn area in new color
+        tft.fillRect(m_x+1, m_y+1, m_lastValue-m_x-1, m_height-2, color);
+        m_color = color;
+    }
+
+    if (backgroundColor != m_backgroundColor)
+    {
+        // redraw background in new color
+        tft.fillRect(m_x+1, m_y+1, m_width-2, m_height-2, backgroundColor);
+        m_backgroundColor = backgroundColor;
+    }
+}
+
 } // namespace espgui

src/widgets/progressbar.h

@@ -6,14 +6,22 @@
 // 3rdparty lib includes
 #include <TFT_eSPI.h>
 
+// local includes
+#include "tftcolors.h"
+
+// forward declares
+namespace espgui { class TftInterface; }
+
 namespace espgui {
 class ProgressBar
 {
 public:
-    ProgressBar(int x, int y, int width, int height, int min, int max, uint32_t color=TFT_YELLOW);
+    ProgressBar(int x, int y, int width, int height, int min, int max, uint32_t color = TFT_YELLOW, uint32_t backgroundColor = TFT_BLACK);
 
-    void start();
-    void redraw(int value);
+    void start(TftInterface &tft);
+    void redraw(TftInterface &tft, int value);
+
+    void changeColor(TftInterface &tft, const uint32_t color = TFT_YELLOW, const uint32_t backgroundColor = TFT_BLACK);
 
 private:
     const int m_x;
@@ -22,7 +30,8 @@ private:
     const int m_height;
     const int m_min;
     const int m_max;
-    const uint32_t m_color;
+    uint32_t m_color;
+    uint32_t m_backgroundColor;
 
     int m_lastValue{};
 };

src/widgets/reverseprogressbar.cpp

@@ -4,7 +4,8 @@
 #include <cpputils.h>
 
 // local includes
-#include "tftinstance.h"
+#include "tftinterface.h"
+#include "tftcolors.h"
 
 namespace espgui {
 ReverseProgressBar::ReverseProgressBar(int x, int y, int width, int height, int min, int max, uint32_t color) :
@@ -12,13 +13,13 @@ ReverseProgressBar::ReverseProgressBar(int x, int y, int width, int height, int
 {
 }
 
-void ReverseProgressBar::start()
+void ReverseProgressBar::start(TftInterface &tft)
 {
     m_lastValue = m_x+m_width-1;
     tft.drawRect(m_x, m_y, m_width, m_height, TFT_WHITE);
 }
 
-void ReverseProgressBar::redraw(int value)
+void ReverseProgressBar::redraw(TftInterface &tft, int value)
 {
     value = cpputils::mapValueClamped(value, m_min, m_max, m_x+m_width-1, m_x+1);
 

src/widgets/reverseprogressbar.h

@@ -6,14 +6,20 @@
 // 3rdparty lib includes
 #include <TFT_eSPI.h>
 
+// local includes
+#include "tftcolors.h"
+
+// forward declares
+namespace espgui { class TftInterface; }
+
 namespace espgui {
 class ReverseProgressBar
 {
 public:
     ReverseProgressBar(int x, int y, int width, int height, int min, int max, uint32_t color=TFT_YELLOW);
 
-    void start();
-    void redraw(int value);
+    void start(TftInterface &tft);
+    void redraw(TftInterface &tft, int value);
 
 private:
     const int m_x;

src/widgets/slider.cpp

@@ -4,7 +4,8 @@
 #include <cpputils.h>
 
 // local includes
-#include "tftinstance.h"
+#include "tftinterface.h"
+#include "tftcolors.h"
 
 namespace espgui {
 Slider::Slider(int x, int y, int width, int height, int min, int max, uint32_t leftColor, uint32_t rightColor, uint32_t lineColor) :
@@ -19,14 +20,14 @@ Slider::Slider(int x, int y, int width, int height, int min, int max, uint32_t l
     m_lineColor{lineColor}
 {}
 
-void Slider::start()
+void Slider::start(TftInterface &tft)
 {
     m_lastValue = m_x+1;
     tft.drawRect(m_x, m_y, m_width, m_height, TFT_WHITE);
     tft.fillRect(m_x+1, m_y+1, m_width-2, m_height-2, m_rightColor);
 }
 
-void Slider::redraw(int value)
+void Slider::redraw(TftInterface &tft, int value)
 {
     // slider with 1 pixel white line at position of value (mapped). Left side of line is leftColor, right side is rightColor
     value = cpputils::mapValueClamped(value, m_min, m_max, m_x+1, m_x+m_width-1);

src/widgets/slider.h

@@ -6,14 +6,20 @@
 // 3rdparty lib includes
 #include <TFT_eSPI.h>
 
+// local includes
+#include "tftcolors.h"
+
+// forward declares
+namespace espgui { class TftInterface; }
+
 namespace espgui {
 class Slider
 {
 public:
     Slider(int x, int y, int width, int height, int min, int max, uint32_t leftColor = color565(180, 180, 0), uint32_t rightColor = TFT_YELLOW, uint32_t lineColor = TFT_BLACK);
 
-    void start();
-    void redraw(int value);
+    void start(TftInterface &tft);
+    void redraw(TftInterface &tft, int value);
 
 private:
     const int m_x;

src/widgets/variablerangeprogressbar.cpp

@@ -0,0 +1,33 @@
+#include "variablerangeprogressbar.h"
+
+// 3rdparty lib includes
+#include <cpputils.h>
+
+// local includes
+#include "tftinterface.h"
+#include "tftcolors.h"
+
+namespace espgui {
+VariableRangeProgressBar::VariableRangeProgressBar(int x, int y, int width, int height, int min, int max, uint32_t color) :
+    m_x{x}, m_y{y}, m_width{width}, m_height{height}, m_min{min}, m_max{max}, m_color{color}
+{
+}
+
+void VariableRangeProgressBar::start(TftInterface &tft)
+{
+    m_lastValue = m_x+1;
+    tft.drawRect(m_x, m_y, m_width, m_height, TFT_WHITE);
+}
+
+void VariableRangeProgressBar::redraw(TftInterface &tft, int value)
+{
+    value = cpputils::mapValueClamped(value, m_min, m_max, m_x+1, m_x+m_width-1);
+
+    if (value < m_lastValue)
+        tft.fillRect(value, m_y+1, m_lastValue-value, m_height-2, TFT_BLACK);
+    else if (value > m_lastValue)
+        tft.fillRect(m_lastValue, m_y+1, value-m_lastValue, m_height-2, m_color);
+
+    m_lastValue = value;
+}
+} // namespace espgui

src/widgets/variablerangeprogressbar.h

@@ -0,0 +1,42 @@
+#pragma once
+
+// system includes
+#include <cstdint>
+
+// 3rdparty lib includes
+#include <TFT_eSPI.h>
+
+// local includes
+#include "tftcolors.h"
+
+// forward declares
+namespace espgui { class TftInterface; }
+
+namespace espgui {
+class VariableRangeProgressBar
+{
+public:
+    VariableRangeProgressBar(int x, int y, int width, int height, int min, int max, uint32_t color = TFT_YELLOW);
+
+    void start(TftInterface &tft);
+    void redraw(TftInterface &tft, int value);
+
+    void setMin(int min) { m_min = min; }
+    void setMax(int max) { m_max = max; }
+    void setMinMax(int min, int max) { m_min = min; m_max = max; }
+
+    int getMin() const { return m_min; }
+    int getMax() const { return m_max; }
+
+private:
+    const int m_x;
+    const int m_y;
+    const int m_width;
+    const int m_height;
+    int m_min;
+    int m_max;
+    const uint32_t m_color;
+
+    int m_lastValue{};
+};
+} // namespace espgui

src/widgets/variablerangereverseprogressbar.cpp

@@ -0,0 +1,33 @@
+#include "variablerangereverseprogressbar.h"
+
+// 3rdparty lib includes
+#include <cpputils.h>
+
+// local includes
+#include "tftinterface.h"
+#include "tftcolors.h"
+
+namespace espgui {
+VariableRangeReverseProgressBar::VariableRangeReverseProgressBar(int x, int y, int width, int height, int min, int max, uint32_t color) :
+    m_x{x}, m_y{y}, m_width{width}, m_height{height}, m_min{min}, m_max{max}, m_color{color}
+{
+}
+
+void VariableRangeReverseProgressBar::start(TftInterface &tft)
+{
+    m_lastValue = m_x+m_width-1;
+    tft.drawRect(m_x, m_y, m_width, m_height, TFT_WHITE);
+}
+
+void VariableRangeReverseProgressBar::redraw(TftInterface &tft, int value)
+{
+    value = cpputils::mapValueClamped(value, m_min, m_max, m_x+m_width-1, m_x+1);
+
+    if (value < m_lastValue)
+        tft.fillRect(value, m_y+1, m_lastValue-value, m_height-2, m_color);
+    else if (value > m_lastValue)
+        tft.fillRect(m_lastValue, m_y+1, value-m_lastValue, m_height-2, TFT_BLACK);
+
+    m_lastValue = value;
+}
+} // namespace espgui

src/widgets/variablerangereverseprogressbar.h

@@ -0,0 +1,42 @@
+#pragma once
+
+// system includes
+#include <cstdint>
+
+// 3rdparty lib includes
+#include <TFT_eSPI.h>
+
+// local includes
+#include "tftcolors.h"
+
+// forward declares
+namespace espgui { class TftInterface; }
+
+namespace espgui {
+class VariableRangeReverseProgressBar
+{
+public:
+    VariableRangeReverseProgressBar(int x, int y, int width, int height, int min, int max, uint32_t color=TFT_YELLOW);
+
+    void start(TftInterface &tft);
+    void redraw(TftInterface &tft, int value);
+
+    void setMin(int min) { m_min = min; }
+    void setMax(int max) { m_max = max; }
+    void setMinMax(int min, int max) { m_min = min; m_max = max; }
+
+    int getMin() const { return m_min; }
+    int getMax() const { return m_max; }
+
+private:
+    const int m_x;
+    const int m_y;
+    const int m_width;
+    const int m_height;
+    int m_min;
+    int m_max;
+    const uint32_t m_color;
+
+    int m_lastValue{};
+};
+} // namespace espgui

src/widgets/verticalmeter.cpp

@@ -2,9 +2,11 @@
 
 // 3rdparty lib includes
 #include <cpputils.h>
+#include <fontrenderer.h>
 
 // local includes
-#include "tftinstance.h"
+#include "tftinterface.h"
+#include "tftcolors.h"
 
 namespace espgui {
 VerticalMeter::VerticalMeter(const char *text, const char *format, int x, int y) :
@@ -12,13 +14,14 @@ VerticalMeter::VerticalMeter(const char *text, const char *format, int x, int y)
 {
 }
 
-void VerticalMeter::start()
+void VerticalMeter::start(TftInterface &tft)
 {
+    FontRenderer fontRenderer{tft};
+
     int w = 36;
     tft.drawRect(m_x, m_y, w, 155, TFT_GREY);
     tft.fillRect(m_x + 2, m_y + 19, w - 3, 155 - 38, TFT_WHITE);
-    tft.setTextColor(TFT_CYAN, TFT_BLACK);
-    tft.drawCentreString(m_text, m_x + w / 2, m_y + 2, 2);
+    fontRenderer.drawCentreString(m_text, m_x + w / 2, m_y + 2, TFT_CYAN, TFT_BLACK, 2);
 
     for (int i = 0; i < 110; i += 10)
         tft.drawFastHLine(m_x + 20, m_y + 27 + i, 6, TFT_BLACK);
@@ -29,16 +32,16 @@ void VerticalMeter::start()
     tft.fillTriangle(m_x + 3, m_y + 127, m_x + 3 + 16, m_y + 127, m_x + 3, m_y + 127 - 5, TFT_RED);
     tft.fillTriangle(m_x + 3, m_y + 127, m_x + 3 + 16, m_y + 127, m_x + 3, m_y + 127 + 5, TFT_RED);
 
-    tft.drawCentreString("---", m_x + w / 2, m_y + 155 - 18, 2);
+    fontRenderer.drawCentreString("---", m_x + w / 2, m_y + 155 - 18, TFT_CYAN, TFT_BLACK, 2);
 }
 
-void VerticalMeter::redraw(float value, float min, float max)
+void VerticalMeter::redraw(TftInterface &tft, float value, float min, float max)
 {
-    tft.setTextColor(TFT_GREEN, TFT_BLACK);
+    FontRenderer fontRenderer{tft};
 
     char buf[16];
     snprintf(&buf[0], 16, m_format, value);
-    tft.drawRightString(buf, m_x + 36 - 5, 187 - 27 + 155 - 18, 2);
+    fontRenderer.drawRightString(buf, m_x + 36 - 5, 187 - 27 + 155 - 18, TFT_GREEN, TFT_BLACK, 2);
 
     const int dx = 3 + m_x;
     value = cpputils::mapValueClamped<float>(value, min, max, 0.f, 100.f);

src/widgets/verticalmeter.h

@@ -3,14 +3,17 @@
 // system includes
 #include <cstdint>
 
+// forward declares
+namespace espgui { class TftInterface; }
+
 namespace espgui {
 class VerticalMeter
 {
 public:
     VerticalMeter(const char *text, const char *format, int x, int y);
 
-    void start();
-    void redraw(float value, float min, float max);
+    void start(TftInterface &tft);
+    void redraw(TftInterface &tft, float value, float min, float max);
 
 private:
     const char * const m_text;

src/widgets/vumeter.cpp

@@ -2,17 +2,21 @@
 
 // system includes
 #include <cmath>
+#include <cstring>
 
 // 3rdparty lib includes
 #include <cpputils.h>
-#include <stdlib_noniso.h>
+#include <fontrenderer.h>
 
 // local includes
-#include "tftinstance.h"
+#include "tftinterface.h"
+#include "tftcolors.h"
 
 namespace espgui {
-void VuMeter::start()
+void VuMeter::start(TftInterface &tft)
 {
+    FontRenderer fontRenderer{tft};
+
     ltx = 0;
     osx = 120;
     osy = 120;
@@ -21,8 +25,6 @@ void VuMeter::start()
     tft.fillRect(0, 0, 239, 126, TFT_GREY);
     tft.fillRect(5, 3, 230, 119, TFT_WHITE);
 
-    tft.setTextColor(TFT_BLACK);    // Text colour
-
     // Draw ticks every 5 degrees from -50 to +50 degrees (100 deg. FSD swing)
     for (int i = -50; i < 51; i += 5) {
         // Long scale tick length
@@ -80,11 +82,11 @@ void VuMeter::start()
             x0 = sx * (100 + tl + 10) + 120;
             y0 = sy * (100 + tl + 10) + 140;
             switch (i / 25) {
-                case -2: tft.drawCentreString("0", x0, y0 - 12, 2); break;
-                case -1: tft.drawCentreString("7.5", x0, y0 - 9, 2); break;
-                case 0: tft.drawCentreString("15", x0, y0 - 6, 2); break;
-                case 1: tft.drawCentreString("22.5", x0, y0 - 9, 2); break;
-                case 2: tft.drawCentreString("30", x0, y0 - 12, 2); break;
+                case -2: fontRenderer.drawCentreString("0", x0, y0 - 12, TFT_BLACK, TFT_BLACK, 2); break;
+                case -1: fontRenderer.drawCentreString("7.5", x0, y0 - 9, TFT_BLACK, TFT_BLACK, 2); break;
+                case 0: fontRenderer.drawCentreString("15", x0, y0 - 6, TFT_BLACK, TFT_BLACK, 2); break;
+                case 1: fontRenderer.drawCentreString("22.5", x0, y0 - 9, TFT_BLACK, TFT_BLACK, 2); break;
+                case 2: fontRenderer.drawCentreString("30", x0, y0 - 12, TFT_BLACK, TFT_BLACK, 2); break;
             }
         }
 
@@ -97,16 +99,92 @@ void VuMeter::start()
         if (i < 50) tft.drawLine(x0, y0, x1, y1, TFT_BLACK);
     }
 
-    tft.drawString("KM/h", 5 + 230 - 40, 119 - 20, 2); // Units at bottom right
-    tft.drawCentreString("KM/h", 120, 70, 4); // Comment out to avoid font 4
+    fontRenderer.drawString("KM/h", 5 + 230 - 40, 119 - 20, TFT_BLACK, TFT_BLACK, 2); // Units at bottom right
+    fontRenderer.drawCentreString("KM/h", 120, 70, TFT_BLACK, TFT_BLACK, 4); // Comment out to avoid font 4
     tft.drawRect(5, 3, 230, 119, TFT_BLACK); // Draw bezel line
 }
 
-void VuMeter::redraw(float value)
+namespace {
+char * dtostrf(double number, signed char width, unsigned char prec, char *s) {
+    bool negative = false;
+
+    if (std::isnan(number)) {
+        std::strcpy(s, "nan");
+        return s;
+    }
+    if (std::isinf(number)) {
+        std::strcpy(s, "inf");
+        return s;
+    }
+
+    char* out = s;
+
+    int fillme = width; // how many cells to fill for the integer part
+    if (prec > 0) {
+        fillme -= (prec+1);
+    }
+
+    // Handle negative numbers
+    if (number < 0.0) {
+        negative = true;
+        fillme--;
+        number = -number;
+    }
+
+    // Round correctly so that print(1.999, 2) prints as "2.00"
+    // I optimized out most of the divisions
+    double rounding = 2.0;
+    for (uint8_t i = 0; i < prec; ++i)
+        rounding *= 10.0;
+    rounding = 1.0 / rounding;
+
+    number += rounding;
+
+    // Figure out how big our number really is
+    double tenpow = 1.0;
+    int digitcount = 1;
+    while (number >= 10.0 * tenpow) {
+        tenpow *= 10.0;
+        digitcount++;
+    }
+
+    number /= tenpow;
+    fillme -= digitcount;
+
+    // Pad unused cells with spaces
+    while (fillme-- > 0) {
+        *out++ = ' ';
+    }
+
+    // Handle negative sign
+    if (negative) *out++ = '-';
+
+    // Print the digits, and if necessary, the decimal point
+    digitcount += prec;
+    int8_t digit = 0;
+    while (digitcount-- > 0) {
+        digit = (int8_t)number;
+        if (digit > 9) digit = 9; // insurance
+        *out++ = (char)('0' | digit);
+        if ((digitcount == prec) && (prec > 0)) {
+            *out++ = '.';
+        }
+        number -= digit;
+        number *= 10.0;
+    }
+
+    // make sure the string is terminated
+    *out = 0;
+    return s;
+}
+}
+
+void VuMeter::redraw(TftInterface &tft, float value)
 {
-    tft.setTextColor(TFT_BLACK, TFT_WHITE);
+    FontRenderer fontRenderer{tft};
+
     char buf[8]; dtostrf(value, 4, 0, buf);
-    tft.drawRightString(buf, 50, 119 - 25, 4);
+    fontRenderer.drawRightString(buf, 50, 119 - 25, TFT_BLACK, TFT_WHITE, 4);
 
     if (value < -3) value = -3; // Limit value to emulate needle end stops
     if (value > 33) value = 33;
@@ -125,8 +203,7 @@ void VuMeter::redraw(float value)
     tft.drawLine(120 + 20 * ltx + 1, 140 - 20, osx + 1, osy, TFT_WHITE);
 
     // Re-plot text under needle
-    tft.setTextColor(TFT_BLACK);
-    tft.drawCentreString("KM/h", 120, 70, 4); // // Comment out to avoid font 4
+    fontRenderer.drawCentreString("KM/h", 120, 70, TFT_BLACK, TFT_BLACK, 4); // // Comment out to avoid font 4
 
     // Store new needle end coords for next erase
     ltx = tx;

src/widgets/vumeter.h

@@ -3,12 +3,15 @@
 // system includes
 #include <cstdint>
 
+// forward declares
+namespace espgui { class TftInterface; }
+
 namespace espgui {
 class VuMeter
 {
 public:
-    void start();
-    void redraw(float value);
+    void start(TftInterface &tft);
+    void redraw(TftInterface &tft, float value);
 
 private:
     float ltx;         // Saved x coord of bottom of needle