WIP scrollable label

Added setTextSize()

.gitignore

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

CMakeLists.txt

@@ -30,6 +30,7 @@ set(headers
     src/graphdisplay.h
     src/icon.h
     src/iconinterface.h
+    src/keyboardhelper.h
     src/icons/back.h
     src/icons/checked.h
     src/icons/unchecked.h
@@ -45,7 +46,9 @@ set(headers
     src/splitgraphdisplay.h
     src/textinterface.h
     src/textwithvaluehelper.h
-    src/tftinstance.h
+    src/tftcolors.h
+    src/tftespiimpl.h
+    src/tftinterface.h
     src/visibleinterface.h
     src/widgets/graph.h
     src/widgets/label.h
@@ -74,7 +77,6 @@ set(sources
     src/splitgraphdisplay.cpp
     src/popupdisplay.cpp
     src/richtextrenderer.cpp
-    src/tftinstance.cpp
     src/icons/back.cpp
     src/icons/checked.cpp
     src/icons/unchecked.cpp

Kconfig.projbuild

@@ -4,4 +4,8 @@ config ESPGUI_MENUDISPLAY_ROWS
     int "Number of rows for MenuDisplays"
     default 10
 
+config ESPGUI_ICONS_SWAPBYTES
+    bool "Swap bytes in icons"
+    default n
+
 endmenu

converticons.sh

@@ -0,0 +1,6 @@
+#!/bin/bash
+
+for i in icons/*
+do
+    build-iconconvert-Desktop_Qt_6_4_0-Debug/iconconvert $i src/icons/ icon_templ.h.tmpl icon_templ.cpp.tmpl
+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/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,190 @@
+#include <QCoreApplication>
+#include <QCommandLineParser>
+#include <QCommandLineOption>
+#include <QFileInfo>
+#include <QImage>
+#include <QDir>
+#include <QDebug>
+
+namespace {
+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.green(), color.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", QCoreApplication::translate("main", "Icon file."));
+    parser.addPositionalArgument("destination", QCoreApplication::translate("main", "Destination directory."));
+    parser.addPositionalArgument("header-templ", QCoreApplication::translate("main", "Header template"));
+    parser.addPositionalArgument("footer-templ", QCoreApplication::translate("main", "Footer template"));
+
+    parser.process(app);
+
+    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.pixel(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;
+        }
+    }
+
+    {
+        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(fileInfo.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}", fileInfo.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(fileInfo.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}", fileInfo.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() << fileInfo.baseName() << image.width() << image.height();
+
+    return 0;
+}

src/accessorinterface.h

@@ -1,5 +1,8 @@
 #pragma once
 
+// system includes
+#include <string>
+
 // 3rdparty lib includes
 #include <tl/expected.hpp>
 

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/changevaluedisplay.cpp

@@ -3,29 +3,38 @@
 // 3rdparty lib includes
 #include <fmt/core.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();
+    tft.drawRoundRect(35, 65, 190, 65, 8, 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);
+    if (espgui::isLandscape(tft))
+    {
+        tft.drawString("Change value and press", 10, 152, TFT_WHITE, TFT_BLACK, 4);
+        tft.drawString("button to confirm and", 10, 177, TFT_WHITE, TFT_BLACK, 4);
+        tft.drawString("go back", 10, 202, TFT_WHITE, TFT_BLACK, 4);
+    }
+    else
+    {
+        tft.drawString("Change value and", 10, 160, TFT_WHITE, TFT_BLACK, 4);
+        tft.drawString("press button to", 10, 185, TFT_WHITE, TFT_BLACK, 4);
+        tft.drawString("confirm and go", 10, 210, TFT_WHITE, TFT_BLACK, 4);
+        tft.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, fmt::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,7 +38,7 @@ 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>
@@ -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_chrono.h

@@ -8,6 +8,8 @@
 
 // local includes
 #include "changevaluedisplay.h"
+#include "tftinterface.h"
+#include "tftcolors.h"
 #include "displaywithtitle.h"
 #include "confirminterface.h"
 #include "backinterface.h"
@@ -29,9 +31,9 @@ class ChangeValueDisplayChrono :
 
 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;
@@ -40,7 +42,7 @@ private:
     T m_value;
     bool m_pressed{};
 
-    Label m_valueLabel{26, 81}; // 188, 53
+    Label m_valueLabel{36, 71}; // 188, 53
 };
 
 template<typename T>
@@ -54,19 +56,26 @@ 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();
+    tft.drawRoundRect(32, 65, 190, 34, 8, 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);
+    if (espgui::isLandscape(tft))
+    {
+        tft.drawString("Change value and press", 10, 152, TFT_WHITE, TFT_BLACK, 4);
+        tft.drawString("button to confirm and", 10, 177, TFT_WHITE, TFT_BLACK, 4);
+        tft.drawString("go back", 10, 202, TFT_WHITE, TFT_BLACK, 4);
+    }
+    else
+    {
+        tft.drawString("Change value and", 10, 160, TFT_WHITE, TFT_BLACK, 4);
+        tft.drawString("press button to", 10, 185, TFT_WHITE, TFT_BLACK, 4);
+        tft.drawString("confirm and go", 10, 210, TFT_WHITE, TFT_BLACK, 4);
+        tft.drawString("back.", 10, 235, TFT_WHITE, TFT_BLACK, 4);
+    }
 }
 
 template<typename T>
@@ -80,18 +89,16 @@ void ChangeValueDisplayChrono<T>::update()
         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>

src/changevaluedisplay_daylightsavingmode.cpp

@@ -3,9 +3,6 @@
 // esp-idf includes
 #include <esp_log.h>
 
-// 3rdparty lib includes
-#include <futurecpp.h>
-
 // local includes
 #include "actions/setvalueaction.h"
 #include "actions/backproxyaction.h"

src/changevaluedisplay_ip_address_t.cpp

@@ -1,7 +1,8 @@
 #include "changevaluedisplay_ip_address_t.h"
 
 // local includes
-#include "tftinstance.h"
+#include "tftinterface.h"
+#include "tftcolors.h"
 
 namespace espgui {
 
@@ -14,24 +15,27 @@ 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);
+    tft.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);
+    tft.drawString(".", spacing+boxWidth+spacing/4, y, TFT_WHITE, TFT_BLACK, 4);
+    tft.drawString(".", spacing*2+boxWidth*2+spacing/4, y, TFT_WHITE, TFT_BLACK, 4);
+    tft.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 +47,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 +86,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 +106,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,9 +3,6 @@
 // esp-idf includes
 #include <esp_log.h>
 
-// 3rdparty lib includes
-#include <futurecpp.h>
-
 // local includes
 #include "actions/setvalueaction.h"
 #include "actions/backproxyaction.h"

src/changevaluedisplay_string.cpp

@@ -1,70 +1,82 @@
 #include "changevaluedisplay_string.h"
 
+// 3rdparty lib includes
+#include <espchrono.h>
+
 // local includes
-#include "tftinstance.h"
+#include "tftinterface.h"
+#include "tftcolors.h"
 
 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;
 }
 
-void espgui::ChangeValueDisplay<std::string>::update()
+void espgui::ChangeValueDisplay<std::string>::redraw(TftInterface &tft)
 {
-    Base::update();
+    const auto now = espchrono::millis_clock::now().time_since_epoch().count() / 1000;
+    Base::redraw(tft);
 
-    if (m_pressed)
+    if (m_needsClear)
     {
-        m_pressed = false;
-        if (auto result = this->setValue(m_value); result)
-            confirm();
-        else
-            errorOccured(std::move(result).error());
+        tft.drawRect(m_valueLabel.x() + tft.textWidth(*m_needsClear, 4) + 3, m_valueLabel.y(), 2, tft.fontHeight(4), TFT_BLACK);
+
+        m_needsClear = std::nullopt;
     }
+
+    m_valueLabel.redraw(tft, m_value, TFT_WHITE, TFT_BLACK, 4);
+
+    tft.drawRect(m_valueLabel.x() + tft.textWidth(m_value, 4) + 3, m_valueLabel.y(), 2, tft.fontHeight(4), (now % 1000 < 500) ? TFT_WHITE : TFT_BLACK);
+
+    m_keyboard.redraw(tft);
 }
 
-void espgui::ChangeValueDisplay<std::string>::redraw()
+void espgui::ChangeValueDisplay<std::string>::setShownValue(std::string &&value)
 {
-    Base::redraw();
-
-    tft.setTextColor(TFT_WHITE, TFT_BLACK);
-    tft.setTextFont(4);
-    m_valueLabel.redraw(m_value);
+    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);
-
+    m_keyboard.buttonReleased(button);
     // TODO stop auto scroll
 }
+
+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 (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,27 @@ public:
     const ChangeValueDisplay<std::string> *asChangeValueDisplayString() const override { return this; }
 
     void start() override;
-    void initScreen() override;
-    void update() override;
-    void redraw() override;
+    void initScreen(TftInterface &tft) 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{};
 
-    Label m_valueLabel{26, 81}; // 188, 53
+    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,9 +3,6 @@
 // esp-idf includes
 #include <esp_log.h>
 
-// 3rdparty lib includes
-#include <futurecpp.h>
-
 // local includes
 #include "actions/setvalueaction.h"
 #include "actions/backproxyaction.h"

src/changevaluedisplay_wifi_mode_t.cpp

@@ -3,9 +3,6 @@
 // esp-idf includes
 #include <esp_log.h>
 
-// 3rdparty lib includes
-#include <futurecpp.h>
-
 // local includes
 #include "actions/setvalueaction.h"
 #include "actions/backproxyaction.h"

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,6 +9,7 @@
 
 // forward declares
 namespace espgui {
+class TftInterface;
 class TextInterface;
 class MenuDisplay;
 class ChangeValueDisplayInterface;
@@ -68,13 +69,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() {}

src/displaywithtitle.cpp

@@ -1,25 +1,24 @@
 #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();
+    m_titleLabel.start(tft);
     tft.fillRect(0, 33, tft.width(), 3, TFT_WHITE);
 }
 
-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, text(), TFT_YELLOW, TFT_BLACK, 4);
 }
 
 } // namespace espgui

src/displaywithtitle.h

@@ -17,8 +17,8 @@ public:
     TextInterface *asTextInterface() override { return this; }
     const TextInterface *asTextInterface() const override { return this; }
 
-    void initScreen() override;
-    void redraw() override;
+    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/iconinterface.h

@@ -4,6 +4,7 @@
 #include "icon.h"
 
 namespace espgui {
+
 template<uint16_t width, uint16_t height>
 class IconInterface
 {
@@ -11,10 +12,25 @@ public:
     virtual const Icon<width, height> *icon() const { return nullptr; }
 };
 
+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 StaticIcon : public virtual IconInterface<width, height>
 {
 public:
     virtual const Icon<width, height> *icon() const { return T; }
 };
+
+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 { 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, 0x6c01, 0x4b01, 0x0b01, 0xac01, 0x8c01, 0x8c01, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x4b01, 0x0900, 0x0000,
+    0xd02a, 0x3133, 0xcb00, 0xcd09, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x2b01, 0x0700, 0x0000, 0x6f1a, 0xd75c, 0x965c, 0x0300, 0xed09, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0b01, 0x0600, 0xffff, 0x2f02, 0x1865,
+    0xfb75, 0x965c, 0x0000, 0xb01a, 0x1223, 0xf122, 0xb01a, 0x6f1a, 0x0e0a, 0x6c01, 0x4800, 0xea00, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0a01, 0x2900, 0x0000, 0x2f02, 0x3865, 0x1b76, 0x1b76, 0xd75c, 0x4f02, 0xd022, 0xd022, 0xb01a, 0x6f1a, 0x4f12,
+    0xcd01, 0x2a00, 0x0000, 0x8c01, 0x0700, 0x4b01, 0x0000, 0x0000, 0x0200, 0x0300, 0x2e0a, 0x0000, 0x901a, 0x1865, 0x3c7e, 0x1c76,
+    0x1c76, 0x1c6e, 0xbb65, 0x9a5d, 0x7a5d, 0x3955, 0xf854, 0xb74c, 0x764c, 0xd43b, 0x112b, 0x6f1a, 0x6c01, 0xf543, 0x2b01, 0xa600,
+    0x0600, 0x4f02, 0x0000, 0xf122, 0x1865, 0x3c7e, 0x5c7e, 0x5c76, 0x5c76, 0x3c6e, 0x1c66, 0xfc65, 0xbb5d, 0x9a55, 0x5a4d, 0xf944,
+    0xd844, 0x973c, 0x5644, 0xd43b, 0xf12a, 0xcd09, 0x7c5d, 0xaa00, 0x2f02, 0x0000, 0xf12a, 0x1865, 0x3c86, 0x3c7e, 0x3c6e, 0x3c66,
+    0x3d66, 0x3d5e, 0x1c5e, 0xfc5d, 0xdb55, 0x9b55, 0x5a4d, 0x1945, 0xb83c, 0x7734, 0x3634, 0xf533, 0xd43b, 0xf12a, 0x8c01, 0x0000,
+    0x4b01, 0xb022, 0xb754, 0x9a5d, 0x7a4d, 0x7b3d, 0x7b35, 0x9c2d, 0xdc2d, 0xdc2d, 0xbc2d, 0x7b2d, 0x5a35, 0x5a3d, 0x3a45, 0x1945,
+    0xd83c, 0x7734, 0x3634, 0xd52b, 0xb52b, 0x9433, 0x6f1a, 0x4c01, 0x6b01, 0x901a, 0x3634, 0xd924, 0xd914, 0x1a1d, 0x5b1d, 0x9c1d,
+    0xdd25, 0xdd25, 0x9c1d, 0x5b1d, 0x1a1d, 0xd91c, 0xb81c, 0xb82c, 0xb83c, 0x7734, 0x362c, 0xd52b, 0x9423, 0xd533, 0xf122, 0xcc11,
+    0x2f02, 0x0400, 0xd01a, 0x572c, 0xf924, 0x1a1d, 0x5b1d, 0x7c1d, 0xbc1d, 0xbc25, 0x9c1d, 0x5b1d, 0x1a1d, 0xd91c, 0x981c, 0x5714,
+    0x371c, 0x362c, 0x162c, 0xd523, 0x9423, 0xb523, 0x322b, 0xcd11, 0x0000, 0x0e0a, 0x0000, 0xf122, 0x772c, 0x1a25, 0x3a1d, 0x5b1d,
+    0x7b1d, 0x7b1d, 0x5b1d, 0x3a1d, 0xfa1c, 0xb91c, 0x781c, 0x5714, 0x1614, 0xd513, 0xd523, 0xb523, 0x941b, 0x941b, 0x522b, 0xed11,
+    0x2300, 0x0000, 0x4f0a, 0x0000, 0xf122, 0x9734, 0x1a25, 0x1a1d, 0x3a1d, 0x5b2d, 0x3a2d, 0x1a2d, 0xf924, 0xd924, 0x7814, 0x3714,
+    0xf613, 0xb513, 0x9413, 0x741b, 0x741b, 0x941b, 0x522b, 0xed11, 0x0000, 0x8700, 0x0000, 0x4f12, 0x0000, 0xb01a, 0x9734, 0x1a1d,
+    0xfa1c, 0x9734, 0x321b, 0x7323, 0x9323, 0xd42b, 0x1534, 0x572c, 0xf613, 0x9513, 0x7413, 0x5313, 0x5413, 0x9423, 0x322b, 0xed11,
+    0x0000, 0x0000, 0x0000, 0xea00, 0xea00, 0x0000, 0x6f12, 0x9734, 0xd924, 0x3534, 0x0000, 0x7012, 0x0000, 0x2900, 0xac01, 0xf122,
+    0xf533, 0x9513, 0x5413, 0x3313, 0x330b, 0x9423, 0xf122, 0xb022, 0x0000, 0x0000, 0x0000, 0x0000, 0x0b01, 0x0800, 0x0000, 0x6f1a,
+    0x7734, 0x3534, 0x0600, 0xed09, 0x2700, 0xea00, 0xac01, 0x0000, 0xb022, 0xb42b, 0x330b, 0x3313, 0x340b, 0x732b, 0xb022, 0xad09,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x2b01, 0x0900, 0x0000, 0x901a, 0x5233, 0x4a00, 0xcd09, 0x0000, 0x0000, 0x0a01, 0x2b01,
+    0xcd09, 0x532b, 0x5413, 0x330b, 0x541b, 0x322b, 0x8f22, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x4b01, 0x0b01,
+    0x0700, 0x8d01, 0xac01, 0xac01, 0x0000, 0x0000, 0x0000, 0x4b01, 0xcd09, 0x322b, 0x7413, 0x330b, 0x5323, 0xf12a, 0xea08, 0x0d1a,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xad01, 0xed09, 0xca00, 0x8c01, 0x8c01, 0x0000, 0x0000, 0x0000, 0x8c01,
+    0xed09, 0x532b, 0x5413, 0x531b, 0x322b, 0x4e22, 0x112b, 0x0008, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xa800, 0xed09, 0x2e12, 0x732b, 0x541b, 0x532b, 0xd032, 0xd443, 0x0400, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x4900, 0x1b45,
+    0xb01a, 0xb42b, 0x532b, 0xf032, 0x3a5d, 0x0800, 0xc900, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x8c01, 0x0b01, 0x3233, 0x9333, 0xd02a, 0x3f87, 0x2b01, 0xed11, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0901, 0xad01, 0x8c01,
+    0xb022, 0xf032, 0x1e76, 0x6c01, 0x2e1a, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x4b01, 0x8c01, 0x8c01, 0xcd09, 0x774c, 0x2b01, 0x0e1a, 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/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, 0x9503, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x0000, 0x0000, 0x0000, 0x0000, 0x9603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x9944, 0xddbe, 0xbfef, 0xffff, 0xddbe, 0x3a5d, 0x7603, 0x5603, 0x0000,
+    0x0000, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0xbb7d, 0xffff,
+    0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xbb7d, 0x7603, 0x9503, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x3a65, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0x9944, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0xddbe, 0xffff, 0xffff,
+    0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xddbe, 0x7603, 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, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0xddbe, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xddbe, 0x7703,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x9944, 0xffff, 0xffff,
+    0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0x3a5d, 0x7603, 0x9503, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0xbb85, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xbb85, 0x7603, 0x0000,
+    0x0000, 0x9603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x3a65,
+    0xddbe, 0xffff, 0xbfef, 0xddbe, 0x9944, 0x7603, 0x5603, 0x0000, 0x0000, 0x0000, 0x0000, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603,
+    0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x7603, 0x9503, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 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/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, 0x1074, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073,
+    0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0x0000, 0x0000, 0x0000, 0x0000, 0x1074, 0xf073, 0xf073, 0xd073, 0x1074, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xd073, 0xf073, 0xf073, 0x1074, 0x0000,
+    0x0000, 0xf073, 0xf073, 0x1074, 0xf073, 0xf073, 0xf073, 0xf073, 0x1074, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xf073, 0xf073, 0x9073, 0xf073, 0xf073, 0x1074, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073,
+    0xf073, 0x1074, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xf073, 0xf073,
+    0xf073, 0x1074, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xd073, 0xf073, 0xf073, 0x0000, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073,
+    0xf073, 0xf073, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x1074, 0xf073,
+    0xf073, 0x9073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xf073, 0xf073, 0x1074, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073,
+    0xf073, 0xf073, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xd073, 0xf073,
+    0xf073, 0xf073, 0x1074, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0x1074, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xf073, 0xf073, 0x1074, 0xf073, 0xf073, 0x1074, 0xf073, 0xf073, 0xf073, 0xf073,
+    0x1074, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0xf073, 0xf073, 0x0000,
+    0x0000, 0x1074, 0xf073, 0xf073, 0x1074, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x1074, 0x1074, 0xf073, 0xf073, 0x1074, 0x0000, 0x0000, 0x0000, 0x0000, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073,
+    0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0xf073, 0x1074, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
+    0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 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/keyboardhelper.h

@@ -0,0 +1,378 @@
+#pragma once
+
+// esp-idf includes
+#include <esp_log.h>
+
+// 3rdparty lib includes
+#include <fmt/core.h>
+#include <strutils.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 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{};
+};
+
+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;
+}
+
+template<typename TDisplay>
+void Keyboard<TDisplay>::drawKeyboard(TftInterface &tft, bool dont_draw_string)
+{
+    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);
+    }
+
+#if 0
+    const auto datum = tft.getTextDatum();
+    tft.setTextDatum(MC_DATUM);
+
+    for (size_t i = 0; i < keyboard_lines.size(); i++)
+    {
+        tft.setTextColor(TFT_GREY);
+
+        const int32_t y = m_keyboard_start_y + (i * tft.fontHeight() + 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 = tft.textWidth(_char) + 2;
+            const auto height = tft.fontHeight() + 4;
+            if (char_index == m_char_index)
+                tft.drawRoundRect(x_pos-width/2-1, y_pos-height/2, width+2, height-4, 3, TFT_DARKGREY);
+
+            if (char_index == m_last_char_index)
+            {
+                tft.drawRoundRect(x_pos-width/2-1, y_pos-height/2, width+2, height-4, 3, TFT_BLACK);
+            }
+
+            if (!dont_draw_string || char_index == m_char_index || char_index == m_last_char_index)
+            {
+                if (char_index == m_char_index || char_index == m_last_char_index)
+                    tft.setTextColor(char_index == m_last_char_index ? TFT_GREY : TFT_WHITE);
+
+                tft.drawString(_char, x_pos, y_pos);
+
+                if (char_index == m_char_index)
+                    tft.setTextColor(TFT_GREY);
+            }
+            char_index++;
+        }
+    }
+
+    tft.setTextDatum(datum);
+
+    // 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() * tft.fontHeight(4));
+
+    if (isLandscape(tft))
+    {
+        // align left (SHIFT, SPACE)
+        tft.drawRoundRect(15 - 2, y - 1, tft.textWidth(SHIFT) + 4, tft.fontHeight(4) + 2, 3, TFT_DARKGREY);
+        tft.drawRoundRect(30 + tft.textWidth(SHIFT, 4) - 2, y - 1, tft.textWidth(SPACE, 4) + 4, tft.fontHeight() + 2, 3,
+                          TFT_DARKGREY);
+
+        // align right (BACKSPACE, ENTER); align from tft.width()
+        tft.drawRoundRect(tft.width() - 30 - tft.textWidth(ENTER) - tft.textWidth(BACKSPACE) - 2, y - 1,
+                          tft.textWidth(BACKSPACE) + 4, tft.fontHeight() + 2, 3, TFT_DARKGREY);
+        tft.drawRoundRect(tft.width() - 15 - tft.textWidth(ENTER) - 2, y - 1, tft.textWidth(ENTER) + 4,
+                          tft.fontHeight() + 2, 3, TFT_DARKGREY);
+
+        // if (!dont_draw_string)
+        {
+            // align left (SHIFT, SPACE)
+            if (m_char_index == m_char_length)
+                tft.setTextColor(TFT_BLACK, TFT_WHITE);
+            else
+                tft.setTextColor(TFT_WHITE, TFT_BLACK);
+            tft.drawString(SHIFT, 15, y);
+
+            if (m_char_index == m_char_length + 1)
+                tft.setTextColor(TFT_BLACK, TFT_WHITE);
+            else
+                tft.setTextColor(TFT_WHITE, TFT_BLACK);
+            tft.drawString(SPACE, 30 + tft.textWidth(SHIFT), y);
+
+            // align right (BACKSPACE, ENTER); align from tft.width()
+            if (m_char_index == m_char_length + 2)
+                tft.setTextColor(TFT_BLACK, TFT_WHITE);
+            else
+                tft.setTextColor(TFT_WHITE, TFT_BLACK);
+            tft.drawString(BACKSPACE, tft.width() - 30 - tft.textWidth(ENTER) - tft.textWidth(BACKSPACE), y);
+
+            if (m_char_index == m_char_length + 3)
+                tft.setTextColor(TFT_BLACK, TFT_WHITE);
+            else
+                tft.setTextColor(TFT_WHITE, TFT_BLACK);
+            tft.drawString(ENTER, tft.width() - 15 - tft.textWidth(ENTER), y);
+        }
+    }
+    else
+    {
+        const int32_t y_2 = y + tft.fontHeight() + 4;
+        // align left (SHIFT, SPACE)
+        tft.drawRoundRect(15 - 2,   y - 1, tft.textWidth(SHIFT) + 4, tft.fontHeight() + 2, 3, TFT_DARKGREY);
+        tft.drawRoundRect(15 - 2, y_2 - 1, tft.textWidth(SPACE) + 4, tft.fontHeight() + 2, 3, TFT_DARKGREY);
+
+        // align right (BACKSPACE, ENTER); align from tft.width()
+        tft.drawRoundRect(tft.width() - 15 - tft.textWidth(ENTER) - 2, y - 1, tft.textWidth(ENTER) + 4,
+                          tft.fontHeight() + 2, 3, TFT_DARKGREY);
+        tft.drawRoundRect(tft.width() - 15 - tft.textWidth(BACKSPACE) - 2, y_2 - 1, tft.textWidth(BACKSPACE) + 4,
+                          tft.fontHeight() + 2, 3, TFT_DARKGREY);
+
+        // if (!dont_draw_string)
+        {
+            // align left (SHIFT, SPACE)
+            if (m_char_index == m_char_length)
+                tft.setTextColor(TFT_BLACK, TFT_WHITE);
+            else
+                tft.setTextColor(TFT_WHITE, TFT_BLACK);
+            tft.drawString(SHIFT, 15, y);
+
+            if (m_char_index == m_char_length + 1)
+                tft.setTextColor(TFT_BLACK, TFT_WHITE);
+            else
+                tft.setTextColor(TFT_WHITE, TFT_BLACK);
+            tft.drawString(SPACE, 15, y_2);
+
+            // align right (BACKSPACE, ENTER); align from tft.width()
+            if (m_char_index == m_char_length + 2)
+                tft.setTextColor(TFT_BLACK, TFT_WHITE);
+            else
+                tft.setTextColor(TFT_WHITE, TFT_BLACK);
+            tft.drawString(BACKSPACE, tft.width() - 15 - tft.textWidth(BACKSPACE), y_2);
+
+            if (m_char_index == m_char_length + 3)
+                tft.setTextColor(TFT_BLACK, TFT_WHITE);
+            else
+                tft.setTextColor(TFT_WHITE, TFT_BLACK);
+            tft.drawString(ENTER, tft.width() - 15 - tft.textWidth(ENTER), y);
+        }
+    }
+#endif
+}
+
+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);
+}
+
+template<typename TDisplay>
+void Keyboard<TDisplay>::redraw(TftInterface &tft)
+{
+    if (m_needsStart)
+    {
+        m_needsStart = false;
+        drawKeyboard(tft, true);
+    }
+
+    if (m_needsRedraw)
+    {
+        m_needsRedraw = false;
+        drawKeyboard(tft, true);
+    }
+}
+
+template<typename TDisplay>
+void Keyboard<TDisplay>::buttonPressed(Button button)
+{
+    switch (button)
+    {
+    case Right:
+    {
+        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();
+        }
+        break;
+    }
+    case Left:
+        popScreen();
+        return;
+    case Up:
+        moveSelectorLeft();
+        m_needsRedraw = true;
+        break;
+    case Down:
+        moveSelectorRight();
+        m_needsRedraw = true;
+        break;
+    default:;
+    }
+}
+
+template<typename TDisplay>
+void Keyboard<TDisplay>::buttonReleased(espgui::Button button) {}
+} // namespace espgui

src/menudisplay.cpp

@@ -1,7 +1,12 @@
 #include "menudisplay.h"
 
 // local includes
-#include "tftinstance.h"
+#include "tftinterface.h"
+#include "tftcolors.h"
+
+using namespace std::chrono_literals;
+
+#include "esp_log.h"
 
 namespace espgui {
 void MenuDisplay::start()
@@ -13,14 +18,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,7 +43,20 @@ 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;
@@ -81,7 +102,8 @@ void MenuDisplay::update()
             }
         }
     }
-    else
+
+    if (m_pressed)
     {
         m_pressed = false;
         if (m_selectedIndex >= 0)
@@ -89,12 +111,9 @@ void MenuDisplay::update()
     }
 }
 
-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 +123,43 @@ 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);
     };
 
+    int longestLabelWidth{0};
+
+    runForEveryMenuItem([&](MenuItem &item){
+        if (item.text().size() > longestLabelWidth)
+            longestLabelWidth = item.text().size();
+    });
+
+    if (((espchrono::ago(m_lastScrollTimestamp) > 500ms && m_labelScrollOffset > 0) || (espchrono::ago(m_lastScrollTimestamp) > 1250ms && m_labelScrollOffset == 0)) && longestLabelWidth > 18)
+    {
+        m_lastScrollTimestamp = espchrono::millis_clock::now();
+        m_labelScrollOffset++;
+
+        if (m_labelScrollOffset > longestLabelWidth - 18)
+            m_labelScrollOffset = 0;
+    }
+
+    // ESP_LOGI("MenuDisplay", "m_labelScrollOffset: %d, longestLabelWidth: %d", m_labelScrollOffset, longestLabelWidth);
+
     runForEveryMenuItem([&](MenuItem &item){
         const auto index = i++;
 
         if (!item.visible())
-        {
             return;
-        }
 
         if (index < m_scrollOffset)
             return;
@@ -130,32 +171,66 @@ 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 (relativeIndex != m_highlightedIndex)
+            {
+                drawItemRect(*labelsIter, TFT_GREY);
+                *iconsIter = nullptr;
+                labelsIter->start(tft);
+
+                if (auto icon = item.selectedIcon())
+                {
+#ifdef CONFIG_ESPGUI_ICONS_SWAPBYTES
+                    tft.setSwapBytes(true);
+#endif
+                    tft.pushImage(tft.width() - 6 - icon->WIDTH, labelsIter->y() + 1, icon->WIDTH, icon->HEIGHT,
+                                  icon->buffer);
+#ifdef CONFIG_ESPGUI_ICONS_SWAPBYTES
+                    tft.setSwapBytes(false);
+#endif
+                }
+            }
+        }
+        else if (relativeIndex == m_highlightedIndex)
+        {
+            drawItemRect(*labelsIter, TFT_BLACK);
+            *iconsIter = nullptr;
+            labelsIter->start(tft);
+        }                
+
+        const auto text = item.text();
+        const auto textLength = text.size();
+
+        // labelsIter->redraw(tft, item.text(), item.color(), selected ? TFT_GREY : TFT_BLACK, item.font());
+        if (textLength > 18)
+            labelsIter->redraw(tft, text.substr(std::min<uint>(m_labelScrollOffset, textLength - 18)), item.color(), selected ? TFT_GREY : TFT_BLACK, item.font());
+        else
+            labelsIter->redraw(tft, text, item.color(), selected ? TFT_GREY : TFT_BLACK, item.font());
 
         if (item.icon() != *iconsIter)
         {
-            tft.fillRect(6, labelsIter->y()+1, 24, 24, TFT_BLACK);
-
             auto icon = item.icon();
             if (icon)
             {
+#ifdef CONFIG_ESPGUI_ICONS_SWAPBYTES
                 tft.setSwapBytes(true);
-                tft.pushImage(6, labelsIter->y()+1, icon->WIDTH, icon->HEIGHT, icon->buffer);
+#endif
+                tft.pushImage(6, labelsIter->y() + 1, icon->WIDTH, icon->HEIGHT, icon->buffer);
+#ifdef CONFIG_ESPGUI_ICONS_SWAPBYTES
                 tft.setSwapBytes(false);
+#endif
             }
+            else if (*iconsIter)
+                tft.fillRect(6, labelsIter->y() + 1, 24, 24, selected ? TFT_GREY : TFT_BLACK);
             *iconsIter = icon;
         }
 
-        if (selected && (relativeIndex != m_highlightedIndex))
-        {
-            drawItemRect(*labelsIter, TFT_WHITE);
-        }
+//        if (selected && (relativeIndex != m_highlightedIndex))
+//        {
+//            drawItemRect(*labelsIter, TFT_GREY);
+//        }
 
         labelsIter++;
         iconsIter++;
@@ -168,7 +243,7 @@ void MenuDisplay::redraw()
         if (relativeIndex == m_highlightedIndex)
             drawItemRect(*labelsIter, TFT_BLACK);
 
-        labelsIter->clear();
+        labelsIter->clear(tft, TFT_BLACK);
 
         if (*iconsIter)
         {
@@ -197,14 +272,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;
@@ -146,5 +150,17 @@ 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;
+
+    espchrono::millis_clock::time_point m_lastScrollTimestamp;
+    uint m_labelScrollOffset{0};
 };
 } // namespace espgui

src/menuitem.h

@@ -10,19 +10,26 @@
 #include "scrollinterface.h"
 
 namespace espgui {
-using MenuItemIconInterface = IconInterface<24, 24>;
 
 using MenuItemIcon = Icon<24, 24>;
 
+using MenuItemIconInterface = IconInterface<24, 24>;
+
+using MenuItemSelectedIconInterface = SelectedIconInterface<24, 24>;
+
 template<const MenuItemIcon *T>
 using StaticMenuItemIcon = StaticIcon<24, 24, T>;
 
+template<const MenuItemIcon *T>
+using StaticMenuItemSelectedIcon = StaticSelectedIcon<24, 24, T>;
+
 class MenuItem :
     public virtual ActionInterface,
     public virtual TextInterface,
     public virtual FontInterface,
     public virtual ColorInterface,
     public virtual MenuItemIconInterface,
+    public virtual MenuItemSelectedIconInterface,
     public virtual VisibleInterface,
     public virtual ScrollInterface
 {
@@ -44,8 +51,8 @@ protected:
 };
 
 class EmptyMenuItem :
-        public MenuItem,
-        public EmptyText
+    public MenuItem,
+    public EmptyText
 {
 public:
     void triggered() override {}

src/messagepopupdisplay.cpp

@@ -1,10 +1,16 @@
 #include "messagepopupdisplay.h"
 
+// system includes
+#include <string_view>
+
 // 3rdparty lib includes
-#include <tftinstance.h>
 #include <screenmanager.h>
 #include <cppmacros.h>
 
+// local includes
+#include "tftinterface.h"
+#include "tftcolors.h"
+
 namespace espgui {
 
 MessagePopupDisplay::MessagePopupDisplay(std::string &&message, std::unique_ptr<Display> &&lastDisplay) :
@@ -28,7 +34,7 @@ void MessagePopupDisplay::buttonPressed(Button button)
     }
 }
 
-void MessagePopupDisplay::initOverlay()
+void MessagePopupDisplay::initOverlay(TftInterface &tft)
 {
     const auto leftMargin = 20;
     const auto rightMargin = leftMargin;
@@ -47,10 +53,9 @@ 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)
@@ -61,7 +66,7 @@ void MessagePopupDisplay::initOverlay()
 
         if (c != '\n')
         {
-            const auto addedWidth = tft.drawChar(tft.decodeUTF8(c), x, y, 4);
+            const auto addedWidth = tft.drawString(std::string_view{&c, 1}, x, y, TFT_WHITE, color565(30, 30, 30), 4);
             x += addedWidth;
         }
 
@@ -69,8 +74,6 @@ void MessagePopupDisplay::initOverlay()
             break;
     }
 
-    tft.setTextColor(TFT_BLACK, color565(170, 170, 170));
-
     if constexpr (false)
     {
         tft.drawSunkenRect(leftMargin + 15, bottom - 40,
@@ -80,7 +83,7 @@ void MessagePopupDisplay::initOverlay()
                                    color565(100, 100, 100),
                                    color565(170, 170, 170));
 
-        tft.drawString("Retry", leftMargin + 18, bottom - 37);
+        tft.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 +93,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);
+    tft.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,33 @@ 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::redraw(TftInterface &tft)
+{
+    if (m_wantsClose)
+        closeOverlay(tft);
+    else
+        Base::redraw(tft);
 }
 
 void PopupDisplay::closeOverlay()
+{
+    m_wantsClose = true;
+}
+
+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,13 +15,18 @@ class PopupDisplay : public Display
 public:
     PopupDisplay(std::unique_ptr<Display> &&lastDisplay);
 
-    void initScreen() override;
+    void initScreen(TftInterface &tft) override;
 
-    virtual void initOverlay() = 0;
+    void redraw(TftInterface &tft) override;
+
+    virtual void initOverlay(TftInterface &tft) = 0;
     void closeOverlay();
+    void closeOverlay(TftInterface &tft);
 
 private:
     std::unique_ptr<Display> m_lastDisplay;
+
+    bool m_wantsClose{};
 };
 
 } // namespace espgui

src/richtextrenderer.cpp

@@ -6,6 +6,10 @@
 // 3rdparty lib includes
 #include <strutils.h>
 
+// local includes
+#include "tftinterface.h"
+#include "tftcolors.h"
+
 namespace espgui {
 
 void richTextEscape(std::string &subject)
@@ -18,25 +22,20 @@ 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, 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 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, &poX, &poY, &color, &bgcolor, &font, &width, &fontHeight, &oldFont](std::string_view str) {
+        const auto addedWith = tft.drawString(str, poX, poY, color, bgcolor, font);
 
         if (font != oldFont)
         {
@@ -44,7 +43,7 @@ int16_t renderRichText(std::string_view str, int32_t poX, int32_t poY, uint8_t f
             {
                 tft.fillRect(poX, poY + newFontHeight,
                              addedWith, fontHeight - newFontHeight,
-                             tft.textbgcolor);
+                             bgcolor);
             }
         }
 
@@ -77,7 +76,7 @@ again:
             case '8':
             case '9':
             {
-                const auto color = [&controlChar,&oldColor](){
+                color = [&controlChar,&oldColor](){
                     switch (controlChar)
                     {
                     case 'c': return oldColor;
@@ -94,8 +93,6 @@ again:
                     __builtin_unreachable();
                 }();
 
-                tft.setTextColor(color, tft.textbgcolor);
-
                 auto newNewIter = newIter + 1;
                 if (newNewIter != std::end(str))
                 {
@@ -152,8 +149,6 @@ again:
         drawString(str);
     }
 
-    tft.setTextColor(oldColor, tft.textbgcolor);
-
     return width;
 }
 

src/richtextrenderer.h

@@ -4,15 +4,14 @@
 #include <string_view>
 #include <string>
 
-// local includes
-#include "tftinstance.h"
+// forward declares
+namespace espgui { class TftInterface; }
 
 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);
 
 } // namespace espgui

src/screenmanager.cpp

@@ -7,7 +7,7 @@ namespace espgui {
 std::unique_ptr<Display> currentDisplay;
 std::stack<std::unique_ptr<Display>> displayStack;
 
-std::function<void()> changeScreenCallback;
+std::function<void(TftInterface&)> changeScreenCallback;
 
 void deconstructScreen()
 {
@@ -28,7 +28,7 @@ void pushScreenInternal()
     }
 }
 
-void popScreen()
+void popScreenImpl(TftInterface &tft)
 {
     deconstructScreen();
 
@@ -38,9 +38,14 @@ void popScreen()
     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/splitgraphdisplay.h

@@ -2,6 +2,8 @@
 
 // local includes
 #include "display.h"
+#include "tftinterface.h"
+#include "tftcolors.h"
 #include "textinterface.h"
 #include "widgets/label.h"
 #include "widgets/graph.h"
@@ -53,9 +55,11 @@ class SplitGraphDisplay :
     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, text(), 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/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/tftespiimpl.h

@@ -0,0 +1,93 @@
+#pragma once
+
+// 3rdparty lib includes
+#include "TFT_eSPI.h"
+
+// local includes
+#include "tftinterface.h"
+
+namespace espgui {
+
+class TftESpiImpl : public TftInterface
+{
+public:
+    void init() { m_tft.init(); }
+
+    void     drawPixel(int32_t x, int32_t y, uint16_t color) override { m_tft.drawPixel(x, y, color); }
+    void     drawChar(int32_t x, int32_t y, uint16_t c, uint16_t color, uint16_t bg, uint8_t size) override { m_tft.drawChar(x, y, c, color, bg, size); }
+    void     drawLine(int32_t xs, int32_t ys, int32_t xe, int32_t ye, uint16_t color) override { m_tft.drawLine(xs, ys, xe, ye, color); }
+    void     drawFastVLine(int32_t x, int32_t y, int32_t h, uint16_t color) override { m_tft.drawFastVLine(x, y, h, color); }
+    void     drawFastHLine(int32_t x, int32_t y, int32_t w, uint16_t color) override { m_tft.drawFastHLine(x, y, w, color); }
+    void     fillRect(int32_t x, int32_t y, int32_t w, int32_t h, uint16_t color) override { m_tft.fillRect(x, y, w, h, color); }
+
+    int16_t  drawChar(uint16_t uniCode, int32_t x, int32_t y, uint16_t color, uint16_t bgcolor, uint8_t font) override { return m_tft.drawChar(uniCode, x, y, color, bgcolor, font); }
+    int16_t  height() const override { return m_tft.height(); }
+    int16_t  width() const override { return m_tft.width(); }
+
+    void     setRotation(uint8_t r) override { m_tft.setRotation(r); }
+    uint8_t  getRotation(void) const { return m_tft.getRotation(); }
+
+    void     setTextSize(uint8_t s) override { m_tft.setTextSize(s); }
+
+    // Graphics drawing
+    void     fillScreen(uint32_t color) override { m_tft.fillScreen(color); }
+    void     drawRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color) override { m_tft.drawRect(x, y, w, h, color); }
+    void     drawRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t radius, uint32_t color) override { m_tft.drawRoundRect(x, y, w, h, radius, color); }
+    void     fillRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t radius, uint32_t color) override { m_tft.fillRoundRect(x, y, w, h, radius, color); }
+
+    void     fillRectVGradient(int16_t x, int16_t y, int16_t w, int16_t h, uint32_t color1, uint32_t color2) override { m_tft.fillRectVGradient(x, y, w, h, color1, color2); }
+    void     fillRectHGradient(int16_t x, int16_t y, int16_t w, int16_t h, uint32_t color1, uint32_t color2) override { m_tft.fillRectHGradient(x, y, w, h, color1, color2); }
+
+    uint16_t drawPixel(int32_t x, int32_t y, uint32_t color, uint8_t alpha, uint32_t bg_color = 0x00FFFFFF) override { return m_tft.drawPixel(x, y, color, alpha, bg_color); }
+
+    void     drawSpot(float ax, float ay, float r, uint32_t fg_color, uint32_t bg_color = 0x00FFFFFF) override { m_tft.drawSpot(ax, ay, r, fg_color, bg_color); }
+
+    void     fillSmoothCircle(int32_t x, int32_t y, int32_t r, uint32_t color, uint32_t bg_color = 0x00FFFFFF) override { m_tft.fillSmoothCircle(x, y, r, color, bg_color); }
+
+    void     fillSmoothRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t radius, uint32_t color, uint32_t bg_color = 0x00FFFFFF) override { m_tft.fillSmoothRoundRect(x, y, w, h, radius, color, bg_color); }
+
+    void     drawWideLine(float ax, float ay, float bx, float by, float wd, uint32_t fg_color, uint32_t bg_color = 0x00FFFFFF) override { m_tft.drawWideLine(ax, ay, bx, by, wd, fg_color, bg_color); }
+
+    void     drawWedgeLine(float ax, float ay, float bx, float by, float aw, float bw, uint32_t fg_color, uint32_t bg_color = 0x00FFFFFF) override { m_tft.drawWedgeLine(ax, ay, bx, by, aw, bw, fg_color, bg_color); }
+
+    void     drawSunkenRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color0, uint32_t color1, uint32_t color2) override { m_tft.drawSunkenRect(x, y, w, h, color0, color1, color2); }
+
+    void     drawCircle(int32_t x, int32_t y, int32_t r, uint32_t color) override { m_tft.drawCircle(x, y, r, color); }
+    void     drawCircleHelper(int32_t x, int32_t y, int32_t r, uint8_t cornername, uint32_t color) override { m_tft.drawCircleHelper(x, y, r, cornername, color); }
+    void     fillCircle(int32_t x, int32_t y, int32_t r, uint32_t color) override { m_tft.fillCircle(x, y, r, color); }
+    void     fillCircleHelper(int32_t x, int32_t y, int32_t r, uint8_t cornername, int32_t delta, uint32_t color) override { m_tft.fillCircleHelper(x, y, r, cornername, delta, color); }
+
+    void     drawEllipse(int16_t x, int16_t y, int32_t rx, int32_t ry, uint16_t color) override { m_tft.drawEllipse(x, y, rx, ry, color); }
+    void     fillEllipse(int16_t x, int16_t y, int32_t rx, int32_t ry, uint16_t color) override { m_tft.fillEllipse(x, y, rx, ry, color); }
+
+    void     drawTriangle(int32_t x1,int32_t y1, int32_t x2,int32_t y2, int32_t x3,int32_t y3, uint32_t color) override { m_tft.drawTriangle(x1, y1, x2, y2, x3, y3, color); }
+    void     fillTriangle(int32_t x1,int32_t y1, int32_t x2,int32_t y2, int32_t x3,int32_t y3, uint32_t color) override { m_tft.fillTriangle(x1, y1, x2, y2, x3, y3, color); }
+
+    int16_t  textWidth(std::string_view string, uint8_t font) override { return m_tft.textWidth(string, font); }
+    int16_t  fontHeight(int16_t font) override { return m_tft.fontHeight(font); }
+
+    int16_t drawString(std::string_view string, int32_t x, int32_t y, uint16_t color, uint16_t bgcolor, uint8_t font) override { return m_tft.drawString(string, x, y, color, bgcolor, font); }
+    int16_t drawCentreString(std::string_view string, int32_t x, int32_t y, uint16_t color, uint16_t bgcolor, uint8_t font) override { return m_tft.drawCentreString(string, x, y, color, bgcolor, font); }
+    int16_t drawRightString(std::string_view string, int32_t x, int32_t y, uint16_t color, uint16_t bgcolor, uint8_t font) override { return m_tft.drawRightString(string, x, y, color, bgcolor, font); }
+
+    void     pushImage(int32_t x, int32_t y, int32_t w, int32_t h, const uint16_t *data) { m_tft.pushImage(x, y, w, h, data); }
+    void     pushImage(int32_t x, int32_t y, int32_t w, int32_t h, const uint16_t *data, uint16_t transparent) { m_tft.pushImage(x, y, w, h, data, transparent); }
+
+    uint16_t decodeUTF8(const uint8_t *buf, uint16_t *index, uint16_t remaining) override { return m_tft.decodeUTF8(buf, index, remaining); }
+    uint16_t decodeUTF8(uint8_t c) override { return m_tft.decodeUTF8(c); }
+
+    void    setSwapBytes(bool swap) override { m_tft.setSwapBytes(swap); }
+    bool    getSwapBytes(void) override { return m_tft.getSwapBytes(); }
+
+    void     startWrite(void) override { m_tft.startWrite(); }
+    void     writeColor(uint16_t color, uint32_t len) override { m_tft.writeColor(color, len); }
+    void     endWrite(void) override { m_tft.endWrite(); }
+
+    void     pushColor(uint16_t color, uint32_t len) override { m_tft.pushColor(color, len); }
+
+    void     setAddrWindow(int32_t xs, int32_t ys, int32_t w, int32_t h) override { m_tft.setAddrWindow(xs, ys, w, h); }
+private:
+    TFT_eSPI m_tft;
+};
+
+} // 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/tftinterface.h

@@ -0,0 +1,112 @@
+#pragma once
+
+// system includes
+#include <cstdint>
+#include <string_view>
+
+namespace espgui {
+class TftInterface
+{
+public:
+    explicit TftInterface() = default;
+    virtual ~TftInterface() = default;
+
+    virtual void     drawPixel(int32_t x, int32_t y, uint16_t color) = 0;
+    virtual void     drawChar(int32_t x, int32_t y, uint16_t c, uint16_t color, uint16_t bg, uint8_t size) = 0;
+    virtual void     drawLine(int32_t xs, int32_t ys, int32_t xe, int32_t ye, uint16_t color) = 0;
+    virtual void     drawFastVLine(int32_t x, int32_t y, int32_t h, uint16_t color) = 0;
+    virtual void     drawFastHLine(int32_t x, int32_t y, int32_t w, uint16_t color) = 0;
+    virtual void     fillRect(int32_t x, int32_t y, int32_t w, int32_t h, uint16_t color) = 0;
+
+    virtual int16_t  drawChar(uint16_t uniCode, int32_t x, int32_t y, uint16_t color, uint16_t bgcolor, uint8_t font) = 0;
+    virtual int16_t  height(void) const = 0;
+    virtual int16_t  width(void) const = 0;
+
+    virtual void     setRotation(uint8_t r) = 0; // Set the display image orientation to 0, 1, 2 or 3
+    virtual uint8_t  getRotation(void) const = 0;      // Read the current rotation
+
+    virtual void     setTextSize(uint8_t size);  // Set character size multiplier (this increases pixel size)
+
+    // Graphics drawing
+    virtual void     fillScreen(uint32_t color) = 0;
+    virtual void     drawRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color) = 0;
+    virtual void     drawRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t radius, uint32_t color) = 0;
+    virtual void     fillRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t radius, uint32_t color) = 0;
+
+    virtual void     fillRectVGradient(int16_t x, int16_t y, int16_t w, int16_t h, uint32_t color1, uint32_t color2) = 0;
+    virtual void     fillRectHGradient(int16_t x, int16_t y, int16_t w, int16_t h, uint32_t color1, uint32_t color2) = 0;
+
+    // Draw a pixel blended with the pixel colour on the TFT or sprite, return blended colour
+    // If bg_color is not included the background pixel colour will be read from TFT or sprite
+    virtual uint16_t drawPixel(int32_t x, int32_t y, uint32_t color, uint8_t alpha, uint32_t bg_color = 0x00FFFFFF) = 0;
+
+    // Draw a small anti-aliased filled circle at ax,ay with radius r (uses drawWideLine)
+    // If bg_color is not included the background pixel colour will be read from TFT or sprite
+    virtual void     drawSpot(float ax, float ay, float r, uint32_t fg_color, uint32_t bg_color = 0x00FFFFFF) = 0;
+
+    // Draw an anti-aliased filled circle at x, y with radius r
+    // If bg_color is not included the background pixel colour will be read from TFT or sprite
+    virtual void     fillSmoothCircle(int32_t x, int32_t y, int32_t r, uint32_t color, uint32_t bg_color = 0x00FFFFFF) = 0;
+
+    virtual void     fillSmoothRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t radius, uint32_t color, uint32_t bg_color = 0x00FFFFFF) = 0;
+
+    // Draw an anti-aliased wide line from ax,ay to bx,by width wd with radiused ends (radius is wd/2)
+    // If bg_color is not included the background pixel colour will be read from TFT or sprite
+    virtual void     drawWideLine(float ax, float ay, float bx, float by, float wd, uint32_t fg_color, uint32_t bg_color = 0x00FFFFFF) = 0;
+
+    // Draw an anti-aliased wide line from ax,ay to bx,by with different width at each end aw, bw and with radiused ends
+    // If bg_color is not included the background pixel colour will be read from TFT or sprite
+    virtual void     drawWedgeLine(float ax, float ay, float bx, float by, float aw, float bw, uint32_t fg_color, uint32_t bg_color = 0x00FFFFFF) = 0;
+
+    virtual void     drawSunkenRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color0, uint32_t color1, uint32_t color2) = 0;
+
+    virtual void     drawCircle(int32_t x, int32_t y, int32_t r, uint32_t color) = 0;
+    virtual void     drawCircleHelper(int32_t x, int32_t y, int32_t r, uint8_t cornername, uint32_t color) = 0;
+    virtual void     fillCircle(int32_t x, int32_t y, int32_t r, uint32_t color) = 0;
+    virtual void     fillCircleHelper(int32_t x, int32_t y, int32_t r, uint8_t cornername, int32_t delta, uint32_t color) = 0;
+
+    virtual void     drawEllipse(int16_t x, int16_t y, int32_t rx, int32_t ry, uint16_t color) = 0;
+    virtual void     fillEllipse(int16_t x, int16_t y, int32_t rx, int32_t ry, uint16_t color) = 0;
+
+    //                                   Corner 1               Corner 2               Corner 3
+    virtual void     drawTriangle(int32_t x1,int32_t y1, int32_t x2,int32_t y2, int32_t x3,int32_t y3, uint32_t color) = 0;
+    virtual void     fillTriangle(int32_t x1,int32_t y1, int32_t x2,int32_t y2, int32_t x3,int32_t y3, uint32_t color) = 0;
+
+    virtual int16_t  textWidth(std::string_view string, uint8_t font);     // Returns pixel width of string in specified font
+    virtual int16_t  fontHeight(int16_t font);                             // Returns pixel height of string in specified font
+
+    // Handle char arrays
+    // Use with setTextDatum() to position string on TFT, and setTextPadding() to blank old displayed strings
+    virtual int16_t drawString(std::string_view string, int32_t x, int32_t y, uint16_t color, uint16_t bgcolor, uint8_t font) = 0;  // Draw string using specifed font number
+    virtual int16_t drawCentreString(std::string_view string, int32_t x, int32_t y, uint16_t color, uint16_t bgcolor, uint8_t font) = 0;  // Deprecated, use setTextDatum() and drawString()
+    virtual int16_t drawRightString(std::string_view string, int32_t x, int32_t y, uint16_t color, uint16_t bgcolor, uint8_t font) = 0;   // Deprecated, use setTextDatum() and drawString()
+
+    // These are used to render images or sprites stored in RAM arrays (used by Sprite class for 16bpp Sprites)
+    virtual void     pushImage(int32_t x, int32_t y, int32_t w, int32_t h, const uint16_t *data) = 0;
+    virtual void     pushImage(int32_t x, int32_t y, int32_t w, int32_t h, const uint16_t *data, uint16_t transparent) = 0;
+
+    // Used by library and Smooth font class to extract Unicode point codes from a UTF8 encoded string
+    virtual uint16_t decodeUTF8(const uint8_t *buf, uint16_t *index, uint16_t remaining) = 0;
+    virtual uint16_t decodeUTF8(uint8_t c) = 0;
+
+    // Swap the byte order for pushImage() and pushPixels() - corrects endianness
+    virtual void     setSwapBytes(bool swap) = 0;
+    virtual bool     getSwapBytes(void) = 0;
+
+    // Bare metal functions
+    virtual void     startWrite(void) = 0;
+    virtual void     writeColor(uint16_t color, uint32_t len) = 0;
+    virtual void     endWrite(void) = 0;
+
+    // Push (aka write pixel) colours to the set window
+    virtual void     pushColor(uint16_t color, uint32_t len) = 0;
+
+    // The TFT_eSprite class inherits the following functions (not all are useful to Sprite class
+    virtual void     setAddrWindow(int32_t xs, int32_t ys, int32_t w, int32_t h) = 0;
+};
+
+inline bool isLandscape(const TftInterface &tft)
+{
+    return (tft.getRotation() == 1 || tft.getRotation() == 3);
+}
+} // 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/label.cpp

@@ -1,7 +1,7 @@
 #include "label.h"
 
 // local includes
-#include "tftinstance.h"
+#include "tftinterface.h"
 #include "richtextrenderer.h"
 
 namespace espgui {
@@ -11,7 +11,7 @@ Label::Label(int x, int y) :
 {
 }
 
-void Label::start()
+void Label::start(TftInterface &tft)
 {
     m_lastStr.clear();
     m_lastFont = -1;
@@ -21,40 +21,40 @@ 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)
 {
     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, str, m_x, m_y, color, bgcolor, font);
+    const auto renderedHeight = tft.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,31 @@
 // system includes
 #include <string>
 
+// forward declares
+namespace espgui {
+class TftInterface;
+} // 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 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,7 +4,8 @@
 #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) :
@@ -12,13 +13,13 @@ ProgressBar::ProgressBar(int x, int y, int width, int height, int min, int max,
 {
 }
 
-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);
 }
 
-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);
 

src/widgets/progressbar.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 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);
 
-    void start();
-    void redraw(int value);
+    void start(TftInterface &tft);
+    void redraw(TftInterface &tft, int value);
 
 private:
     const int m_x;

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/verticalmeter.cpp

@@ -4,7 +4,8 @@
 #include <cpputils.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 +13,12 @@ VerticalMeter::VerticalMeter(const char *text, const char *format, int x, int y)
 {
 }
 
-void VerticalMeter::start()
+void VerticalMeter::start(TftInterface &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);
+    tft.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 +29,14 @@ 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);
+    tft.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);
-
     char buf[16];
     snprintf(&buf[0], 16, m_format, value);
-    tft.drawRightString(buf, m_x + 36 - 5, 187 - 27 + 155 - 18, 2);
+    tft.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

@@ -8,10 +8,11 @@
 #include <stdlib_noniso.h>
 
 // local includes
-#include "tftinstance.h"
+#include "tftinterface.h"
+#include "tftcolors.h"
 
 namespace espgui {
-void VuMeter::start()
+void VuMeter::start(TftInterface &tft)
 {
     ltx = 0;
     osx = 120;
@@ -21,8 +22,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 +79,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: tft.drawCentreString("0", x0, y0 - 12, TFT_BLACK, TFT_BLACK, 2); break;
+                case -1: tft.drawCentreString("7.5", x0, y0 - 9, TFT_BLACK, TFT_BLACK, 2); break;
+                case 0: tft.drawCentreString("15", x0, y0 - 6, TFT_BLACK, TFT_BLACK, 2); break;
+                case 1: tft.drawCentreString("22.5", x0, y0 - 9, TFT_BLACK, TFT_BLACK, 2); break;
+                case 2: tft.drawCentreString("30", x0, y0 - 12, TFT_BLACK, TFT_BLACK, 2); break;
             }
         }
 
@@ -97,16 +96,15 @@ 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
+    tft.drawString("KM/h", 5 + 230 - 40, 119 - 20, TFT_BLACK, TFT_BLACK, 2); // Units at bottom right
+    tft.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)
+void VuMeter::redraw(TftInterface &tft, float value)
 {
-    tft.setTextColor(TFT_BLACK, TFT_WHITE);
     char buf[8]; dtostrf(value, 4, 0, buf);
-    tft.drawRightString(buf, 50, 119 - 25, 4);
+    tft.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 +123,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
+    tft.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