From 775310c61441ea79a8a060add3b78ebceea960e1 Mon Sep 17 00:00:00 2001
From: galister <22305755+galister@users.noreply.github.com>
Date: Thu, 19 Jun 2025 07:14:24 +0900
Subject: [PATCH] svg key symbols

---
 wlx-overlay-s/src/assets/keyboard.xml         | 23 ++++++++++++
 .../src/assets/keyboard/backspace.svg         |  1 +
 wlx-overlay-s/src/assets/keyboard/down.svg    |  1 +
 wlx-overlay-s/src/assets/keyboard/left.svg    |  1 +
 wlx-overlay-s/src/assets/keyboard/menu.svg    |  1 +
 wlx-overlay-s/src/assets/keyboard/return.svg  |  1 +
 wlx-overlay-s/src/assets/keyboard/right.svg   |  1 +
 wlx-overlay-s/src/assets/keyboard/shift.svg   |  1 +
 wlx-overlay-s/src/assets/keyboard/super.svg   |  1 +
 wlx-overlay-s/src/assets/keyboard/swap.svg    |  1 +
 wlx-overlay-s/src/assets/keyboard/tab.svg     |  1 +
 wlx-overlay-s/src/assets/keyboard/up.svg      |  1 +
 wlx-overlay-s/src/hid/mod.rs                  |  4 +--
 wlx-overlay-s/src/overlays/keyboard.rs        | 35 ++++++++++++++++++-
 14 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 wlx-overlay-s/src/assets/keyboard/backspace.svg
 create mode 100644 wlx-overlay-s/src/assets/keyboard/down.svg
 create mode 100644 wlx-overlay-s/src/assets/keyboard/left.svg
 create mode 100644 wlx-overlay-s/src/assets/keyboard/menu.svg
 create mode 100644 wlx-overlay-s/src/assets/keyboard/return.svg
 create mode 100644 wlx-overlay-s/src/assets/keyboard/right.svg
 create mode 100644 wlx-overlay-s/src/assets/keyboard/shift.svg
 create mode 100644 wlx-overlay-s/src/assets/keyboard/super.svg
 create mode 100644 wlx-overlay-s/src/assets/keyboard/swap.svg
 create mode 100644 wlx-overlay-s/src/assets/keyboard/tab.svg
 create mode 100644 wlx-overlay-s/src/assets/keyboard/up.svg

diff --git a/wlx-overlay-s/src/assets/keyboard.xml b/wlx-overlay-s/src/assets/keyboard.xml
index a888dda..35d85cf 100644
--- a/wlx-overlay-s/src/assets/keyboard.xml
+++ b/wlx-overlay-s/src/assets/keyboard.xml
@@ -1,5 +1,28 @@
 <layout>
 
+  <!-- Key cap with a single label. -->
+  <!-- Used for special keys. -->
+  <template name="KeySpecial">
+    <rectangle
+      border_color="#0044CC"
+      border="2"
+      round="8"
+      color="#000A1C"
+      color2="#000002"
+      gradient="vertical"
+      width="${width}"
+      height="${height}"
+      min_width="${width}"
+      min_height="${height}"
+      max_width="${width}"
+      max_height="${height}"
+      margin="4"
+      align_items="center"
+      justify_content="center">
+      <sprite color="#FFFFFF" width="32" height="32" src="keyboard/${text}.svg" />
+    </rectangle>
+  </template>
+
   <!-- Key cap with a single label. -->
   <!-- Used for letter keys on layouts without AltGr. -->
   <template name="KeyLetter">
