display-ambient-light/desktop
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects 1 Releases Wiki Activity

feat: 完善颜色校准 GUI。

Browse Source
This commit is contained in:
Ivan Li
2023-04-16 23:45:07 +08:00
parent effcb1e192
commit d97eb0115f
4 changed files with 53 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/white-balance/white-balance.tsx
View File

@ -1,10 +1,22 @@
import { listen } from '@tauri-apps/api/event';
import { createEffect, onCleanup } from 'solid-js';
import { Component, 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';
import { VsClose } from 'solid-icons/vs';
import { BiRegularReset } from 'solid-icons/bi';
import transparentBg from '../../assets/transparent-grid-background.svg?url';
const Value: Component<{ value: number }> = (props) => {
return (
<span class="w-10 text-sm block font-mono text-right ">
{(props.value * 100).toFixed(0)}
<span class="text-xs text-stone-600">%</span>
</span>
);
};
export const WhiteBalance = () => {
// listen to config_changed event
@ -27,7 +39,6 @@ export const WhiteBalance = () => {
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));
@ -37,12 +48,23 @@ export const WhiteBalance = () => {
window.history.back();
};
const reset = () => {
invoke('set_color_calibration', {
calibration: new ColorCalibration(),
}).catch((error) => console.log(error));
};
return (
<section class="select-none">
<div class="absolute top-0 left-0 right-0 bottom-0">
<section class="select-none text-stone-800">
<div
class="absolute top-0 left-0 right-0 bottom-0"
style={{
'background-image': `url(${transparentBg})`,
}}
>
<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">
<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-100/20 backdrop-blur p-5 rounded-xl shadow-lg">
<label class="flex items-center gap-2">
<span class="w-3 block">R:</span>
<ColorSlider
@ -55,6 +77,7 @@ export const WhiteBalance = () => {
)
}
/>
<Value value={ledStripStore.colorCalibration.r} />
</label>
<label class="flex items-center gap-2">
<span class="w-3 block">G:</span>
@ -68,6 +91,7 @@ export const WhiteBalance = () => {
)
}
/>
<Value value={ledStripStore.colorCalibration.g} />
</label>
<label class="flex items-center gap-2">
<span class="w-3 block">B:</span>
@ -81,19 +105,25 @@ export const WhiteBalance = () => {
)
}
/>
<Value value={ledStripStore.colorCalibration.b} />
</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"
class="absolute -right-4 -top-4 rounded-full aspect-square bg-stone-100/20 backdrop-blur p-1 shadow hover:bg-stone-200/20 active:bg-stone-300"
onClick={exit}
title="Go Back"
>
X
<VsClose size={24} />
</button>
<button class="absolute -right-4 -bottom-4 rounded-full aspect-square bg-stone-300 p-1 shadow border border-stone-400">
R
<button
class="absolute -right-4 -bottom-4 rounded-full aspect-square bg-stone-100/20 backdrop-blur p-1 shadow hover:bg-stone-200/20 active:bg-stone-300"
onClick={reset}
title="Reset to 100%"
>
<BiRegularReset size={24} />
</button>
</div>
</section>