Oops, load values as [1,255] too

frontend/src/lib/components/Lamp.svelte

@@ -7,20 +7,41 @@
 	function handleBrightnessChange(event: Event) {
 		clearTimeout(timer);
 		timer = setTimeout(() => {
-			brightness = Number(event.target?.value);
+			const input = event.target as HTMLInputElement;
+			brightness = Number(input.value);
 			brightnessChange(lamp, brightness);
 		}, 300);
 	}
+
+	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="w-48 h-48 rounded-full overflow-hidden mb-4"
-		style="background-color: #FFD700; filter: brightness({brightness}%)"
-	>
-		<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 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">
+				<path d="M12 2L2 22h20Z" />
+			</svg>
+		</div>
+		<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" />
+	<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

@@ -2,16 +2,19 @@
 	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 => {
+	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, brightness);
+		SetLampBrightness(lamp, Math.round(brightness * 2.55));
 	}
 </script>
 
@@ -20,4 +23,4 @@
 		<Lamp lamp={1} brightness={lamps[0]} brightnessChange={handleBrightnessChange} />
 		<Lamp lamp={2} brightness={lamps[1]} brightnessChange={handleBrightnessChange} />
 	</div>
-</template>
+</template>

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",