diff --git a/Webserver/src/routes/image/+page.svelte b/Webserver/src/routes/image/+page.svelte index 7efde4c..1db9482 100644 --- a/Webserver/src/routes/image/+page.svelte +++ b/Webserver/src/routes/image/+page.svelte @@ -9,12 +9,14 @@ import type { APIResponse } from '$lib/interfaces'; import { onMount } from 'svelte'; - interface UploadData { + // Data structure to keep track of upload statistics + interface UploadStat { start: number; elapsed: string; interval: NodeJS.Timeout; } + // Data structure to represent user data interface SubmitData { x: number; y: number; @@ -23,16 +25,20 @@ update: boolean; } + // System variables let imageURL: string | null; - let uploadData: UploadData, matrix: Matrix; + let uploadData: UploadStat, matrix: Matrix; let uploadStarted = false, submitData: SubmitData; + // Update matrix over endpoint async function updateMatrix(data: SubmitData) { if (data.update) await fetch('/api/redirect?endpoint=update'); clearInterval(uploadData.interval); } + // Placing image over endpoint (by specifying position) + // Image is always max resolution! See resizing in `fileAsDataURL`. async function placeImage(data: SubmitData) { const fdata = new FormData(); fdata.append('x', data.x.toString()); @@ -40,12 +46,14 @@ await post(fdata, 'image'); } + // Send image data to endpoint async function sendImage(url: string) { const fdata = new FormData(); fdata.append('url', url); await post(fdata, 'upload'); } + // Handle sending HTTP POST request with specified data async function post(fdata: FormData, endpoint: string) { // Append endpoint to formdata for redirection fdata.append('endpoint', endpoint); @@ -60,6 +68,7 @@ if (!mdata.success) alert(`Error while processing '${endpoint}'!`); } + // Load and read file, encode as base64 data url async function fileAsDataURL(data: SubmitData): Promise { return new Promise((resolve, reject) => { const img = new Image(); @@ -75,8 +84,7 @@ context?.drawImage(img, 0, 0, canvas.width, canvas.height); // Convert the canvas image to a Data URL - const dataURL = canvas.toDataURL(); - resolve(dataURL); + resolve(canvas.toDataURL()); }; img.onerror = reject; @@ -85,6 +93,7 @@ }); } + // Getting an image from input function getImage(event: Event) { uploadStarted = false; // Revoke previous image url, if any @@ -102,6 +111,7 @@ imageURL = URL.createObjectURL(file); } + // Handling form submit event function handleSubmit(event: SubmitEvent) { // Get image data from submit const form = event.target as HTMLFormElement; @@ -131,6 +141,7 @@ uploadStarted = true; } + // On client loaded onMount(() => { matrix = { width: +PUBLIC_LED_WIDTH * +PUBLIC_LED_CHAIN, @@ -208,7 +219,6 @@ name="image" id="image" accept="image/*" - required on:change={getImage} />