feat(gui, ambient_light): 鼠标滚轮修改 LED 灯条的灯珠数。

src/App.tsx

@@ -1,11 +1,11 @@
-import { createEffect } from 'solid-js';
-import { convertFileSrc, invoke } from '@tauri-apps/api/tauri';
+import { createEffect, onCleanup } from 'solid-js';
+import { invoke } from '@tauri-apps/api/tauri';
 import { DisplayView } from './components/display-view';
 import { DisplayListContainer } from './components/display-list-container';
 import { displayStore, setDisplayStore } from './stores/display.store';
-import { path } from '@tauri-apps/api';
 import { LedStripConfig } from './models/led-strip-config';
 import { setLedStripStore } from './stores/led-strip.store';
+import { listen } from '@tauri-apps/api/event';
 
 function App() {
   createEffect(() => {
@@ -15,14 +15,26 @@ function App() {
       });
     });
     invoke<LedStripConfig[]>('read_led_strip_configs').then((strips) => {
-      console.log(strips);
-
       setLedStripStore({
         strips,
       });
     });
   });
 
+  // register tauri event listeners
+  createEffect(() => {
+    const unlisten = listen('config_changed', (event) => {
+      const strips = event.payload as LedStripConfig[];
+      setLedStripStore({
+        strips,
+      });
+    });
+
+    onCleanup(() => {
+      unlisten.then((unlisten) => unlisten());
+    });
+  });
+
   return (
     <div>
       <DisplayListContainer>

src/assets/transparent-grid-background.svg

@@ -0,0 +1,16 @@
+
+<!-- http://mike.eire.ca/2010/02/25/easy-svg-grid/ -->
+<!-- "I needed a grid in the background while I was debugging an SVG image I was creating, something
+like Photoshop’s transparency grid. Here’s what I did." -->
+
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="400">
+  <defs>
+    <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
+      <rect fill="black" x="0" y="0" width="5" height="5" opacity="0.3" />
+      <rect fill="white" x="5" y="0" width="5" height="5" />
+      <rect fill="black" x="5" y="5" width="5" height="5" opacity="0.3" />
+      <rect fill="white" x="0" y="5" width="5" height="5" />
+    </pattern>
+  </defs>
+  <rect fill="url(#grid)" x="0" y="0" width="100%" height="100%" />
+</svg>

src/components/display-info-panel.tsx

@@ -7,7 +7,7 @@ type DisplayInfoItemProps = {
 
 export const DisplayInfoItem: ParentComponent<DisplayInfoItemProps> = (props) => {
   return (
-    <dl class="px-3 py-1 flex hover:bg-gray-100/50 gap-2 text-black rounded">
+    <dl class="px-3 py-1 flex hover:bg-slate-900/50 gap-2 text-white drop-shadow-[0_2px_2px_rgba(0,0,0,0.8)] rounded">
       <dt class="uppercase w-1/2 select-all whitespace-nowrap">{props.label}</dt>
       <dd class="select-all w-1/2 whitespace-nowrap">{props.children}</dd>
     </dl>

src/components/display-list-container.tsx

@@ -1,11 +1,13 @@
 import {
   createEffect,
   createSignal,
+  JSX,
   onCleanup,
   onMount,
   ParentComponent,
 } from 'solid-js';
 import { displayStore, setDisplayStore } from '../stores/display.store';
+import background from '../assets/transparent-grid-background.svg?url';
 
 export const DisplayListContainer: ParentComponent = (props) => {
   let root: HTMLElement;
@@ -13,8 +15,7 @@ export const DisplayListContainer: ParentComponent = (props) => {
     top: '0px',
     left: '0px',
   });
-  const [rootStyle, setRootStyle] = createSignal({
-    // width: '100%',
+  const [rootStyle, setRootStyle] = createSignal<JSX.CSSProperties>({
     height: '100%',
   });
   const [bound, setBound] = createSignal({
@@ -38,6 +39,7 @@ export const DisplayListContainer: ParentComponent = (props) => {
 
     setRootStyle({
       height: `${(_bound.bottom - _bound.top) * displayStore.viewScale}px`,
+      background: `url(${background})`,
     });
   };
 
@@ -74,7 +76,7 @@ export const DisplayListContainer: ParentComponent = (props) => {
 
   return (
     <section ref={root!} class="relative bg-gray-400/30" style={rootStyle()}>
-      <ol class="absolute bg-gray-700" style={olStyle()}>
+      <ol class="absolute" style={olStyle()}>
         {props.children}
       </ol>
     </section>

src/components/display-view.tsx

@@ -30,7 +30,7 @@ export const DisplayView: Component<DisplayViewProps> = (props) => {
 
   return (
     <section
-      class="absolute bg-gray-300 grid grid-cols-[16px,auto,16px] grid-rows-[16px,auto,16px] overflow-hidden"
+      class="absolute grid grid-cols-[16px,auto,16px] grid-rows-[16px,auto,16px] overflow-hidden group"
       style={style()}
     >
       <ScreenView
@@ -42,7 +42,7 @@ export const DisplayView: Component<DisplayViewProps> = (props) => {
       />
       <DisplayInfoPanel
         display={props.display}
-        class="absolute bg-slate-50/10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded backdrop-blur w-1/3 min-w-[300px] text-black"
+        class="absolute bg-slate-700/20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded backdrop-blur w-1/3 min-w-[300px] text-black group-hover:opacity-100 opacity-0 transition-opacity"
       />
       <LedStripPart
         class="row-start-1 col-start-2 flex-row overflow-hidden"

src/components/led-strip-part.tsx

@@ -7,11 +7,9 @@ import {
   createSignal,
   For,
   JSX,
-  on,
   onCleanup,
   splitProps,
 } from 'solid-js';
-import { borders } from '../constants/border';
 import { LedStripConfig } from '../models/led-strip-config';
 
 type LedStripPartProps = {
@@ -38,7 +36,7 @@ export const Pixel: Component<PixelProps> = (props) => {
       title={props.color}
     >
       <div
-        class="absolute top-px h-2 w-2 rounded-full shadow-2xl shadow-black"
+        class="absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full ring-1 ring-stone-300"
         style={style()}
       />
     </div>
@@ -101,6 +99,20 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
     }
   });
 
+  const onWheel = (e: WheelEvent) => {
+    if (localProps.config) {
+      invoke('patch_led_strip_len', {
+        displayId: localProps.config.display_id,
+        border: localProps.config.border,
+        deltaLen: e.deltaY > 0 ? 1 : -1,
+      })
+        .then(() => {})
+        .catch((e) => {
+          console.error(e);
+        });
+    }
+  };
+
   const pixels = createMemo(() => {
     const _colors = colors();
     if (_colors) {
@@ -118,9 +130,9 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
     <section
       {...rootProps}
       class={
-        'bg-yellow-50 flex flex-nowrap justify-around items-center overflow-hidden' +
-        rootProps.class
+        'flex flex-nowrap justify-around items-center overflow-hidden ' + rootProps.class
       }
+      onWheel={onWheel}
     >
       {pixels()}
     </section>