feat: basic control of LEDs

2025-06-30 14:28:36 +01:00
commit 7fa4454150
16 changed files with 528 additions and 0 deletions
--- a/src/app.css
+++ b/src/app.css
@@ -0,0 +1 @@
+@import 'tailwindcss';
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};
--- a/src/app.html
+++ b/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -0,0 +1,32 @@
+// place files you want to import through the `$lib` alias in this folder.
+
+type WLEDAPI = {
+    seg: Array<{ id: string, col: Array<[number, number, number]> }>
+}
+
+const getAddr = (addr: string) => `http://${addr}/json/state`
+
+const buildReq = (hex: string): WLEDAPI => {
+    // hex is not validated.
+
+    const hexValues = parseInt(hex.slice(1), 16);
+
+    const r = (hexValues >> 16) & 255;
+    const g = (hexValues >> 8) & 255;
+    const b = hexValues & 255;
+
+    return {
+        seg: [{
+            id: "0",
+            col: [[r, g, b]],
+        }]
+    }
+}
+
+export const createLedClient = (addr: string) => {
+    return {
+        async setColor(hex: string) {
+            await fetch(getAddr(addr), { method: "POST", body: JSON.stringify(buildReq(hex)) });
+        }
+    }
+}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    import "../app.css";
+
+    let { children } = $props();
+</script>
+
+<main class="p-4 flex flex-col items-center">
+    {@render children()}
+</main>
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -0,0 +1,19 @@
+import { createLedClient } from "$lib";
+import { fail, type Actions } from "@sveltejs/kit";
+
+const client = createLedClient("192.168.1.215");
+
+export const actions: Actions = {
+    async default({ request }) {
+        const data = await request.formData();
+
+        const color = data.get("color");
+        if (color == null) {
+            return fail(400, { error: "Color was not provided" });
+        }
+
+        // TODO: validate actual HEX
+
+        await client.setColor(color.toString());
+    }
+}
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -0,0 +1,6 @@
+<form method="POST">
+    <h1>Twitch Lights</h1>
+    <p class="">Pick a colour for the lights</p>
+    <input name="color" defaultValue="#880000" type="color" />
+    <button type="submit">Submit</button>
+</form>