HID app: keyboard modifiers fix (#3378)

* HID App: Modifier keys fix
* Toggled keys indication
* New enter and backspace button icons

Co-authored-by: あく <alleteam@gmail.com>

applications/system/hid_app/views/hid_keyboard.c

@@ -20,19 +20,18 @@ typedef struct {
     uint8_t x;
     uint8_t y;
     uint8_t last_key_code;
-    uint16_t modifier_code;
     bool ok_pressed;
     bool back_pressed;
     bool connected;
-    char key_string[5];
     HidTransport transport;
 } HidKeyboardModel;
 
 typedef struct {
     uint8_t width;
-    char* key;
+    char key;
+    char shift_key;
     const Icon* icon;
-    char* shift_key;
+    const Icon* icon_toggled;
     uint8_t value;
 } HidKeyboardKey;
 
@@ -66,85 +65,97 @@ const HidKeyboardKey hid_keyboard_keyset[ROW_COUNT][COLUMN_COUNT] = {
         {.width = 1, .icon = &I_ButtonF12_5x8, .value = HID_KEYBOARD_F12},
     },
     {
-        {.width = 1, .icon = NULL, .key = "1", .shift_key = "!", .value = HID_KEYBOARD_1},
+        {.width = 1, .icon = NULL, .key = '1', .shift_key = '!', .value = HID_KEYBOARD_1},
-        {.width = 1, .icon = NULL, .key = "2", .shift_key = "@", .value = HID_KEYBOARD_2},
+        {.width = 1, .icon = NULL, .key = '2', .shift_key = '@', .value = HID_KEYBOARD_2},
-        {.width = 1, .icon = NULL, .key = "3", .shift_key = "#", .value = HID_KEYBOARD_3},
+        {.width = 1, .icon = NULL, .key = '3', .shift_key = '#', .value = HID_KEYBOARD_3},
-        {.width = 1, .icon = NULL, .key = "4", .shift_key = "$", .value = HID_KEYBOARD_4},
+        {.width = 1, .icon = NULL, .key = '4', .shift_key = '$', .value = HID_KEYBOARD_4},
-        {.width = 1, .icon = NULL, .key = "5", .shift_key = "%", .value = HID_KEYBOARD_5},
+        {.width = 1, .icon = NULL, .key = '5', .shift_key = '%', .value = HID_KEYBOARD_5},
-        {.width = 1, .icon = NULL, .key = "6", .shift_key = "^", .value = HID_KEYBOARD_6},
+        {.width = 1, .icon = NULL, .key = '6', .shift_key = '^', .value = HID_KEYBOARD_6},
-        {.width = 1, .icon = NULL, .key = "7", .shift_key = "&", .value = HID_KEYBOARD_7},
+        {.width = 1, .icon = NULL, .key = '7', .shift_key = '&', .value = HID_KEYBOARD_7},
-        {.width = 1, .icon = NULL, .key = "8", .shift_key = "*", .value = HID_KEYBOARD_8},
+        {.width = 1, .icon = NULL, .key = '8', .shift_key = '*', .value = HID_KEYBOARD_8},
-        {.width = 1, .icon = NULL, .key = "9", .shift_key = "(", .value = HID_KEYBOARD_9},
+        {.width = 1, .icon = NULL, .key = '9', .shift_key = '(', .value = HID_KEYBOARD_9},
-        {.width = 1, .icon = NULL, .key = "0", .shift_key = ")", .value = HID_KEYBOARD_0},
+        {.width = 1, .icon = NULL, .key = '0', .shift_key = ')', .value = HID_KEYBOARD_0},
-        {.width = 2, .icon = &I_Pin_arrow_left_9x7, .value = HID_KEYBOARD_DELETE},
+        {.width = 2, .icon = &I_Backspace_9x7, .value = HID_KEYBOARD_DELETE},
         {.width = 0, .value = HID_KEYBOARD_DELETE},
     },
     {
-        {.width = 1, .icon = NULL, .key = "q", .shift_key = "Q", .value = HID_KEYBOARD_Q},
+        {.width = 1, .icon = NULL, .key = 'q', .shift_key = 'Q', .value = HID_KEYBOARD_Q},
-        {.width = 1, .icon = NULL, .key = "w", .shift_key = "W", .value = HID_KEYBOARD_W},
+        {.width = 1, .icon = NULL, .key = 'w', .shift_key = 'W', .value = HID_KEYBOARD_W},
-        {.width = 1, .icon = NULL, .key = "e", .shift_key = "E", .value = HID_KEYBOARD_E},
+        {.width = 1, .icon = NULL, .key = 'e', .shift_key = 'E', .value = HID_KEYBOARD_E},
-        {.width = 1, .icon = NULL, .key = "r", .shift_key = "R", .value = HID_KEYBOARD_R},
+        {.width = 1, .icon = NULL, .key = 'r', .shift_key = 'R', .value = HID_KEYBOARD_R},
-        {.width = 1, .icon = NULL, .key = "t", .shift_key = "T", .value = HID_KEYBOARD_T},
+        {.width = 1, .icon = NULL, .key = 't', .shift_key = 'T', .value = HID_KEYBOARD_T},
-        {.width = 1, .icon = NULL, .key = "y", .shift_key = "Y", .value = HID_KEYBOARD_Y},
+        {.width = 1, .icon = NULL, .key = 'y', .shift_key = 'Y', .value = HID_KEYBOARD_Y},
-        {.width = 1, .icon = NULL, .key = "u", .shift_key = "U", .value = HID_KEYBOARD_U},
+        {.width = 1, .icon = NULL, .key = 'u', .shift_key = 'U', .value = HID_KEYBOARD_U},
-        {.width = 1, .icon = NULL, .key = "i", .shift_key = "I", .value = HID_KEYBOARD_I},
+        {.width = 1, .icon = NULL, .key = 'i', .shift_key = 'I', .value = HID_KEYBOARD_I},
-        {.width = 1, .icon = NULL, .key = "o", .shift_key = "O", .value = HID_KEYBOARD_O},
+        {.width = 1, .icon = NULL, .key = 'o', .shift_key = 'O', .value = HID_KEYBOARD_O},
-        {.width = 1, .icon = NULL, .key = "p", .shift_key = "P", .value = HID_KEYBOARD_P},
+        {.width = 1, .icon = NULL, .key = 'p', .shift_key = 'P', .value = HID_KEYBOARD_P},
-        {.width = 1, .icon = NULL, .key = "[", .shift_key = "{", .value = HID_KEYBOARD_OPEN_BRACKET},
+        {.width = 1, .icon = NULL, .key = '[', .shift_key = '{', .value = HID_KEYBOARD_OPEN_BRACKET},
         {.width = 1,
          .icon = NULL,
-         .key = "]",
+         .key = ']',
-         .shift_key = "}",
+         .shift_key = '}',
          .value = HID_KEYBOARD_CLOSE_BRACKET},
     },
     {
-        {.width = 1, .icon = NULL, .key = "a", .shift_key = "A", .value = HID_KEYBOARD_A},
+        {.width = 1, .icon = NULL, .key = 'a', .shift_key = 'A', .value = HID_KEYBOARD_A},
-        {.width = 1, .icon = NULL, .key = "s", .shift_key = "S", .value = HID_KEYBOARD_S},
+        {.width = 1, .icon = NULL, .key = 's', .shift_key = 'S', .value = HID_KEYBOARD_S},
-        {.width = 1, .icon = NULL, .key = "d", .shift_key = "D", .value = HID_KEYBOARD_D},
+        {.width = 1, .icon = NULL, .key = 'd', .shift_key = 'D', .value = HID_KEYBOARD_D},
-        {.width = 1, .icon = NULL, .key = "f", .shift_key = "F", .value = HID_KEYBOARD_F},
+        {.width = 1, .icon = NULL, .key = 'f', .shift_key = 'F', .value = HID_KEYBOARD_F},
-        {.width = 1, .icon = NULL, .key = "g", .shift_key = "G", .value = HID_KEYBOARD_G},
+        {.width = 1, .icon = NULL, .key = 'g', .shift_key = 'G', .value = HID_KEYBOARD_G},
-        {.width = 1, .icon = NULL, .key = "h", .shift_key = "H", .value = HID_KEYBOARD_H},
+        {.width = 1, .icon = NULL, .key = 'h', .shift_key = 'H', .value = HID_KEYBOARD_H},
-        {.width = 1, .icon = NULL, .key = "j", .shift_key = "J", .value = HID_KEYBOARD_J},
+        {.width = 1, .icon = NULL, .key = 'j', .shift_key = 'J', .value = HID_KEYBOARD_J},
-        {.width = 1, .icon = NULL, .key = "k", .shift_key = "K", .value = HID_KEYBOARD_K},
+        {.width = 1, .icon = NULL, .key = 'k', .shift_key = 'K', .value = HID_KEYBOARD_K},
-        {.width = 1, .icon = NULL, .key = "l", .shift_key = "L", .value = HID_KEYBOARD_L},
+        {.width = 1, .icon = NULL, .key = 'l', .shift_key = 'L', .value = HID_KEYBOARD_L},
-        {.width = 1, .icon = NULL, .key = ";", .shift_key = ":", .value = HID_KEYBOARD_SEMICOLON},
+        {.width = 1, .icon = NULL, .key = ';', .shift_key = ':', .value = HID_KEYBOARD_SEMICOLON},
-        {.width = 2, .icon = &I_Pin_arrow_right_9x7, .value = HID_KEYBOARD_RETURN},
+        {.width = 2, .icon = &I_Return_10x7, .value = HID_KEYBOARD_RETURN},
         {.width = 0, .value = HID_KEYBOARD_RETURN},
     },
     {
-        {.width = 1, .icon = NULL, .key = "z", .shift_key = "Z", .value = HID_KEYBOARD_Z},
+        {.width = 1, .icon = NULL, .key = 'z', .shift_key = 'Z', .value = HID_KEYBOARD_Z},
-        {.width = 1, .icon = NULL, .key = "x", .shift_key = "X", .value = HID_KEYBOARD_X},
+        {.width = 1, .icon = NULL, .key = 'x', .shift_key = 'X', .value = HID_KEYBOARD_X},
-        {.width = 1, .icon = NULL, .key = "c", .shift_key = "C", .value = HID_KEYBOARD_C},
+        {.width = 1, .icon = NULL, .key = 'c', .shift_key = 'C', .value = HID_KEYBOARD_C},
-        {.width = 1, .icon = NULL, .key = "v", .shift_key = "V", .value = HID_KEYBOARD_V},
+        {.width = 1, .icon = NULL, .key = 'v', .shift_key = 'V', .value = HID_KEYBOARD_V},
-        {.width = 1, .icon = NULL, .key = "b", .shift_key = "B", .value = HID_KEYBOARD_B},
+        {.width = 1, .icon = NULL, .key = 'b', .shift_key = 'B', .value = HID_KEYBOARD_B},
-        {.width = 1, .icon = NULL, .key = "n", .shift_key = "N", .value = HID_KEYBOARD_N},
+        {.width = 1, .icon = NULL, .key = 'n', .shift_key = 'N', .value = HID_KEYBOARD_N},
-        {.width = 1, .icon = NULL, .key = "m", .shift_key = "M", .value = HID_KEYBOARD_M},
+        {.width = 1, .icon = NULL, .key = 'm', .shift_key = 'M', .value = HID_KEYBOARD_M},
-        {.width = 1, .icon = NULL, .key = "/", .shift_key = "?", .value = HID_KEYBOARD_SLASH},
+        {.width = 1, .icon = NULL, .key = '/', .shift_key = '?', .value = HID_KEYBOARD_SLASH},
-        {.width = 1, .icon = NULL, .key = "\\", .shift_key = "|", .value = HID_KEYBOARD_BACKSLASH},
+        {.width = 1, .icon = NULL, .key = '\\', .shift_key = '|', .value = HID_KEYBOARD_BACKSLASH},
-        {.width = 1, .icon = NULL, .key = "`", .shift_key = "~", .value = HID_KEYBOARD_GRAVE_ACCENT},
+        {.width = 1, .icon = NULL, .key = '`', .shift_key = '~', .value = HID_KEYBOARD_GRAVE_ACCENT},
         {.width = 1, .icon = &I_ButtonUp_7x4, .value = HID_KEYBOARD_UP_ARROW},
-        {.width = 1, .icon = NULL, .key = "-", .shift_key = "_", .value = HID_KEYBOARD_MINUS},
+        {.width = 1, .icon = NULL, .key = '-', .shift_key = '_', .value = HID_KEYBOARD_MINUS},
     },
     {
-        {.width = 1, .icon = &I_Pin_arrow_up_7x9, .value = HID_KEYBOARD_L_SHIFT},
+        {.width = 1,
-        {.width = 1, .icon = NULL, .key = ",", .shift_key = "<", .value = HID_KEYBOARD_COMMA},
+         .icon = &I_Pin_arrow_up_7x9,
-        {.width = 1, .icon = NULL, .key = ".", .shift_key = ">", .value = HID_KEYBOARD_DOT},
+         .icon_toggled = &I_Shift_pressed_7x10,
-        {.width = 4, .icon = NULL, .key = " ", .value = HID_KEYBOARD_SPACEBAR},
+         .value = HID_KEYBOARD_L_SHIFT},
+        {.width = 1, .icon = NULL, .key = ',', .shift_key = '<', .value = HID_KEYBOARD_COMMA},
+        {.width = 1, .icon = NULL, .key = '.', .shift_key = '>', .value = HID_KEYBOARD_DOT},
+        {.width = 4, .icon = NULL, .key = ' ', .value = HID_KEYBOARD_SPACEBAR},
         {.width = 0, .value = HID_KEYBOARD_SPACEBAR},
         {.width = 0, .value = HID_KEYBOARD_SPACEBAR},
         {.width = 0, .value = HID_KEYBOARD_SPACEBAR},
-        {.width = 1, .icon = NULL, .key = "'", .shift_key = "\"", .value = HID_KEYBOARD_APOSTROPHE},
+        {.width = 1, .icon = NULL, .key = '\'', .shift_key = '\"', .value = HID_KEYBOARD_APOSTROPHE},
-        {.width = 1, .icon = NULL, .key = "=", .shift_key = "+", .value = HID_KEYBOARD_EQUAL_SIGN},
+        {.width = 1, .icon = NULL, .key = '=', .shift_key = '+', .value = HID_KEYBOARD_EQUAL_SIGN},
         {.width = 1, .icon = &I_ButtonLeft_4x7, .value = HID_KEYBOARD_LEFT_ARROW},
         {.width = 1, .icon = &I_ButtonDown_7x4, .value = HID_KEYBOARD_DOWN_ARROW},
         {.width = 1, .icon = &I_ButtonRight_4x7, .value = HID_KEYBOARD_RIGHT_ARROW},
     },
     {
-        {.width = 2, .icon = &I_Ctrl_17x10, .value = HID_KEYBOARD_L_CTRL},
+        {.width = 2,
+         .icon = &I_Ctrl_17x10,
+         .icon_toggled = &I_Ctrl_pressed_17x10,
+         .value = HID_KEYBOARD_L_CTRL},
         {.width = 0, .value = HID_KEYBOARD_L_CTRL},
-        {.width = 2, .icon = &I_Alt_17x10, .value = HID_KEYBOARD_L_ALT},
+        {.width = 2,
+         .icon = &I_Alt_17x10,
+         .icon_toggled = &I_Alt_pressed_17x10,
+         .value = HID_KEYBOARD_L_ALT},
         {.width = 0, .value = HID_KEYBOARD_L_ALT},
-        {.width = 2, .icon = &I_Cmd_17x10, .value = HID_KEYBOARD_L_GUI},
+        {.width = 2,
+         .icon = &I_Cmd_17x10,
+         .icon_toggled = &I_Cmd_pressed_17x10,
+         .value = HID_KEYBOARD_L_GUI},
         {.width = 0, .value = HID_KEYBOARD_L_GUI},
         {.width = 2, .icon = &I_Tab_17x10, .value = HID_KEYBOARD_TAB},
         {.width = 0, .value = HID_KEYBOARD_TAB},
@@ -155,13 +166,6 @@ const HidKeyboardKey hid_keyboard_keyset[ROW_COUNT][COLUMN_COUNT] = {
     },
 };
 
-static void hid_keyboard_to_upper(char* str) {
-    while(*str) {
-        *str = toupper((unsigned char)*str);
-        str++;
-    }
-}
-
 static void hid_keyboard_draw_key(
     Canvas* canvas,
     HidKeyboardModel* model,
@@ -192,28 +196,32 @@ static void hid_keyboard_draw_key(
             KEY_HEIGHT);
     }
     if(key.icon != NULL) {
+        const Icon* key_icon = key.icon;
+        if((model->ctrl && key.value == HID_KEYBOARD_L_CTRL) ||
+           (model->alt && key.value == HID_KEYBOARD_L_ALT) ||
+           (model->shift && key.value == HID_KEYBOARD_L_SHIFT) ||
+           (model->gui && key.value == HID_KEYBOARD_L_GUI)) {
+            if(key.icon_toggled) {
+                key_icon = key.icon_toggled;
+            }
+        }
         // Draw the icon centered on the button
         canvas_draw_icon(
             canvas,
-            MARGIN_LEFT + x * (KEY_WIDTH + KEY_PADDING) + keyWidth / 2 - key.icon->width / 2,
+            MARGIN_LEFT + x * (KEY_WIDTH + KEY_PADDING) + keyWidth / 2 - key_icon->width / 2,
-            MARGIN_TOP + y * (KEY_HEIGHT + KEY_PADDING) + KEY_HEIGHT / 2 - key.icon->height / 2,
+            MARGIN_TOP + y * (KEY_HEIGHT + KEY_PADDING) + KEY_HEIGHT / 2 - key_icon->height / 2,
-            key.icon);
+            key_icon);
     } else {
+        char key_str[2] = "\0\0";
         // If shift is toggled use the shift key when available
-        strcpy(model->key_string, (model->shift && key.shift_key != 0) ? key.shift_key : key.key);
+        key_str[0] = (model->shift && key.shift_key != 0) ? key.shift_key : key.key;
-        // Upper case if ctrl or alt was toggled true
-        if((model->ctrl && key.value == HID_KEYBOARD_L_CTRL) ||
-           (model->alt && key.value == HID_KEYBOARD_L_ALT) ||
-           (model->gui && key.value == HID_KEYBOARD_L_GUI)) {
-            hid_keyboard_to_upper(model->key_string);
-        }
         canvas_draw_str_aligned(
             canvas,
             MARGIN_LEFT + x * (KEY_WIDTH + KEY_PADDING) + keyWidth / 2 + 1,
             MARGIN_TOP + y * (KEY_HEIGHT + KEY_PADDING) + KEY_HEIGHT / 2,
             AlignCenter,
             AlignCenter,
-            model->key_string);
+            key_str);
     }
 }
 
