UI: experimental keypad to replace android keypad

Author: chrisws

images/keypad/build.sh

@@ -1,23 +1,34 @@
 #!/bin/bash
 
 declare -a IMAGE_FILES=(\
- "proicons-cut.png"\
- "proicons-copy.png"\
- "proicons-clipboard-paste.png"\
- "proicons-save.png"\
- "proicons-bug-play.png"\
- "proicons-book-info-2.png"\
- "proicons-backspace.png"\
- "proicons-arrow-enter.png"\
- "proicons-search.png"\
+ "cut"\
+ "copy"\
+ "clipboard-paste"\
+ "save"\
+ "bug-play"\
+ "book-info-2"\
+ "backspace"\
+ "arrow-enter"\
+ "search"\
+ "keyboard-shift"\
+ "keyboard"\
 )
 
 echo "#pragma once" > keypad_icons.h
 echo "// https://procode-software.github.io/proicons/icons" >> keypad_icons.h
 for imageFile in "${IMAGE_FILES[@]}"
 do
-    name=`ls -1 ${imageFile} | sed -e 's/proicons-/img-/' | sed -e 's/\.png//'`
-    xxd -n ${name} -i ${imageFile}  >> keypad_icons.h
+    curl -sLO https://raw.githubusercontent.com/ProCode-Software/proicons/refs/heads/main/icons/svg/${imageFile}.svg
+
+    # set width, height, and fill
+    sed -i 's/width="24" height="24"/width="30" height="30"/' ${imageFile}.svg
+    sed -i 's/currentColor/#004455/' ${imageFile}.svg
+
+    # convert svg to png using ImageMagick
+    convert -background none ${imageFile}.svg ${imageFile}.png
+
+    # convert png to byte array
+    xxd -n img_${imageFile} -i proicons-${imageFile}.png  >> keypad_icons.h
 done
 
 cp keypad_icons.h ../../src/ui

src/ui/image_codec.cpp

@@ -9,23 +9,44 @@
 
 #include "image_codec.h"
 #include "lib/lodepng/lodepng.h"
-#include <cstdlib>
-#include <cstring>
 
 static char g_last_error[256] = {0};
 
 static float lerp(float a, float b, float t) {
   return a + t * (b - a);
 }
 
