102 lines
3.3 KiB
TypeScript
102 lines
3.3 KiB
TypeScript
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();
|
|
};
|
|
|
|
return (
|
|
<section class="select-none">
|
|
<div class="absolute top-0 left-0 right-0 bottom-0">
|
|
<TestColorsBg />
|
|
</div>
|
|
<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"
|
|
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"
|
|
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"
|
|
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>
|
|
<ColorSlider class="from-yellow-50 to-cyan-50" />
|
|
</label>
|
|
<button
|
|
class="absolute -right-4 -top-4 rounded-full aspect-square bg-stone-300 p-1 shadow border border-stone-400"
|
|
onClick={exit}
|
|
>
|
|
X
|
|
</button>
|
|
<button class="absolute -right-4 -bottom-4 rounded-full aspect-square bg-stone-300 p-1 shadow border border-stone-400">
|
|
R
|
|
</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|