feat: virtual key

Author: lyonbot

src/config.rs

@@ -127,6 +127,8 @@ pub struct Config {
     #[serde(skip)]
     pub print_lib_js: bool,
 
+    pub virtual_keys_profiles: Option<String>,
+
     #[arg(
         long,
         help = "Use custom template of index.html to be served by Weylus."

src/protocol.rs

@@ -19,13 +19,16 @@ pub enum MessageInbound {
     KeyboardEvent(KeyboardEvent),
     GetCapturableList,
     Config(ClientConfiguration),
+    RequestVirtualKeysProfiles,
+    SetVirtualKeysProfiles(String),
     PauseVideo,
     ResumeVideo,
 }
 
 #[derive(Serialize, Deserialize, Debug)]
 pub enum MessageOutbound {
     CapturableList(Vec<String>),
+    VirtualKeysProfiles(String),
     NewVideo,
     ConfigOk,
     ConfigError(String),

src/websocket.rs

@@ -119,6 +119,8 @@ impl<S, R, FnUInput> WeylusClientHandler<S, R, FnUInput> {
                         MessageInbound::ResumeVideo => {
                             self.video_sender.send(VideoCommands::Resume).unwrap()
                         }
+                        MessageInbound::RequestVirtualKeysProfiles => self.send_virtual_keys_profiles(),
+                        MessageInbound::SetVirtualKeysProfiles(profiles) => self.update_virtual_keys_profiles(profiles),
                     }
                 }
                 Err(err) => {
@@ -280,6 +282,30 @@ impl<S, R, FnUInput> WeylusClientHandler<S, R, FnUInput> {
             ));
         }
     }
+
+    fn send_virtual_keys_profiles(&mut self) 
+    where
+        S: WeylusSender,
+    {
+        use crate::config;
+        let profiles = config::get_config()
+            .virtual_keys_profiles
+            .unwrap_or("[]".into())
+            .clone();
+        self.send_message(MessageOutbound::VirtualKeysProfiles(profiles));
+    }
+
+    fn update_virtual_keys_profiles(&mut self, profiles: String)
+    where
+        S: WeylusSender,
+    {
+        use crate::config::{self, write_config};
+        let mut config = config::get_config().clone();
+        config.virtual_keys_profiles = Some(profiles.clone());
+        write_config(&config);
+
+        // TODO: broadcast to all clients
+    }
 }
 
 fn handle_video<S: WeylusSender + Clone + 'static>(

www/src/index.ts

@@ -1,3 +1,4 @@
+import { initVirtualKey, setVirtualKeysProfiles } from "./virtualKey";
 import { estimateCoord, resetCoordEstimator } from "precise-client-coord";
 
 window.addEventListener("resize", resetCoordEstimator);
@@ -277,6 +278,10 @@ class Settings {
 
             this.toggle_energysaving(!!this.checks.get("energysaving").checked);
 
+            if (!this.checks.get("enable_virtual_keys").checked) {
+                document.getElementById("vk-container").classList.add("hidden");
+            }
+
             let client_name = settings["client_name"];
             if (client_name)
                 this.client_name_input.value = client_name;
@@ -809,6 +814,10 @@ function handle_messages(
                 else if ("ConfigError" in msg) {
                     onConfigError(msg["ConfigError"]);
                 }
+                else if ("VirtualKeysProfiles" in msg) {
+                    const profiles = JSON.parse(msg["VirtualKeysProfiles"] || '[]');
+                    setVirtualKeysProfiles(profiles);
+                }
             }
 
             return;
@@ -894,6 +903,7 @@ function init() {
             ws.send('"GetCapturableList"');
             if (!settings.video_enabled()) webSocket.send('"PauseVideo"');
 
+            ws.send('"RequestVirtualKeysProfiles"');
             settings.send_server_config();
 
             document.onvisibilitychange = () => {
@@ -944,6 +954,7 @@ function init() {
     makeConnection();
 
     settings = new Settings();
+    initVirtualKey();
 
     document.body.addEventListener("contextmenu", (event) => {
         event.preventDefault();

www/src/style.scss

@@ -302,3 +302,66 @@ label input:disabled + span {
   0% { opacity: 0; }
   100% { opacity: 1; }
 }
+
+// Virtual Keys
+
+#vk-container {
+  position: absolute;
+  inset: 0;
+  height: 0;
+
+  &:not(.isEditing) {
+    .vk-editing-notice {
+      display: none;
+    }
+  }
+}
+
+$vk-editing-rgb: 255, 200, 100;
+
+.vk-editing-notice {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  padding: 4px 8px;
+  background: #{"rgba" }($vk-editing-rgb, 1);
+}
+
+.vk-key {
+  --opacity: 0.5;
+  position: fixed;
+  transform: translate(-50%, -50%);
+  background: rgba(255, 255, 255, var(--opacity));
+  border-radius: 8px;
+  border: 4px solid rgba(0, 0, 0, var(--opacity));
+  color: #000;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: all;
+  overflow: hidden;
+  transition: transform 0.2s;
+
+  #vk-container.isEditing & {
+    background: rgba($vk-editing-rgb, var(--opacity));
+
+    &.isActive {
+      outline: 2px solid $accent-color;
+    }
+  }
+
+  &.inCombo {
+    border-style: double;
+  }
+
+  &.justPressed {
+    transform: translate(-50%, -50%) scale(0.9);
+    transition-duration: 0s;
+  }
+
+  &:hover {
+    --opacity: 0.75;
+  }
+}