fix: 缩放的屏幕,灯条颜色预览效果错误

This commit is contained in:
Ivan Li 2023-03-26 15:54:57 +08:00
parent 1a3102257e
commit 3e54d30498
4 changed files with 24 additions and 31 deletions

View File

@ -98,24 +98,19 @@ async fn write_led_strip_configs(
async fn get_led_strips_sample_points( async fn get_led_strips_sample_points(
config: LedStripConfig, config: LedStripConfig,
) -> Result<Vec<screenshot::LedSamplePoints>, String> { ) -> Result<Vec<screenshot::LedSamplePoints>, String> {
let displays = DisplayInfo::all().map_err(|e| { let screenshot_manager = ScreenshotManager::global().await;
error!("can not read led strip config: {}", e); let channels = screenshot_manager.channels.read().await;
e.to_string() if let Some(rx) = channels.get(&config.display_id) {
}); let rx = rx.clone();
let display = displays?.into_iter().find(|d| d.id == config.display_id); let screenshot = rx.borrow().clone();
let width = screenshot.width;
if let None = display { let height = screenshot.height;
let sample_points =
Screenshot::get_sample_point(&config, width as usize, height as usize);
Ok(sample_points)
} else {
return Err(format!("display not found: {}", config.display_id)); return Err(format!("display not found: {}", config.display_id));
} }
let display = display.unwrap();
let config = screenshot::Screenshot::get_sample_point(
config,
display.width as usize,
display.height as usize,
);
Ok(config)
} }
#[tauri::command] #[tauri::command]

View File

@ -42,7 +42,7 @@ impl Screenshot {
} }
pub fn get_sample_point( pub fn get_sample_point(
config: LedStripConfig, config: &LedStripConfig,
width: usize, width: usize,
height: usize, height: usize,
) -> Vec<LedSamplePoints> { ) -> Vec<LedSamplePoints> {

View File

@ -45,19 +45,19 @@ export const DisplayView: Component<DisplayViewProps> = (props) => {
class="absolute bg-slate-50/10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded backdrop-blur w-1/3 min-w-[300px] text-black" class="absolute bg-slate-50/10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded backdrop-blur w-1/3 min-w-[300px] text-black"
/> />
<LedStripPart <LedStripPart
class="row-start-1 col-start-2 flex-row" class="row-start-1 col-start-2 flex-row overflow-hidden"
config={ledStripConfigs().find((c) => c.border === 'Top')} config={ledStripConfigs().find((c) => c.border === 'Top')}
/> />
<LedStripPart <LedStripPart
class="row-start-2 col-start-1 flex-col" class="row-start-2 col-start-1 flex-col overflow-hidden"
config={ledStripConfigs().find((c) => c.border === 'Left')} config={ledStripConfigs().find((c) => c.border === 'Left')}
/> />
<LedStripPart <LedStripPart
class="row-start-2 col-start-3 flex-col" class="row-start-2 col-start-3 flex-col overflow-hidden"
config={ledStripConfigs().find((c) => c.border === 'Right')} config={ledStripConfigs().find((c) => c.border === 'Right')}
/> />
<LedStripPart <LedStripPart
class="row-start-3 col-start-2 flex-row" class="row-start-3 col-start-2 flex-row overflow-hidden"
config={ledStripConfigs().find((c) => c.border === 'Bottom')} config={ledStripConfigs().find((c) => c.border === 'Bottom')}
/> />
</section> </section>

View File

@ -34,10 +34,14 @@ export const Pixel: Component<PixelProps> = (props) => {
})); }));
return ( return (
<div <div
class="inline-block flex-shrink w-2 h-2 aspect-square rounded-full border border-black" class="flex-auto flex h-full w-full justify-center items-center relative"
style={style()}
title={props.color} title={props.color}
/> >
<div
class="absolute top-px h-2 w-2 rounded-full shadow-2xl shadow-black"
style={style()}
/>
</div>
); );
}; };
@ -52,6 +56,7 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
if (!localProps.config || !samplePoints) { if (!localProps.config || !samplePoints) {
return; return;
} }
let pendingCount = 0; let pendingCount = 0;
const unlisten = listen<{ const unlisten = listen<{
base64_image: string; base64_image: string;
@ -67,12 +72,6 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
} }
pendingCount++; pendingCount++;
console.log({
samplePoints,
displayId: event.payload.display_id,
border: localProps.config!.border,
});
invoke<string[]>('get_one_edge_colors', { invoke<string[]>('get_one_edge_colors', {
samplePoints, samplePoints,
displayId: event.payload.display_id, displayId: event.payload.display_id,
@ -107,7 +106,6 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
if (_colors) { if (_colors) {
return <For each={_colors}>{(item) => <Pixel color={item} />}</For>; return <For each={_colors}>{(item) => <Pixel color={item} />}</For>;
} else if (localProps.config) { } else if (localProps.config) {
return null;
return ( return (
<For each={new Array(localProps.config.len).fill(undefined)}> <For each={new Array(localProps.config.len).fill(undefined)}>
{() => <Pixel color="transparent" />} {() => <Pixel color="transparent" />}