feat: 支持将色彩校准的值写入本地配置文件。

This commit is contained in:
2023-04-16 18:17:49 +08:00
parent fc8b3164d8
commit 6e6160fc0a
10 changed files with 145 additions and 19 deletions

View File

@ -1,13 +1,18 @@
import { Component, JSX } from 'solid-js';
type Props = {} & JSX.HTMLAttributes<HTMLInputElement>;
type Props = {
value?: number;
} & JSX.HTMLAttributes<HTMLInputElement>;
export const ColorSlider: Component<Props> = (props) => {
return (
<input
type="range"
value="50"
{...props}
max={1}
min={0}
step={0.01}
value={props.value}
class={
'w-full h-2 bg-gradient-to-r rounded-lg appearance-none cursor-pointer dark:bg-gray-700 drop-shadow ' +
props.class

View File

@ -1,7 +1,38 @@
import { listen } from '@tauri-apps/api/event';
import { createEffect, onCleanup } from 'solid-js';
import { ColorCalibration, LedStripConfigContainer } from '../../models/led-strip-config';
import { ledStripStore, setLedStripStore } from '../../stores/led-strip.store';
import { ColorSlider } from './color-slider';
import { TestColorsBg } from './test-colors-bg';
import { invoke } from '@tauri-apps/api';
export const WhiteBalance = () => {
// listen to config_changed event
createEffect(() => {
const unlisten = listen('config_changed', (event) => {
const { strips, mappers, color_calibration } =
event.payload as LedStripConfigContainer;
console.log(event.payload);
setLedStripStore({
strips,
mappers,
colorCalibration: color_calibration,
});
});
onCleanup(() => {
unlisten.then((unlisten) => unlisten());
});
});
const updateColorCalibration = (field: keyof ColorCalibration, value: number) => {
const calibration = { ...ledStripStore.colorCalibration, [field]: value };
console.log(field, calibration);
invoke('set_color_calibration', {
calibration,
}).catch((error) => console.log(error));
};
const exit = () => {
window.history.back();
};
@ -14,15 +45,42 @@ export const WhiteBalance = () => {
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 max-w-lg bg-stone-200 p-5 rounded-xl drop-shadow">
<label class="flex items-center gap-2">
<span class="w-3 block">R:</span>
<ColorSlider class="from-cyan-500 to-red-500" />
<ColorSlider
class="from-cyan-500 to-red-500"
value={ledStripStore.colorCalibration.r}
onInput={(ev) =>
updateColorCalibration(
'r',
(ev.target as HTMLInputElement).valueAsNumber ?? 1,
)
}
/>
</label>
<label class="flex items-center gap-2">
<span class="w-3 block">G:</span>
<ColorSlider class="from-pink-500 to-green-500" />
<ColorSlider
class="from-pink-500 to-green-500"
value={ledStripStore.colorCalibration.g}
onInput={(ev) =>
updateColorCalibration(
'g',
(ev.target as HTMLInputElement).valueAsNumber ?? 1,
)
}
/>
</label>
<label class="flex items-center gap-2">
<span class="w-3 block">B:</span>
<ColorSlider class="from-yellow-500 to-blue-500" />
<ColorSlider
class="from-yellow-500 to-blue-500"
value={ledStripStore.colorCalibration.b}
onInput={(ev) =>
updateColorCalibration(
'b',
(ev.target as HTMLInputElement).valueAsNumber ?? 1,
)
}
/>
</label>
<label class="flex items-center gap-2">
<span class="w-3 block">W:</span>

View File

@ -6,9 +6,16 @@ export type LedStripPixelMapper = {
pos: number;
};
export class ColorCalibration {
r: number = 1;
g: number = 1;
b: number = 1;
}
export type LedStripConfigContainer = {
strips: LedStripConfig[];
mappers: LedStripPixelMapper[];
color_calibration: ColorCalibration;
};
export class LedStripConfig {

View File

@ -1,9 +1,14 @@
import { createStore } from 'solid-js/store';
import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config';
import {
ColorCalibration,
LedStripConfig,
LedStripPixelMapper,
} from '../models/led-strip-config';
export const [ledStripStore, setLedStripStore] = createStore({
strips: new Array<LedStripConfig>(),
mappers: new Array<LedStripPixelMapper>(),
colorCalibration: new ColorCalibration(),
colors: new Uint8ClampedArray(),
sortedColors: new Uint8ClampedArray(),
get totalLedCount() {