From b966367bc3b7dd9e136e4740a77ac6cea1b9927c Mon Sep 17 00:00:00 2001
From: "Ralph J. Steinhagen" <r.steinhagen@gsi.de>
Date: Thu, 27 Jul 2023 13:39:53 +0200
Subject: [PATCH] refactored InputKeypad for mobile<->desktop compatibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

  * improved compatibility for mobile devices and desktop
   * adjusted and re-use for larger font using existing App definitions
   * re-layout largely following common numeric keyboard layout (ISO/IEC 9995-1)
   * added support for scientific notation
   * added support for portrait- and landscape keypad-layout
   * added support for directly editing display field (i.e. if used on a desktop, N.B. yes, the InputKeypad is equally usable also with a keyboard, added missing mouse-button<->key mappings)
   * derive button labels directly from enum (via toString(..)) function that should fail if new/unmapped enum values are added. possible improvement: use compile-time-reflection)
   * broke-up functions into popup-handling, drawing keypad (x2), and handling key/input logic
   * added dual-function Backspace button: double-clicking clears the whole field
   * added function that entering the first number clears the previous field value (N.B. field is still only committed if it parses correctly)
   * added alt '2nd' and inverse function 'Inv' overloading of some buttons to switch e.g. between 'sinh'<->'asinh', 'sin'<->'asin', 'x^2' <-> 'x^3', 'Log'<->'Ln', ...
   * N.B. not all functions are (yet) enabled in the backing calculator implementation (-> future improvement/PR) as this PR focuses primarily on the UL layout

 * general improvements/changes:
   * refactored & renamed according to coding-style guidelines: https://github.com/fair-acc/opencmw-cpp/blob/main/README.developers.md
   * added type-safe structures where possible/applicable
   * added merging of fonts to the font loader to allow transplanting characters -- usually extended ascii-ranges -- fonts to receiving fonts that do not have definitions for these (e.g. frames, x², ... to xkcd). Could be further generalised (thinking of combining normal ascii Characters with FontAwesome font)

Signed-off-by: Ralph J. Steinhagen <r.steinhagen@gsi.de>
---
 src/ui/imguiutils.cpp | 1086 +++++++++++++++++++++++++++++------------
 src/ui/main.cpp       |   61 ++-
 2 files changed, 822 insertions(+), 325 deletions(-)

diff --git a/src/ui/imguiutils.cpp b/src/ui/imguiutils.cpp
index 832c2fdf..21206856 100644
--- a/src/ui/imguiutils.cpp
+++ b/src/ui/imguiutils.cpp
@@ -1,43 +1,52 @@
-#include "imguiutils.h"
-#include "app.h"
-#include "flowgraph.h"
-
+#include <any>
+#include <cctype>
+#include <charconv>
 #include <fmt/format.h>
+#include <functional>
+#include <imgui_internal.h>
+#include <tuple>
+#include <type_traits>
 
+#include "app.h"
 #include "calculator.h"
+#include "flowgraph.h"
 #include "flowgraph/datasink.h"
