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

This commit is contained in:
2023-03-26 22:39:47 +08:00
parent 3e54d30498
commit 58e8c30fe2
14 changed files with 452 additions and 127 deletions

BIN
src/.DS_Store vendored Normal file

Binary file not shown.

View File

@ -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>

View File

@ -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 Photoshops transparency grid. Heres 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>

After

Width:  |  Height:  |  Size: 759 B

View File

@ -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>

View File

@ -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>

View File

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

View File

@ -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>