Oops, load values as [1,255] too

app.go

@@ -2,6 +2,12 @@ package main
 
 import (
 	"context"
+	"io"
+	"log"
+	"net/http"
+	"regexp"
+	"strconv"
+	"strings"
 
 	"github.com/wailsapp/wails/v2/pkg/runtime"
 )
@@ -24,3 +30,51 @@ func (a *App) startup(ctx context.Context) {
 func (a *App) Close() {
 	runtime.Quit(a.ctx)
 }
+
+const IP = "192.168.1.83:5554"
+// I really have to get rid of this dumb format...
+// Just do one lamp per line, what the fuck is this "Lamp 1: " bullshit
+var decancer = regexp.MustCompile(`Lamp \d: `)
+
+func (a *App) GetLamps() (lamps []string) {
+	resp, err := http.Get("http://" + IP)
+	if err != nil {
+		runtime.LogError(a.ctx, err.Error())
+		return
+	}
+	defer resp.Body.Close()
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		runtime.LogError(a.ctx, err.Error())
+		return
+	}
+
+	lines := strings.Split(string(body), "\n")
+	for _, line := range lines {
+		line = strings.TrimSpace(line)
+		if line == "" {
+			continue
+		}
+		line = decancer.ReplaceAllString(line, "")
+		lamps = append(lamps, line)
+	}
+	return
+}
+
+func (a *App) SetLampBrightness(lampId int, brightness int) string {
+	log.Printf("Setting lamp %d to %d", lampId, brightness)
+	resp, err := http.Get("http://" + IP + "/lamp/" + strconv.Itoa(lampId) + "?n=" + strconv.Itoa(brightness))
+	if err != nil {
+		runtime.LogError(a.ctx, err.Error())
+		log.Printf("Error: %s", err.Error())
+		return ""
+	}
+	defer resp.Body.Close()
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		runtime.LogError(a.ctx, err.Error())
+		log.Printf("Error: %s", err.Error())
+		return ""
+	}
+	return string(body)
+}

frontend/src/App.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Header from "$lib/components/Header.svelte";
 	import Router from "$lib/router/Router.svelte";
 	import { Toaster } from "svelte-sonner";
 	import { Close } from '$wails/main/App'

frontend/src/lib/components/Lamp.svelte

@@ -1,34 +1,47 @@
-<script>
-  export let brightnessChange = (brightness) => {};
+<script lang="ts">
+	export let brightnessChange = (lamp: number, brightness: number) => {};
+	export let lamp: number;
+	export let brightness: number;
 
-  let brightness = 50; // Default brightness level
+	let timer: number;
+	function handleBrightnessChange(event: Event) {
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			const input = event.target as HTMLInputElement;
+			brightness = Number(input.value);
+			brightnessChange(lamp, brightness);
+		}, 300);
+	}
 
-  function handleBrightnessChange(event) {
-    brightness = event.target.value;
-    brightnessChange(brightness); // Call the callback with the current brightness
+	function handleWheel(event: WheelEvent) {
+		event.preventDefault();
+		const increment = event.shiftKey ? 1 : 4;
+		const delta = event.deltaY > 0 ? -increment : increment;
+		const newBrightness = Math.max(0, Math.min(100, brightness + delta));
+		if (newBrightness !== brightness) {
+			brightness = newBrightness;
+			clearTimeout(timer);
+			timer = setTimeout(() => {
+				brightnessChange(lamp, brightness);
+			}, 300);
+		}
 	}
 </script>
 
 <div class="flex flex-col items-center justify-center p-4">
+	<div class="relative">
 		<div
 			class="w-48 h-48 rounded-full overflow-hidden mb-4"
 			style="background-color: #FFD700; filter: brightness({brightness}%)"
+			on:wheel={handleWheel}
 		>
-    <svg
-      class="w-48 h-48 fill-current text-yellow-800"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-    >
+			<svg class="w-48 h-48 fill-current text-yellow-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 				<path d="M12 2L2 22h20Z" />
 			</svg>
 		</div>
-  <input
-    type="range"
-    min="0"
-    max="100"
-    step="1"
-    value={brightness}
-    on:input={handleBrightnessChange}
-    class="w-4/5"
-  />
+		<div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-3 py-1 rounded-full text-sm font-semibold">
+			{Math.round(brightness)}%
+		</div>
+	</div>
+	<input type="range" min="0" max="100" step="1" value={brightness} on:input={handleBrightnessChange} class="w-4/5 mt-4" />
 </div>

frontend/src/lib/router/routes/Home.svelte

@@ -1,10 +1,26 @@
 <script lang="ts">
 	import Lamp from "../../components/Lamp.svelte";
+	import { GetLamps, SetLampBrightness } from "$wails/main/App";
+
+	// Brightness is actually 1-255 and not 1-100
+	// But we want the frontend to show 1-100 as in %
+	let lamps: number[] = [0, 0];
+	GetLamps().then((apilamps) => {
+		console.log(apilamps);
+		for (let i = 0; i < apilamps.length; i++) {
+			lamps[i] = Number(apilamps[i]);
+			lamps[i] = Math.round(lamps[i] / 2.55);
+		}
+	});
+
+	function handleBrightnessChange(lamp: number, brightness: number) {
+		SetLampBrightness(lamp, Math.round(brightness * 2.55));
+	}
 </script>
 
 <template>
 	<div class="flex flex-row justify-center items-center">
-		<Lamp />
-		<Lamp />
+		<Lamp lamp={1} brightness={lamps[0]} brightnessChange={handleBrightnessChange} />
+		<Lamp lamp={2} brightness={lamps[1]} brightnessChange={handleBrightnessChange} />
 	</div>
 </template>

frontend/wailsjs/go/main/App.d.ts

@@ -2,3 +2,7 @@
 // This file is automatically generated. DO NOT EDIT
 
 export function Close():Promise<void>;
+
+export function GetLamps():Promise<Array<string>>;
+
+export function SetLampBrightness(arg1:number,arg2:number):Promise<string>;

frontend/wailsjs/go/main/App.js

@@ -5,3 +5,11 @@
 export function Close() {
   return window['go']['main']['App']['Close']();
 }
+
+export function GetLamps() {
+  return window['go']['main']['App']['GetLamps']();
+}
+
+export function SetLampBrightness(arg1, arg2) {
+  return window['go']['main']['App']['SetLampBrightness'](arg1, arg2);
+}

go.mod

@@ -1,4 +1,4 @@
-module wails-template
+module biglamp
 
 go 1.21
 

wails.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://wails.io/schemas/config.v2.json",
-  "name": "wails-template",
-  "outputfilename": "wails-template",
+  "name": "biglamp",
+  "outputfilename": "biglamp",
   "frontend:install": "pnpm install",
   "frontend:build": "pnpm build",
   "frontend:dev:watcher": "pnpm dev",