feat: 支持预览灯条排序效果。

This commit is contained in:
2023-04-01 10:42:46 +08:00
parent 958a422672
commit 4e75aa4307
15 changed files with 820 additions and 84 deletions

View File

@ -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} />;

View 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>
);
};

View File

@ -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,
) {}
}

View File

@ -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(),
});