feat: 支持将色彩校准的值写入本地配置文件。
This commit is contained in:
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
@ -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() {
|
||||
|
Reference in New Issue
Block a user