configuring matrix dimensions

Webserver/.env.example

@@ -1,2 +1,9 @@
 API_SERVER_IP=
-API_SERVER_PORT=
+API_SERVER_PORT=
+
+
+PUBLIC_LED_WIDTH=
+PUBLIC_LED_HEIGHT=
+
+PUBLIC_LED_CHAIN=
+PUBLIC_LED_PARALLEL=

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;

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}