UI: experimental keypad to replace android keypad

Author: chrisws

src/platform/android/app/src/main/java/net/sourceforge/smallbasic/MainActivity.java

@@ -326,12 +326,6 @@ public void run() {
     return result;
   }
 
-  public int getDensity() {
-    DisplayMetrics metrics = new DisplayMetrics();
-    getWindowManager().getDefaultDisplay().getMetrics(metrics);
-    return metrics.densityDpi;
-  }
-
   public String getIpAddress() {
     String result = "";
     try {

src/platform/android/jni/editor.cpp

@@ -37,7 +37,7 @@ struct StatusMessage {
     _scroll = editor->getScroll();
   }
 
-  void toggleEnabled(const TextEditInput *editor) {
+  void toggleStatus(const TextEditInput *editor) {
     statusEnabled = !statusEnabled;
     setDirty(editor);
   }
@@ -156,7 +156,7 @@ void Runtime::editSource(strlib::String loadPath, bool restoreOnExit) {
   if (_keypad != nullptr) {
     _output->addInput(_keypad);
   } else {
-    _keypad = new KeypadInput(false, false, charWidth, charHeight, _density);
+    _keypad = new KeypadInput(false, false, charWidth, charHeight);
     _output->addInput(_keypad);
   }
 
@@ -197,7 +197,7 @@ void Runtime::editSource(strlib::String loadPath, bool restoreOnExit) {
         switch (event.key) {
         case SB_KEY_F(2): case SB_KEY_F(3): case SB_KEY_F(4): case SB_KEY_F(5): case SB_KEY_F(6):
         case SB_KEY_F(7): case SB_KEY_F(8): case SB_KEY_F(10): case SB_KEY_F(11): case SB_KEY_F(12):
-        case SB_KEY_MENU: case SB_KEY_ESCAPE: case SB_KEY_BREAK:
+        case SB_KEY_MENU: case SB_KEY_ESCAPE: case SB_KEY_BREAK: case SB_KEY_CTRL('o'):
           // unhandled keys
           redraw = false;
           break;
@@ -243,17 +243,8 @@ void Runtime::editSource(strlib::String loadPath, bool restoreOnExit) {
           widget->paste(text);
           free(text);
           break;
-        case SB_KEY_CTRL('o'):
-          _output->selectScreen(USER_SCREEN1);
-          showCompletion(true);
-          _output->redraw();
-          _state = kActiveState;
-          waitForBack();
-          _output->selectScreen(FORM_SCREEN);
-          _state = kEditState;
-          break;
         case SB_KEY_CTRL('t'):
-          statusMessage.toggleEnabled(editWidget);
+          statusMessage.toggleStatus(editWidget);
           break;
         default:
           redraw = widget->edit(event.key, _output->getScreenWidth(), charWidth);

src/platform/android/jni/runtime.cpp

@@ -234,7 +234,6 @@ Runtime::Runtime(android_app *app) :
   _looper = ALooper_forThread();
   _sensorManager = ASensorManager_getInstance();
   memset(&_sensors, 0, sizeof(_sensors));
-  _density = getInteger("getDensity");
 }
 
 Runtime::~Runtime() {

src/platform/android/jni/runtime.h

@@ -86,7 +86,6 @@ struct Runtime : public System {
 private:
   void editSource(String loadPath, bool restoreOnExit) override;
 
-  int _density;
   bool _keypadActive;
   bool _hasFocus;
   Graphics *_graphics;

src/platform/android/webui/package.json

@@ -5,27 +5,27 @@
   "type": "module",
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^7.0.2",
-    "@mui/material": "^7.0.2",
-    "@mui/x-data-grid": "^8.2.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.2.0",
+    "@mui/material": "^7.2.0",
+    "@mui/x-data-grid": "^8.8.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",
     "react-router-hash-link": "^2.4.3"
   },
   "devDependencies": {
-    "@eslint/js": "^9.26.0",
-    "@vitejs/plugin-react": "^4.4.1",
-    "eslint": "^9.26.0",
+    "@eslint/js": "^9.31.0",
+    "@vitejs/plugin-react": "^4.6.0",
+    "eslint": "^9.31.0",
     "eslint-config-react": "^1.1.7",
     "eslint-define-config": "^2.1.0",
-    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "globals": "^16.0.0",
+    "globals": "^16.3.0",
     "npm-check-updates": "^18.0.1",
     "vite": "^6.3.5",
     "vite-plugin-eslint": "^1.8.1"

src/platform/sdl/editor.cpp

@@ -232,7 +232,7 @@ void Runtime::editSource(String loadPath, bool restoreOnExit) {
   if (_keypad != nullptr) {
     _output->addInput(_keypad);
   } else {
-    _keypad = new KeypadInput(false, true, charWidth, charHeight, 0);
+    _keypad = new KeypadInput(false, true, charWidth, charHeight);
     _output->addInput(_keypad);
   }
 

src/ui/inputs.h

@@ -120,6 +120,7 @@ struct FormInput : public Shape {
   virtual bool hasHover() { return false; }
   virtual void setFocus(bool focus);
   virtual void layout(int x, int y, int w, int h) {}
+  virtual int layoutHeight(int screenHeight) { return 0; }
   virtual bool floatBottom() { return false; }
   virtual bool floatTop() { return false; }
   virtual void drawHover(int dx, int dy, bool selected);

src/ui/keypad.cpp

@@ -23,6 +23,7 @@ constexpr int SPACE_COLS = 3;
 constexpr int IMAGE_SIZE = 30;
 constexpr int MIN_DENSITY = 280;
 constexpr double PI = 3.14159;
+constexpr double PADDING_FACTOR = 0.95;
 
 // https://materialui.co/colors
 KeypadTheme MODERN_DARK_THEME = {
@@ -128,7 +129,7 @@ KeypadDrawContext::KeypadDrawContext(int charWidth, int charHeight, int padding)
   _charWidth(charWidth),
   _charHeight(charHeight),
   _keySet(kLower) {
-  const int imageSize = static_cast<int>(MAX(padding * 1.5, charHeight) * 1.2);
+  const int imageSize = static_cast<int>(MAX(padding * 1.4, charHeight) * 1.2);
 
   if (!_cutImage.decode(img_cut, img_cut_len) ||
       !_copyImage.decode(img_copy, img_copy_len) ||
@@ -370,23 +371,19 @@ void Key::onClick(const KeypadDrawContext *context) const {
 //
 // Keypad
 //
-Keypad::Keypad(int charWidth, int charHeight, bool toolbar, int density)
+Keypad::Keypad(int charWidth, int charHeight, bool toolbar)
   : _posX(0),
     _posY(0),
     _width(0),
     _height(0),
-    _padding(density < MIN_DENSITY ? PADDING : (PADDING * 2)),
+    _padding(static_cast<int>(charHeight * PADDING_FACTOR)),
     _theme(&MODERN_DARK_THEME),
     _context(charWidth, charHeight, _padding),
     _toolbar(toolbar),
     _pressed(nullptr) {
   generateKeys();
 }
 
-int Keypad::outerHeight(int charHeight) const {
-  return (_toolbar ? 1 : MAX_ROWS) * ((_padding * 2) + charHeight);
-}
-
 void Keypad::generateKeys() {
   _keys.clear();
 
@@ -451,15 +448,31 @@ void Keypad::layout(int x, int y, int w, int h) {
   }
 }
 
+int Keypad::layoutHeight(int screenHeight) {
+  int charHeight = _context._charHeight;
+  int maxHeight = static_cast<int>(screenHeight * 0.45);
+  int padding = static_cast<int>(charHeight * PADDING_FACTOR);
+  int rows = _toolbar ? 1 : MAX_ROWS;
+  int height = rows * ((padding * 2) + charHeight);
+  if (height > maxHeight) {
+    // h = r(ch + 2p) -> p = (h - r * ch) / (2 * r)
+    height = maxHeight;
+    padding = ((height - (rows * charHeight)) / (rows * 2));
+  }
+  _padding = padding;
+  return height;
+}
+
 void Keypad::clicked(int x, int y, bool pressed) {
+  Key *down = _pressed;
   _pressed = nullptr;
   for (const auto key : _keys) {
     if (key->inside(x, y)) {
       if (pressed) {
         _pressed = key;
       } else if (key->_key._lower == K_TOGGLE) {
         _context.toggle();
-      } else {
+      } else if (key == down) {
         key->onClick(&_context);
       }
       break;
@@ -478,11 +491,10 @@ void Keypad::draw() const {
 //
 // KeypadInput
 //
-KeypadInput::KeypadInput(bool floatTop, bool toolbar, int charWidth, int charHeight, int density) :
+KeypadInput::KeypadInput(bool floatTop, bool toolbar, int charWidth, int charHeight) :
   FormInput(0, 0, 0, charHeight * 2),
   _floatTop(floatTop) {
-  _keypad = new Keypad(charWidth, charHeight, toolbar, density);
-  _height = _keypad->outerHeight(charHeight);
+  _keypad = new Keypad(charWidth, charHeight, toolbar);
 }
 
 KeypadInput::~KeypadInput() {
@@ -504,3 +516,8 @@ void KeypadInput::layout(int x, int y, int w, int h) {
   _width = w;
   _keypad->layout(_x, _y, _width, _height);
 }
+
+int KeypadInput::layoutHeight(int screenHeight) {
+  _height = _keypad->layoutHeight(screenHeight);
+  return _height;
+}

src/ui/keypad.h

@@ -18,10 +18,8 @@ using namespace strlib;
 #if defined(_SDL)
 // for cursor display
 #define HAS_HOVER true
-#define PADDING 6
 #else
 #define HAS_HOVER false
-#define PADDING 16
 #endif
 
 struct KeypadTheme {
@@ -96,13 +94,13 @@ struct Key {
 };
 
 struct Keypad {
-  Keypad(int charWidth, int charHeight, bool toolbar, int density);
+  Keypad(int charWidth, int charHeight, bool toolbar);
   ~Keypad() = default;
 
-  int outerHeight(int charHeight) const;
   void clicked(int x, int y, bool pressed);
   void draw() const;
   void layout(int x, int y, int w, int h);
+  int layoutHeight(int screenHeight);
 
 private:
   void generateKeys();
@@ -120,14 +118,15 @@ struct Keypad {
 };
 
 struct KeypadInput : public FormInput {
-  KeypadInput(bool floatTop, bool toolbar, int charWidth, int charHeight, int density = -1);
+  KeypadInput(bool floatTop, bool toolbar, int charWidth, int charHeight);
   ~KeypadInput() override;
 
   void clicked(int x, int y, bool pressed) override;
   void draw(int x, int y, int w, int h, int chw) override;
   bool floatTop() override { return _floatTop; }
   bool floatBottom() override { return !_floatTop; }
   void layout(int x, int y, int w, int h) override;
+  int  layoutHeight(int screenHeight) override;
   void drawHover(int dx, int dy, bool selected) override {};
   bool hasHover() override { return HAS_HOVER; }
 

src/ui/screen.cpp

@@ -302,9 +302,9 @@ void Screen::layoutInputs(int newWidth, int newHeight) {
   List_each(FormInput *, it, _inputs) {
     FormInput *input = (*it);
     if (input->floatBottom()) {
-      offsBottom = input->_height;
+      offsBottom = input->layoutHeight(newHeight);
     } else if (input->floatTop()) {
-      offsTop = input->_height;
+      offsTop = input->layoutHeight(newHeight);
     }
   }
   List_each(FormInput *, it, _inputs) {