feat: 支持将色彩校准的值写入本地配置文件。

src/components/white-balance/color-slider.tsx

@@ -1,13 +1,18 @@
 import { Component, JSX } from 'solid-js';
 
-type Props = {} & JSX.HTMLAttributes<HTMLInputElement>;
+type Props = {
+  value?: number;
+} & JSX.HTMLAttributes<HTMLInputElement>;
 
 export const ColorSlider: Component<Props> = (props) => {
   return (
     <input
       type="range"
-      value="50"
       {...props}
+      max={1}
+      min={0}
+      step={0.01}
+      value={props.value}
       class={
         'w-full h-2 bg-gradient-to-r rounded-lg appearance-none cursor-pointer dark:bg-gray-700 drop-shadow ' +
         props.class

src/components/white-balance/white-balance.tsx

@@ -1,7 +1,38 @@
+import { listen } from '@tauri-apps/api/event';
+import { createEffect, onCleanup } from 'solid-js';
+import { ColorCalibration, LedStripConfigContainer } from '../../models/led-strip-config';
+import { ledStripStore, setLedStripStore } from '../../stores/led-strip.store';
 import { ColorSlider } from './color-slider';
 import { TestColorsBg } from './test-colors-bg';
+import { invoke } from '@tauri-apps/api';
 
 export const WhiteBalance = () => {
+  // listen to config_changed event
+  createEffect(() => {
+    const unlisten = listen('config_changed', (event) => {
+      const { strips, mappers, color_calibration } =
+        event.payload as LedStripConfigContainer;
+      console.log(event.payload);
+      setLedStripStore({
+        strips,
+        mappers,
+        colorCalibration: color_calibration,
+      });
+    });
+
+    onCleanup(() => {
+      unlisten.then((unlisten) => unlisten());
+    });
+  });
+
+  const updateColorCalibration = (field: keyof ColorCalibration, value: number) => {
+    const calibration = { ...ledStripStore.colorCalibration, [field]: value };
+    console.log(field, calibration);
+    invoke('set_color_calibration', {
+      calibration,
+    }).catch((error) => console.log(error));
+  };
+
   const exit = () => {
     window.history.back();
   };
@@ -14,15 +45,42 @@ export const WhiteBalance = () => {
       <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 max-w-lg bg-stone-200 p-5 rounded-xl drop-shadow">
         <label class="flex items-center gap-2">
           <span class="w-3 block">R:</span>
-          <ColorSlider class="from-cyan-500 to-red-500" />
+          <ColorSlider
+            class="from-cyan-500 to-red-500"
+            value={ledStripStore.colorCalibration.r}
+            onInput={(ev) =>
+              updateColorCalibration(
+                'r',
+                (ev.target as HTMLInputElement).valueAsNumber ?? 1,
+              )
+            }
+          />
         </label>
         <label class="flex items-center gap-2">
           <span class="w-3 block">G:</span>
-          <ColorSlider class="from-pink-500 to-green-500" />
+          <ColorSlider
+            class="from-pink-500 to-green-500"
+            value={ledStripStore.colorCalibration.g}
+            onInput={(ev) =>
+              updateColorCalibration(
+                'g',
+                (ev.target as HTMLInputElement).valueAsNumber ?? 1,
+              )
+            }
+          />
         </label>
         <label class="flex items-center gap-2">
           <span class="w-3 block">B:</span>
-          <ColorSlider class="from-yellow-500 to-blue-500" />
+          <ColorSlider
+            class="from-yellow-500 to-blue-500"
+            value={ledStripStore.colorCalibration.b}
+            onInput={(ev) =>
+              updateColorCalibration(
+                'b',
+                (ev.target as HTMLInputElement).valueAsNumber ?? 1,
+              )
+            }
+          />
         </label>
         <label class="flex items-center gap-2">
           <span class="w-3 block">W:</span>

src/models/led-strip-config.ts

@@ -6,9 +6,16 @@ export type LedStripPixelMapper = {
   pos: number;
 };
 
+export class ColorCalibration {
+  r: number = 1;
+  g: number = 1;
+  b: number = 1;
+}
+
 export type LedStripConfigContainer = {
   strips: LedStripConfig[];
   mappers: LedStripPixelMapper[];
+  color_calibration: ColorCalibration;
 };
 
 export class LedStripConfig {

src/stores/led-strip.store.tsx

@@ -1,9 +1,14 @@
 import { createStore } from 'solid-js/store';
-import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config';
+import {
+  ColorCalibration,
+  LedStripConfig,
+  LedStripPixelMapper,
+} from '../models/led-strip-config';
 
 export const [ledStripStore, setLedStripStore] = createStore({
   strips: new Array<LedStripConfig>(),
   mappers: new Array<LedStripPixelMapper>(),
+  colorCalibration: new ColorCalibration(),
   colors: new Uint8ClampedArray(),
   sortedColors: new Uint8ClampedArray(),
   get totalLedCount() {