feat: 支持预览灯条排序效果。
This commit is contained in:
32
src/App.tsx
32
src/App.tsx
@ -3,9 +3,10 @@ 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 { LedStripConfig } from './models/led-strip-config';
|
||||
import { LedStripConfigContainer } from './models/led-strip-config';
|
||||
import { setLedStripStore } from './stores/led-strip.store';
|
||||
import { listen } from '@tauri-apps/api/event';
|
||||
import { LedStripPartsSorter } from './components/led-strip-parts-sorter';
|
||||
|
||||
function App() {
|
||||
createEffect(() => {
|
||||
@ -14,19 +15,35 @@ function App() {
|
||||
displays: JSON.parse(displays),
|
||||
});
|
||||
});
|
||||
invoke<LedStripConfig[]>('read_led_strip_configs').then((strips) => {
|
||||
setLedStripStore({
|
||||
strips,
|
||||
});
|
||||
invoke<LedStripConfigContainer>('read_led_strip_configs').then((configs) => {
|
||||
console.log(configs);
|
||||
setLedStripStore(configs);
|
||||
});
|
||||
});
|
||||
|
||||
// register tauri event listeners
|
||||
// listen to config_changed event
|
||||
createEffect(() => {
|
||||
const unlisten = listen('config_changed', (event) => {
|
||||
const strips = event.payload as LedStripConfig[];
|
||||
const { strips, mappers } = event.payload as LedStripConfigContainer;
|
||||
console.log(event.payload);
|
||||
setLedStripStore({
|
||||
strips,
|
||||
mappers,
|
||||
});
|
||||
});
|
||||
|
||||
onCleanup(() => {
|
||||
unlisten.then((unlisten) => unlisten());
|
||||
});
|
||||
});
|
||||
|
||||
// listen to led_colors_changed event
|
||||
createEffect(() => {
|
||||
const unlisten = listen<Uint8ClampedArray>('led_colors_changed', (event) => {
|
||||
const colors = event.payload;
|
||||
|
||||
setLedStripStore({
|
||||
colors,
|
||||
});
|
||||
});
|
||||
|
||||
@ -37,6 +54,7 @@ function App() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<LedStripPartsSorter />
|
||||
<DisplayListContainer>
|
||||
{displayStore.displays.map((display) => {
|
||||
return <DisplayView display={display} />;
|
||||
|
79
src/components/led-strip-parts-sorter.tsx
Normal file
79
src/components/led-strip-parts-sorter.tsx
Normal file
@ -0,0 +1,79 @@
|
||||
import {
|
||||
Component,
|
||||
createContext,
|
||||
createEffect,
|
||||
createMemo,
|
||||
createSignal,
|
||||
For,
|
||||
JSX,
|
||||
onCleanup,
|
||||
} from 'solid-js';
|
||||
import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config';
|
||||
import { ledStripStore } from '../stores/led-strip.store';
|
||||
|
||||
const SorterItem: Component<{ mapper: LedStripPixelMapper; strip: LedStripConfig }> = (
|
||||
props,
|
||||
) => {
|
||||
const [fullLeds, setFullLeds] = createSignal<string[]>([]);
|
||||
|
||||
createEffect(() => {
|
||||
let stopped = false;
|
||||
const frame = () => {
|
||||
const strips = ledStripStore.strips;
|
||||
const totalLedCount = strips.reduce((acc, strip) => acc + strip.len, 0);
|
||||
|
||||
const fullLeds = new Array(totalLedCount).fill('rgba(255,255,255,0.5)');
|
||||
|
||||
for (let i = props.mapper.start, j = 0; i < props.mapper.end; i++, j++) {
|
||||
fullLeds[i] = `rgb(${ledStripStore.colors[i * 3]}, ${
|
||||
ledStripStore.colors[i * 3 + 1]
|
||||
}, ${ledStripStore.colors[i * 3 + 2]})`;
|
||||
}
|
||||
|
||||
setFullLeds(fullLeds);
|
||||
|
||||
if (!stopped) {
|
||||
requestAnimationFrame(frame);
|
||||
}
|
||||
};
|
||||
|
||||
frame();
|
||||
|
||||
onCleanup(() => {
|
||||
stopped = true;
|
||||
console.timeEnd('frame');
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="flex h-2 m-2">
|
||||
<For each={fullLeds()}>
|
||||
{(it) => (
|
||||
<div
|
||||
class="flex-auto flex h-full w-full justify-center items-center relative"
|
||||
title={it}
|
||||
>
|
||||
<div
|
||||
class="absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full ring-1 ring-stone-300"
|
||||
style={{ background: it }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const LedStripPartsSorter: Component = () => {
|
||||
const context = createContext();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<For each={ledStripStore.strips}>
|
||||
{(strip, index) => (
|
||||
<SorterItem strip={strip} mapper={ledStripStore.mappers[index()]} />
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
);
|
||||
};
|
@ -1,10 +1,19 @@
|
||||
import { Borders } from '../constants/border';
|
||||
|
||||
export type LedStripPixelMapper = {
|
||||
start: number;
|
||||
end: number;
|
||||
};
|
||||
|
||||
export type LedStripConfigContainer = {
|
||||
strips: LedStripConfig[];
|
||||
mappers: LedStripPixelMapper[];
|
||||
};
|
||||
|
||||
export class LedStripConfig {
|
||||
constructor(
|
||||
public readonly display_id: number,
|
||||
public readonly border: Borders,
|
||||
public start_pos: number,
|
||||
public len: number,
|
||||
) {}
|
||||
}
|
||||
|
@ -1,8 +1,10 @@
|
||||
import { createStore } from 'solid-js/store';
|
||||
import { DisplayConfig } from '../models/display-config';
|
||||
import { LedStripConfig } from '../models/led-strip-config';
|
||||
import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config';
|
||||
|
||||
export const [ledStripStore, setLedStripStore] = createStore({
|
||||
displays: new Array<DisplayConfig>(),
|
||||
strips: new Array<LedStripConfig>(),
|
||||
mappers: new Array<LedStripPixelMapper>(),
|
||||
colors: new Uint8ClampedArray(),
|
||||
});
|
||||
|
Reference in New Issue
Block a user