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

adjust admin panel matrix data to .env settings

Browse Source
This commit is contained in:
waltem01 2024-02-16 10:14:56 +01:00
parent 2053a5ad29
commit 9ab5ceaa88
2 changed files with 61 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
Webserver/src/lib/client/matrix.ts
View File

@ -1,3 +1,10 @@
import {
PUBLIC_LED_CHAIN,
PUBLIC_LED_HEIGHT,
PUBLIC_LED_PARALLEL,
PUBLIC_LED_WIDTH
} from '$env/static/public';
// Interface to represent the entire matrix data // Interface to represent the entire matrix data
export interface Matrix { export interface Matrix {
width: number; width: number;
@ -21,9 +28,12 @@ export interface MatrixCell {
// Create a 2D array containing MatrixCell objects with bg-color: black // Create a 2D array containing MatrixCell objects with bg-color: black
export function initializeMatrix(scaling: number): MatrixCell[][] { export function initializeMatrix(scaling: number): MatrixCell[][] {
return Array.from({ length: 192 / scaling }, (_, y) => const fullWidth = +PUBLIC_LED_WIDTH * +PUBLIC_LED_CHAIN;
const fullHeight = +PUBLIC_LED_HEIGHT * +PUBLIC_LED_PARALLEL;
return Array.from({ length: fullHeight / scaling }, (_, y) =>
Array.from( Array.from(
{ length: 192 / scaling }, { length: fullWidth / scaling },
(_, x) => ({ x, y, color: '000000' }) as MatrixCell (_, x) => ({ x, y, color: '000000' }) as MatrixCell
) )
) as MatrixCell[][]; ) as MatrixCell[][];

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

@ -74,9 +74,9 @@
// Draw circle onto matrix // Draw circle onto matrix
function drawCircle(formData: FormData) { function drawCircle(formData: FormData) {
// Get relevant data from formdata // Get relevant data from formdata
const x = parseInt((formData.get('x') as string) ?? '191'); const x = parseInt((formData.get('x') as string) ?? matrix.width - 1);
const y = parseInt((formData.get('y') as string) ?? '191'); const y = parseInt((formData.get('y') as string) ?? matrix.height - 1);
const r = parseInt((formData.get('r') as string) ?? '95'); const r = parseInt((formData.get('r') as string) ?? matrix.width / 2 - 1);
// Convert stored color data to hex // Convert stored color data to hex
const hex = rgbToHex(pixelColor); const hex = rgbToHex(pixelColor);
@ -95,10 +95,10 @@
// Draw rectangle onto matrix // Draw rectangle onto matrix
function drawRectangle(formData: FormData) { function drawRectangle(formData: FormData) {
// Get relevant data from formdata // Get relevant data from formdata
const x = parseInt((formData.get('x') as string) ?? '191'); const x = parseInt((formData.get('x') as string) ?? matrix.width - 1);
const y = parseInt((formData.get('y') as string) ?? '191'); const y = parseInt((formData.get('y') as string) ?? matrix.height - 1);
const w = parseInt((formData.get('w') as string) ?? '191'); const w = parseInt((formData.get('w') as string) ?? matrix.width - 1);
const h = parseInt((formData.get('h') as string) ?? '191'); const h = parseInt((formData.get('h') as string) ?? matrix.height - 1);
// Convert stored color data to hex // Convert stored color data to hex
const hex = rgbToHex(pixelColor); const hex = rgbToHex(pixelColor);
@ -110,8 +110,8 @@
// Draw pixel onto matrix // Draw pixel onto matrix
function setPixel(formData: FormData) { function setPixel(formData: FormData) {
// Get relevant data from formdata // Get relevant data from formdata
const x = parseInt((formData.get('x') as string) ?? '191'); const x = parseInt((formData.get('x') as string) ?? matrix.width - 1);
const y = parseInt((formData.get('y') as string) ?? '191'); const y = parseInt((formData.get('y') as string) ?? matrix.height - 1);
// Set singular coodinate to given color // Set singular coodinate to given color
if (matrix.grid) matrix.grid[y][x].color = rgbToHex(pixelColor); if (matrix.grid) matrix.grid[y][x].color = rgbToHex(pixelColor);
@ -149,15 +149,15 @@
// Create new formdata // Create new formdata
const fdata = new FormData(); const fdata = new FormData();
const isScaled = scaling > 1; const isScaled = (matrix.scale?.factor ?? 3) > 1;
// Scale data accordingly // Scale data accordingly
if (isScaled) { if (isScaled) {
x *= scaling; x *= matrix.scale?.factor ?? 3;
y *= scaling; y *= matrix.scale?.factor ?? 3;
// width and height of rectangle are the scale factor // width and height of rectangle are the scale factor
fdata.append('w', scaling.toString()); fdata.append('w', matrix.scale?.factor.toString() ?? '3');
fdata.append('h', scaling.toString()); fdata.append('h', matrix.scale?.factor.toString() ?? '3');
} }
// append x and y coordinates // append x and y coordinates
@ -179,25 +179,31 @@
// Correction function to map scale factor to valid values // Correction function to map scale factor to valid values
function correctSlider(event: Event) { function correctSlider(event: Event) {
if (!matrix.scale)
matrix.scale = {
factor: scaleBind,
padding: 0.5625
};
// Get input element // Get input element
const slider = event.target as HTMLInputElement; const slider = event.target as HTMLInputElement;
// Read value, round down to next best divisor // Read value, round down to next best divisor
let current = parseInt(slider.value); let current = parseInt(slider.value);
while (192 % current !== 0) current--; while (matrix.width % current !== 0) current--;
// Set scaling to new value // Set matrix.scale.factor to new value
scaling = current; matrix.scale.factor = current;
scaleBind = current;
// Scale elements by padding inside accordingly // Scale elements by padding inside accordingly
padding = 0.1875 * scaling; matrix.scale.padding = 0.1875 * (192 / matrix.width) * matrix.scale.factor;
// Reinitialize matrix // Reinitialize matrix
matrix.grid = initializeMatrix(scaling); matrix.grid = initializeMatrix(matrix.scale.factor);
} }
// System variables // System variables
let scaling = 3, let scaleBind = 3;
padding = 0.5625;
let mousePressed = false; let mousePressed = false;
let gamepad: Gamepad | null = null; let gamepad: Gamepad | null = null;
let matrix: Matrix; let matrix: Matrix;
@ -232,9 +238,13 @@
if (e.gamepad.id === gamepad?.id) gamepad = null; if (e.gamepad.id === gamepad?.id) gamepad = null;
}); });
const scaling = 3,
width = +PUBLIC_LED_WIDTH * +PUBLIC_LED_CHAIN,
padding = 0.1875 * (192 / width) * scaling;
matrix = { matrix = {
width: +PUBLIC_LED_WIDTH * +PUBLIC_LED_CHAIN, width,
height: +PUBLIC_LED_HEIGHT * +PUBLIC_LED_PARALLEL, height: +PUBLIC_LED_HEIGHT * +PUBLIC_LED_PARALLEL,
scale: { factor: scaling, padding },
grid: initializeMatrix(scaling) grid: initializeMatrix(scaling)
}; };
}); });
@ -340,7 +350,7 @@
name="x" name="x"
type="number" type="number"
min="0" min="0"
max={192 / scaling - 1} max={(matrix?.width ?? 192) / (matrix?.scale?.factor ?? 3) - 1}
step="1" step="1"
value="0" value="0"
required required
@ -353,7 +363,7 @@
name="y" name="y"
type="number" type="number"
min="0" min="0"
max={192 / scaling - 1} max={(matrix?.height ?? 192) / (matrix?.scale?.factor ?? 3) - 1}
step="1" step="1"
value="0" value="0"
required required
@ -385,7 +395,7 @@
name="x" name="x"
type="number" type="number"
min="0" min="0"
max={192 / scaling - 1} max={(matrix?.width ?? 192) / (matrix?.scale?.factor ?? 3) - 1}
step="1" step="1"
value="177" value="177"
required required
@ -398,7 +408,7 @@
name="y" name="y"
type="number" type="number"
min="0" min="0"
max={192 / scaling - 1} max={(matrix?.height ?? 192) / (matrix?.scale?.factor ?? 3) - 1}
step="1" step="1"
value="0" value="0"
required required
@ -411,7 +421,7 @@
name="w" name="w"
type="number" type="number"
min="0" min="0"
max={192 / scaling - 1} max={(matrix?.width ?? 192) / (matrix?.scale?.factor ?? 3) - 1}
step="1" step="1"
value="15" value="15"
required required
@ -424,7 +434,7 @@
name="h" name="h"
type="number" type="number"
min="0" min="0"
max={192 / scaling - 1} max={(matrix?.height ?? 192) / (matrix?.scale?.factor ?? 3) - 1}
step="1" step="1"
value="15" value="15"
required required
@ -454,7 +464,7 @@
name="x" name="x"
type="number" type="number"
min="0" min="0"
max={192 / scaling - 1} max={(matrix?.width ?? 192) / (matrix?.scale?.factor ?? 3) - 1}
step="1" step="1"
value="20" value="20"
required required
@ -467,7 +477,7 @@
name="y" name="y"
type="number" type="number"
min="0" min="0"
max={192 / scaling - 1} max={(matrix?.height ?? 192) / (matrix?.scale?.factor ?? 3) - 1}
step="1" step="1"
value="171" value="171"
required required
@ -480,7 +490,7 @@
name="r" name="r"
type="number" type="number"
min="0" min="0"
max={96 / scaling - 1} max={(matrix?.height ?? 192) / (2 * (matrix?.scale?.factor ?? 3)) - 1}
step="1" step="1"
value="20" value="20"
required required
@ -542,7 +552,7 @@
</form> </form>
<form class="grid grid-cols-3" on:submit|preventDefault> <form class="grid grid-cols-3" on:submit|preventDefault>
<label class="border-2 border-black border-r-0 pl-1" for="scale">Scaling:</label> <label class="border-2 border-black border-r-0 pl-1" for="scale">matrix.scale.factor:</label>
<!-- Slider --> <!-- Slider -->
<div class="flex pl-1 pr-1 border-2 border-black border-r-0 bg-gray-100"> <div class="flex pl-1 pr-1 border-2 border-black border-r-0 bg-gray-100">
<input <input
@ -553,7 +563,7 @@
min="1" min="1"
max="64" max="64"
step="1" step="1"
bind:value={scaling} bind:value={scaleBind}
on:change={correctSlider} on:change={correctSlider}
required required
/> />
@ -565,7 +575,7 @@
min="1" min="1"
max="64" max="64"
step="1" step="1"
bind:value={scaling} bind:value={scaleBind}
on:change={correctSlider} on:change={correctSlider}
required required
/> />
@ -578,7 +588,9 @@
{#each matrix?.grid ?? [] as row} {#each matrix?.grid ?? [] as row}
<tr> <tr>
{#each row as cell} {#each row as cell}
<td style="padding: {padding}rem; background-color: #{cell.color}" /> <td
style="padding: {matrix?.scale?.padding ?? 0.5625}rem; background-color: #{cell.color}"
/>
{/each} {/each}
</tr> </tr>
{/each} {/each}
@ -597,7 +609,8 @@
{#each row as cell} {#each row as cell}
<td <td
data-x={cell.x} data-x={cell.x}
style="padding: {padding}rem; background-color: #{getContrastColor(cell.color)}" style="padding: {matrix?.scale?.padding ??
0.5625}rem; background-color: #{getContrastColor(cell.color)}"
class="{gamepad && gameCoords.x === cell.x && gameCoords.y === cell.y class="{gamepad && gameCoords.x === cell.x && gameCoords.y === cell.y
? 'opacity-50' ? 'opacity-50'
: 'opacity-0'} hover:opacity-50" : 'opacity-0'} hover:opacity-50"