UI: experimental keypad to replace android keypad

smallbasic · chrisws · Jun 26, 2025 · Mar 30, 2025 · Apr 5, 2025 · Apr 14, 2025
commit 99742e90b0ec7cc81ab902d482d5e5532b49171d
diff --git a/src/platform/sdl/display.cpp b/src/platform/sdl/display.cpp
@@ -188,11 +188,3 @@ bool Graphics::loadFont(const char *filename, FT_Face &face) {
 void maUpdateScreen(void) {
   ((::Graphics *)graphics)->redraw();
 }
-
-void maShowVirtualKeyboard(void) {
-  // not implemented
-}
-
-void maHideVirtualKeyboard(void) {
-  // not implemented
-}
diff --git a/src/ui/ansiwidget.h b/src/ui/ansiwidget.h
@@ -96,6 +96,7 @@ struct AnsiWidget {
   void setPixel(int x, int y, int c);
   void setScroll(int x, int y) { _back->setScroll(x, y); }
   void setStatus(const char *label);
+  void setStatusOffsetY(int statusOffsetY) { _back->setStatusOffsetY(statusOffsetY); }
   void setTextColor(long fg, long bg);
   void setXY(int x, int y);
   void setScrollSize(int scrollSize);

diff --git a/src/ui/keypad.cpp b/src/ui/keypad.cpp
@@ -21,23 +21,60 @@ constexpr char backKey[] = "Back";
 constexpr char spaceKey[] = "         ";
 constexpr char enterKey[] = "Enter";
 constexpr char toggleKey[] = "?123";
+constexpr int maxRows = 5;
+constexpr int maxCols = 10;
+constexpr int defaultPadding = 16;
+constexpr double PI = 3.14159;
+
+KeypadTheme retroTheme = {
+  ._bg = 0x1e1e1e,          // Dark gray background
+  ._key = 0x2d2d2d,         // Darker key face
+  ._keyHighlight = 0x3d3d3d,// Key highlight: medium-dark gray
+  ._text = 0xffffff,        // White text
+  ._outline = 0x5e5e5e,     // Medium gray outlines
+  ._funcKeyBg = 0x4b0082,   // Dark purple (Indigo)
+  ._funcKeyHighlight = 0x000dad, // Vivid deep blue
+  ._funcText = 0xffffff,    // White function key text
+};
+
+KeypadTheme modernDarkTheme = {
+  ._bg = 0x121212,          // Very dark gray background
+  ._key = 0x1f1f1f,         // Slightly lighter dark gray keys
+  ._keyHighlight = 0x2c2c2c,// Highlighted key: a bit lighter
+  ._text = 0xe0e0e0,        // Soft light gray text (was wrongly blue)
+  ._outline = 0x3a3a3a,     // Subtle gray outlines
+  ._funcKeyBg = 0x2962ff,   // Vibrant Material blue
+  ._funcKeyHighlight = 0x448aff, // Lighter vibrant blue
+  ._funcText = 0xffffff,    // White function key text
+};
+
+KeypadTheme modernLightTheme = {
+  ._bg = 0xfafafa,          // Very light gray (off-white)
+  ._key = 0xffffff,         // White key background
+  ._keyHighlight = 0xe0e0e0,// Light gray for pressed keys
+  ._text = 0x212121,        // Dark gray text
+  ._outline = 0xcccccc,     // Soft gray outlines (corrected from teal-ish 0x00cccc)
+  ._funcKeyBg = 0x1976d2,   // Material Design blue
+  ._funcKeyHighlight = 0x63a4ff, // Lighter blue highlight
+  ._funcText = 0xffffff,    // White text
+};
 
-constexpr RawKey letters[][10] = {
+constexpr RawKey letters[][maxCols] = {
   {{cutIcon, cutIcon}, {copyIcon, copyIcon}, {pasteIcon, pasteIcon}, {saveIcon, saveIcon}, {runIcon, runIcon}, {helpIcon, helpIcon}},
   {{"q", "Q"}, {"w", "W"}, {"e", "E"}, {"r", "R"}, {"t", "T"}, {"y", "Y"}, {"u", "U"}, {"i", "I"}, {"o", "O"}, {"p", "P"}},
   {{"a", "A"}, {"s", "S"}, {"d", "D"}, {"f", "F"}, {"g", "G"}, {"h", "H"}, {"j", "J"}, {"k", "K"}, {"l", "L"}},
   {{shiftKey, shiftKey}, {"z", "Z"}, {"x", "X"}, {"c", "C"}, {"v", "V"}, {"b", "B"}, {"n", "N"}, {"m", "M"}, {backKey, backKey}},
   {{toggleKey, toggleKey}, {spaceKey, spaceKey}, {enterKey, enterKey}}
 };
 
-constexpr RawKey numbers[][10] = {
+constexpr RawKey numbers[][maxCols] = {
   {{cutIcon, cutIcon}, {copyIcon, copyIcon}, {pasteIcon, pasteIcon}, {saveIcon, saveIcon}, {runIcon, runIcon}, {helpIcon, helpIcon}},
   {{"1", "!"}, {"2", "@"}, {"3", "#"}, {"4", "$"}, {"5", "%"}, {"6", "^"}, {"7", "&"}, {"8", "*"}, {"9", "("}, {"0", ")"}},
   {{"-", "_"}, {"/", "\\"}, {":", ";"}, {"(", ")"}, {"$", "€"}, {"&", "|"}, {"@", "~"}, {"\"", "'"}, {backKey, backKey}},
   {{toggleKey, toggleKey}, {spaceKey, spaceKey}, {enterKey, enterKey}}
 };
 
-constexpr RawKey symbols[][10] = {
+constexpr RawKey symbols[][maxCols] = {
   {{cutIcon, cutIcon}, {copyIcon, copyIcon}, {pasteIcon, pasteIcon}, {saveIcon, saveIcon}, {runIcon, runIcon}, {helpIcon, helpIcon}},
   {{"[", "{"}, {"]", "}"}, {"{", "{"}, {"}", "}"}, {"#", "#"}, {"%", "%"}, {"^", "^"}, {"*", "*"}, {"+", "+"}, {"=", "="}},
   {{"_", "_"}, {"\\", "\\"}, {"|", "|"}, {"~", "~"}, {"<", "<"}, {">", ">"}, {"`", "`"}, {backKey, backKey}},
@@ -56,10 +93,6 @@ constexpr int rowCharLengths[][5] = {
   {6, 10, 8, 14, 0}, // symbols
 };
 
-constexpr int maxRows = 5;
-constexpr int maxCols = 10;
-constexpr int defaultPadding = 16;
-
 Key::Key(const RawKey &k) :
   _label(k._normal),
   _altLabel(k._shifted) {
@@ -69,34 +102,53 @@ Key::Key(const RawKey &k) :
   _number = k._normal[0] >= '0' && k._normal[0] <= '9';
 }
 
-int Key::color(EditTheme *theme, bool shiftActive) {
+int Key::color(KeypadTheme *theme, bool shiftActive) {
   int result;
   if (_pressed || (_label.equals(shiftKey) && shiftActive)) {
-    result = _special ? theme->_selection_background : theme->_number_selection_background;
+    result = _special ? theme->_funcKeyHighlight : theme->_keyHighlight;
   } else if (_special) {
-    result = theme->_selection_color;
+    result = theme->_funcKeyHighlight;
   } else if (_number) {
-    result = theme->_number_color;
+    result = theme->_funcKeyHighlight;
   } else {
-    result = theme->_syntax_text;
+    result = theme->_text;
   }
   return result;
 }
 
-void Key::drawButton(EditTheme *theme) {
-  int rc = 1;
+void Key::drawButton(KeypadTheme *theme) {
+  int rc = 5;
   int pad = 2;
   int rx = _x + _w - pad; // right x
   int by = _y + _h - pad; // bottom y
-  int lt = _x + rc + pad; // left top
-  int vt = _y + rc + pad; // vertical top
-  int rt = rx - rc; // right top
+  int lt = _x + rc + pad; // left x (after corner)
+  int vt = _y + rc + pad; // top y (after corner)
+  int rt = rx - rc;       // right x (before corner)
+  int bt = by - rc;       // bottom y (before corner)
+  int xcL = _x + rc + pad; // x center for left arcs
+  int xcR = rx - rc;       // x center for right arcs
+  int ycT = _y + rc + pad; // y center for top arcs
+  int ycB = by - rc;       // y center for bottom arcs
 
-  maSetColor(theme->_row_marker);
+  // Set background color
+  maSetColor(_special ? theme->_funcKeyBg : theme->_key);
   maFillRect(_x, _y, _w, _h);
-  maSetColor(theme->_cursor_color);
-  maLine(lt, by, rt, by); // bottom
-  maLine(rx, vt, rx, by); // right
+
+  maSetColor(_special ? theme->_funcKeyHighlight : theme->_keyHighlight);
+
+  // Draw edges (excluding the rounded corners)
+  maLine(lt, _y + pad, rt, _y + pad); // top edge
+  maLine(_x + pad, vt, _x + pad, bt); // left edge
+  maLine(lt, by, rt, by);             // bottom edge
+  maLine(rx, vt, rx, bt);            // right edge
+
+  // Draw rounded corners using arcs (quarter circles)
+  // Arcs: maArc(xc, yc, r, startAngle, endAngle, aspect)
+  double aspect = 1.0; // Circle
+  maArc(xcL, ycT, rc, PI, PI * 3 / 2, aspect); // Top-left corner
+  maArc(xcR, ycT, rc, PI * 3 / 2, 0, aspect);  // Top-right corner
+  maArc(xcR, ycB, rc, 0, PI / 2, aspect);      // Bottom-right corner
+  maArc(xcL, ycB, rc, PI / 2, PI, aspect);     // Bottom-left corner
 }
 
 bool Key::inside(int x, int y) const {
@@ -115,20 +167,19 @@ Keypad::Keypad(int charWidth, int charHeight)
     _charHeight(charHeight),
     _shiftActive(false),
     _capsLockActive(false),
-    _visible(true),
-    _theme(nullptr),
+    _theme(&modernDarkTheme),
     _currentLayout(LayoutLetters) {
   generateKeys();
 }
 
 int Keypad::outerHeight(int charHeight) const {
-  return !_visible ? 0 : maxRows * ((defaultPadding * 2) + charHeight) + defaultPadding;
+  return maxRows * ((defaultPadding * 2) + charHeight) + defaultPadding;
 }
 
 void Keypad::generateKeys() {
   _keys.clear();
 
-  const RawKey (*activeLayout)[10] = nullptr;
+  const RawKey (*activeLayout)[maxCols] = nullptr;
   switch (_currentLayout) {
   case LayoutLetters:
     activeLayout = letters;
@@ -234,7 +285,7 @@ void Keypad::toggleShift() {
 }
 
 void Keypad::draw() {
-  maSetColor(_theme->_background);
+  maSetColor(_theme->_bg);
   maFillRect(_posX, _posY, _width, _height);
   for (const auto &key : _keys) {
     key->drawButton(_theme);
@@ -249,8 +300,9 @@ void Keypad::draw() {
 
     int labelLength = key->_labelLength;
     int xOffset = (key->_w - (_charWidth * labelLength)) / 2;
+    int yOffset = (key->_h - _charHeight) / 2;
     int textX = key->_x + xOffset;
-    int textY = key->_y + key->_h / 4;
+    int textY = key->_y + yOffset;
     maSetColor(key->color(_theme, _shiftActive));
     maDrawText(textX, textY, label.c_str(), labelLength);
   }

diff --git a/src/ui/keypad.h b/src/ui/keypad.h
@@ -9,10 +9,20 @@
 #pragma once
 
 #include "ui/strlib.h"
-#include "ui/theme.h"
 
 using namespace strlib;
 
+struct KeypadTheme {
+  int _bg;
+  int _key;
+  int _keyHighlight;
+  int _text;
+  int _outline;
+  int _funcKeyBg;
+  int _funcKeyHighlight;
+  int _funcText;
+};
+
 enum KeypadLayout {
   LayoutLetters = 0, LayoutNumbers = 1, LayoutSymbols = 2
 };
@@ -25,8 +35,8 @@ struct RawKey {
 struct Key {
   Key(const RawKey &k);
 
-  int color(EditTheme *theme, bool shiftActive);
-  void drawButton(EditTheme *theme);
+  int color(KeypadTheme *theme, bool shiftActive);
+  void drawButton(KeypadTheme *theme);
   bool inside(int x, int y) const;
 
   String _label;
@@ -45,16 +55,12 @@ struct Keypad {
   Keypad(int charWidth, int charHeight);
   ~Keypad() = default;
 
-  bool visible() const { return _visible; }
   int  outerHeight(int ch) const;
   void clicked(int x, int y, bool pressed);
   void draw();
-  void hide() { _visible = false; }
   void layout(int x, int y, int w, int h);
-  void show() { _visible = true; }
-  void setTheme(EditTheme *theme) { _theme = theme; }
 
-  private:
+private:
   int _posX;
   int _posY;
   int _width;
@@ -64,8 +70,7 @@ struct Keypad {
   strlib::List<Key *> _keys;
   bool _shiftActive;
   bool _capsLockActive;
-  bool _visible;
-  EditTheme *_theme;
+  KeypadTheme *_theme;
   KeypadLayout _currentLayout;
 
   void generateKeys();

diff --git a/src/ui/screen.cpp b/src/ui/screen.cpp
@@ -55,7 +55,8 @@ Screen::Screen(int x, int y, int width, int height, int fontSize) :
   _curX(INITXY),
   _curY(INITXY),
   _dirty(0),
-  _linePadding(0) {
+  _linePadding(0),
+  _statusOffsetY(0) {
 }
 
 Screen::~Screen() {
@@ -121,7 +122,7 @@ void Screen::drawLabel() {
     int labelLen = _label.length();
     int w = _charWidth * (labelLen + 2);
     int h = _charHeight + 2;
-    int top = _height - h;
+    int top = _height - h - _statusOffsetY;
     int left = (_width - w) / 2;
     int textY = top + ((h - _charHeight) / 2);
 
@@ -141,7 +142,7 @@ void Screen::drawMenu
10000
() {
   static const char dot[] = {'\260', '\0'};
   int gap = _charHeight / 3;
   int left = _width - _charWidth - (_charWidth / 2);
-  int top = (_height - _charHeight) + gap;
+  int top = (_height - _charHeight - _statusOffsetY) + gap;
   maSetColor(_fg);
   maDrawText(left, top, dot, 1);
   maDrawText(left, top - gap, dot, 1);

diff --git a/src/ui/screen.h b/src/ui/screen.h
@@ -77,6 +77,7 @@ struct Screen : public Shape {
   void setFont(bool bold, bool italic, int size);
   void selectFont() const { if (_font != -1) maFontSetCurrent(_font); }
   void setScroll(int x, int y) { _scrollX = x; _scrollY = y; }
+  void setStatusOffsetY(int statusOffsetY) { _statusOffsetY = statusOffsetY; }
   void setTextColor(long fg, long bg);
   void updateInputs(var_p_t form, bool setVars);
 
@@ -92,6 +93,7 @@ struct Screen : public Shape {
   int _curY;
   int _dirty;
   int _linePadding;
+  int _statusOffsetY;
   String _label;
   strlib::List<Shape *> _shapes;
   strlib::List<FormInput *> _inputs;

diff --git a/src/ui/system.cpp b/src/ui/system.cpp
@@ -1372,6 +1372,25 @@ void System::systemPrint(const char *format, ...) {
   }
 }
 
+void System::showKeypad(TextEditInput *editor) {
+  if (!editor) {
+    editor = _editor;
+  }
+  if (editor) {
+    int height = editor->showKeypad();
+    _output->setStatusOffsetY(height);
+  }
+}
+
+void System::hideKeypad(TextEditInput *editor) {
+  if (!editor) {
+    editor = _editor;
+  }
+  if (editor) {
+    editor->hideKeypad();
+  }
+}
+
 //
 // common device implementation
 //
@@ -1491,10 +1510,18 @@ char *dev_read(const char *fileName) {
   return g_system->readSource(fileName);
 }
 
+void dev_log_stack(const char *keyword, int type, int line) {
+  return g_system->logStack(keyword, type, line);
+}
+
 int maGetMilliSecondCount() {
   return dev_get_millisecond_count();
 }
 
-void dev_log_stack(const char *keyword, int type, int line) {
-  return g_system->logStack(keyword, type, line);
+void maShowVirtualKeyboard(void) {
+  g_system->showKeypad(nullptr);
+}
+
+void maHideVirtualKeyboard(void) {
+  g_system->hideKeypad(nullptr);
 }
diff --git a/src/ui/system.h b/src/ui/system.h
@@ -49,6 +49,8 @@ struct System {
   void systemLog(const char *msg);
   void systemPrint(const char *msg, ...);
   AnsiWidget *getOutput() { return _output; }
+  void showKeypad(TextEditInput *editor);
+  void hideKeypad(TextEditInput *editor);
 
   enum CursorType {
     kHand, kArrow, kIBeam