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 (
<section
{...rootProps}
@ -160,7 +147,7 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
}
onWheel={onWheel}
>
{pixels()}
<For each={colors()}>{(item) => <Pixel color={item} />}</For>
</section>
);
};

View File

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

View File

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