diff --git a/wlx-overlay-s/src/assets/keyboard/backspace.svg b/wlx-overlay-s/src/assets/keyboard/backspace.svg
new file mode 100644
index 0000000..75b38e5
--- /dev/null
+++ b/wlx-overlay-s/src/assets/keyboard/backspace.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="white" d="m11.4 16l2.6-2.6l2.6 2.6l1.4-1.4l-2.6-2.6L18 9.4L16.6 8L14 10.6L11.4 8L10 9.4l2.6 2.6l-2.6 2.6zM9 20q-.475 0-.9-.213t-.7-.587L2 12l5.4-7.2q.275-.375.7-.587T9 4h11q.825 0 1.413.587T22 6v12q0 .825-.587 1.413T20 20z"/></svg>
diff --git a/wlx-overlay-s/src/assets/keyboard/down.svg b/wlx-overlay-s/src/assets/keyboard/down.svg
new file mode 100644
index 0000000..791f6bb
--- /dev/null
+++ b/wlx-overlay-s/src/assets/keyboard/down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="white" d="m12 15l-5-5h10z"/></svg>
diff --git a/wlx-overlay-s/src/assets/keyboard/left.svg b/wlx-overlay-s/src/assets/keyboard/left.svg
new file mode 100644
index 0000000..999a969
--- /dev/null
+++ b/wlx-overlay-s/src/assets/keyboard/left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="white" d="m14 17l-5-5l5-5z"/></svg>
diff --git a/wlx-overlay-s/src/assets/keyboard/menu.svg b/wlx-overlay-s/src/assets/keyboard/menu.svg
new file mode 100644
index 0000000..6f15c0b
--- /dev/null
+++ b/wlx-overlay-s/src/assets/keyboard/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="white" d="M8 17q.425 0 .713-.288T9 16t-.288-.712T8 15t-.712.288T7 16t.288.713T8 17m0-4q.425 0 .713-.288T9 12t-.288-.712T8 11t-.712.288T7 12t.288.713T8 13m0-4q.425 0 .713-.288T9 8t-.288-.712T8 7t-.712.288T7 8t.288.713T8 9m3 8h6v-2h-6zm0-4h6v-2h-6zm0-4h6V7h-6zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21z"/></svg>
diff --git a/wlx-overlay-s/src/assets/keyboard/return.svg b/wlx-overlay-s/src/assets/keyboard/return.svg
new file mode 100644
index 0000000..02cb3b3
--- /dev/null
+++ b/wlx-overlay-s/src/assets/keyboard/return.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="white" d="m10 21l-6-6l6.025-6.025l1.4 1.425l-3.6 3.6H17V4h2v12H7.825l3.6 3.575z"/></svg>
diff --git a/wlx-overlay-s/src/assets/keyboard/right.svg b/wlx-overlay-s/src/assets/keyboard/right.svg
new file mode 100644
index 0000000..041ee5b
--- /dev/null
+++ b/wlx-overlay-s/src/assets/keyboard/right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="white" d="M10 17V7l5 5z"/></svg>
diff --git a/wlx-overlay-s/src/assets/keyboard/shift.svg b/wlx-overlay-s/src/assets/keyboard/shift.svg
new file mode 100644
index 0000000..c669bad
--- /dev/null
+++ b/wlx-overlay-s/src/assets/keyboard/shift.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="white" d="M8 18v-5H3l9-11l9 11h-5v5zm-4 4v-2h16v2z"/></svg>
diff --git a/wlx-overlay-s/src/assets/keyboard/super.svg b/wlx-overlay-s/src/assets/keyboard/super.svg
new file mode 100644
index 0000000..36a9dfe
--- /dev/null
+++ b/wlx-overlay-s/src/assets/keyboard/super.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="white" d="M6.5 21q-1.45 0-2.475-1.025T3 17.5t1.025-2.475T6.5 14H8v-4H6.5q-1.45 0-2.475-1.025T3 6.5t1.025-2.475T6.5 3t2.475 1.025T10 6.5V8h4V6.5q0-1.45 1.025-2.475T17.5 3t2.475 1.025T21 6.5t-1.025 2.475T17.5 10H16v4h1.5q1.45 0 2.475 1.025T21 17.5t-1.025 2.475T17.5 21t-2.475-1.025T14 17.5V16h-4v1.5q0 1.45-1.025 2.475T6.5 21m0-2q.625 0 1.063-.437T8 17.5V16H6.5q-.625 0-1.062.438T5 17.5t.438 1.063T6.5 19m11 0q.625 0 1.063-.437T19 17.5t-.437-1.062T17.5 16H16v1.5q0 .625.438 1.063T17.5 19M10 14h4v-4h-4zM6.5 8H8V6.5q0-.625-.437-1.062T6.5 5t-1.062.438T5 6.5t.438 1.063T6.5 8M16 8h1.5q.625 0 1.063-.437T19 6.5t-.437-1.062T17.5 5t-1.062.438T16 6.5z"/></svg>
diff --git a/wlx-overlay-s/src/assets/keyboard/swap.svg b/wlx-overlay-s/src/assets/keyboard/swap.svg
new file mode 100644
index 0000000..86534f7
--- /dev/null
+++ b/wlx-overlay-s/src/assets/keyboard/swap.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="white" d="m7 20l-5-5l5-5l1.4 1.425L5.825 14H13v2H5.825L8.4 18.575zm10-6l-1.4-1.425L18.175 10H11V8h7.175L15.6 5.425L17 4l5 5z"/></svg>
diff --git a/wlx-overlay-s/src/assets/keyboard/tab.svg b/wlx-overlay-s/src/assets/keyboard/tab.svg
new file mode 100644
index 0000000..eb102b7
--- /dev/null
+++ b/wlx-overlay-s/src/assets/keyboard/tab.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="white" d="M20 18V6h2v12zm-8 0l-1.425-1.4l3.6-3.6H2v-2h12.175L10.6 7.4L12 6l6 6z"/></svg>
diff --git a/wlx-overlay-s/src/assets/keyboard/up.svg b/wlx-overlay-s/src/assets/keyboard/up.svg
new file mode 100644
index 0000000..a59b4a4
--- /dev/null
+++ b/wlx-overlay-s/src/assets/keyboard/up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="white" d="m7 14l5-5l5 5z"/></svg>
diff --git a/wlx-overlay-s/src/hid/mod.rs b/wlx-overlay-s/src/hid/mod.rs
index b9b4167..0ec4fe4 100644
--- a/wlx-overlay-s/src/hid/mod.rs
+++ b/wlx-overlay-s/src/hid/mod.rs
@@ -1,5 +1,5 @@
 use glam::{IVec2, Vec2};
