From 846778b969a44e108b3520ffd0e05615d0e15e24 Mon Sep 17 00:00:00 2001
From: waltem01 <simon.waltemathe@ptb.de>
Date: Fri, 16 Feb 2024 09:15:32 +0100
Subject: [PATCH] configuring matrix dimensions

---
 Webserver/.env.example                  |  9 ++++++++-
 Webserver/src/lib/client/matrix.ts      |  8 ++++++++
 Webserver/src/routes/image/+page.svelte | 19 +++++++++++++++++--
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/Webserver/.env.example b/Webserver/.env.example
index ee9cb4c..b6fc918 100644
--- a/Webserver/.env.example
+++ b/Webserver/.env.example
@@ -1,2 +1,9 @@
 API_SERVER_IP=
-API_SERVER_PORT=
\ No newline at end of file
+API_SERVER_PORT=
+
+
+PUBLIC_LED_WIDTH=
+PUBLIC_LED_HEIGHT=
+
+PUBLIC_LED_CHAIN=
+PUBLIC_LED_PARALLEL=
diff --git a/Webserver/src/lib/client/matrix.ts b/Webserver/src/lib/client/matrix.ts
index 8914ce5..1844b9c 100644
--- a/Webserver/src/lib/client/matrix.ts
+++ b/Webserver/src/lib/client/matrix.ts
@@ -1,3 +1,11 @@
+// Interface to represent the entire matrix data
+export interface Matrix {
+	width: number;
+	height: number;
+	scale?: number;
+	grid?: MatrixCell[][];
+}
+
 // Interface to represent a singualr matrix cell object
 export interface MatrixCell {
 	x: number;
diff --git a/Webserver/src/routes/image/+page.svelte b/Webserver/src/routes/image/+page.svelte
index 4343918..4b8d023 100644
--- a/Webserver/src/routes/image/+page.svelte
+++ b/Webserver/src/routes/image/+page.svelte
@@ -1,5 +1,13 @@
 <script lang="ts">
+	import {
+		PUBLIC_LED_WIDTH,
+		PUBLIC_LED_HEIGHT,
+		PUBLIC_LED_CHAIN,
+		PUBLIC_LED_PARALLEL
+	} from '$env/static/public';
+	import type { Matrix } from '$lib/client/matrix';
 	import type { APIResponse } from '$lib/interfaces';
+	import { onMount } from 'svelte';
 
 	interface UploadData {
 		start: number;
@@ -8,7 +16,7 @@
 	}
 
 	let imageURL: string | null, lastImage: File;
-	let uploadData: UploadData;
+	let uploadData: UploadData, matrix: Matrix;
 
 	async function updateMatrix() {
 		await fetch('/api/redirect?endpoint=update');
@@ -97,12 +105,19 @@
 			elapsed: '0'
 		};
 	}
+
+	onMount(() => {
+		matrix = {
+			width: +PUBLIC_LED_WIDTH * +PUBLIC_LED_CHAIN,
+			height: +PUBLIC_LED_HEIGHT * +PUBLIC_LED_PARALLEL
+		};
+	});
 </script>
 
 <input type="file" name="image" accept="image/*" on:change={uploadImage} />
 {#if imageURL}
 	<img src={imageURL} alt="User uploaded" />
-	{#await fileAsDataURL(lastImage, 192, 192)}
+	{#await fileAsDataURL(lastImage, matrix.width, matrix.height)}
 		<p>Loading image data . . .</p>
 		<p>{uploadData.elapsed} seconds elapsed.</p>
 	{:then dataUrl}