mirror of
https://gitlab1.ptb.de/waltem01/Matrix
synced 2024-12-24 11:21:44 +00:00
commentary
This commit is contained in:
waltem01
parent
3a105c79dd
commit
c57bb60fcb
@ -1,34 +1,47 @@
|
||||
<script lang="ts">
|
||||
import { detectGamepad, gamepadButtonPress } from '$lib/client/gamepad';
|
||||
import { rgbToHex, type Color, getContrastColor } from '$lib/client/color';
|
||||
import { detectGamepad, gamepadButtonPress } from '$lib/client/gamepad';
|
||||
import { initializeMatrix } from '$lib/client/matrix';
|
||||
import { toRadians } from '$lib/client/miscellaneous';
|
||||
import type { APIResponse } from '$lib/interfaces';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
async function get(event: SubmitEvent) {
|
||||
// Basic GET Method for forms
|
||||
async function get(event: SubmitEvent | string) {
|
||||
clearMatrix();
|
||||
const form = event.target as HTMLFormElement;
|
||||
// Get endpoint from form dataset or string input
|
||||
const endpoint =
|
||||
event instanceof SubmitEvent ? (event.target as HTMLFormElement).dataset.endpoint : event;
|
||||
|
||||
const response = await fetch(`/api/redirect?endpoint=${form.dataset.endpoint}`);
|
||||
// Send request to be redirected to given endpoint
|
||||
const response = await fetch(`/api/redirect?endpoint=${endpoint}`);
|
||||
// Await respose from webserver
|
||||
const mdata = (await response.json()) as APIResponse;
|
||||
if (!mdata.success) alert(`Error while processing '${form.dataset.endpoint}'!`);
|
||||
// Basic error handling
|
||||
if (!mdata.success) alert(`Error while processing '${endpoint}'!`);
|
||||
}
|
||||
|
||||
// Basic POST Method for forms
|
||||
async function post(event: SubmitEvent) {
|
||||
// Get formdata from form element
|
||||
const form = event.target as HTMLFormElement;
|
||||
const fdata = new FormData(form);
|
||||
|
||||
// Display action on simulated matrix
|
||||
switch (form.dataset.endpoint) {
|
||||
// Save color data from form
|
||||
case 'color':
|
||||
colorSelect(fdata);
|
||||
break;
|
||||
// Draw pixel onto matrix
|
||||
case 'pixel':
|
||||
setPixel(fdata);
|
||||
break;
|
||||
// Draw rectangle onto matrix
|
||||
case 'rectangle':
|
||||
drawRectangle(fdata);
|
||||
break;
|
||||
// Draw circle onto matrix
|
||||
case 'circle':
|
||||
drawCircle(fdata);
|
||||
break;
|
||||
@ -37,103 +50,144 @@
|
||||
// break;
|
||||
}
|
||||
|
||||
// Append endpoint to formdata for redirection
|
||||
fdata.append('endpoint', form.dataset.endpoint ?? '');
|
||||
// Send request to be redirected to given endpoint
|
||||
const response = await fetch('/api/redirect', {
|
||||
method: 'POST',
|
||||
body: fdata
|
||||
});
|
||||
// Await respose from webserver
|
||||
const mdata = (await response.json()) as APIResponse;
|
||||
// Basic error handling
|
||||
if (!mdata.success) alert(`Error while processing '${form.dataset.endpoint}'!`);
|
||||
}
|
||||
|
||||
// function displayText(formData: FormData) {}
|
||||
|
||||
// Draw circle onto matrix
|
||||
function drawCircle(formData: FormData) {
|
||||
// Get relevant data from formdata
|
||||
const x = parseInt((formData.get('x') as string) ?? '191');
|
||||
const y = parseInt((formData.get('y') as string) ?? '191');
|
||||
const r = parseInt((formData.get('r') as string) ?? '95');
|
||||
|
||||
// Convert stored color data to hex
|
||||
const hex = rgbToHex(pixelColor);
|
||||
// Loop through angles
|
||||
for (let a = 0; a < 360; a++) {
|
||||
// Calculate coordinates of pixel
|
||||
const nx = Math.round(Math.cos(toRadians(a)) * r + x);
|
||||
const ny = Math.round(Math.sin(toRadians(a)) * r + y);
|
||||
|
||||
// If within bounds, draw pixel with color
|
||||
if (nx >= 0 && nx < 192 && ny >= 0 && ny < 192) matrix[ny][nx].color = hex;
|
||||
}
|
||||
}
|
||||
|
||||
// Draw rectangle onto matrix
|
||||
function drawRectangle(formData: FormData) {
|
||||
// Get relevant data from formdata
|
||||
const x = parseInt((formData.get('x') as string) ?? '191');
|
||||
const y = parseInt((formData.get('y') as string) ?? '191');
|
||||
const w = parseInt((formData.get('w') as string) ?? '191');
|
||||
const h = parseInt((formData.get('h') as string) ?? '191');
|
||||
|
||||
// Convert stored color data to hex
|
||||
const hex = rgbToHex(pixelColor);
|
||||
// Loop through every position in rectangle to set color
|
||||
for (let j = y; j < y + h; j++) for (let i = x; i < x + w; i++) matrix[j][i].color = hex;
|
||||
}
|
||||
|
||||
// Draw pixel onto matrix
|
||||
function setPixel(formData: FormData) {
|
||||
// Get relevant data from formdata
|
||||
const x = parseInt((formData.get('x') as string) ?? '191');
|
||||
const y = parseInt((formData.get('y') as string) ?? '191');
|
||||
|
||||
// Set singular coodinate to given color
|
||||
matrix[y][x].color = rgbToHex(pixelColor);
|
||||
}
|
||||
|
||||
// Clear simulated matrix
|
||||
function clearMatrix() {
|
||||
matrix.forEach((y) => y.forEach((x) => (x.color = '000000')));
|
||||
}
|
||||
|
||||
function colorSelect(formData: FormData) {
|
||||
// Get relevant data from formdata
|
||||
pixelColor.r = parseInt((formData.get('r') as string) ?? '255');
|
||||
pixelColor.g = parseInt((formData.get('g') as string) ?? '255');
|
||||
pixelColor.b = parseInt((formData.get('b') as string) ?? '255');
|
||||
}
|
||||
|
||||
// Mouse event handler for setting pixels clicked on matrix
|
||||
async function setMousePixel(event: MouseEvent) {
|
||||
// Exist if mouse not pressed
|
||||
if (!mousePressed) return;
|
||||
|
||||
// Get table cell element
|
||||
const parent = event.target as HTMLTableCellElement;
|
||||
// Extract x and y values from datasets
|
||||
let x = parseInt(parent.dataset.x ?? '0');
|
||||
let y = parseInt(parent.parentElement?.dataset.y ?? '0');
|
||||
|
||||
// Convert stored color data to hex
|
||||
const next = rgbToHex(pixelColor);
|
||||
// Ignore if color stays the same to reduce API calls
|
||||
if (matrix[y][x].color === next) return;
|
||||
// Set pixel to color
|
||||
matrix[y][x].color = next;
|
||||
|
||||
// Create new formdata
|
||||
const fdata = new FormData();
|
||||
const isScaled = scaling > 1;
|
||||
// Scale data accordingly
|
||||
if (isScaled) {
|
||||
x *= scaling;
|
||||
y *= scaling;
|
||||
|
||||
// width and height of rectangle are the scale factor
|
||||
fdata.append('w', scaling.toString());
|
||||
fdata.append('h', scaling.toString());
|
||||
}
|
||||
|
||||
// append x and y coordinates
|
||||
fdata.append('x', x.toString());
|
||||
fdata.append('y', y.toString());
|
||||
// append endpoint depending on scale factor
|
||||
fdata.append('endpoint', isScaled ? 'rectangle' : 'pixel');
|
||||
|
||||
// Send request to be redirected to given endpoint
|
||||
const response = await fetch('/api/redirect', {
|
||||
method: 'POST',
|
||||
body: fdata
|
||||
});
|
||||
// Await respose from webserver
|
||||
const mdata = (await response.json()) as APIResponse;
|
||||
// Basic error handling
|
||||
if (!mdata.success) alert("Error while processing 'pixel'!");
|
||||
}
|
||||
|
||||
// Correction function to map scale factor to valid values
|
||||
function correctSlider(event: Event) {
|
||||
// Get input element
|
||||
const slider = event.target as HTMLInputElement;
|
||||
|
||||
// Read value, round down to next best divisor
|
||||
let current = parseInt(slider.value);
|
||||
while (192 % current !== 0) current--;
|
||||
|
||||
// Set scaling to new value
|
||||
scaling = current;
|
||||
// Scale elements by padding inside accordingly
|
||||
padding = 0.1875 * scaling;
|
||||
|
||||
// Reinitialize matrix
|
||||
matrix = initializeMatrix(scaling);
|
||||
}
|
||||
|
||||
// System variables
|
||||
let scaling = 3,
|
||||
padding = 0.5625;
|
||||
let mousePressed = false;
|
||||
@ -143,26 +197,40 @@
|
||||
const gameCoords = { x: 0, y: 0 };
|
||||
const pixelColor = { r: 255, g: 255, b: 255 } as Color;
|
||||
|
||||
// On client loaded
|
||||
onMount(() => {
|
||||
// API call to clear matrix
|
||||
get('clear');
|
||||
|
||||
// Regularly try detecting gamepad
|
||||
setInterval(() => {
|
||||
// Pass if is already selected
|
||||
if (gamepad) return;
|
||||
gamepad = detectGamepad();
|
||||
}, 1000);
|
||||
|
||||
// Regularly try detecting button presses
|
||||
setInterval(() => gamepadButtonPress(gamepad, gameCoords), 100);
|
||||
|
||||
// Listen for gamepad conntect events
|
||||
window.addEventListener('gamepadconnected', (e) => {
|
||||
// Set new gamepad
|
||||
if (e.gamepad.index === 0) gamepad = e.gamepad;
|
||||
});
|
||||
|
||||
// Listen for gamepad disconnect events
|
||||
window.addEventListener('gamepaddisconnected', (e) => {
|
||||
// Remove only if it's the same gameapd
|
||||
if (e.gamepad.id === gamepad?.id) gamepad = null;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Title -->
|
||||
<h1 class="text-4xl font-bold m-5 text-center">Matrix Control Panel</h1>
|
||||
<!-- Forms -->
|
||||
<div class="grid grid-rows-7 p-1">
|
||||
<!-- Update -->
|
||||
<form class="grid grid-cols-2" method="GET" data-endpoint="update" on:submit|preventDefault={get}>
|
||||
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="update">Update:</label>
|
||||
<input
|
||||
@ -174,6 +242,7 @@
|
||||
/>
|
||||
</form>
|
||||
|
||||
<!-- Clear -->
|
||||
<form class="grid grid-cols-2" method="GET" data-endpoint="clear" on:submit|preventDefault={get}>
|
||||
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="clear">Clear:</label>
|
||||
<input
|
||||
@ -185,6 +254,7 @@
|
||||
/>
|
||||
</form>
|
||||
|
||||
<!-- Set color -->
|
||||
<form
|
||||
class="grid grid-cols-8"
|
||||
method="POST"
|
||||
@ -192,6 +262,7 @@
|
||||
on:submit|preventDefault={post}
|
||||
>
|
||||
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="color">Set Color:</label>
|
||||
<!-- RED color value -->
|
||||
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="red">Red:</label>
|
||||
<input
|
||||
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
|
||||
@ -204,6 +275,7 @@
|
||||
value="255"
|
||||
required
|
||||
/>
|
||||
<!-- GREEN color value -->
|
||||
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="green">Green:</label>
|
||||
<input
|
||||
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
|
||||
@ -216,6 +288,7 @@
|
||||
value="255"
|
||||
required
|
||||
/>
|
||||
<!-- BLUE color value -->
|
||||
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="blue">Blue:</label>
|
||||
<input
|
||||
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
|
||||
@ -237,14 +310,16 @@
|
||||
/>
|
||||
</form>
|
||||
|
||||
<!-- Set pixel -->
|
||||
<form
|
||||
class="grid grid-cols-6"
|
||||
method="POST"
|
||||
data-endpoint="pixel"
|
||||
on:submit|preventDefault={post}
|
||||
>
|
||||
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="pixel">Set Pixel:</label
|
||||
><label class="border-2 border-black border-b-0 border-r-0 pl-1" for="px">X:</label>
|
||||
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="pixel">Set Pixel:</label>
|
||||
<!-- X coordinate -->
|
||||
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="px">X:</label>
|
||||
<input
|
||||
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
|
||||
id="px"
|
||||
@ -256,6 +331,7 @@
|
||||
value="0"
|
||||
required
|
||||
/>
|
||||
<!-- Y coordinate -->
|
||||
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="py">Y:</label>
|
||||
<input
|
||||
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
|
||||
@ -277,6 +353,7 @@
|
||||
/>
|
||||
</form>
|
||||
|
||||
<!-- Draw rectangle -->
|
||||
<form
|
||||
class="grid grid-cols-10"
|
||||
method="POST"
|
||||
@ -285,7 +362,9 @@
|
||||
>
|
||||
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="rectangle"
|
||||
>Rectangle:</label
|
||||
><label class="border-2 border-black border-b-0 border-r-0 pl-1" for="rx">X:</label>
|
||||
>
|
||||
<!-- X coordinate -->
|
||||
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="rx">X:</label>
|
||||
<input
|
||||
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
|
||||
id="rx"
|
||||
@ -297,6 +376,7 @@
|
||||
value="177"
|
||||
required
|
||||
/>
|
||||
<!-- Y coordinate -->
|
||||
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="ry">Y:</label>
|
||||
<input
|
||||
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
|
||||
@ -308,7 +388,9 @@
|
||||
step="1"
|
||||
value="0"
|
||||
required
|
||||
/><label class="border-2 border-black border-b-0 border-r-0 pl-1" for="w">W:</label>
|
||||
/>
|
||||
<!-- Width -->
|
||||
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="w">W:</label>
|
||||
<input
|
||||
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
|
||||
id="w"
|
||||
@ -320,6 +402,7 @@
|
||||
value="15"
|
||||
required
|
||||
/>
|
||||
<!-- Height -->
|
||||
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="h">H:</label>
|
||||
<input
|
||||
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
|
||||
@ -341,14 +424,16 @@
|
||||
/>
|
||||
</form>
|
||||
|
||||
<!-- Draw circle -->
|
||||
<form
|
||||
class="grid grid-cols-8"
|
||||
method="POST"
|
||||
data-endpoint="circle"
|
||||
on:submit|preventDefault={post}
|
||||
>
|
||||
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="circle">Circle:</label
|
||||
><label class="border-2 border-black border-b-0 border-r-0 pl-1" for="cx">X:</label>
|
||||
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="circle">Circle:</label>
|
||||
<!-- X coordinate -->
|
||||
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="cx">X:</label>
|
||||
<input
|
||||
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
|
||||
id="cx"
|
||||
@ -360,6 +445,7 @@
|
||||
value="20"
|
||||
required
|
||||
/>
|
||||
<!-- Y coordinate -->
|
||||
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="cy">Y:</label>
|
||||
<input
|
||||
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
|
||||
@ -371,7 +457,9 @@
|
||||
step="1"
|
||||
value="171"
|
||||
required
|
||||
/><label class="border-2 border-black border-b-0 border-r-0 pl-1" for="radius">R:</label>
|
||||
/>
|
||||
<!-- Radius -->
|
||||
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="radius">R:</label>
|
||||
<input
|
||||
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
|
||||
id="radius"
|
||||
@ -393,10 +481,9 @@
|
||||
</form>
|
||||
|
||||
<form class="grid grid-cols-8" method="POST" data-endpoint="text" on:submit|preventDefault={post}>
|
||||
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="text">Text:</label><label
|
||||
class="border-2 border-black border-r-0 border-b-0 pl-1"
|
||||
for="tx">X:</label
|
||||
>
|
||||
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="text">Text:</label>
|
||||
<!-- X coordinate -->
|
||||
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="tx">X:</label>
|
||||
<input
|
||||
class="border-2 border-black border-r-0 border-b-0 cursor-text pl-1 bg-gray-100"
|
||||
id="tx"
|
||||
@ -408,6 +495,7 @@
|
||||
value="8"
|
||||
required
|
||||
/>
|
||||
<!-- Y coordinate -->
|
||||
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="ty">Y:</label>
|
||||
<input
|
||||
class="border-2 border-black border-r-0 border-b-0 cursor-text pl-1 bg-gray-100"
|
||||
@ -419,7 +507,9 @@
|
||||
step="1"
|
||||
value="9"
|
||||
required
|
||||
/><label class="border-2 border-black border-r-0 border-b-0 pl-1" for="tin">Input:</label>
|
||||
/>
|
||||
<!-- Text input -->
|
||||
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="tin">Input:</label>
|
||||
<input
|
||||
class="border-2 border-black border-r-0 border-b-0 cursor-text pl-1 pr-1 bg-gray-100"
|
||||
id="tin"
|
||||
@ -439,6 +529,7 @@
|
||||
|
||||
<form class="grid grid-cols-3" on:submit|preventDefault>
|
||||
<label class="border-2 border-black border-r-0 pl-1" for="text">Scaling:</label>
|
||||
<!-- Slider -->
|
||||
<div class="flex pl-1 pr-1 border-2 border-black border-r-0 bg-gray-100">
|
||||
<input
|
||||
class="w-full cursor-pointer"
|
||||
@ -453,6 +544,7 @@
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<!-- Number -->
|
||||
<input
|
||||
class="border-2 border-black cursor-text pl-1 bg-gray-100"
|
||||
type="number"
|
||||
@ -465,7 +557,9 @@
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Matricies -->
|
||||
<div class="flex justify-center">
|
||||
<!-- Color display -->
|
||||
<table id="main" class="mt-5 border-2 border-black">
|
||||
{#each matrix as row}
|
||||
<tr>
|
||||
@ -475,6 +569,7 @@
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
<!-- Overlay => Events + Effects -->
|
||||
<div class="absolute z-10">
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<table
|
||||
|
||||
@ -1,22 +1,31 @@
|
||||
import type { APIResponse } from "$lib/interfaces";
|
||||
import { json, type RequestHandler } from "@sveltejs/kit";
|
||||
|
||||
// GET Endpoint for redirection API
|
||||
export const GET: RequestHandler = async ({ url }) => {
|
||||
// Get endpoint on main API from searchparams
|
||||
const params = url.searchParams;
|
||||
const endpoint = params.get('endpoint');
|
||||
// Return if param not found
|
||||
if (endpoint === null) return json({ success: false } as APIResponse);
|
||||
|
||||
// Call API and respond with new data
|
||||
const api_call = await fetch(`http://localhost:8080/${endpoint}`);
|
||||
const data = await api_call.json() as APIResponse;
|
||||
return json(data);
|
||||
};
|
||||
|
||||
// POST Endpoint for redirection API
|
||||
export const POST: RequestHandler = async ({ request }) => {
|
||||
// Get data from form
|
||||
const formData = await request.formData();
|
||||
const endpoint = formData.get('endpoint');
|
||||
// Return if endpoint not found
|
||||
if (endpoint === null) return json({ success: false } as APIResponse);
|
||||
|
||||
// Remove endpoint to save on datatransfer
|
||||
formData.delete('endpoint');
|
||||
// Call API and respond with new data
|
||||
const api_call = await fetch(`http://localhost:8080/${endpoint}`, {
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user