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 {