svg key symbols

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">

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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")]

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