-ImageCodec::ImageCodec(const uint8_t *data, size_t size) :
+static void to_argb(unsigned char *image, unsigned w, unsigned h) {
+#if defined(_SDL)
+  // convert from LCT_RGBA to ARGB
+  for (unsigned y = 0; y < h; y++) {
+    unsigned yoffs = (y * w * 4);
+    for (unsigned x = 0; x < w; x++) {
+      unsigned offs = yoffs + (x * 4);
+      uint8_t r = image[offs + 2];
+      uint8_t b = image[offs + 0];
+      image[offs + 2] = b;
+      image[offs + 0] = r;
+    }
+  }
+#endif
+}
+
+ImageCodec::ImageCodec() :
   _width(0),
   _height(0),
   _pixels(nullptr) {
+}
+
+bool ImageCodec::decode(const uint8_t *data, size_t size) {
   auto error = lodepng_decode32(&_pixels, &_width, &_height, data, size);
   if (error) {
     snprintf(g_last_error, sizeof(g_last_error), "%s", lodepng_error_text(error));
+  } else {
+    to_argb(_pixels, _width, _height);
   }
+
+  return !error;
 }
 
 ImageCodec::~ImageCodec() {

src/ui/image_codec.h

@@ -17,13 +17,18 @@ class ImageCodec {
   //
   // Decode IMG to raw RGBA image
   //
-  ImageCodec(const uint8_t *data, size_t size);
+  ImageCodec();
   virtual ~ImageCodec();
 
   // Prevent copy and move
   ImageCodec(const ImageCodec &) = delete;
   ImageCodec& operator=(const ImageCodec &) = delete;
 
+  //
+  // decode the png image to a raw RGBA
+  //
+  bool decode(const uint8_t *data, size_t size);
+
   //
   // Encode the raw image RGBA data to png
   // The function allocates *data which must be freed.

src/ui/keypad.cpp

@@ -86,6 +86,24 @@ constexpr int rowCharLengths[][5] = {
   {6, 10, 8, 14, 0}, // symbols
 };
 
+//
+// KeypadImage
+//
+KeypadImage::KeypadImage() : ImageCodec() {
+}
+
+void KeypadImage::draw(int x, int y, int w, int h) const {
+  MAPoint2d dstPoint;
+  MARect srcRect;
+  dstPoint.x = x + (w - _width) / 2;
+  dstPoint.y = y + (h - _height) / 2;
+  srcRect.left = 0;
+  srcRect.top = 0;
+  srcRect.width = _width;
+  srcRect.height = _height;
+  maDrawRGB(&dstPoint, _pixels, &srcRect, 0, _width);
+}
+
 //
 // KeypadDrawContext
 //
@@ -94,15 +112,30 @@ KeypadDrawContext::KeypadDrawContext(int charWidth, int charHeight) :
   _charHeight(charHeight),
   _shiftActive(false),
   _capsLockActive(false),
-  _cutImage(img_cut, img_cut_len),
-  _copyImage(img_copy, img_copy_len),
-  _pasteImage(img_clipboard_paste, img_clipboard_paste_len),
-  _saveImage(img_save, img_save_len),
-  _runImage(img_bug_play, img_bug_play_len),
-  _helpImage(img_book_info_2, img_book_info_2_len),
-  _backImage(img_backspace, img_backspace_len),
-  _enterImage(img_arrow_enter, img_arrow_enter_len),
-  _searchImage(img_search, img_search_len) {
+  _cutImage(),
+  _copyImage(),
+  _pasteImage(),
+  _saveImage(),
+  _runImage(),
+  _helpImage(),
+  _backImage(),
+  _enterImage(),
+  _searchImage(),
+  _shiftImage() {
+
+  if (!_cutImage.decode(img_cut, img_cut_len) ||
+      !_copyImage.decode(img_copy, img_copy_len) ||
+      !_pasteImage.decode(img_clipboard_paste, img_clipboard_paste_len) ||
+      !_saveImage.decode(img_save, img_save_len) ||
+      !_runImage.decode(img_bug_play, img_bug_play_len) ||
+      !_helpImage.decode(img_book_info_2, img_book_info_2_len) ||
+      !_backImage.decode(img_backspace, img_backspace_len) ||
+      !_enterImage.decode(img_arrow_enter, img_arrow_enter_len) ||
+      !_searchImage.decode(img_search, img_search_len) ||
+      !_shiftImage.decode(img_keyboard_shift, img_keyboard_shift_len) ||
+      !_toggleImage.decode(img_keyboard, img_keyboard_len)) {
+    deviceLog(_cutImage.getLastError());
+  }
 }
 
 void KeypadDrawContext::toggleShift() {
@@ -117,6 +150,25 @@ bool KeypadDrawContext::useShift(bool specialKey) {
   return useShift;
 }
 
+const KeypadImage *KeypadDrawContext::getImage(const KeyCode keycode) const {
+  const KeypadImage *result;
+  switch (keycode) {
+  case K_CUT: result = &_cutImage; break;
+  case K_COPY: result = &_copyImage; break;
+  case K_PASTE: result = &_pasteImage; break;
+  case K_SAVE: result = &_saveImage; break;
+  case K_RUN: result = &_runImage; break;
+  case K_HELP: result = &_helpImage; break;
+  case K_BACKSPACE: result = &_backImage;break;
+  case K_ENTER: result = &_enterImage; break;
+  case K_SEARCH: result = &_searchImage; break;
+  case K_SHIFT: result = &_shiftImage; break;
+  case K_TOGGLE: result = &_toggleImage; break;
+  default: result = nullptr; break;
+  }
+  return result;
+}
+
 //
 // Key
 //
@@ -142,18 +194,6 @@ int Key::color(const KeypadTheme *theme, bool shiftActive) const {
   return result;
 }
 
-void Key::drawImage(const ImageCodec *image) const {
-  MAPoint2d dstPoint;
-  MARect srcRect;
-  dstPoint.x = _x;
-  dstPoint.y = _y;
-  srcRect.left = 0;
-  srcRect.top = 0;
-  // srcRect.width = image->_width;
-  // srcRect.height = image->_height;
-  //  maDrawRGB(&dstPoint, image->_pixels, &srcRect, 0, image->_width);
-}
-
 void Key::draw(const KeypadTheme *theme, const KeypadDrawContext *context) const {
   int rc = 5;
   int pad = 2;
@@ -198,7 +238,10 @@ void Key::draw(const KeypadTheme *theme, const KeypadDrawContext *context) const
     maSetColor(color(theme, context->_shiftActive));
     maDrawText(textX, textY, key, 1);
   } else {
-    drawImage(&context->_enterImage);
+    auto *image = context->getImage(_key);
+    if (image) {
+      image->draw(_x, _y, _w, _h);
+    }
   }
 }
 

src/ui/keypad.h

@@ -26,25 +26,34 @@ struct KeypadTheme {
   int _funcText;
 };
 
+struct KeypadImage : ImageCodec {
+  KeypadImage();
+  ~KeypadImage() = default;
+  void draw(int x, int y, int w, int h) const;
+};
+
 struct KeypadDrawContext {
   explicit KeypadDrawContext(int charWidth, int charHeight);
   void toggleShift();
   bool useShift(bool specialKey);
+  const KeypadImage *getImage(const KeyCode keycode) const;
 
   int _charWidth;
   int _charHeight;
   bool _shiftActive;
   bool _capsLockActive;
 
-  ImageCodec _cutImage;
-  ImageCodec _copyImage;
-  ImageCodec _pasteImage;
-  ImageCodec _saveImage;
-  ImageCodec _runImage;
-  ImageCodec _helpImage;
-  ImageCodec _backImage;
-  ImageCodec _enterImage;
-  ImageCodec _searchImage;
+  KeypadImage _cutImage;
+  KeypadImage _copyImage;
+  KeypadImage _pasteImage;
+  KeypadImage _saveImage;
+  KeypadImage _runImage;
+  KeypadImage _helpImage;
+  KeypadImage _backImage;
+  KeypadImage _enterImage;
+  KeypadImage _searchImage;
+  KeypadImage _shiftImage;
+  KeypadImage _toggleImage;
 };
 
 enum KeypadLayout {
@@ -61,7 +70,6 @@ struct Key {
 
   int color(const KeypadTheme *theme, bool shiftActive) const;
   void draw(const KeypadTheme *theme, const KeypadDrawContext *context) const;
-  void drawImage(const ImageCodec *image) const;
   bool inside(int x, int y) const;
   void onClick(bool useShift);