From cd1620863446a0319639c7ac86f89dfa4f5a3044 Mon Sep 17 00:00:00 2001
From: Kai Vogelgesang <kai@leafbla.de>
Date: Sun, 25 Dec 2022 17:33:54 +0100
Subject: [PATCH] Implement slider poc

---
 webserial/src/App.svelte                     |  2 ++
 webserial/src/dmx/fixtures/par.svelte        | 38 ++++++++++++++++++++
 webserial/src/dmx/store.ts                   |  3 ++
 webserial/src/serial/SerialConnection.svelte |  5 ++-
 4 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 webserial/src/dmx/fixtures/par.svelte
 create mode 100644 webserial/src/dmx/store.ts

diff --git a/webserial/src/App.svelte b/webserial/src/App.svelte
index 0491b78..78c0d6f 100644
--- a/webserial/src/App.svelte
+++ b/webserial/src/App.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
+    import Par from "./dmx/fixtures/par.svelte";
   import SerialManager from "./serial/SerialManager.svelte";
 </script>
 
 <main>
   <div>cOnTeNt</div>
+  <Par address={1} />
   <SerialManager />
 </main>
diff --git a/webserial/src/dmx/fixtures/par.svelte b/webserial/src/dmx/fixtures/par.svelte
new file mode 100644
index 0000000..6c2ef5a
--- /dev/null
+++ b/webserial/src/dmx/fixtures/par.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { dmxData } from "../store";
+
+    export let address: number;
+
+    let dimmer = 255,
+        r = 0,
+        g = 0,
+        b = 0,
+        w = 0,
+        a = 0,
+        uv = 0,
+        strobe = 0;
+
+    $: {
+        $dmxData[address - 1 + 0] = dimmer;
+        $dmxData[address - 1 + 1] = r;
+        $dmxData[address - 1 + 2] = g;
+        $dmxData[address - 1 + 3] = b;
+        $dmxData[address - 1 + 4] = w;
+        $dmxData[address - 1 + 5] = a;
+        $dmxData[address - 1 + 6] = uv;
+        $dmxData[address - 1 + 7] = strobe;
+
+        $dmxData = $dmxData;
+    }
+</script>
+
+<div>
+    <h3>Par @ {address}</h3>
+    <input bind:value={dimmer} type="range" min="0" max="255" />
+    <input bind:value={r} type="range" min="0" max="255" />
+    <input bind:value={g} type="range" min="0" max="255" />
+    <input bind:value={b} type="range" min="0" max="255" />
+    <input bind:value={w} type="range" min="0" max="255" />
+    <input bind:value={a} type="range" min="0" max="255" />
+    <input bind:value={uv} type="range" min="0" max="255" />
+</div>
diff --git a/webserial/src/dmx/store.ts b/webserial/src/dmx/store.ts
new file mode 100644
index 0000000..f919336
--- /dev/null
+++ b/webserial/src/dmx/store.ts
@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const dmxData = writable(new Uint8Array(512));
\ No newline at end of file
diff --git a/webserial/src/serial/SerialConnection.svelte b/webserial/src/serial/SerialConnection.svelte
index 97a0e4a..6e8f1bf 100644
--- a/webserial/src/serial/SerialConnection.svelte
+++ b/webserial/src/serial/SerialConnection.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { onMount } from "svelte";
+    import { dmxData } from "../dmx/store";
 
     export let port: SerialPort;
     export let fps: number = 50;
@@ -66,8 +67,6 @@
         }
     }
 
-    let payload = new Uint8Array(512);
-
     const sleep = (ms: number) =>
         new Promise((resolve) => setTimeout(resolve, ms));
 
@@ -81,7 +80,7 @@
             // write out payload
             let writer = port.writable.getWriter();
             try {
-                await writer.write(payload);
+                await writer.write($dmxData);
             } finally {
                 writer.releaseLock();
             }