@@ -244,6 +252,8 @@ static void hid_keyboard_draw_callback(Canvas* canvas, void* context) {
         initY = model->y - 4;
     }
 
+    elements_scrollbar(canvas, initY, 3);
+
     for(uint8_t y = initY; y < ROW_COUNT; y++) {
         const HidKeyboardKey* keyboardKeyRow = hid_keyboard_keyset[y];
         uint8_t x = 0;
@@ -286,6 +296,14 @@ static void hid_keyboard_get_select_key(HidKeyboardModel* model, HidKeyboardPoin
                                 0); // Skip zero width keys, pretend they are one key
 }
 
+static void hid_keyboard_modifier_set(Hid* hid, uint16_t keycode, bool is_pressed) {
+    if(is_pressed) {
+        hid_hal_keyboard_press(hid, keycode);
+    } else {
+        hid_hal_keyboard_release(hid, keycode);
+    }
+}
+
 static void hid_keyboard_process(HidKeyboard* hid_keyboard, InputEvent* event) {
     with_view_model(
         hid_keyboard->view,
@@ -300,35 +318,25 @@ static void hid_keyboard_process(HidKeyboard* hid_keyboard, InputEvent* event) {
                     // Toggle the modifier key when clicked, and click the key
                     if(model->last_key_code == HID_KEYBOARD_L_SHIFT) {
                         model->shift = !model->shift;
-                        if(model->shift)
+                        hid_keyboard_modifier_set(
-                            model->modifier_code |= KEY_MOD_LEFT_SHIFT;
+                            hid_keyboard->hid, KEY_MOD_LEFT_SHIFT, model->shift);
-                        else
-                            model->modifier_code &= ~KEY_MOD_LEFT_SHIFT;
                     } else if(model->last_key_code == HID_KEYBOARD_L_ALT) {
                         model->alt = !model->alt;
-                        if(model->alt)
+                        hid_keyboard_modifier_set(hid_keyboard->hid, KEY_MOD_LEFT_ALT, model->alt);
-                            model->modifier_code |= KEY_MOD_LEFT_ALT;
-                        else
-                            model->modifier_code &= ~KEY_MOD_LEFT_ALT;
                     } else if(model->last_key_code == HID_KEYBOARD_L_CTRL) {
                         model->ctrl = !model->ctrl;
-                        if(model->ctrl)
+                        hid_keyboard_modifier_set(
-                            model->modifier_code |= KEY_MOD_LEFT_CTRL;
+                            hid_keyboard->hid, KEY_MOD_LEFT_CTRL, model->ctrl);
-                        else
-                            model->modifier_code &= ~KEY_MOD_LEFT_CTRL;
                     } else if(model->last_key_code == HID_KEYBOARD_L_GUI) {
                         model->gui = !model->gui;
-                        if(model->gui)
+                        hid_keyboard_modifier_set(hid_keyboard->hid, KEY_MOD_LEFT_GUI, model->gui);
-                            model->modifier_code |= KEY_MOD_LEFT_GUI;
+                    } else {
-                        else
+                        hid_hal_keyboard_press(hid_keyboard->hid, model->last_key_code);
-                            model->modifier_code &= ~KEY_MOD_LEFT_GUI;
                     }
-                    hid_hal_keyboard_press(
+
-                        hid_keyboard->hid, model->modifier_code | model->last_key_code);
                 } else if(event->type == InputTypeRelease) {
                     // Release happens after short and long presses
-                    hid_hal_keyboard_release(
+                    hid_hal_keyboard_release(hid_keyboard->hid, model->last_key_code);
-                        hid_keyboard->hid, model->modifier_code | model->last_key_code);
                     model->ok_pressed = false;
                 }
             } else if(event->key == InputKeyBack) {
@@ -364,6 +372,16 @@ static bool hid_keyboard_input_callback(InputEvent* event, void* context) {
 
     if(event->type == InputTypeLong && event->key == InputKeyBack) {
         hid_hal_keyboard_release_all(hid_keyboard->hid);
+        with_view_model(
+            hid_keyboard->view,
+            HidKeyboardModel * model,
+            {
+                model->shift = false;
+                model->alt = false;
+                model->ctrl = false;
+                model->gui = false;
+            },
+            true);
     } else {
         hid_keyboard_process(hid_keyboard, event);
         consumed = true;