feat: 完善颜色校准 GUI。

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@solidjs/router": "^0.8.2",
     "@tauri-apps/api": "^1.2.0",
+    "solid-icons": "^1.0.4",
     "solid-js": "^1.4.7",
     "solid-tippy": "^0.2.1",
     "tippy.js": "^6.3.7"

pnpm-lock.yaml

@@ -7,6 +7,9 @@ dependencies:
   '@tauri-apps/api':
     specifier: ^1.2.0
     version: 1.2.0
+  solid-icons:
+    specifier: ^1.0.4
+    version: 1.0.4(solid-js@1.6.14)
   solid-js:
     specifier: ^1.4.7
     version: 1.6.14
@@ -1342,6 +1345,15 @@ packages:
     hasBin: true
     dev: true
 
+  /solid-icons@1.0.4(solid-js@1.6.14):
+    resolution: {integrity: sha512-gJTp4in3+OYCs9WvDkSLt4Los2unR3Uoder8wjh15GsfP20xiNOLfPTJllXmn+fI8+k3x7bRYtLGIgWd9fUQug==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      solid-js: '*'
+    dependencies:
+      solid-js: 1.6.14
+    dev: false
+
   /solid-js@1.6.14:
     resolution: {integrity: sha512-9SSpGWZqzq8n/JhIt2PsYzLreG4PySmAexLnRM386oMeG5oSWa9QIRoiok45rLNJg148USEfI9wlkJkMrA2qGg==}
     dependencies:

src/components/white-balance/test-colors-bg.tsx

@@ -19,6 +19,7 @@ const ColorItem: Component<{
       onClick={() => {
         props.onClick?.(props.color);
       }}
+      title={props.color}
     />
   );
 };

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

@@ -1,10 +1,22 @@
 import { listen } from '@tauri-apps/api/event';
-import { createEffect, onCleanup } from 'solid-js';
+import { Component, 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';
+import { VsClose } from 'solid-icons/vs';
+import { BiRegularReset } from 'solid-icons/bi';
+import transparentBg from '../../assets/transparent-grid-background.svg?url';
+
+const Value: Component<{ value: number }> = (props) => {
+  return (
+    <span class="w-10 text-sm block font-mono text-right ">
+      {(props.value * 100).toFixed(0)}
+      <span class="text-xs text-stone-600">%</span>
+    </span>
+  );
+};
 
 export const WhiteBalance = () => {
   // listen to config_changed event
@@ -27,7 +39,6 @@ export const WhiteBalance = () => {
 
   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));
@@ -37,12 +48,23 @@ export const WhiteBalance = () => {
     window.history.back();
   };
 
+  const reset = () => {
+    invoke('set_color_calibration', {
+      calibration: new ColorCalibration(),
+    }).catch((error) => console.log(error));
+  };
+
   return (
-    <section class="select-none">
-      <div class="absolute top-0 left-0 right-0 bottom-0">
+    <section class="select-none text-stone-800">
+      <div
+        class="absolute top-0 left-0 right-0 bottom-0"
+        style={{
+          'background-image': `url(${transparentBg})`,
+        }}
+      >
         <TestColorsBg />
       </div>
-      <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">
+      <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-100/20 backdrop-blur p-5 rounded-xl shadow-lg">
         <label class="flex items-center gap-2">
           <span class="w-3 block">R:</span>
           <ColorSlider
@@ -55,6 +77,7 @@ export const WhiteBalance = () => {
               )
             }
           />
+          <Value value={ledStripStore.colorCalibration.r} />
         </label>
         <label class="flex items-center gap-2">
           <span class="w-3 block">G:</span>
@@ -68,6 +91,7 @@ export const WhiteBalance = () => {
               )
             }
           />
+          <Value value={ledStripStore.colorCalibration.g} />
         </label>
         <label class="flex items-center gap-2">
           <span class="w-3 block">B:</span>
@@ -81,19 +105,25 @@ export const WhiteBalance = () => {
               )
             }
           />
+          <Value value={ledStripStore.colorCalibration.b} />
         </label>
         <label class="flex items-center gap-2">
           <span class="w-3 block">W:</span>
           <ColorSlider class="from-yellow-50 to-cyan-50" />
         </label>
         <button
-          class="absolute -right-4 -top-4 rounded-full aspect-square bg-stone-300 p-1 shadow border border-stone-400"
+          class="absolute -right-4 -top-4 rounded-full aspect-square bg-stone-100/20 backdrop-blur p-1 shadow hover:bg-stone-200/20 active:bg-stone-300"
           onClick={exit}
+          title="Go Back"
         >
-          X
+          <VsClose size={24} />
         </button>
-        <button class="absolute -right-4 -bottom-4 rounded-full aspect-square bg-stone-300 p-1 shadow border border-stone-400">
-          R
+        <button
+          class="absolute -right-4 -bottom-4 rounded-full aspect-square bg-stone-100/20 backdrop-blur p-1 shadow hover:bg-stone-200/20 active:bg-stone-300"
+          onClick={reset}
+          title="Reset to 100%"
+        >
+          <BiRegularReset size={24} />
         </button>
       </div>
     </section>