feat: settings readout

src/lib/serial/device.ts

@@ -230,7 +230,7 @@ export class CharaDevice {
    * To permanently store the settings, you *must* call commit.
    */
   async setSetting(id: number, value: number) {
-    const [status] = await this.send(`VAR B2 ${id.toString(16).padStart(2, "0").toUpperCase()} ${value}`)
+    const [status] = await this.send(`VAR B2 ${id} ${value}`)
     if (status !== "0") throw new Error(`Failed with status ${status}`)
   }
 
@@ -238,7 +238,7 @@ export class CharaDevice {
    * Retrieves a setting from the device
    */
   async getSetting(id: number): Promise<number> {
-    const [value, status] = await this.send(`VAR B1 ${id.toString(16).padStart(2, "0").toUpperCase()}`)
+    const [value, status] = await this.send(`VAR B1 ${id}`)
     if (status !== "0") throw new Error(`Setting "${id}" doesn't exist (Status code ${status})`)
     return Number(value)
   }

src/lib/setting.ts

@@ -0,0 +1,35 @@
+import type {Action} from "svelte/action"
+import {serialPort} from "$lib/serial/connection"
+
+export const setting: Action<HTMLInputElement, {id: number; inverse?: number; scale?: number}> = function (
+  node: HTMLInputElement,
+  {id, inverse, scale},
+) {
+  node.setAttribute("disabled", "")
+
+  const unsubscribe = serialPort.subscribe(async port => {
+    if (port) {
+      const type = node.getAttribute("type") as "number" | "checkbox"
+      if (type === "number") {
+        const value = Number(await port.getSetting(id).then(it => it.toString()))
+        node.value = (
+          inverse !== undefined ? inverse / value : scale !== undefined ? scale * value : value
+        ).toString()
+      } else {
+        node.checked = await port.getSetting(id).then(it => it !== 0)
+      }
+      node.removeAttribute("disabled")
+    } else {
+      node.setAttribute("disabled", "")
+    }
+  })
+  function listener() {}
+  node.addEventListener("input", listener)
+
+  return {
+    destroy() {
+      node.removeEventListener("input", listener)
+      unsubscribe()
+    },
+  }
+}

src/lib/tooltip.ts

@@ -2,7 +2,7 @@ import type {Action} from "svelte/action"
 import tippy from "tippy.js"
 import type {Props} from "tippy.js"
 
-export const tooltip: Action = function (node, props?: Partial<Props>) {
+export const tooltip: Action<HTMLElement, Partial<Props>> = function (node, props) {
   const instance = tippy(node, props)
 
   return {

src/routes/config/settings/+page.svelte

@@ -1,11 +1,12 @@
 <script>
   import {serialPort} from "$lib/serial/connection"
+  import {setting} from "$lib/setting"
 </script>
 
 {#if $serialPort}
   <form>
     <fieldset>
-      <legend><label><input type="checkbox" />Spurring</label></legend>
+      <legend><label><input type="checkbox" use:setting={{id: 41}} />Spurring</label></legend>
       <p>
         "Chording only" mode which tells your device to output chords on a press rather than a press &
         release. It also enables you to jump from one chord to another without releasing everything and can be
@@ -16,57 +17,85 @@
       <p>Spurring is toggled by chording both of the 'mirror' keys together.</p>
       <label
         >Character Counter Timeout<span class="unit"
-          ><input type="number" step="0.1" min="0" max="25.5" />s</span
+          ><input type="number" step="0.001" min="0" max="240" use:setting={{id: 43, scale: 0.001}} />s</span
         ></label
       >
     </fieldset>
 
     <fieldset>
-      <legend><label><input type="checkbox" />Arpeggiates</label></legend>
+      <legend><label><input type="checkbox" use:setting={{id: 51}} />Arpeggiates</label></legend>
       <p>
         A quick, single key press and release used to indicate a suffix, prefix, or modifier to be associated
         with a chord.
       </p>
-      <label>Tolerance<span class="unit"><input type="number" step="1" />ms</span></label>
-    </fieldset>
-
-    <fieldset>
-      <legend><label><input type="checkbox" />Character Entry</label></legend>
-      <label>Swap Keymap 0 and 1<input type="checkbox" /></label>
-      <label>Key Scan Rate<span class="unit"><input type="number" />Hz</span></label>
-      <label>Key Debounce Press<span class="unit"><input type="number" />ms</span></label>
-      <label>Key Debounce Release<span class="unit"><input type="number" />ms</span></label>
-      <label>Output Character Delay<span class="unit"><input type="number" />µs</span></label>
-    </fieldset>
-
-    <fieldset>
-      <legend><label><input type="checkbox" />Mouse</label></legend>
-      <label>Mouse Speed<input type="number" /><input type="number" /></label>
-      <label>Scroll Speed<input type="number" /></label>
-      <label title="Bounces mouse by 1px every 60s if enabled">Active Mouse<input type="checkbox" /></label>
-      <label>Poll Rate<span class="unit"><input type="number" />Hz</span></label>
-    </fieldset>
-
-    <fieldset>
-      <legend><label><input type="checkbox" />Chording</label></legend>
       <label
-        >Character Timeout <span class="unit"><input type="number" min="0" max="25.5" step="0.1" />s</span
+        >Tolerance<span class="unit"><input type="number" step="1" use:setting={{id: 54}} />ms</span></label
+      >
+    </fieldset>
+
+    <fieldset>
+      <legend><label><input type="checkbox" use:setting={{id: 12}} />Character Entry</label></legend>
+      {#if $serialPort.device === "LITE"}
+        <label>Swap Keymap 0 and 1<input type="checkbox" use:setting={{id: 13}} /></label>
+      {/if}
+      <label
+        >Key Scan Rate<span class="unit"><input type="number" use:setting={{id: 14, inverse: 1000}} />Hz</span
         ></label
       >
       <label
-        >Detection Tolerance<span class="unit"><input type="number" min="1" max="50" step="1" />ms</span
+        >Key Debounce Press<span class="unit"><input type="number" use:setting={{id: 15}} />ms</span></label
+      >
+      <label
+        >Key Debounce Release<span class="unit"><input type="number" use:setting={{id: 16}} />ms</span></label
+      >
+      <label
+        >Output Character Delay<span class="unit"><input type="number" use:setting={{id: 17}} />µs</span
+        ></label
+      >
+    </fieldset>
+
+    <fieldset>
+      <legend><label><input type="checkbox" use:setting={{id: 21}} />Mouse</label></legend>
+      <label
+        >Mouse Speed<input type="number" use:setting={{id: 22}} /><input
+          type="number"
+          use:setting={{id: 23}}
+        /></label
+      >
+      <label>Scroll Speed<input type="number" use:setting={{id: 25}} /></label>
+      <label title="Bounces mouse by 1px every 60s if enabled"
+        >Active Mouse<input type="checkbox" use:setting={{id: 24}} /></label
+      >
+      <label
+        >Poll Rate<span class="unit"><input type="number" use:setting={{id: 26, inverse: 1000}} />Hz</span
+        ></label
+      >
+    </fieldset>
+
+    <fieldset>
+      <legend><label><input type="checkbox" use:setting={{id: 31}} />Chording</label></legend>
+      <label
+        >Character Timeout <span class="unit"
+          ><input type="number" min="0" max="25.5" step="0.1" use:setting={{id: 33, scale: 0.001}} />s</span
         ></label
       >
       <label
-        >Release Tolerance<span class="unit"><input type="number" min="1" max="50" step="1" />ms</span></label
+        >Detection Tolerance<span class="unit"
+          ><input type="number" min="1" max="50" step="1" use:setting={{id: 34}} />ms</span
+        ></label
       >
-      <label>Compound Chording<input type="checkbox" /></label>
+      <label
+        >Release Tolerance<span class="unit"
+          ><input type="number" min="1" max="50" step="1" use:setting={{id: 35}} />ms</span
+        ></label
+      >
+      <label>Compound Chording<input type="checkbox" use:setting={{id: 61}} /></label>
     </fieldset>
 
     <fieldset>
       <legend><label>Device</label></legend>
-      <label>Boot message<input type="checkbox" /></label>
-      <label>Realtime Feedback<input type="checkbox" /></label>
+      <label>Boot message<input type="checkbox" use:setting={{id: 93}} /></label>
+      <label>Realtime Feedback<input type="checkbox" use:setting={{id: 92}} /></label>
       <label>
         Operating System
         <select>
@@ -81,6 +110,7 @@
     </fieldset>
 
     {#if $serialPort.device === "LITE"}
+      <!-- TODO -->
       <fieldset>
         <legend><label><input type="checkbox" />RGB</label></legend>
         <label>Brightness<input type="range" min="0" max="50" step="1" /></label>
@@ -118,6 +148,11 @@
     border: 1px solid var(--md-sys-color-outline);
     border-radius: 24px;
 
+    &:has(> legend input:not(:checked)) > :not(legend) {
+      pointer-events: none;
+      opacity: 0.7;
+    }
+
     > label {
       display: flex;
       gap: 16px;