feat(gui): 全局的灯条颜色预览。

This commit is contained in:
Ivan Li 2023-04-01 18:49:42 +08:00
parent d053185cc2
commit 5893c4344c

View File

@ -2,9 +2,7 @@ import { Component, createContext, createEffect, createSignal, For } from 'solid
import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config'; import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config';
import { ledStripStore } from '../stores/led-strip.store'; import { ledStripStore } from '../stores/led-strip.store';
const SorterItem: Component<{ mapper: LedStripPixelMapper; strip: LedStripConfig }> = ( const SorterItem: Component<{ mapper: LedStripPixelMapper }> = (props) => {
props,
) => {
const [fullLeds, setFullLeds] = createSignal<string[]>([]); const [fullLeds, setFullLeds] = createSignal<string[]>([]);
createEffect(() => { createEffect(() => {
@ -39,16 +37,52 @@ const SorterItem: Component<{ mapper: LedStripPixelMapper; strip: LedStripConfig
); );
}; };
export const LedStripPartsSorter: Component = () => { const SorterResult: Component = () => {
const context = createContext(); const [fullLeds, setFullLeds] = createSignal<string[]>([]);
createEffect(() => {
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)');
ledStripStore.mappers.forEach((mapper) => {
for (let i = mapper.start, j = 0; i < mapper.end; i++, j++) {
fullLeds[i] = `rgb(${ledStripStore.colors[i * 3]}, ${
ledStripStore.colors[i * 3 + 1]
}, ${ledStripStore.colors[i * 3 + 2]})`;
}
});
setFullLeds(fullLeds);
});
return ( return (
<div> <div class="flex h-2 m-2">
<For each={ledStripStore.strips}> <For each={fullLeds()}>
{(strip, index) => ( {(it) => (
<SorterItem strip={strip} mapper={ledStripStore.mappers[index()]} /> <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> </For>
</div> </div>
); );
}; };
export const LedStripPartsSorter: Component = () => {
const context = createContext();
return (
<div>
<SorterResult />
<For each={ledStripStore.strips}>
{(strip, index) => <SorterItem mapper={ledStripStore.mappers[index()]} />}
</For>
</div>
);
};