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 12:53:03 +08:00
parent 932cc78bcf
commit fc8b3164d8
5 changed files with 184 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src-tauri/src/ambient_light/publisher.rs
View File

@ -57,7 +57,11 @@ impl LedColorsPublisher {
let internal_tasks_version = self.inner_tasks_version.clone();
tokio::spawn(async move {
let colors = screenshot_manager::get_display_colors(display_id, &sample_points, bound_scale_factor);
let colors = screenshot_manager::get_display_colors(
display_id,
&sample_points,
bound_scale_factor,
);
if let Err(err) = colors {
warn!("Failed to get colors: {}", err);
@ -86,7 +90,11 @@ impl LedColorsPublisher {
// log::info!("tick: {}ms", start.elapsed().as_millis());
start = tokio::time::Instant::now();
let colors = screenshot_manager::get_display_colors(display_id, &sample_points, bound_scale_factor);
let colors = screenshot_manager::get_display_colors(
display_id,
&sample_points,
bound_scale_factor,
);
if let Err(err) = colors {
warn!("Failed to get colors: {}", err);
@ -117,14 +125,18 @@ impl LedColorsPublisher {
});
}
fn start_all_colors_worker(&self, display_ids: Vec<u32>, mappers: Vec<SamplePointMapper>, mut display_colors_rx: broadcast::Receiver<(u32, Vec<u8>)>) {
fn start_all_colors_worker(
&self,
display_ids: Vec<u32>,
mappers: Vec<SamplePointMapper>,
mut display_colors_rx: broadcast::Receiver<(u32, Vec<u8>)>,
) {
let sorted_colors_tx = self.sorted_colors_tx.clone();
let colors_tx = self.colors_tx.clone();
log::debug!("start all_colors_worker");
tokio::spawn(async move {
for _ in 0..10 {
let sorted_colors_tx = sorted_colors_tx.write().await;
let colors_tx = colors_tx.write().await;
@ -212,13 +224,12 @@ impl LedColorsPublisher {
let configs = configs.unwrap();
let mut inner_tasks_version = inner_tasks_version.write().await;
*inner_tasks_version = inner_tasks_version.overflowing_add(1).0;
drop(inner_tasks_version);
let (display_colors_tx, display_colors_rx) = broadcast::channel::<(u32, Vec<u8>)>(8);
let (display_colors_tx, display_colors_rx) =
broadcast::channel::<(u32, Vec<u8>)>(8);
for sample_point_group in configs.sample_point_groups.clone() {
let display_id = sample_point_group.display_id;
@ -343,7 +354,11 @@ impl LedColorsPublisher {
let bound_scale_factor = screenshot.bound_scale_factor;
let colors_config = DisplaySamplePointGroup { display_id, points, bound_scale_factor };
let colors_config = DisplaySamplePointGroup {
display_id,
points,
bound_scale_factor,
};
colors_configs.push(colors_config);
}

3
src/App.tsx
View File

@ -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
View 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
View 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
View 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>
);
};