feat(GUI): 色彩调整界面。
This commit is contained in:
@ -1,5 +1,6 @@
|
||||
import { Routes, Route } from '@solidjs/router';
|
||||
import { LedStripConfiguration } from './components/led-strip-configuration/led-strip-configuration';
|
||||
import { WhiteBalance } from './components/white-balance/white-balance';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@ -10,7 +11,7 @@ function App() {
|
||||
</div>
|
||||
<Routes>
|
||||
<Route path="/led-strips-configuration" component={LedStripConfiguration} />
|
||||
<Route path="/white-balance" component={LedStripConfiguration} />
|
||||
<Route path="/white-balance" component={WhiteBalance} />
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
|
17
src/components/white-balance/color-slider.tsx
Normal file
17
src/components/white-balance/color-slider.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import { Component, JSX } from 'solid-js';
|
||||
|
||||
type Props = {} & JSX.HTMLAttributes<HTMLInputElement>;
|
||||
|
||||
export const ColorSlider: Component<Props> = (props) => {
|
||||
return (
|
||||
<input
|
||||
type="range"
|
||||
value="50"
|
||||
{...props}
|
||||
class={
|
||||
'w-full h-2 bg-gradient-to-r rounded-lg appearance-none cursor-pointer dark:bg-gray-700 drop-shadow ' +
|
||||
props.class
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
99
src/components/white-balance/test-colors-bg.tsx
Normal file
99
src/components/white-balance/test-colors-bg.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
import { Component, createSignal } from 'solid-js';
|
||||
|
||||
const ColorItem: Component<{
|
||||
color: string;
|
||||
position: [number, number];
|
||||
size?: [number, number];
|
||||
onClick?: (color: string) => void;
|
||||
}> = (props) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
background: props.color,
|
||||
'grid-row-start': props.position[0],
|
||||
'grid-column-start': props.position[1],
|
||||
'grid-row-end': props.position[0] + (props.size ? props.size[0] : 1),
|
||||
'grid-column-end': props.position[1] + (props.size ? props.size[1] : 1),
|
||||
cursor: props.onClick ? 'pointer' : 'default',
|
||||
}}
|
||||
onClick={() => {
|
||||
props.onClick?.(props.color);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const TestColorsBg: Component = () => {
|
||||
const [singleColor, setSingleColor] = createSignal<string | null>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<section
|
||||
class="grid grid-cols-[8] grid-rows-[8] h-full w-full"
|
||||
classList={{
|
||||
hidden: singleColor() !== null,
|
||||
}}
|
||||
>
|
||||
<ColorItem color="#ff0000" position={[1, 1]} onClick={setSingleColor} />
|
||||
<ColorItem color="#ffff00" position={[1, 2]} onClick={setSingleColor} />
|
||||
<ColorItem color="#00ff00" position={[1, 3]} onClick={setSingleColor} />
|
||||
<ColorItem color="#00ffff" position={[1, 4]} onClick={setSingleColor} />
|
||||
<ColorItem color="#0000ff" position={[1, 5]} onClick={setSingleColor} />
|
||||
<ColorItem color="#ff00ff" position={[1, 6]} onClick={setSingleColor} />
|
||||
<ColorItem color="#ffffff" position={[1, 7]} onClick={setSingleColor} />
|
||||
<ColorItem color="#000000" position={[1, 8]} onClick={setSingleColor} />
|
||||
<ColorItem color="#ffff00" position={[2, 1]} onClick={setSingleColor} />
|
||||
<ColorItem color="#00ff00" position={[3, 1]} onClick={setSingleColor} />
|
||||
<ColorItem color="#00ffff" position={[4, 1]} onClick={setSingleColor} />
|
||||
<ColorItem color="#0000ff" position={[5, 1]} onClick={setSingleColor} />
|
||||
<ColorItem color="#ff00ff" position={[6, 1]} onClick={setSingleColor} />
|
||||
<ColorItem color="#ffffff" position={[7, 1]} onClick={setSingleColor} />
|
||||
<ColorItem color="#000000" position={[8, 1]} onClick={setSingleColor} />
|
||||
<ColorItem color="#ffffff" position={[2, 8]} onClick={setSingleColor} />
|
||||
<ColorItem color="#ff00ff" position={[3, 8]} onClick={setSingleColor} />
|
||||
<ColorItem color="#0000ff" position={[4, 8]} onClick={setSingleColor} />
|
||||
<ColorItem color="#00ffff" position={[5, 8]} onClick={setSingleColor} />
|
||||
<ColorItem color="#00ff00" position={[6, 8]} onClick={setSingleColor} />
|
||||
<ColorItem color="#ffff00" position={[7, 8]} onClick={setSingleColor} />
|
||||
<ColorItem color="#ff0000" position={[8, 8]} onClick={setSingleColor} />
|
||||
<ColorItem color="#ffffff" position={[8, 2]} onClick={setSingleColor} />
|
||||
<ColorItem color="#ff00ff" position={[8, 3]} onClick={setSingleColor} />
|
||||
<ColorItem color="#0000ff" position={[8, 4]} onClick={setSingleColor} />
|
||||
<ColorItem color="#00ffff" position={[8, 5]} onClick={setSingleColor} />
|
||||
<ColorItem color="#00ff00" position={[8, 6]} onClick={setSingleColor} />
|
||||
<ColorItem color="#ffff00" position={[8, 7]} onClick={setSingleColor} />
|
||||
</section>
|
||||
<section
|
||||
class="grid grid-cols-[8] grid-rows-[8] h-full w-full"
|
||||
classList={{
|
||||
hidden: singleColor() === null,
|
||||
}}
|
||||
>
|
||||
<ColorItem
|
||||
color={singleColor()!}
|
||||
position={[1, 1]}
|
||||
size={[1, 7]}
|
||||
onClick={() => setSingleColor(null)}
|
||||
/>
|
||||
<ColorItem
|
||||
color={singleColor()!}
|
||||
position={[8, 2]}
|
||||
size={[1, 7]}
|
||||
onClick={() => setSingleColor(null)}
|
||||
/>
|
||||
<ColorItem
|
||||
color={singleColor()!}
|
||||
position={[2, 1]}
|
||||
size={[7, 1]}
|
||||
onClick={() => setSingleColor(null)}
|
||||
/>
|
||||
<ColorItem
|
||||
color={singleColor()!}
|
||||
position={[1, 8]}
|
||||
size={[7, 1]}
|
||||
onClick={() => setSingleColor(null)}
|
||||
/>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
43
src/components/white-balance/white-balance.tsx
Normal file
43
src/components/white-balance/white-balance.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import { ColorSlider } from './color-slider';
|
||||
import { TestColorsBg } from './test-colors-bg';
|
||||
|
||||
export const WhiteBalance = () => {
|
||||
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" />
|
||||
</label>
|
||||
<label class="flex items-center gap-2">
|
||||
<span class="w-3 block">G:</span>
|
||||
<ColorSlider class="from-pink-500 to-green-500" />
|
||||
</label>
|
||||
<label class="flex items-center gap-2">
|
||||
<span class="w-3 block">B:</span>
|
||||
<ColorSlider class="from-yellow-500 to-blue-500" />
|
||||
</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>
|
||||
);
|
||||
};
|
Reference in New Issue
Block a user