-#include <any>
-#include <charconv>
-#include <imgui_internal.h>
+#include "imguiutils.h"
 
 namespace ImGuiUtils {
+
+template<std::size_t BufferSize = 256>
 class InputKeypad {
     static inline constexpr const char *keypad_name = "KeypadX";
-    static inline constexpr size_t      buffer_size = 64;
 
-    bool                                visible     = true;
-    size_t                              parenthesi  = 0;
-    std::string                         edit_buffer;
-    std::any                            prev_value;
+    //
+    bool        _visible     = true;
+    bool        _altMode     = false;
+    bool        _invMode     = false;
+    bool        _firstUpdate = true;
+    size_t      _parentheses = 0;
+    std::string _editBuffer;
+    std::any    _prevValue;
+    Token       _lastToken;
 
-    Token                               last_token;
-
-private:
     enum class ReturnState {
         None,
         Change,
         Accept,
-        Discard = -1
+        Discard
     };
 
     enum class Button {
         NoButton,
-        Dot,
+        Period,
+        E_scientific,
         Sign,
         AC,
         Backspace,
         Enter,
         Escape,
+        Alt_2nd,
+        Alt_Inv,
 
         POpen   = '(',
         PClose  = ')',
@@ -59,29 +68,143 @@ class InputKeypad {
 
         Percent,
         Rcp,
+        Sqr,
         Sqrt,
+        Cube,
+        CubeRoot,
 
         Sin,
         Cos,
         Tan,
+        ASin,
+        ACos,
+        ATan,
         Sinh,
         Cosh,
         Tanh,
+        ASinh,
+        ACosh,
+        ATanh,
         Pow = '^',
+        Log,
+        Ln,
+        Pow10,
+        PowE
+        // , NewEnumValue // for testing the static_assert in the toString member
     };
 
-    template<Button btn_ty, ImGuiKey_... subs_keys>
-    Button static UIButton(const char *label, ImVec2 size, Button old_value = Button::NoButton) {
-        return ImGui::Button(label, size) || (ImGui::IsKeyPressedMap(subs_keys) || ...) ? btn_ty : old_value;
+    template<typename...>
+    constexpr static bool always_true = true;
+
+    template<typename T = void>
+    [[nodiscard]] consteval static const char *toString(Button button) noexcept {
+        using enum InputKeypad<>::Button;
+        switch (button) {
+        case NoButton: return " ";
+        case Period: return ".";
+        case E_scientific: return "EE";
+        case Sign: return "±";
+        case AC: return "AC";
+        case Backspace: return "<-";
+        case Enter: return "Enter";
+        case Escape: return "Esc";
+        case Alt_2nd: return "2nd";
+        case Alt_Inv: return "Inv";
+        case POpen: return "(";
+        case PClose: return ")";
+        case Add: return "+";
+        case Sub: return "-";
+        case Mul: return "*";
+        case Div: return "/";
+        case Button0: return "0";
+        case Button1: return "1";
+        case Button2: return "2";
+        case Button3: return "3";
+        case Button4: return "4";
+        case Button5: return "5";
+        case Button6: return "6";
+        case Button7: return "7";
+        case Button8: return "8";
+        case Button9: return "9";
+        case Percent: return "%";
+        case Rcp: return "1/x";
+        case Sqr: return "x²";
+        case Sqrt: return "²√";
+        case Cube: return "x³";
+        case CubeRoot: return "³√";
+        case Sin: return "sin";
+        case Cos: return "cos";
+        case Tan: return "tan";
+        case ASin: return "asin";
+        case ACos: return "acos";
+        case ATan: return "atan";
+        case Sinh: return "sinh";
+        case Cosh: return "cosh";
+        case Tanh: return "tanh";
+        case ASinh: return "asinh";
+        case ACosh: return "acosh";
+        case ATanh: return "atanh";
+        case Pow: return "^";
+        case Log: return "Log";
+        case Ln: return "Ln";
+        case Pow10: return "10^";
+        case PowE: return "e^";
+        default:
+            static_assert(always_true<T>, "not all possible Button enum values are mapped");
+        }
     }
-    constexpr static Button Select(Button vold, Button vnew) {
-        return vnew == Button::NoButton ? vold : vnew;
+
+    enum class LinePreference {
+        SameLine,
+        None
+    };
+
+    template<LinePreference SameLine, Button primaryButton, ImGuiKey_... keyBinding>
+    [[nodiscard]] Button static keypadButton(ImVec2 size, Button oldValue) {
+        if constexpr (SameLine == LinePreference::SameLine) {
+            ImGui::SameLine();
+        }
+        return ImGui::Button(toString(primaryButton), size) || (ImGui::IsKeyPressed(keyBinding) || ...) ? primaryButton : oldValue;
+    }
+    template<LinePreference SameLine, Button primaryButton, Button secondaryButton, ImGuiKey_... keyBinding>
+    [[nodiscard]] static Button keypadButton(ImVec2 size, Button oldValue) noexcept {
+        static_assert(sizeof...(keyBinding) > 1, "needs to be called with at least two keys provided - second is double-click actions");
+        if constexpr (SameLine == LinePreference::SameLine) {
+            ImGui::SameLine();
+        }
+        const bool buttonActivated = ImGui::Button(toString(primaryButton), size);
+
+        if (constexpr auto keyList = std::array{ keyBinding... }; ImGui::IsKeyPressed(keyList[0])) {
+            return primaryButton;
+        } else if ((ImGui::IsKeyPressed(keyBinding) || ...)) {
+            return secondaryButton;
+        }
+
+        if (buttonActivated) {
+            static double lastClick = -1.0f;
+            static ImVec2 lastClickPos{ -1, -1 };
+            const double  time                    = ImGui::GetTime();
+            const ImVec2  clickPos                = ImGui::GetMousePos();
+            const bool    isWithinDoubleClickTime = lastClick >= 0.0f && time - lastClick <= ImGui::GetIO().MouseDoubleClickTime;
+            const auto    isDoubleClick           = [&]() {
+                return (lastClickPos.x != -1 && std::hypot(clickPos.x - lastClickPos.x, clickPos.y - lastClickPos.y) <= ImGui::GetIO().MouseDoubleClickMaxDist);
+            };
+            bool doubleClicked = false;
+            if (isWithinDoubleClickTime && isDoubleClick()) {
+                doubleClicked = true;
+            }
+            lastClick    = time;
+            lastClickPos = clickPos;
+            return doubleClicked ? secondaryButton : primaryButton;
+        }
+
+        return oldValue;
     }
 
     InputKeypad() {
-        edit_buffer.reserve(buffer_size);
+        _editBuffer.reserve(BufferSize);
     };
-    static auto &Get() {
+    static auto &getInstance() {
         static InputKeypad instance;
         return instance;
     }
@@ -89,334 +212,687 @@ class InputKeypad {
 public:
     template<typename EdTy>
     requires std::integral<EdTy> || std::floating_point<EdTy> || std::same_as<std::string, EdTy>
-    static bool Edit(const char *label, EdTy *value) {
-        if (!label || !value) return false;
-        if constexpr (std::floating_point<EdTy>)
+    [[nodiscard]] static bool edit(const char *label, EdTy *value) {
+        if (!label || !value) {
+            return false;
+        }
+
+        if constexpr (std::floating_point<EdTy>) {
             ImGui::DragFloat(label, static_cast<float *>(value), 0.1f);
-        else if constexpr (std::integral<EdTy>)
+        } else if constexpr (std::integral<EdTy>) {
             ImGui::DragInt(label, static_cast<int *>(value));
-        else
+        } else {
             ImGui::InputText(label, value);
+        }
 
-        return Get().EditImpl(label, value);
+        return getInstance().editImpl(label, value);
     }
-    static bool Visible() noexcept { return Get().visible; }
+    static bool isVisible() noexcept { return getInstance()._visible; }
 
 private:
-    ReturnState DrawKeypad(const char *label) noexcept {
-        ReturnState r = ReturnState::None;
-        // Always center this window when appearing
-        ImVec2 center = ImGui::GetMainViewport()->GetCenter();
-        ImGui::SetNextWindowPos(center, ImGuiCond_Appearing, ImVec2(0.5f, 0.5f));
-        ImGui::SetNextWindowSize(ImVec2(360, 480));
-
-        if (ImGui::BeginPopupModal(keypad_name, &visible, ImGuiWindowFlags_AlwaysAutoResize)) {
-            ImGui::Text("%s", label);
-            r = Keypad("Keypad Input");
-            if (r == ReturnState::Change) {
-                last_token = ::last_token(edit_buffer);
-            }
-            ImGui::EndPopup();
-        }
-        return r;
+    [[nodiscard]] ReturnState drawKeypadPopup(std::string &valueLabel) noexcept {
+        const auto      &mainViewPort     = *ImGui::GetMainViewport();
+        const ImVec2     mainViewPortSize = mainViewPort.WorkSize;
+        const bool       portraitMode     = mainViewPortSize.x < mainViewPortSize.y;
+        constexpr ImVec2 defaultPortraitSize{ 400.f, 600.f };
+        constexpr ImVec2 defaultLandscapeSize{ 485.f, 400.f };
+
+        if (mainViewPortSize.x > defaultPortraitSize.x && mainViewPortSize.y > defaultPortraitSize.y) { // fits on screen
+            ImGui::SetNextWindowSize(defaultPortraitSize);
+        } else {
+            // main viewport is smaller than the default size
+            if (portraitMode) { // portrait mode
+                ImGui::SetNextWindowSize(ImVec2(std::clamp(defaultPortraitSize.x, .5f * defaultPortraitSize.x, mainViewPortSize.x), std::clamp(defaultPortraitSize.y, .5f * defaultPortraitSize.y, mainViewPortSize.y)));
+            } else { // landscape mode
+                ImGui::SetNextWindowSize(ImVec2(std::clamp(defaultLandscapeSize.x, .5f * defaultLandscapeSize.x, mainViewPortSize.x), std::clamp(defaultLandscapeSize.y, .5f * defaultLandscapeSize.y, mainViewPortSize.y)));
+            }
+        }
+        ImGui::SetNextWindowPos(mainViewPort.GetCenter(), ImGuiCond_Always, ImVec2(0.5f, 0.5f));
+
+        if (ImGui::BeginPopupModal(keypad_name, &_visible, ImGuiWindowFlags_AlwaysAutoResize | ImGuiWindowFlags_NoDecoration)) {
+            struct PopupGuard {
+                ~PopupGuard() { ImGui::EndPopup(); }
+            } guard;
+
+            ReturnState returnState = ReturnState::None;
+            if (ImGui::BeginChild("drawKeypad Input", ImVec2{}, true)) {
+                const ImVec2 windowSize = ImGui::GetContentRegionAvail(); // now inside this child;
+
+                // setup number and function keypad -- global style settings
+                ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 6);
+                ImGui::PushFont(DigitizerUi::App::instance().fontBigger[DigitizerUi::App::instance().prototypeMode]);
+                const Button activatedKey = windowSize.x < windowSize.y ? drawPortraitKeypad(valueLabel, windowSize) : drawLandscapeKeypad(valueLabel, windowSize);
+                ImGui::PopFont();
+                ImGui::PopStyleVar();
+
+                ImGui::EndChild();
+                returnState = processKeypadLogic(activatedKey);
+            }
+
+            switch (returnState) {
+            case ReturnState::Change:
+                _firstUpdate = false;
+                _lastToken   = ::last_token(_editBuffer);
+                return ReturnState::Change;
+            case ReturnState::Accept:
+                _firstUpdate = true;
+                return ReturnState::Accept;
+            case ReturnState::Discard:
+                _firstUpdate = true;
+                return ReturnState::Discard;
+            default:
+                return ReturnState::None;
+            }
+        }
+        return ReturnState::None;
     }
 
     template<typename EdTy>
-    bool EditImpl(const char *label, EdTy *value) noexcept {
+    [[nodiscard]] bool editImpl(const char *label, EdTy *value) noexcept {
         if (ImGui::IsItemHovered() && ImGui::IsMouseClicked(ImGuiMouseButton_Left)) {
-            visible = true;
+            _visible = true;
             ImGui::OpenPopup(keypad_name);
-            prev_value.emplace<EdTy>(*value); // save for discard
-            edit_buffer.clear();
-            fmt::format_to(std::back_inserter(edit_buffer), "{}\0", *value);
-            last_token = ::last_token(edit_buffer);
-        }
-
-        ReturnState r = DrawKeypad(edit_buffer.c_str());
-
-        if (r == ReturnState::Discard) {
-            *value  = any_cast<EdTy>(prev_value);
-            visible = false;
-            return true;
+            _prevValue.emplace<EdTy>(*value); // save for discard
+            _editBuffer.clear();
+            fmt::format_to(std::back_inserter(_editBuffer), "{}\0", *value);
+            _lastToken = ::last_token(_editBuffer);
         }
 
-        if (r == ReturnState::Accept) {
+        switch (drawKeypadPopup(_editBuffer)) {
+        case ReturnState::Accept:
             if constexpr (std::same_as<std::string, EdTy>) {
-                *value = edit_buffer;
+                *value = _editBuffer;
             } else if constexpr (std::floating_point<EdTy>) {
                 EdTy converted = 0;
-                *value         = strtof(edit_buffer.c_str(), nullptr);
+                *value         = strtof(_editBuffer.c_str(), nullptr);
             } else {
                 EdTy             converted = 0;
-                std::string_view a{ edit_buffer };
+                std::string_view a{ _editBuffer };
                 auto [ptr, ec] = std::from_chars(a.begin(), a.end(), converted);
-                if (ec != std::errc())
+                if (ec != std::errc()) {
                     return false;
+                }
                 *value = converted;
             }
-            visible = false;
+            _visible     = false;
+            _firstUpdate = true;
+            return true;
+        case ReturnState::Discard:
+            *value       = any_cast<EdTy>(_prevValue);
+            _visible     = false;
+            _firstUpdate = true;
+            return true;
+        default:
+            return false;
         }
-
-        return r == ReturnState::Accept;
     }
 
-    ReturnState Keypad(const char *label) noexcept {
-        struct Guard {
-            ~Guard() { ImGui::EndChild(); }
-        };
-        ImVec2      csize = ImGui::GetContentRegionAvail();
-        float       n     = floorf(csize.y / 6); // height / 5 button rows
-
-        ImGuiStyle &style = ImGui::GetStyle();
-
-        if (ImGui::BeginChild(label, ImVec2(n * 5 + style.WindowPadding.x, n * 6), true)) {
-            Guard g;
-            csize = ImGui::GetContentRegionAvail();            // now inside this child
-            n     = floorf(csize.y / 6 - style.ItemSpacing.y); // button size
-            ImVec2 bsize(n, n);                                // buttons are square
-            ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 6);
-
-            Button key = Button::NoButton;
-            using enum Button;
-
-            key = UIButton<Sin>("sin", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<Cos>("cos", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<Tan>("tan", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<POpen>("(", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<PClose>(")", bsize, key);
-
-            key = UIButton<Escape, ImGuiKey_Escape>("ESC", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<Backspace, ImGuiKey_Backspace>("<-", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<AC, ImGuiKey_Delete>("AC", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<Sign>("±", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<Sqrt>("Sqrt", bsize, key);
-
-            key = UIButton<Button7, ImGuiKey_7, ImGuiKey_Keypad7>("7", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<Button8, ImGuiKey_8, ImGuiKey_Keypad8>("8", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<Button9, ImGuiKey_9, ImGuiKey_Keypad9>("9", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<Div, ImGuiKey_Slash, ImGuiKey_KeypadDivide>("/", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<Pow>("^", bsize, key);
-
-            key = UIButton<Button4, ImGuiKey_4, ImGuiKey_Keypad4>("4", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<Button5, ImGuiKey_5, ImGuiKey_Keypad5>("5", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<Button6, ImGuiKey_6, ImGuiKey_Keypad6>("6", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<Mul, ImGuiKey_KeypadMultiply>("*", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<Rcp>("1/x", bsize, key);
-
-            key = UIButton<Button1, ImGuiKey_1, ImGuiKey_Keypad1>("1", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<Button2, ImGuiKey_2, ImGuiKey_Keypad2>("2", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<Button3, ImGuiKey_3, ImGuiKey_Keypad3>("3", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<Sub, ImGuiKey_KeypadSubtract>("-", bsize, key);
-            ImGui::SameLine();
-
-            ImGui::PushStyleColor(ImGuiCol_Button, { 11.f / 255.f, 89.f / 255.f, 191.f / 255.f, 1.0f });
+    [[nodiscard]] Button drawPortraitKeypad(std::string &valueLabel, const ImVec2 &windowSize) const {
+        /**
+         * ┌───────────────────────┬─────┐
+         * │   NumberInputField    │ ESC │
+         * ├─────┬─────┬─────┬─────┼─────┤
+         * │ 2nd │ sin │ cos │ tan │ <-  │
+         * ├─────┼─────┼─────┼─────┼─────┤
+         * │ Inv │ 1/x │ x²  │ ²√  │  ^  │
+         * ├─────┼─────┼─────┼─────┼─────┤
+         * │ Log │10^x │  /  │  *  │  -  │
+         * ├─────┼─────┼─────┼─────┼─────┤
+         * │  (  │  7  │  8  │  9  │     │
+         * ├─────┼─────┼─────┼─────┤  +  │
+         * │  )  │  4  │  5  │  6  │     │
+         * ├─────┼─────┼─────┼─────┼─────┤
+         * │ EE  │  1  │  2  │  3  │     │
+         * ├─────┼─────┴─────┼─────┤  ⏎  │
+         * │  ±  │     0     │  .  │     │
+         * └─────┴───────────┴─────┴─────┘
+         */
+        constexpr float nRows = 8; // see above layout
+        constexpr float nCols = 5; // see above layout
+        using enum InputKeypad<>::Button;
+        using enum InputKeypad<>::LinePreference;
+        const ImGuiStyle &style = ImGui::GetStyle();
+        const float       nx    = floorf(windowSize.x / nCols) - .5f * nCols / (nCols - 1) * style.WindowPadding.x;
+        const float       ny    = floorf(windowSize.y / nRows) - .5f * nRows / (nRows - 1) * style.WindowPadding.y;
+        ImVec2            buttonSize(std::min(nx, ny), std::min(nx, ny)); // buttons are square
+        Button            key = Button::NoButton;                         // return value
+
+        // setup common number editing field
+        std::vector<char> buffer(valueLabel.begin(), valueLabel.end());
+        buffer.resize(BufferSize);
+        ImGui::PushFont(DigitizerUi::App::instance().fontLarge[DigitizerUi::App::instance().prototypeMode]);
+        // the '-1' is to accommodate the 'Esc' button
+        ImGui::PushItemWidth(buttonSize.x * (nCols - 1.f) + (nCols - 2.f) * style.WindowPadding.x);
+        if (ImGui::InputText("##hidden", buffer.data(), buffer.size(), ImGuiInputTextFlags_CharsScientific)) {
+            valueLabel = std::string(buffer.data());
+            ImGui::PopFont();
+            ImGui::PopItemWidth();
+            return NoButton;
+        }
+        ImGui::PopFont();
+        ImGui::PopItemWidth();
+
+        // the 'ESC' clause button
+        ImGui::PushStyleColor(ImGuiCol_Button, { 11.f / 255.f, 89.f / 255.f, 191.f / 255.f, 1.0f });
+        ImGui::PushStyleColor(ImGuiCol_Text, { 1.0f, 1.0f, 1.0f, 1.0f });
+        key = keypadButton<SameLine, Escape, ImGuiKey_Escape>(buttonSize, key);
+        ImGui::PopStyleColor(2);
+
+        // start row 2: 2nd,sin[h],cos[h],tan[h],<-
+        if (_altMode) {
+            ImVec4 button_color = style.Colors[ImGuiCol_Button];
+            button_color.x *= 0.6f; // R
+            button_color.y *= 0.6f; // G
+            button_color.z *= 0.8f; // B
+            ImGui::PushStyleColor(ImGuiCol_Button, button_color);
             ImGui::PushStyleColor(ImGuiCol_Text, { 1.0f, 1.0f, 1.0f, 1.0f });
-            key = UIButton<Enter, ImGuiKey_Enter, ImGuiKey_KeypadEnter>("Enter", { bsize.x, bsize.y * 2.0f + style.WindowPadding.y / 2 }, key);
+            key = keypadButton<None, Alt_2nd, ImGuiKey_NumLock>(buttonSize, key);
             ImGui::PopStyleColor(2);
+        } else {
+            key = keypadButton<None, Alt_2nd, ImGuiKey_NumLock>(buttonSize, key);
+        }
+        if (_altMode) {
+            if (_invMode) {
+                key = keypadButton<SameLine, ASinh>(buttonSize, key);
+                key = keypadButton<SameLine, ACosh>(buttonSize, key);
+                key = keypadButton<SameLine, ATanh>(buttonSize, key);
+            } else {
+                key = keypadButton<SameLine, Sinh>(buttonSize, key);
+                key = keypadButton<SameLine, Cosh>(buttonSize, key);
+                key = keypadButton<SameLine, Tanh>(buttonSize, key);
+            }
+        } else {
+            if (_invMode) {
+                key = keypadButton<SameLine, ASin>(buttonSize, key);
+                key = keypadButton<SameLine, ACos>(buttonSize, key);
+                key = keypadButton<SameLine, ATan>(buttonSize, key);
+            } else {
+                key = keypadButton<SameLine, Sin>(buttonSize, key);
+                key = keypadButton<SameLine, Cos>(buttonSize, key);
+                key = keypadButton<SameLine, Tan>(buttonSize, key);
+            }
+        }
+        key = keypadButton<SameLine, Backspace, AC /* double-click action  */, ImGuiKey_Backspace, ImGuiKey_Delete>(buttonSize, key);
+
+        // start row 3: Inv,1/x,x²,²√,^
+        if (_invMode) {
+            ImVec4 button_color = style.Colors[ImGuiCol_Button];
+            button_color.x *= 0.6f; // R
+            button_color.y *= 0.6f; // G
+            button_color.z *= 0.8f; // B
+            ImGui::PushStyleColor(ImGuiCol_Button, button_color);
+            ImGui::PushStyleColor(ImGuiCol_Text, { 1.0f, 1.0f, 1.0f, 1.0f });
+            key = keypadButton<None, Alt_Inv, ImGuiKey_CapsLock>(buttonSize, key);
+            ImGui::PopStyleColor(2);
+        } else {
+            key = keypadButton<None, Alt_Inv, ImGuiKey_CapsLock>(buttonSize, key);
+        }
+        key = keypadButton<SameLine, Rcp>(buttonSize, key);
+        if (_altMode) {
+            key = keypadButton<SameLine, Cube>(buttonSize, key);
+            key = keypadButton<SameLine, CubeRoot>(buttonSize, key);
+        } else {
+            key = keypadButton<SameLine, Sqr>(buttonSize, key);
+            key = keypadButton<SameLine, Sqrt>(buttonSize, key);
+        }
+        key = keypadButton<SameLine, Pow>(buttonSize, key);
 
-            ImGui::SetCursorPosY(5.0f * (bsize.y + style.WindowPadding.y) - style.WindowPadding.y);
-            key = UIButton<Button0, ImGuiKey_0, ImGuiKey_Keypad0>("0", { bsize[0] * 2.0f + style.WindowPadding.x, bsize[1] }, key);
-            ImGui::SameLine();
-            key = UIButton<Dot, ImGuiKey_Period>(".", bsize, key);
-            ImGui::SameLine();
-            key = UIButton<Add, ImGuiKey_KeypadAdd>("+", bsize, key);
+        // start row 4: Log,10^x,/,*,-
+        if (_altMode) {
+            key = keypadButton<None, Ln>(buttonSize, key);
+            key = keypadButton<SameLine, PowE>(buttonSize, key);
+        } else {
+            key = keypadButton<None, Log>(buttonSize, key);
+            key = keypadButton<SameLine, Pow10>(buttonSize, key);
+        }
+        key = keypadButton<SameLine, Div, ImGuiKey_Slash, ImGuiKey_KeypadDivide>(buttonSize, key);
+        key = keypadButton<SameLine, Mul, ImGuiKey_KeypadMultiply>(buttonSize, key);
+        key = keypadButton<SameLine, Sub, ImGuiKey_KeypadSubtract>(buttonSize, key);
+
+        // start row 5: (,7,8,9,+(1/2, two rows)
+        key                          = keypadButton<None, POpen>(buttonSize, key);
+        key                          = keypadButton<SameLine, Button7, ImGuiKey_7, ImGuiKey_Keypad7>(buttonSize, key);
+        key                          = keypadButton<SameLine, Button8, ImGuiKey_8, ImGuiKey_Keypad8>(buttonSize, key);
+        key                          = keypadButton<SameLine, Button9, ImGuiKey_9, ImGuiKey_Keypad9>(buttonSize, key);
+        const float vpos_before_plus = ImGui::GetCursorPosY();
+        key                          = keypadButton<SameLine, Add, ImGuiKey_KeypadAdd>({ buttonSize.x, buttonSize.y * 2.0f + 0.5f * style.WindowPadding.y }, key);
+        ImGui::SetCursorPosY(vpos_before_plus);
+
+        // start row 6: ),4,5,6,+(2/2, two rows)
+        key = keypadButton<None, PClose>(buttonSize, key);
+        key = keypadButton<SameLine, Button4, ImGuiKey_4, ImGuiKey_Keypad4>(buttonSize, key);
+        key = keypadButton<SameLine, Button5, ImGuiKey_5, ImGuiKey_Keypad5>(buttonSize, key);
+        key = keypadButton<SameLine, Button6, ImGuiKey_6, ImGuiKey_Keypad6>(buttonSize, key);
+
+        // start row 7: E,1/,4,5,6,enter(1/2, two rows)
+        key = keypadButton<None, E_scientific, ImGuiKey_E>(buttonSize, key);
+        key = keypadButton<SameLine, Button1, ImGuiKey_1, ImGuiKey_Keypad1>(buttonSize, key);
+        key = keypadButton<SameLine, Button2, ImGuiKey_2, ImGuiKey_Keypad2>(buttonSize, key);
+        key = keypadButton<SameLine, Button3, ImGuiKey_3, ImGuiKey_Keypad3>(buttonSize, key);
+        ImGui::PushStyleColor(ImGuiCol_Button, { 11.f / 255.f, 89.f / 255.f, 191.f / 255.f, 1.0f });
+        ImGui::PushStyleColor(ImGuiCol_Text, { 1.0f, 1.0f, 1.0f, 1.0f });
+        const float vpos_before_enter = ImGui::GetCursorPosY();
+        key                           = keypadButton<SameLine, Enter, ImGuiKey_Enter, ImGuiKey_KeypadEnter>({ buttonSize.x, buttonSize.y * 2.f + 0.5f * style.WindowPadding.y }, key);
+        ImGui::PopStyleColor(2);
+        ImGui::SetCursorPosY(vpos_before_enter);
+
+        // start row 8: ±,0 (two columns),.,enter(2/2, two rows)
+        key = keypadButton<None, Sign>(buttonSize, key);
+        key = keypadButton<SameLine, Button0, ImGuiKey_0, ImGuiKey_Keypad0>({ buttonSize[0] * 2.f + style.WindowPadding.x, buttonSize.y }, key);
+        key = keypadButton<SameLine, Period, ImGuiKey_Period, ImGuiKey_KeypadDecimal>(buttonSize, key);
+        return key;
+    }
 
+    [[nodiscard]] Button drawLandscapeKeypad(std::string &valueLabel, const ImVec2 &windowSize) const {
+        /**
+         * ┌─────────────────────────────┬─────┬─────┐
+         * │       NumberInputField      │ <-  │ ESC │
+         * ├─────┬─────┬─────┬─────┬─────┼─────┼─────┤
+         * │ 2nd │ Inv │ Log │10^x │  /  │  *  │  -  │
+         * ├─────┼─────┼─────┼─────┼─────┼─────┼─────┤
+         * │ sin │ 1/x │  (  │  7  │  8  │  9  │     │
+         * ├─────┼─────┼─────┼─────┼─────┼─────┤  +  │
+         * │ cos │ x²  │  )  │  4  │  5  │  6  │     │
+         * ├─────┼─────┼─────┼─────┼─────┼─────┼─────┤
+         * │ tan │ ²√  │ EE  │  1  │  2  │  3  │     │
+         * ├─────┼─────┼─────┼─────┴─────┼─────┤  ⏎  │
+         * │  ?  │  ^  │  ±  │     0     │  .  │     │
+         * └─────┴─────┴─────┴───────────┴─────┴─────┘
+         */
+        constexpr float nRows = 6; // see above layout
+        constexpr float nCols = 7; // see above layout
+        using enum InputKeypad<>::Button;
+        using enum InputKeypad<>::LinePreference;
+        const ImGuiStyle &style = ImGui::GetStyle();
+        const float       nx    = floorf(windowSize.x / nCols) - .5f * nCols / (nCols - 1) * style.WindowPadding.x;
+        const float       ny    = floorf(windowSize.y / nRows) - .5f * nRows / (nRows - 1) * style.WindowPadding.y;
+        ImVec2            buttonSize(std::min(nx, ny), std::min(nx, ny)); // buttons are square
+        Button            key = Button::NoButton;                         // return value
+
+        // setup common number editing field
+        std::vector<char> buffer(valueLabel.begin(), valueLabel.end());
+        buffer.resize(BufferSize);
+        ImGui::PushFont(DigitizerUi::App::instance().fontLarge[DigitizerUi::App::instance().prototypeMode]);
+        // the '-2' is to accommodate the '<-' and 'Esc' button
+        ImGui::PushItemWidth(buttonSize.x * (nCols - 2.f) + (nCols - 3.f) * style.WindowPadding.x);
+        if (ImGui::InputText("##hidden", buffer.data(), buffer.size(), ImGuiInputTextFlags_CharsScientific)) {
+            valueLabel = std::string(buffer.data());
+            ImGui::PopFont();
             ImGui::PopStyleVar();
-
-            // logic
-            switch (key) {
-            case Button::NoButton: return ReturnState::None;
-            case Button::Enter: {
-                if (last_token.type != TType::tt_const && last_token.type != TType::tt_pclose)
-                    return ReturnState::None;
-                if (only_token(edit_buffer))
-                    return ReturnState::Accept;
-                auto result = evaluate(edit_buffer);
-                if (!result) return ReturnState::None;
-                edit_buffer = fmt::format("{}", result.value());
-                return ReturnState::Change;
+            ImGui::PopItemWidth();
+            return NoButton;
+        }
+        ImGui::PopFont();
+        ImGui::PopItemWidth();
+
+        // the '<-' button is exceptionally placed next to the 'ESC' button
+        key = keypadButton<SameLine, Backspace, AC /* double-click action  */, ImGuiKey_Backspace, ImGuiKey_Delete>(buttonSize, key);
+
+        // the 'ESC' clause button
+        ImGui::PushStyleColor(ImGuiCol_Button, { 11.f / 255.f, 89.f / 255.f, 191.f / 255.f, 1.0f });
+        ImGui::PushStyleColor(ImGuiCol_Text, { 1.0f, 1.0f, 1.0f, 1.0f });
+        key = keypadButton<SameLine, Escape, ImGuiKey_Escape>(buttonSize, key);
+        ImGui::PopStyleColor(2);
+
+        // Row 2: 2nd,Inv,Log,10^x,/,*,-
+        if (_altMode) {
+            ImVec4 button_color = style.Colors[ImGuiCol_Button];
+            button_color.x *= 0.6f; // R
+            button_color.y *= 0.6f; // G
+            button_color.z *= 0.8f; // B
+            ImGui::PushStyleColor(ImGuiCol_Button, button_color);
+            ImGui::PushStyleColor(ImGuiCol_Text, { 1.0f, 1.0f, 1.0f, 1.0f });
+            key = keypadButton<None, Alt_2nd, ImGuiKey_NumLock>(buttonSize, key);
+            ImGui::PopStyleColor(2);
+        } else {
+            key = keypadButton<None, Alt_2nd, ImGuiKey_NumLock>(buttonSize, key);
+        }
+        if (_invMode) {
+            ImVec4 button_color = style.Colors[ImGuiCol_Button];
+            button_color.x *= 0.6f; // R
+            button_color.y *= 0.6f; // G
+            button_color.z *= 0.8f; // B
+            ImGui::PushStyleColor(ImGuiCol_Button, button_color);
+            ImGui::PushStyleColor(ImGuiCol_Text, { 1.0f, 1.0f, 1.0f, 1.0f });
+            key = keypadButton<SameLine, Alt_Inv, ImGuiKey_CapsLock>(buttonSize, key);
+            ImGui::PopStyleColor(2);
+        } else {
+            key = keypadButton<SameLine, Alt_Inv, ImGuiKey_CapsLock>(buttonSize, key);
+        }
+        if (_altMode) {
+            key = keypadButton<SameLine, Ln>(buttonSize, key);
+            key = keypadButton<SameLine, PowE>(buttonSize, key);
+        } else {
+            key = keypadButton<SameLine, Log>(buttonSize, key);
+            key = keypadButton<SameLine, Pow10>(buttonSize, key);
+        }
+        key = keypadButton<SameLine, Div, ImGuiKey_Slash, ImGuiKey_KeypadDivide>(buttonSize, key);
+        key = keypadButton<SameLine, Mul, ImGuiKey_KeypadMultiply>(buttonSize, key);
+        key = keypadButton<SameLine, Sub, ImGuiKey_KeypadSubtract>(buttonSize, key);
+
+        // Row 3: sin[h],1/x,(,7,8,9,+(1/2, two rows)
+        if (_altMode) {
+            if (_invMode) {
+                key = keypadButton<None, ASinh>(buttonSize, key);
+            } else {
+                key = keypadButton<None, Sinh>(buttonSize, key);
+            }
+        } else {
+            if (_invMode) {
+                key = keypadButton<None, ASin>(buttonSize, key);
+            } else {
+                key = keypadButton<None, Sin>(buttonSize, key);
             }
-            case Button::Escape: return ReturnState::Discard;
-            case Button::Backspace:
-                if (last_token.type == TType::tt_const)
-                    edit_buffer.pop_back();
-                else
-                    edit_buffer.erase(edit_buffer.end() - last_token.range.size(), edit_buffer.end());
+        }
+        key                          = keypadButton<SameLine, Rcp>(buttonSize, key);
+        key                          = keypadButton<SameLine, POpen>(buttonSize, key);
+        key                          = keypadButton<SameLine, Button7, ImGuiKey_7, ImGuiKey_Keypad7>(buttonSize, key);
+        key                          = keypadButton<SameLine, Button8, ImGuiKey_8, ImGuiKey_Keypad8>(buttonSize, key);
+        key                          = keypadButton<SameLine, Button9, ImGuiKey_9, ImGuiKey_Keypad9>(buttonSize, key);
+        const float vpos_before_plus = ImGui::GetCursorPosY();
+        key                          = keypadButton<SameLine, Add, ImGuiKey_KeypadAdd>({ buttonSize.x, buttonSize.y * 2.0f + 0.5f * style.WindowPadding.y }, key);
+        ImGui::SetCursorPosY(vpos_before_plus);
+
+        // Row 4: cos[h],x²,),5,4,6,+(2/2, two rows)
+        if (_altMode) {
+            key = _invMode ? keypadButton<None, ACosh>(buttonSize, key) : keypadButton<None, Cosh>(buttonSize, key);
+        } else {
+            key = _invMode ? keypadButton<None, ACos>(buttonSize, key) : keypadButton<None, Cos>(buttonSize, key);
+        }
+        if (_altMode) {
+            key = keypadButton<SameLine, Cube>(buttonSize, key);
+        } else {
+            key = keypadButton<SameLine, Sqr>(buttonSize, key);
+        }
+        key = keypadButton<SameLine, PClose>(buttonSize, key);
+        key = keypadButton<SameLine, Button4, ImGuiKey_4, ImGuiKey_Keypad4>(buttonSize, key);
+        key = keypadButton<SameLine, Button5, ImGuiKey_5, ImGuiKey_Keypad5>(buttonSize, key);
+        key = keypadButton<SameLine, Button6, ImGuiKey_6, ImGuiKey_Keypad6>(buttonSize, key);
+
+        // Row 5: tan[h],²√,),1,2,3,enter(1/2, two rows)
+        if (_altMode) {
+            key = _invMode ? keypadButton<None, ATanh>(buttonSize, key) : keypadButton<None, Tanh>(buttonSize, key);
+        } else {
+            key = _invMode ? keypadButton<None, ATan>(buttonSize, key) : keypadButton<None, Tan>(buttonSize, key);
+        }
+        if (_altMode) {
+            key = keypadButton<SameLine, CubeRoot>(buttonSize, key);
+        } else {
+            key = keypadButton<SameLine, Sqrt>(buttonSize, key);
+        }
+        key = keypadButton<SameLine, E_scientific, ImGuiKey_E>(buttonSize, key);
+        key = keypadButton<SameLine, Button1, ImGuiKey_1, ImGuiKey_Keypad1>(buttonSize, key);
+        key = keypadButton<SameLine, Button2, ImGuiKey_2, ImGuiKey_Keypad2>(buttonSize, key);
+        key = keypadButton<SameLine, Button3, ImGuiKey_3, ImGuiKey_Keypad3>(buttonSize, key);
+        ImGui::PushStyleColor(ImGuiCol_Button, { 11.f / 255.f, 89.f / 255.f, 191.f / 255.f, 1.0f });
+        ImGui::PushStyleColor(ImGuiCol_Text, { 1.0f, 1.0f, 1.0f, 1.0f });
+        const float vpos_before_enter = ImGui::GetCursorPosY();
+        key                           = keypadButton<SameLine, Enter, ImGuiKey_Enter, ImGuiKey_KeypadEnter>({ buttonSize.x, buttonSize.y * 2.f + 0.5f * style.WindowPadding.y }, key);
+        ImGui::PopStyleColor(2);
+        ImGui::SetCursorPosY(vpos_before_enter);
+
+        // Row 7: ?,^,±,0,0,.,enter(2/2, two rows)
+        key = keypadButton<None, NoButton>(buttonSize, key);
+        key = keypadButton<SameLine, Pow>(buttonSize, key);
+        key = keypadButton<SameLine, Sign>(buttonSize, key);
+        key = keypadButton<SameLine, Button0, ImGuiKey_0, ImGuiKey_Keypad0>({ buttonSize[0] * 2.f + style.WindowPadding.x, buttonSize.y }, key);
+        key = keypadButton<SameLine, Period, ImGuiKey_Period, ImGuiKey_KeypadDecimal>(buttonSize, key);
+
+        return key;
+    }
 
-                if (last_token.range.data() != edit_buffer.data() && edit_buffer.back() == '-')
-                    edit_buffer.pop_back();
-                return ReturnState::Change;
-            case Button::AC:
-                edit_buffer.clear();
-                return ReturnState::Change;
+    [[nodiscard]] ReturnState processKeypadLogic(const Button &key) {
+        using enum InputKeypad<>::Button;
+
+        switch (key) {
+        case NoButton: return ReturnState::None;
+        case Escape: return ReturnState::Discard;
+        case Enter: {
+            if (_lastToken.type != TType::tt_const && _lastToken.type != TType::tt_pclose)
+                return ReturnState::None;
+            if (only_token(_editBuffer))
+                return ReturnState::Accept;
+            auto result = evaluate(_editBuffer);
+            if (!result) return ReturnState::None;
+            _editBuffer = fmt::format("{}", result.value());
+            return ReturnState::Change;
+        }
+
+        case Backspace:
+            if (_lastToken.type == TType::tt_const) {
+                _editBuffer.pop_back();
+            } else {
+                _editBuffer.erase(_editBuffer.end() - _lastToken.range.size(), _editBuffer.end());
+            }
 
-            case Button::Sign: {
-                if (last_token.type == TType::tt_const) {
-                    if (last_token.range.data() != edit_buffer.data() && last_token.range.data()[-1] == '-')
-                        edit_buffer.erase(edit_buffer.end() - last_token.range.size() - 1);
-                    else
-                        edit_buffer.insert(edit_buffer.end() - last_token.range.size(), '-');
-                    return ReturnState::Change;
+            if (_lastToken.range.data() != _editBuffer.data() && _editBuffer.back() == '-') {
+                _editBuffer.pop_back();
+            }
+            return ReturnState::Change;
+        case AC:
+            _editBuffer.clear();
+            return ReturnState::Change;
+        case Alt_2nd:
+            _altMode = !_altMode;
+            return ReturnState::Change;
+        case Alt_Inv:
+            _invMode = !_invMode;
+            return ReturnState::Change;
+
+        case Sign: {
+            if (_lastToken.type == TType::tt_const) {
+                if (_lastToken.range.data() != _editBuffer.data() && _lastToken.range.data()[-1] == '-') {
+                    _editBuffer.erase(_editBuffer.end() - _lastToken.range.size() - 1);
+                } else {
+                    _editBuffer.insert(_editBuffer.end() - _lastToken.range.size(), '-');
                 }
+                return ReturnState::Change;
+            }
 
-                if (last_token.type != TType::tt_pclose)
-                    return ReturnState::None;
+            if (_lastToken.type != TType::tt_pclose)
+                return ReturnState::None;
 
-                const char *brace  = nullptr;
+            const char *brace = nullptr;
 
-                auto        tokens = tokenize(edit_buffer);
-                for (auto token = tokens.rbegin(); token != tokens.rend(); ++token) {
-                    if (token->type == TType::tt_pclose)
-                        brace++;
-                    if (token->is_popen()) {
-                        if (!--brace) {
-                            brace = token->range.data();
-                            break;
-                        }
-                    }
+            for (const auto &token : tokenize(_editBuffer)) {
+                if (token.type == TType::tt_pclose) {
+                    brace++;
                 }
+                if (token.is_popen() && (!--brace)) {
+                    brace = token.range.data();
+                    break;
+                }
+            }
 
-                ptrdiff_t diff = abs(brace - edit_buffer.data());
-                auto      iter = edit_buffer.begin() + diff;
-                if (diff != 0 && *(iter - 1) == '-')
-                    edit_buffer.erase(iter - 1);
-                else
-                    edit_buffer.insert(iter, '-');
-
-                return ReturnState::Change;
+            ptrdiff_t diff = abs(brace - _editBuffer.data());
+            auto      iter = _editBuffer.begin() + diff;
+            if (diff != 0 && *(iter - 1) == '-') {
+                _editBuffer.erase(iter - 1);
+            } else {
+                _editBuffer.insert(iter, '-');
             }
-            case Button::Sqrt:
-                if (last_token.type != TType::tt_const)
-                    return ReturnState::None;
-                {
-                    std::string a{ last_token.range };
-                    float       f = stof(a);
-                    if (f < 0.0f) return ReturnState::None;
-                    edit_buffer.erase(edit_buffer.end() - last_token.range.size(), edit_buffer.end());
-                    edit_buffer.append(fmt::format("{}", sqrtf(f)));
-                }
-                return ReturnState::Change;
-            case Button::Rcp: // reciprocate
-                if (last_token.type != TType::tt_const)
-                    return ReturnState::None;
-                {
-                    std::string a{ last_token.range };
-                    float       f = stof(a);
-                    if (f == 0.0f) return ReturnState::None;
-                    edit_buffer.erase(edit_buffer.end() - last_token.range.size(), edit_buffer.end());
-                    edit_buffer.append(fmt::format("{}", 1.0f / f));
-                }
-                return ReturnState::Change;
-            case Button::Percent:
-                if (last_token.type != TType::tt_const)
+
+            return ReturnState::Change;
+        }
+        case Sqrt:
+            if (_lastToken.type != TType::tt_const)
+                return ReturnState::None;
+            {
+                std::string a{ _lastToken.range };
+                float       f = stof(a);
+                if (f < 0.0f) {
                     return ReturnState::None;
-                {
-                    std::string a{ last_token.range };
-                    float       f = stof(a);
-                    if (f == 0.0f) return ReturnState::None;
-                    edit_buffer.erase(edit_buffer.end() - last_token.range.size(), edit_buffer.end());
-                    edit_buffer.append(fmt::format("{}", f / 100.0f));
                 }
+                _editBuffer.erase(_editBuffer.end() - _lastToken.range.size(), _editBuffer.end());
+                _editBuffer.append(fmt::format("{}", sqrtf(f)));
+            }
+            return ReturnState::Change;
+        case Rcp: // reciprocate
+            if (_lastToken.type != TType::tt_const)
+                return ReturnState::None;
+            {
+                std::string a{ _lastToken.range };
+                float       f = stof(a);
+                if (f == 0.0f) return ReturnState::None;
+                _editBuffer.erase(_editBuffer.end() - _lastToken.range.size(), _editBuffer.end());
+                _editBuffer.append(fmt::format("{}", 1.0f / f));
+            }
+            return ReturnState::Change;
+        case Percent:
+            if (_lastToken.type != TType::tt_const) {
+                return ReturnState::None;
+            }
+            {
+                std::string a{ _lastToken.range };
+                float       f = stof(a);
+                if (f == 0.0f) return ReturnState::None;
+                _editBuffer.erase(_editBuffer.end() - _lastToken.range.size(), _editBuffer.end());
+                _editBuffer.append(fmt::format("{}", f / 100.0f));
+            }
+            return ReturnState::Change;
+        case Period:
+            if (_lastToken.type != TType::tt_const || _lastToken.range.find('.') != std::string_view::npos) {
+                break;
+            }
+            _editBuffer.push_back('.'); // add period to the string
+            return ReturnState::Change;
+        case E_scientific:
+            if (_lastToken.type != TType::tt_const || _lastToken.range.find('.') != std::string_view::npos) {
+                break;
+            }
+            _editBuffer.push_back('e'); // add exponential 'e' to the string
+            return ReturnState::Change;
+        case Add:
+        case Sub:
+        case Mul:
+        case Div:
+        case Pow:
+            if (!_lastToken.is_valid() || _lastToken.is_popen()) {
+                return ReturnState::None;
+            }
+            if (_lastToken.is_operator()) {
+                *(_editBuffer.end() - 2) = char(key);
                 return ReturnState::Change;
-            case Button::Dot:
-                if (last_token.type != TType::tt_const || last_token.range.find('.') != std::string_view::npos)
-                    break;
-
-                edit_buffer.push_back('.'); // add k to the string
-                return ReturnState::Change;
-            case Button::Add:
-            case Button::Sub:
-            case Button::Mul:
-            case Button::Div:
-            case Button::Pow:
-                if (!last_token.is_valid() || last_token.is_popen()) return ReturnState::None;
-                if (last_token.is_operator()) {
-                    *(edit_buffer.end() - 2) = char(key);
-                    return ReturnState::Change;
-                }
+            }
 
-                edit_buffer.push_back(' ');
-                edit_buffer.push_back(char(key));
-                edit_buffer.push_back(' ');
-                return ReturnState::Change;
-            case Button::POpen:
-                if (last_token.is_valid() && (!last_token.is_popen() && !last_token.is_operator()))
-                    return ReturnState::None;
+            _editBuffer.push_back(' ');
+            _editBuffer.push_back(char(key));
+            _editBuffer.push_back(' ');
+            return ReturnState::Change;
+        case POpen:
+            if (_lastToken.is_valid() && (!_lastToken.is_popen() && !_lastToken.is_operator())) {
+                return ReturnState::None;
+            }
 
-                parenthesi++;
-                edit_buffer.push_back(char(key));
-                return ReturnState::Change;
-            case Button::PClose:
-                if (!last_token.is_valid() || last_token.is_popen() || last_token.is_operator() || !parenthesi)
-                    return ReturnState::None;
+            _parentheses++;
+            _editBuffer.push_back(char(key));
+            return ReturnState::Change;
+        case PClose:
+            if (!_lastToken.is_valid() || _lastToken.is_popen() || _lastToken.is_operator() || !_parentheses) {
+                return ReturnState::None;
+            }
 
-                parenthesi--;
-                edit_buffer.push_back(char(key));
-                return ReturnState::Change;
-            case Button::Sin:
-                if (last_token.is_valid() && (!last_token.is_popen() && !last_token.is_operator()))
-                    return ReturnState::None;
-                edit_buffer.append("sin(");
-                parenthesi++;
-                return ReturnState::Change;
-            case Button::Sinh:
-                if (last_token.is_valid() && (!last_token.is_popen() && !last_token.is_operator()))
-                    return ReturnState::None;
-                edit_buffer.append("sinh(");
-                parenthesi++;
-                return ReturnState::Change;
-            case Button::Cos:
-                if (last_token.is_valid() && (!last_token.is_popen() && !last_token.is_operator()))
-                    return ReturnState::None;
-                edit_buffer.append("cos(");
-                parenthesi++;
-                return ReturnState::Change;
-            case Button::Cosh:
-                if (last_token.is_valid() && (!last_token.is_popen() && !last_token.is_operator()))
-                    return ReturnState::None;
-                edit_buffer.append("cosh(");
-                parenthesi++;
-                return ReturnState::Change;
-            case Button::Tan:
-                if (last_token.is_valid() && (!last_token.is_popen() && !last_token.is_operator()))
-                    return ReturnState::None;
-                edit_buffer.append("tan(");
-                parenthesi++;
-                return ReturnState::Change;
-            case Button::Tanh:
-                if (last_token.is_valid() && (!last_token.is_popen() && !last_token.is_operator()))
-                    return ReturnState::None;
-                edit_buffer.append("tanh(");
-                parenthesi++;
-                return ReturnState::Change;
-            default:
-                if (!isdigit(char(key)) || last_token.type == TType::tt_pclose) return ReturnState::None;
-                edit_buffer.push_back(char(key)); // add k to the string
-                return ReturnState::Change;
+            _parentheses--;
+            _editBuffer.push_back(char(key));
+            return ReturnState::Change;
+        case Sin:
+            if (_lastToken.is_valid() && (!_lastToken.is_popen() && !_lastToken.is_operator())) {
+                return ReturnState::None;
+            }
+            _editBuffer.append("sin(");
+            _parentheses++;
+            return ReturnState::Change;
+        case Sinh:
+            if (_lastToken.is_valid() && (!_lastToken.is_popen() && !_lastToken.is_operator())) {
+                return ReturnState::None;
+            }
+            _editBuffer.append("asinh(");
+            _parentheses++;
+            return ReturnState::Change;
+        case ASin:
+            if (_lastToken.is_valid() && (!_lastToken.is_popen() && !_lastToken.is_operator())) {
+                return ReturnState::None;
+            }
+            _editBuffer.append("asin(");
+            _parentheses++;
+            return ReturnState::Change;
+        case ASinh:
+            if (_lastToken.is_valid() && (!_lastToken.is_popen() && !_lastToken.is_operator())) {
+                return ReturnState::None;
+            }
+            _editBuffer.append("sinh(");
+            _parentheses++;
+            return ReturnState::Change;
+        case Cos:
+            if (_lastToken.is_valid() && (!_lastToken.is_popen() && !_lastToken.is_operator())) {
+                return ReturnState::None;
+            }
+            _editBuffer.append("cos(");
+            _parentheses++;
+            return ReturnState::Change;
+        case Cosh:
+            if (_lastToken.is_valid() && (!_lastToken.is_popen() && !_lastToken.is_operator())) {
+                return ReturnState::None;
+            }
+            _editBuffer.append("cosh(");
+            _parentheses++;
+            return ReturnState::Change;
+        case ACos:
+            if (_lastToken.is_valid() && (!_lastToken.is_popen() && !_lastToken.is_operator())) {
+                return ReturnState::None;
+            }
+            _editBuffer.append("acos(");
+            _parentheses++;
+            return ReturnState::Change;
+        case ACosh:
+            if (_lastToken.is_valid() && (!_lastToken.is_popen() && !_lastToken.is_operator())) {
+                return ReturnState::None;
+            }
+            _editBuffer.append("acosh(");
+            _parentheses++;
+            return ReturnState::Change;
+        case Tan:
+            if (_lastToken.is_valid() && (!_lastToken.is_popen() && !_lastToken.is_operator())) {
+                return ReturnState::None;
+            }
+            _editBuffer.append("tan(");
+            _parentheses++;
+            return ReturnState::Change;
+        case Tanh:
+            if (_lastToken.is_valid() && (!_lastToken.is_popen() && !_lastToken.is_operator())) {
+                return ReturnState::None;
+            }
+            _editBuffer.append("tanh(");
+            _parentheses++;
+            return ReturnState::Change;
+        case ATan:
+            if (_lastToken.is_valid() && (!_lastToken.is_popen() && !_lastToken.is_operator())) {
+                return ReturnState::None;
+            }
+            _editBuffer.append("atan(");
+            _parentheses++;
+            return ReturnState::Change;
+        case ATanh:
+            if (_lastToken.is_valid() && (!_lastToken.is_popen() && !_lastToken.is_operator())) {
+                return ReturnState::None;
+            }
+            _editBuffer.append("atanh(");
+            _parentheses++;
+            return ReturnState::Change;
+        default:
+            if (!isdigit(char(key)) || _lastToken.type == TType::tt_pclose) {
+                return ReturnState::None;
+            }
+            if (_firstUpdate) {
+                _editBuffer.clear();
+                _firstUpdate = false;
             }
+            _editBuffer.push_back(char(key)); // add k to the string
+            return ReturnState::Change;
         }
         return ReturnState::None;
     }
-};
+}; // end: class InputKeypad
 
 DialogButton drawDialogButtons(bool okEnabled) {
     float y = ImGui::GetContentRegionAvail().y;
@@ -565,7 +1041,7 @@ void drawBlockControlsPanel(BlockControlsPanel &ctx, const ImVec2 &pos, const Im
 
             // don't close the panel while the mouse is hovering it or edits are made.
             if (ImGui::IsWindowHovered(ImGuiHoveredFlags_AllowWhenBlockedByActiveItem)
-                    || InputKeypad::Visible()) {
+                    || InputKeypad<>::isVisible()) {
                 resetTime();
             }
 
@@ -862,14 +1338,14 @@ void blockParametersControls(DigitizerUi::Block *b, bool verticalLayout, const I
             } else if (auto *ip = std::get_if<DigitizerUi::Block::NumberParameter<int>>(&b->parameters()[i])) {
                 int val = ip->value;
                 ImGui::SetNextItemWidth(100);
-                if (InputKeypad::Edit(label, &val)) {
+                if (InputKeypad<>::edit(label, &val)) {
                     b->setParameter(i, DigitizerUi::Block::NumberParameter<int>{ val });
                     b->update();
                 }
             } else if (auto *fp = std::get_if<DigitizerUi::Block::NumberParameter<float>>(&b->parameters()[i])) {
                 float val = fp->value;
                 ImGui::SetNextItemWidth(100);
-                if (InputKeypad::Edit(label, &val)) {
+                if (InputKeypad<>::edit(label, &val)) {
                     b->setParameter(i, DigitizerUi::Block::NumberParameter<float>{ val });
                     b->update();
                 }
@@ -877,7 +1353,7 @@ void blockParametersControls(DigitizerUi::Block *b, bool verticalLayout, const I
                 std::string val = rp->value;
                 ImGui::SetNextItemWidth(100);
 
-                if (InputKeypad::Edit(label, &val)) {
+                if (InputKeypad<>::edit(label, &val)) {
                     b->setParameter(i, DigitizerUi::Block::RawParameter{ std::move(val) });
                     b->update();
                 }
diff --git a/src/ui/main.cpp b/src/ui/main.cpp
index fe61cbec..0208df1a 100644
--- a/src/ui/main.cpp
+++ b/src/ui/main.cpp
@@ -12,6 +12,7 @@
 #else
 #include <SDL_opengl.h>
 #endif
+#include <array>
 #include <cstdio>
 
 #include "app.h"
@@ -24,7 +25,6 @@
 #include "flowgraph/datasource.h"
 #include "flowgraph/fftblock.h"
 #include "flowgraphitem.h"
-#include "opendashboardpage.h"
 
 CMRC_DECLARE(ui_assets);
 CMRC_DECLARE(fonts);
@@ -32,8 +32,8 @@ CMRC_DECLARE(fonts);
 namespace DigitizerUi {
 
 struct SDLState {
-    SDL_Window   *window    = NULL;
-    SDL_GLContext glContext = NULL;
+    SDL_Window   *window    = nullptr;
+    SDL_GLContext glContext = nullptr;
 };
 
 } // namespace DigitizerUi
@@ -41,15 +41,25 @@ struct SDLState {
 static void main_loop(void *);
 
 static void loadFonts(DigitizerUi::App &app) {
-    auto loadDefaultFont = [&app](auto file, std::size_t index) {
+    static const std::vector<ImWchar> rangeLatin = {
+        0x0020, 0x0080, // Basic Latin
+        0,              // '0' is the end marker (a bit unsafe but it's the ImGui way
+    };
+    static const std::vector<ImWchar> rangeLatinExtended     = { 0x80, 0xFFFF, 0 }; // Latin-1 Supplement
+    static const std::vector<ImWchar> rangeLatinPlusExtended = {
+        0x0020,
+        0x00FF, // Basic Latin + Latin-1 Supplement (standard + extended ASCII)
+        0,
+    };
+
+    auto loadDefaultFont = [&app](auto primaryFont, auto secondaryFont, std::size_t index, const std::vector<ImWchar> ranges = {}) {
         ImFontConfig config;
-        // high oversample to have better looking text when zooming in on the flowgraph
+        // high oversample to have better looking text when zooming in on the flow graph
         config.OversampleH          = 4;
         config.OversampleV          = 4;
         config.PixelSnapH           = true;
         config.FontDataOwnedByAtlas = false;
 
-        ImGuiIO   &io               = ImGui::GetIO();
         const auto fontSize         = [&app]() -> std::array<float, 4> {
             const float scalingFactor = app.verticalDPI - app.defaultDPI;
             if (std::abs(app.verticalDPI - app.defaultDPI) < 8.f) {
@@ -62,14 +72,25 @@ static void loadFonts(DigitizerUi::App &app) {
             return { 18, 24, 26, 46 }; // default
         }();
 
-        app.fontNormal[index] = io.Fonts->AddFontFromMemoryTTF(const_cast<char *>(file.begin()), file.size(), fontSize[0], &config);
-        app.fontBig[index]    = io.Fonts->AddFontFromMemoryTTF(const_cast<char *>(file.begin()), file.size(), fontSize[1], &config);
-        app.fontBigger[index] = io.Fonts->AddFontFromMemoryTTF(const_cast<char *>(file.begin()), file.size(), fontSize[2], &config);
-        app.fontLarge[index]  = io.Fonts->AddFontFromMemoryTTF(const_cast<char *>(file.begin()), file.size(), fontSize[3], &config);
+        auto loadFont = [&primaryFont, &secondaryFont, &config, &ranges](float fontSize) {
+            ImGuiIO   &io       = ImGui::GetIO();
+            const auto loadFont = io.Fonts->AddFontFromMemoryTTF(const_cast<char *>(primaryFont.begin()), primaryFont.size(), fontSize, &config);
+            if (!ranges.empty()) {
+                config.MergeMode = true;
+                io.Fonts->AddFontFromMemoryTTF(const_cast<char *>(secondaryFont.begin()), secondaryFont.size(), fontSize, &config, ranges.data());
+                config.MergeMode = false;
+            }
+            return loadFont;
+        };
+
+        app.fontNormal[index] = loadFont(fontSize[0]);
+        app.fontBig[index]    = loadFont(fontSize[1]);
+        app.fontBigger[index] = loadFont(fontSize[2]);
+        app.fontLarge[index]  = loadFont(fontSize[3]);
     };
 
-    loadDefaultFont(cmrc::fonts::get_filesystem().open("Roboto-Medium.ttf"), 0);
-    loadDefaultFont(cmrc::ui_assets::get_filesystem().open("assets/xkcd/xkcd-script.ttf"), 1);
+    loadDefaultFont(cmrc::fonts::get_filesystem().open("Roboto-Medium.ttf"), cmrc::fonts::get_filesystem().open("Roboto-Medium.ttf"), 0);
+    loadDefaultFont(cmrc::ui_assets::get_filesystem().open("assets/xkcd/xkcd-script.ttf"), cmrc::fonts::get_filesystem().open("Roboto-Medium.ttf"), 1, rangeLatinExtended);
     ImGui::GetIO().FontDefault = app.fontNormal[app.prototypeMode];
 
     auto loadIconsFont         = [](auto name) {
@@ -118,7 +139,7 @@ int main(int argc, char **argv) {
     SDL_GL_SetAttribute(SDL_GL_STENCIL_SIZE, 8);
     SDL_DisplayMode current;
     SDL_GetCurrentDisplayMode(0, &current);
-    SDL_WindowFlags       window_flags = (SDL_WindowFlags) (SDL_WINDOW_OPENGL | SDL_WINDOW_RESIZABLE | SDL_WINDOW_ALLOW_HIGHDPI);
+    const auto            window_flags = static_cast<SDL_WindowFlags>(SDL_WINDOW_OPENGL | SDL_WINDOW_RESIZABLE | SDL_WINDOW_ALLOW_HIGHDPI);
     DigitizerUi::SDLState sdlState;
     sdlState.window    = SDL_CreateWindow("opendigitizer UI", SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED, 1280, 720, window_flags);
     sdlState.glContext = SDL_GL_CreateContext(sdlState.window);
@@ -136,7 +157,7 @@ int main(int argc, char **argv) {
     // For an Emscripten build we are disabling file-system access, so let's not
     // attempt to do a fopen() of the imgui.ini file. You may manually call
     // LoadIniSettingsFromMemory() to load settings from your own storage.
-    io.IniFilename = NULL;
+    io.IniFilename = nullptr;
 
     // Setup Platform/Renderer backends
     ImGui_ImplSDL2_InitForOpenGL(sdlState.window, sdlState.glContext);
@@ -228,9 +249,9 @@ int main(int argc, char **argv) {
 }
 
 static void main_loop(void *arg) {
-    const auto        startLoop = std::chrono::high_resolution_clock::now();
-    DigitizerUi::App *app       = static_cast<DigitizerUi::App *>(arg);
-    ImGuiIO          &io        = ImGui::GetIO();
+    const auto startLoop = std::chrono::high_resolution_clock::now();
+    auto      *app       = static_cast<DigitizerUi::App *>(arg);
+    ImGuiIO   &io        = ImGui::GetIO();
 
     app->fireCallbacks();
 
@@ -326,13 +347,13 @@ static void main_loop(void *arg) {
 
     if (service) {
         ImGui::SameLine();
-        ImGui::SetCursorPosX(width - 150);
-        if (ImGui::Button("Save flowgraph")) {
+        ImGui::SetCursorPosX(static_cast<float>(width) - 150.f);
+        if (ImGui::Button("Save flow graph")) {
             app->dashboard->saveRemoteServiceFlowgraph(service);
         }
     }
 
-    ImGui::SetCursorPos(pos + ImVec2(width - 75, 0));
+    ImGui::SetCursorPos(pos + ImVec2(static_cast<float>(width) - 75.f, 0.f));
     ImGui::PushFont(app->fontIcons);
     if (app->prototypeMode) {
         if (ImGui::Button("")) {