Baipyrus/Matrix
1
0
Fork 0
mirror of https://gitlab1.ptb.de/waltem01/Matrix synced 2024-12-26 03:51:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

use matrix interface on admin

Browse Source
This commit is contained in:
waltem01 2024-02-16 09:27:19 +01:00
parent 846778b969
commit 0554531b12
1 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
Webserver/src/routes/admin/+page.svelte
View File

@ -1,7 +1,13 @@
<script lang="ts">
import {
PUBLIC_LED_CHAIN,
PUBLIC_LED_HEIGHT,
PUBLIC_LED_PARALLEL,
PUBLIC_LED_WIDTH
} from '$env/static/public';
import { rgbToHex, type Color, getContrastColor } from '$lib/client/color';
import { detectGamepad, gamepadButtonPress } from '$lib/client/gamepad';
import { initializeMatrix } from '$lib/client/matrix';
import { initializeMatrix, type Matrix } from '$lib/client/matrix';
import { toRadians } from '$lib/client/miscellaneous';
import type { APIResponse } from '$lib/interfaces';
import { onMount } from 'svelte';
@ -81,7 +87,8 @@
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;
if (nx >= 0 && nx < 192 && ny >= 0 && ny < 192 && matrix.grid)
matrix.grid[ny][nx].color = hex;
}
}
@ -96,7 +103,8 @@
// 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;
if (!matrix.grid) return;
for (let j = y; j < y + h; j++) for (let i = x; i < x + w; i++) matrix.grid[j][i].color = hex;
}
// Draw pixel onto matrix
@ -106,12 +114,12 @@
const y = parseInt((formData.get('y') as string) ?? '191');
// Set singular coodinate to given color
matrix[y][x].color = rgbToHex(pixelColor);
if (matrix.grid) matrix.grid[y][x].color = rgbToHex(pixelColor);
}
// Clear simulated matrix
function clearMatrix() {
matrix.forEach((y) => y.forEach((x) => (x.color = '000000')));
matrix.grid?.forEach((y) => y.forEach((x) => (x.color = '000000')));
}
function colorSelect(formData: FormData) {
@ -135,9 +143,9 @@
// 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;
if (matrix.grid?.[y][x].color === next) return;
// Set pixel to color
matrix[y][x].color = next;
matrix.grid![y][x].color = next;
// Create new formdata
const fdata = new FormData();
@ -184,7 +192,7 @@
padding = 0.1875 * scaling;
// Reinitialize matrix
matrix = initializeMatrix(scaling);
matrix.grid = initializeMatrix(scaling);
}
// System variables
@ -192,7 +200,7 @@
padding = 0.5625;
let mousePressed = false;
let gamepad: Gamepad | null = null;
let matrix = initializeMatrix(scaling);
let matrix: Matrix;
const gameCoords = { x: 0, y: 0 };
const pixelColor = { r: 255, g: 255, b: 255 } as Color;
@ -223,6 +231,12 @@
// Remove only if it's the same gameapd
if (e.gamepad.id === gamepad?.id) gamepad = null;
});
matrix = {
width: +PUBLIC_LED_WIDTH * +PUBLIC_LED_CHAIN,
height: +PUBLIC_LED_HEIGHT * +PUBLIC_LED_PARALLEL,
grid: initializeMatrix(scaling)
};
});
</script>
@ -561,7 +575,7 @@
<div class="flex justify-center">
<!-- Color display -->
<table id="main" class="mt-5 border-2 border-black">
{#each matrix as row}
{#each matrix?.grid ?? [] as row}
<tr>
{#each row as cell}
<td style="padding: {padding}rem; background-color: #{cell.color}" />
@ -578,7 +592,7 @@
on:mousedown|preventDefault={() => (mousePressed = true)}
on:mouseup|preventDefault={() => (mousePressed = false)}
>
{#each matrix as row}
{#each matrix?.grid ?? [] as row}
<tr data-y={row[0].y}>
{#each row as cell}
<td