pref(gui): 渲染性能。

This commit is contained in:
Ivan Li 2023-04-01 11:14:34 +08:00
parent 4e75aa4307
commit 85a00cf4f2
3 changed files with 48 additions and 70 deletions

View File

@ -138,19 +138,6 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
} }
}; };
const pixels = createMemo(() => {
const _colors = colors();
if (_colors) {
return <For each={_colors}>{(item) => <Pixel color={item} />}</For>;
} else if (localProps.config) {
return (
<For each={new Array(localProps.config.len).fill(undefined)}>
{() => <Pixel color="transparent" />}
</For>
);
}
});
return ( return (
<section <section
{...rootProps} {...rootProps}
@ -160,7 +147,7 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
} }
onWheel={onWheel} onWheel={onWheel}
> >
{pixels()} <For each={colors()}>{(item) => <Pixel color={item} />}</For>
</section> </section>
); );
}; };

View File

@ -7,6 +7,7 @@ import {
For, For,
JSX, JSX,
onCleanup, onCleanup,
untrack,
} from 'solid-js'; } from 'solid-js';
import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config'; import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config';
import { ledStripStore } from '../stores/led-strip.store'; import { ledStripStore } from '../stores/led-strip.store';
@ -19,29 +20,31 @@ const SorterItem: Component<{ mapper: LedStripPixelMapper; strip: LedStripConfig
createEffect(() => { createEffect(() => {
let stopped = false; let stopped = false;
const frame = () => { const frame = () => {
const strips = ledStripStore.strips; untrack(() => {
const totalLedCount = strips.reduce((acc, strip) => acc + strip.len, 0); const strips = ledStripStore.strips;
const totalLedCount = strips.reduce((acc, strip) => acc + strip.len, 0);
const fullLeds = new Array(totalLedCount).fill('rgba(255,255,255,0.5)');
const fullLeds = new Array(totalLedCount).fill('rgba(255,255,255,0.5)'); for (let i = props.mapper.start, j = 0; i < props.mapper.end; i++, j++) {
fullLeds[i] = `rgb(${ledStripStore.colors[i * 3]}, ${
for (let i = props.mapper.start, j = 0; i < props.mapper.end; i++, j++) { ledStripStore.colors[i * 3 + 1]
fullLeds[i] = `rgb(${ledStripStore.colors[i * 3]}, ${ }, ${ledStripStore.colors[i * 3 + 2]})`;
ledStripStore.colors[i * 3 + 1] }
}, ${ledStripStore.colors[i * 3 + 2]})`; setFullLeds(fullLeds);
} });
setFullLeds(fullLeds);
if (!stopped) { if (!stopped) {
requestAnimationFrame(frame); setTimeout(() => {
frame();
}, 1000);
} }
}; };
frame(); frame();
onCleanup(() => { onCleanup(() => {
console.log('cleanup');
stopped = true; stopped = true;
console.timeEnd('frame');
}); });
}); });

View File

@ -1,5 +1,4 @@
import { invoke } from '@tauri-apps/api'; import { invoke } from '@tauri-apps/api';
import { listen } from '@tauri-apps/api/event';
import { convertFileSrc } from '@tauri-apps/api/tauri'; import { convertFileSrc } from '@tauri-apps/api/tauri';
import { import {
Component, Component,
@ -81,56 +80,45 @@ export const ScreenView: Component<ScreenViewProps> = (props) => {
} }
}; };
// get screenshot
createEffect(() => { createEffect(() => {
let pendingCount = 0; let stopped = false;
const unlisten = listen<{ const frame = async () => {
base64_image: string;
display_id: number;
height: number;
width: number;
}>('encoded-screenshot-updated', (event) => {
const { drawWidth, drawHeight } = drawInfo(); const { drawWidth, drawHeight } = drawInfo();
if (event.payload.display_id === localProps.displayId) { const url = convertFileSrc(
const url = convertFileSrc( `displays/${localProps.displayId}?width=${drawWidth}&height=${drawHeight}`,
`displays/${localProps.displayId}?width=${drawWidth}&height=${drawHeight}`, 'ambient-light',
'ambient-light', );
); await fetch(url, {
if (pendingCount >= 1) { mode: 'cors',
return; })
} .then((res) => res.body?.getReader().read())
pendingCount++; .then((buffer) => {
fetch(url, { if (buffer?.value) {
mode: 'cors', setImageData({
}) buffer: new Uint8ClampedArray(buffer?.value),
.then((res) => res.body?.getReader().read()) width: drawWidth,
.then((buffer) => { height: drawHeight,
if (buffer?.value) { });
setImageData({ } else {
buffer: new Uint8ClampedArray(buffer?.value), setImageData(null);
width: drawWidth, }
height: drawHeight, draw();
}); });
} else { };
setImageData(null);
}
draw();
})
.finally(() => {
pendingCount--;
});
}
// console.log(event.payload.display_id, localProps.displayId); (async () => {
}); while (!stopped) {
subscribeScreenshotUpdate(localProps.displayId); await frame();
}
})();
onCleanup(() => { onCleanup(() => {
unlisten.then((unlisten) => { stopped = true;
unlisten();
});
}); });
}); });
// resize
createEffect(() => { createEffect(() => {
let resizeObserver: ResizeObserver; let resizeObserver: ResizeObserver;