From 688447e63ceda2153969230da0885b6c188cf8d1 Mon Sep 17 00:00:00 2001
From: waltem01 <simon.waltemathe@ptb.de>
Date: Fri, 16 Feb 2024 13:06:52 +0100
Subject: [PATCH] get image placement data from a submit form

---
 Webserver/src/routes/image/+page.svelte | 143 +++++++++++++++++++-----
 1 file changed, 115 insertions(+), 28 deletions(-)

diff --git a/Webserver/src/routes/image/+page.svelte b/Webserver/src/routes/image/+page.svelte
index d689155..8381f2b 100644
--- a/Webserver/src/routes/image/+page.svelte
+++ b/Webserver/src/routes/image/+page.svelte
@@ -15,19 +15,27 @@
 		interval: NodeJS.Timeout;
 	}
 
+	interface SubmitData {
+		x: number;
+		y: number;
+		w: number;
+		h: number;
+	}
+
 	let imageURL: string | null, lastImage: File;
 	let uploadData: UploadData, matrix: Matrix;
-	let uploadStarted = false;
+	let uploadStarted = false,
+		submitData: SubmitData;
 
 	async function updateMatrix() {
 		await fetch('/api/redirect?endpoint=update');
 		clearInterval(uploadData.interval);
 	}
 
-	async function placeImage() {
+	async function placeImage(data: SubmitData) {
 		const fdata = new FormData();
-		fdata.append('x', '0');
-		fdata.append('y', '0');
+		fdata.append('x', data.x.toString());
+		fdata.append('y', data.y.toString());
 		await post(fdata, 'image');
 	}
 
@@ -51,7 +59,7 @@
 		if (!mdata.success) alert(`Error while processing '${endpoint}'!`);
 	}
 
-	async function fileAsDataURL(file: File, width: number, height: number): Promise<string> {
+	async function fileAsDataURL(file: File, data: SubmitData): Promise<string> {
 		return new Promise((resolve, reject) => {
 			const img = new Image();
 			img.onload = () => {
@@ -59,11 +67,11 @@
 				const context = canvas.getContext('2d');
 
 				// Set the canvas dimensions
-				canvas.width = width;
-				canvas.height = height;
+				canvas.width = data.w;
+				canvas.height = data.h;
 
 				// Draw the image onto the canvas, resizing it to fit the canvas
-				context?.drawImage(img, 0, 0, width, height);
+				context?.drawImage(img, 0, 0, canvas.width, canvas.height);
 
 				// Convert the canvas image to a Data URL
 				const dataURL = canvas.toDataURL();
@@ -77,7 +85,8 @@
 		});
 	}
 
-	function uploadImage(event: Event) {
+	function getImage(event: Event) {
+		uploadStarted = false;
 		// Revoke previous image url, if any
 		if (imageURL) {
 			URL.revokeObjectURL(imageURL);
@@ -92,6 +101,18 @@
 		// Load image data and file
 		lastImage = file;
 		imageURL = URL.createObjectURL(file);
+	}
+
+	function handleSubmit(event: SubmitEvent) {
+		// Get image data from submit
+		const form = event.target as HTMLFormElement;
+		const fdata = new FormData(form);
+		submitData = {
+			x: parseInt(fdata.get('x')?.toString() ?? '0'),
+			y: parseInt(fdata.get('y')?.toString() ?? '0'),
+			w: parseInt(fdata.get('w')?.toString() ?? matrix.width.toString()),
+			h: parseInt(fdata.get('h')?.toString() ?? matrix.height.toString())
+		};
 
 		// Time upload by saving date
 		uploadData = {
@@ -105,6 +126,9 @@
 			start: performance.now(),
 			elapsed: '0'
 		};
+
+		// Start upload process
+		uploadStarted = true;
 	}
 
 	onMount(() => {
@@ -115,31 +139,94 @@
 	});
 </script>
 
-<input type="file" name="image" accept="image/*" on:change={uploadImage} />
-{#if imageURL}
-	<img src={imageURL} alt="User uploaded" />
-	{#if uploadStarted}
-		{#await fileAsDataURL(lastImage, matrix.width, matrix.height)}
-			<p>Loading image data . . .</p>
+<form on:submit|preventDefault={handleSubmit}>
+		<label for="x">Set X coordinate:</label
+		>
+		<input
+			type="number"
+			name="x"
+			id="x"
+			min="0"
+			max={(matrix?.width ?? 192) - 1}
+			step="1"
+			value="0"
+		/>
+
+		<label for="y">Set Y coordinate:</label
+		>
+		<input
+			type="number"
+			name="y"
+			id="y"
+			min="0"
+			max={(matrix?.height ?? 192) - 1}
+			step="1"
+			value="0"
+		/>
+
+		<label for="w">Set image width:</label>
+		<input
+			type="number"
+			name="w"
+			id="w"
+			min="1"
+			max={matrix?.width ?? 192}
+			step="1"
+			value={matrix?.width ?? 192}
+		/>
+
+		<label for="h">Set image height:</label
+		>
+		<input
+			type="number"
+			name="h"
+			id="h"
+			min="1"
+			max={matrix?.height ?? 192}
+			step="1"
+			value={matrix?.height ?? 192}
+		/>
+
+		<label for="image">Set an image:</label
+		>
+		<input
+			type="file"
+			name="image"
+			id="image"
+			accept="image/*"
+			required
+			on:change={getImage}
+		/>
+
+	<input
+		type="submit"
+		value="Upload!"
+	/>
+	{#if imageURL}
+		<img src={imageURL} alt="User uploaded" />
+	{/if}
+</form>
+{#if uploadStarted}
+	{#await fileAsDataURL(lastImage, submitData)}
+		<p>Loading image data . . .</p>
+		<p>{uploadData.elapsed} seconds elapsed.</p>
+	{:then dataUrl}
+		{#await sendImage(dataUrl)}
+			<p>Sending image . . .</p>
 			<p>{uploadData.elapsed} seconds elapsed.</p>
-		{:then dataUrl}
-			{#await sendImage(dataUrl)}
-				<p>Sending image . . .</p>
+		{:then}
+			{#await placeImage(submitData)}
+				<p>Placing image . . .</p>
 				<p>{uploadData.elapsed} seconds elapsed.</p>
 			{:then}
-				{#await placeImage()}
-					<p>Placing image . . .</p>
+				{#await updateMatrix()}
+					<p>Updating matrix . . .</p>
 					<p>{uploadData.elapsed} seconds elapsed.</p>
 				{:then}
-					{#await updateMatrix()}
-						<p>Updating matrix . . .</p>
-						<p>{uploadData.elapsed} seconds elapsed.</p>
-					{:then}
-						<p>Done!</p>
-						<p>{uploadData.elapsed} seconds elapsed.</p>
-					{/await}
+					<p>Done!</p>
+					<p>{uploadData.elapsed} seconds elapsed.</p>
 				{/await}
 			{/await}
 		{/await}
-	{/if}
+	{/await}
 {/if}