feat(gui, ambient_light): 鼠标滚轮修改 LED 灯条的灯珠数。
This commit is contained in:
BIN
src/.DS_Store
vendored
Normal file
BIN
src/.DS_Store
vendored
Normal file
Binary file not shown.
22
src/App.tsx
22
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>
|
||||
|
16
src/assets/transparent-grid-background.svg
Normal file
16
src/assets/transparent-grid-background.svg
Normal 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 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>
|
After Width: | Height: | Size: 759 B |
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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"
|
||||
|
@ -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>
|
||||
|
Reference in New Issue
Block a user