Implement slider poc

This commit is contained in:
Kai Vogelgesang 2022-12-25 17:33:54 +01:00
parent d85bf03011
commit cd16208634
Signed by: kai
GPG Key ID: 3FC8578CC818A9EB
4 changed files with 45 additions and 3 deletions

View File

@ -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>

View File

@ -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>

View File

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

View File

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