Implemented Keyboard; ToDo: Control buttons in vertical mode

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

src/changevaluedisplay_string.cpp

@@ -1,5 +1,8 @@
 #include "changevaluedisplay_string.h"
 
+// 3rdparty lib includes
+#include <espchrono.h>
+
 // local includes
 #include "tftinstance.h"
 
@@ -8,63 +11,62 @@ void espgui::ChangeValueDisplay<std::string>::start()
     Base::start();
 
     m_value = this->getValue();
-
-    m_pressed = false;
 }
 
 void espgui::ChangeValueDisplay<std::string>::initScreen()
 {
     Base::initScreen();
 
-    tft.drawRect(25, 75, 190, 65, TFT_WHITE);
+    tft.drawRoundRect(10, 50, tft.width() - 20, 34, 5, TFT_WHITE);
     m_valueLabel.start();
 
-    tft.setTextFont(4);
+    m_keyboard.start();
-    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);
-}
-
-void espgui::ChangeValueDisplay<std::string>::update()
-{
-    Base::update();
-
-    if (m_pressed)
-    {
-        m_pressed = false;
-        if (auto result = this->setValue(m_value); result)
-            confirm();
-        else
-            errorOccured(std::move(result).error());
-    }
 }
 
 void espgui::ChangeValueDisplay<std::string>::redraw()
 {
+    const auto now = espchrono::millis_clock::now().time_since_epoch().count() / 1000;
     Base::redraw();
 
     tft.setTextColor(TFT_WHITE, TFT_BLACK);
     tft.setTextFont(4);
     m_valueLabel.redraw(m_value);
+
+    tft.drawRect(m_valueLabel.x() + tft.textWidth(m_value) + 3, m_valueLabel.y(), 2, tft.fontHeight(), (now % 1000 < 500) ? TFT_WHITE : TFT_BLACK);
+}
+
+void espgui::ChangeValueDisplay<std::string>::setShownValue(std::string &&value)
+{
+    tft.drawRect(m_valueLabel.x() + tft.textWidth(m_value) + 3, m_valueLabel.y(), 2, tft.fontHeight(), TFT_BLACK);
+    m_value = std::move(value);
 }
 
 void espgui::ChangeValueDisplay<std::string>::buttonPressed(Button button)
 {
     //Base::buttonPressed(button);
-
+    m_keyboard.buttonPressed(button);
-    switch (button)
-    {
-    case Button::Left: this->back(); break;
-    case Button::Right: m_pressed = true; break;
-    default:;
-    }
 }
 
 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
+        errorOccured(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

@@ -4,11 +4,12 @@
 #include <string>
 
 // 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 {
@@ -29,20 +30,24 @@ public:
 
     void start() override;
     void initScreen() override;
-    void update() override;
     void redraw() 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};
 };
 
 } // namespace espgui

src/keyboardhelper.h

@@ -0,0 +1,285 @@
+#pragma once
+
+// system includes
+#include <futurecpp.h>
+
+// esp-idf includes
+#include <esp_log.h>
+
+// 3rdparty lib includes
+#include <fmt/core.h>
+#include <strutils.h>
+
+// local includes
+#include "display.h"
+#include "screenmanager.h"
+#include "tftinstance.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";
+// constexpr const char * const KEYBOARD_SCREEN_3 = "1234567890!\"§$%&/()= ?@€{[]}\\~#+-*_,;.:";
+} // namespace
+
+template<typename TDisplay = espgui::Display>
+class Keyboard
+{
+public:
+    explicit Keyboard(TDisplay &display) : m_display(display) {}
+
+    void start()
+    {
+        const auto isLandscape = espgui::isLandscape();
+        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 : 50), TFT_BLACK);
+        tft.drawSunkenRect(1, m_keyboard_start_y - 10, tft.width()-1, tft.height() - m_keyboard_start_y - (isLandscape ? 0 : 50), TFT_WHITE, TFT_GREY, TFT_BLACK);
+
+        updateCharLength();
+        drawKeyboard();
+    }
+
+    void 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();
+            drawKeyboard(true);
+            break;
+        case Down:
+            moveSelectorRight();
+            drawKeyboard(true);
+            break;
+        default:;
+        }
+    }
+
+    void buttonReleased(Button button) {}
+
+    void 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;
+    }
+
+    void 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);
+    }
+
+    void 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--;
+    }
+
+    void 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++;
+    }
+
+private:
+    void 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;
+    }
+
+    void drawKeyboard(bool dont_draw_string = false)
+    {
+        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 (cpputils::stringEndsWith(line, " "))
+                line.pop_back();
+
+            keyboard_lines.push_back(line);
+        }
+
+        const auto datum = tft.getTextDatum();
+        tft.setTextDatum(MC_DATUM);
+
+        for (size_t i = 0; i < keyboard_lines.size(); i++)
+        {                tft.setTextColor(TFT_WHITE);
+
+            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());
+
+        // align left (SHIFT, SPACE)
+        tft.drawRoundRect(15-2, y-1, tft.textWidth(SHIFT)+4, tft.fontHeight()+2, 3, TFT_DARKGREY);
+        tft.drawRoundRect(30+tft.textWidth(SHIFT)-2, y-1, tft.textWidth(SPACE)+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);
+        }
+    }
+
+    void 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();
+        start();
+    }
+
+    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};
+};
+} // namespace espgui