38 lines
872 B
TypeScript
38 lines
872 B
TypeScript
import { createEffect, createSignal } from "solid-js";
|
|
import { listen } from "@tauri-apps/api/event";
|
|
import { FolderPicker } from "./FolderPicker";
|
|
|
|
export function ImageViewer() {
|
|
const [latestImage, setLatestImage] = createSignal<string | null>(null);
|
|
|
|
createEffect(() => {
|
|
// Listen for PNG processing events
|
|
const unlisten = listen("png-processed", (event) => {
|
|
console.log("Received processed PNG");
|
|
const base64Data = event.payload as string;
|
|
setLatestImage(`data:image/png;base64,${base64Data}`);
|
|
});
|
|
|
|
return () => {
|
|
unlisten.then((fn) => fn()); // Cleanup listener
|
|
};
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
<FolderPicker />
|
|
|
|
{latestImage() && (
|
|
<div class="mt-4">
|
|
<h3>Latest Processed Image:</h3>
|
|
<img
|
|
src={latestImage() || undefined}
|
|
alt="Latest processed"
|
|
class="max-w-md"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|