Baipyrus/Matrix
1
0
Fork 0
mirror of https://gitlab1.ptb.de/waltem01/Matrix synced 2024-11-14 00:43:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: general code clean up

Browse Source
This commit is contained in:
waltem01 2024-02-22 10:47:26 +01:00
parent f2cb916782
commit 2d0c93cf3b
1 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
Webserver/src/routes/image/+page.svelte
View File

@ -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<string> {
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}
/>
</div>