mirror of
https://gitlab1.ptb.de/waltem01/Matrix
synced 2024-08-17 10:39:43 +00:00
added basic matrix simulation
This commit is contained in:
parent
6c93cbe2b0
commit
187c87e6d2
|
@ -3,6 +3,12 @@
|
||||||
success: boolean;
|
success: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface MatrixCell {
|
||||||
|
xIndex: number;
|
||||||
|
yIndex: number;
|
||||||
|
color: string;
|
||||||
|
}
|
||||||
|
|
||||||
async function get(event: SubmitEvent) {
|
async function get(event: SubmitEvent) {
|
||||||
const form = event.target as HTMLFormElement;
|
const form = event.target as HTMLFormElement;
|
||||||
|
|
||||||
|
@ -17,6 +23,12 @@
|
||||||
const form = event.target as HTMLFormElement;
|
const form = event.target as HTMLFormElement;
|
||||||
const fdata = new FormData(form);
|
const fdata = new FormData(form);
|
||||||
|
|
||||||
|
switch (form.dataset.endpoint) {
|
||||||
|
case 'color':
|
||||||
|
colorSelect(fdata);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
const response = await fetch(`http://localhost:8080/${form.dataset.endpoint}`, {
|
const response = await fetch(`http://localhost:8080/${form.dataset.endpoint}`, {
|
||||||
method: form.method,
|
method: form.method,
|
||||||
mode: 'cors',
|
mode: 'cors',
|
||||||
|
@ -25,9 +37,35 @@
|
||||||
const mdata = (await response.json()) as MatrixResponse;
|
const mdata = (await response.json()) as MatrixResponse;
|
||||||
alert(mdata.success ? 'Success!' : 'Error!');
|
alert(mdata.success ? 'Success!' : 'Error!');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function colorSelect(formData: FormData) {
|
||||||
|
pixelColor[0] = parseInt((formData.get('r') as string) ?? '255');
|
||||||
|
pixelColor[1] = parseInt((formData.get('g') as string) ?? '255');
|
||||||
|
pixelColor[2] = parseInt((formData.get('b') as string) ?? '255');
|
||||||
|
}
|
||||||
|
|
||||||
|
function setColor(event: MouseEvent) {
|
||||||
|
if (!mousePressed) return;
|
||||||
|
|
||||||
|
const toHex = pixelColor.map((e) => e.toString(16).padStart(2, '0'));
|
||||||
|
const colStr = toHex.join('');
|
||||||
|
|
||||||
|
const parent = event.target as HTMLTableCellElement;
|
||||||
|
const x = parseInt(parent.dataset.x ?? '0');
|
||||||
|
const y = parseInt(parent.parentElement?.dataset.y ?? '0');
|
||||||
|
|
||||||
|
matrix[y][x].color = colStr;
|
||||||
|
}
|
||||||
|
|
||||||
|
const matrix = Array.from({ length: 192 }, (_, yIndex) =>
|
||||||
|
Array.from({ length: 192 }, (_, xIndex) => ({ xIndex, yIndex, color: '000000' }) as MatrixCell)
|
||||||
|
) as MatrixCell[][];
|
||||||
|
|
||||||
|
const pixelColor = [255, 255, 255];
|
||||||
|
let mousePressed = false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h1 class="text-4xl font-bold mb-5">RGB LED Matrix</h1>
|
<h1 class="text-4xl font-bold m-5 text-center">RGB LED Matrix</h1>
|
||||||
<div class="grid grid-rows-7 p-1">
|
<div class="grid grid-rows-7 p-1">
|
||||||
<form class="grid grid-cols-2" method="GET" data-endpoint="update" on:submit|preventDefault={get}>
|
<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>
|
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="update">Update:</label>
|
||||||
|
@ -287,3 +325,24 @@
|
||||||
/>
|
/>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||||
|
<table
|
||||||
|
class="mt-5"
|
||||||
|
on:mousedown|preventDefault={() => (mousePressed = true)}
|
||||||
|
on:mouseup|preventDefault={() => (mousePressed = false)}
|
||||||
|
>
|
||||||
|
{#each matrix as row}
|
||||||
|
<tr data-y={row[0].yIndex}>
|
||||||
|
{#each row as cell}
|
||||||
|
<td
|
||||||
|
data-x={cell.xIndex}
|
||||||
|
class="p-0.75"
|
||||||
|
style="background-color: #{cell.color}"
|
||||||
|
on:mouseenter={setColor}
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user