Implement slider poc

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>

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>

webserial/src/dmx/store.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const dmxData = writable(new Uint8Array(512));

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();
             }