-use idmap::{idmap, IdMap};
+use idmap::{IdMap, idmap};
 use idmap_derive::IntegerId;
 use input_linux::{
     AbsoluteAxis, AbsoluteInfo, AbsoluteInfoSetup, EventKind, InputId, Key, RelativeAxis,
@@ -10,7 +10,7 @@ use serde::Deserialize;
 use std::mem::transmute;
 use std::sync::LazyLock;
 use std::{fs::File, sync::atomic::AtomicBool};
-use strum::{EnumIter, EnumString, IntoEnumIterator};
+use strum::{AsRefStr, EnumIter, EnumString, IntoEnumIterator};
 use xkbcommon::xkb;
 
 #[cfg(feature = "wayland")]
diff --git a/wlx-overlay-s/src/overlays/keyboard.rs b/wlx-overlay-s/src/overlays/keyboard.rs
index d1a0338..09dfb4c 100644
--- a/wlx-overlay-s/src/overlays/keyboard.rs
+++ b/wlx-overlay-s/src/overlays/keyboard.rs
@@ -38,6 +38,21 @@ use wgui::{
 
 const PIXELS_PER_UNIT: f32 = 80.;
 const AUTO_RELEASE_MODS: [KeyModifier; 5] = [SHIFT, CTRL, ALT, SUPER, META];
+const SPECIAL_KEYS: [VirtualKey; 13] = [
+    VirtualKey::BackSpace,
+    VirtualKey::Down,
+    VirtualKey::Left,
+    VirtualKey::Menu,
+    VirtualKey::Return,
+    VirtualKey::KP_Enter,
+    VirtualKey::Right,
+    VirtualKey::LShift,
+    VirtualKey::RShift,
+    VirtualKey::LSuper,
+    VirtualKey::RSuper,
+    VirtualKey::Tab,
+    VirtualKey::Up,
+];
 
 pub const KEYBOARD_NAME: &str = "kbd";
 
@@ -195,7 +210,23 @@ where
                         KeyType::NumPad => {
                             label.push(keymap.label_for_key(vk, NUM_LOCK));
                         }
-                        KeyType::Other => {}
+                        KeyType::Other => {
+                            if SPECIAL_KEYS.contains(&vk) {
+                                cap_type = KeyCapType::Special;
+                                match vk {
+                                    VirtualKey::RShift | VirtualKey::LShift => {
+                                        label.push("shift".into());
+                                    }
+                                    VirtualKey::RSuper | VirtualKey::LSuper => {
+                                        label.push("super".into());
+                                    }
+                                    VirtualKey::KP_Enter => {
+                                        label.push("return".into());
+                                    }
+                                    _ => label.push(format!("{vk:?}").to_lowercase()),
+                                }
+                            }
+                        }
                     }
                 }
 
@@ -534,6 +565,8 @@ impl OverlayRenderer for KeyboardBackend {
 
 #[derive(Debug)]
 pub enum KeyCapType {
+    /// Label an SVG
+    Special,
     /// Label is in center of keycap
     Letter,
     /// Label on the top