mirror of
https://gitlab1.ptb.de/waltem01/Matrix
synced 2024-12-25 11:31:46 +00:00
adjust admin panel matrix data to .env settings
This commit is contained in:
waltem01
parent
2053a5ad29
commit
9ab5ceaa88
@ -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
|
||||
export interface Matrix {
|
||||
width: number;
|
||||
@ -21,9 +28,12 @@ export interface MatrixCell {
|
||||
|
||||
// Create a 2D array containing MatrixCell objects with bg-color: black
|
||||
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(
|
||||
{ length: 192 / scaling },
|
||||
{ length: fullWidth / scaling },
|
||||
(_, x) => ({ x, y, color: '000000' }) as MatrixCell
|
||||
)
|
||||
) as MatrixCell[][];
|
||||
|
||||
@ -74,9 +74,9 @@
|
||||
// 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');
|
||||
const x = parseInt((formData.get('x') as string) ?? matrix.width - 1);
|
||||
const y = parseInt((formData.get('y') as string) ?? matrix.height - 1);
|
||||
const r = parseInt((formData.get('r') as string) ?? matrix.width / 2 - 1);
|
||||
|
||||
// Convert stored color data to hex
|
||||
const hex = rgbToHex(pixelColor);
|
||||
@ -95,10 +95,10 @@
|
||||
// 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');
|
||||
const x = parseInt((formData.get('x') as string) ?? matrix.width - 1);
|
||||
const y = parseInt((formData.get('y') as string) ?? matrix.height - 1);
|
||||
const w = parseInt((formData.get('w') as string) ?? matrix.width - 1);
|
||||
const h = parseInt((formData.get('h') as string) ?? matrix.height - 1);
|
||||
|
||||
// Convert stored color data to hex
|
||||
const hex = rgbToHex(pixelColor);
|
||||
@ -110,8 +110,8 @@
|
||||
// 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');
|
||||
const x = parseInt((formData.get('x') as string) ?? matrix.width - 1);
|
||||
const y = parseInt((formData.get('y') as string) ?? matrix.height - 1);
|
||||
|
||||
// Set singular coodinate to given color
|
||||
if (matrix.grid) matrix.grid[y][x].color = rgbToHex(pixelColor);
|
||||
@ -149,15 +149,15 @@
|
||||
|
||||
// Create new formdata
|
||||
const fdata = new FormData();
|
||||
const isScaled = scaling > 1;
|
||||
const isScaled = (matrix.scale?.factor ?? 3) > 1;
|
||||
// Scale data accordingly
|
||||
if (isScaled) {
|
||||
x *= scaling;
|
||||
y *= scaling;
|
||||
x *= matrix.scale?.factor ?? 3;
|
||||
y *= matrix.scale?.factor ?? 3;
|
||||
|
||||
// width and height of rectangle are the scale factor
|
||||
fdata.append('w', scaling.toString());
|
||||
fdata.append('h', scaling.toString());
|
||||
fdata.append('w', matrix.scale?.factor.toString() ?? '3');
|
||||
fdata.append('h', matrix.scale?.factor.toString() ?? '3');
|
||||
}
|
||||
|
||||
// append x and y coordinates
|
||||
@ -179,25 +179,31 @@
|
||||
|
||||
// Correction function to map scale factor to valid values
|
||||
function correctSlider(event: Event) {
|
||||
if (!matrix.scale)
|
||||
matrix.scale = {
|
||||
factor: scaleBind,
|
||||
padding: 0.5625
|
||||
};
|
||||
|
||||
// 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--;
|
||||
while (matrix.width % current !== 0) current--;
|
||||
|
||||
// Set scaling to new value
|
||||
scaling = current;
|
||||
// Set matrix.scale.factor to new value
|
||||
matrix.scale.factor = current;
|
||||
scaleBind = current;
|
||||
// Scale elements by padding inside accordingly
|
||||
padding = 0.1875 * scaling;
|
||||
matrix.scale.padding = 0.1875 * (192 / matrix.width) * matrix.scale.factor;
|
||||
|
||||
// Reinitialize matrix
|
||||
matrix.grid = initializeMatrix(scaling);
|
||||
matrix.grid = initializeMatrix(matrix.scale.factor);
|
||||
}
|
||||
|
||||
// System variables
|
||||
let scaling = 3,
|
||||
padding = 0.5625;
|
||||
let scaleBind = 3;
|
||||
let mousePressed = false;
|
||||
let gamepad: Gamepad | null = null;
|
||||
let matrix: Matrix;
|
||||
@ -232,9 +238,13 @@
|
||||
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 = {
|
||||
width: +PUBLIC_LED_WIDTH * +PUBLIC_LED_CHAIN,
|
||||
width,
|
||||
height: +PUBLIC_LED_HEIGHT * +PUBLIC_LED_PARALLEL,
|
||||
scale: { factor: scaling, padding },
|
||||
grid: initializeMatrix(scaling)
|
||||
};
|
||||
});
|
||||
@ -340,7 +350,7 @@
|
||||
name="x"
|
||||
type="number"
|
||||
min="0"
|
||||
max={192 / scaling - 1}
|
||||
max={(matrix?.width ?? 192) / (matrix?.scale?.factor ?? 3) - 1}
|
||||
step="1"
|
||||
value="0"
|
||||
required
|
||||
@ -353,7 +363,7 @@
|
||||
name="y"
|
||||
type="number"
|
||||
min="0"
|
||||
max={192 / scaling - 1}
|
||||
max={(matrix?.height ?? 192) / (matrix?.scale?.factor ?? 3) - 1}
|
||||
step="1"
|
||||
value="0"
|
||||
required
|
||||
@ -385,7 +395,7 @@
|
||||
name="x"
|
||||
type="number"
|
||||
min="0"
|
||||
max={192 / scaling - 1}
|
||||
max={(matrix?.width ?? 192) / (matrix?.scale?.factor ?? 3) - 1}
|
||||
step="1"
|
||||
value="177"
|
||||
required
|
||||
@ -398,7 +408,7 @@
|
||||
name="y"
|
||||
type="number"
|
||||
min="0"
|
||||
max={192 / scaling - 1}
|
||||
max={(matrix?.height ?? 192) / (matrix?.scale?.factor ?? 3) - 1}
|
||||
step="1"
|
||||
value="0"
|
||||
required
|
||||
@ -411,7 +421,7 @@
|
||||
name="w"
|
||||
type="number"
|
||||
min="0"
|
||||
max={192 / scaling - 1}
|
||||
max={(matrix?.width ?? 192) / (matrix?.scale?.factor ?? 3) - 1}
|
||||
step="1"
|
||||
value="15"
|
||||
required
|
||||
@ -424,7 +434,7 @@
|
||||
name="h"
|
||||
type="number"
|
||||
min="0"
|
||||
max={192 / scaling - 1}
|
||||
max={(matrix?.height ?? 192) / (matrix?.scale?.factor ?? 3) - 1}
|
||||
step="1"
|
||||
value="15"
|
||||
required
|
||||
@ -454,7 +464,7 @@
|
||||
name="x"
|
||||
type="number"
|
||||
min="0"
|
||||
max={192 / scaling - 1}
|
||||
max={(matrix?.width ?? 192) / (matrix?.scale?.factor ?? 3) - 1}
|
||||
step="1"
|
||||
value="20"
|
||||
required
|
||||
@ -467,7 +477,7 @@
|
||||
name="y"
|
||||
type="number"
|
||||
min="0"
|
||||
max={192 / scaling - 1}
|
||||
max={(matrix?.height ?? 192) / (matrix?.scale?.factor ?? 3) - 1}
|
||||
step="1"
|
||||
value="171"
|
||||
required
|
||||
@ -480,7 +490,7 @@
|
||||
name="r"
|
||||
type="number"
|
||||
min="0"
|
||||
max={96 / scaling - 1}
|
||||
max={(matrix?.height ?? 192) / (2 * (matrix?.scale?.factor ?? 3)) - 1}
|
||||
step="1"
|
||||
value="20"
|
||||
required
|
||||
@ -542,7 +552,7 @@
|
||||
</form>
|
||||
|
||||
<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 -->
|
||||
<div class="flex pl-1 pr-1 border-2 border-black border-r-0 bg-gray-100">
|
||||
<input
|
||||
@ -553,7 +563,7 @@
|
||||
min="1"
|
||||
max="64"
|
||||
step="1"
|
||||
bind:value={scaling}
|
||||
bind:value={scaleBind}
|
||||
on:change={correctSlider}
|
||||
required
|
||||
/>
|
||||
@ -565,7 +575,7 @@
|
||||
min="1"
|
||||
max="64"
|
||||
step="1"
|
||||
bind:value={scaling}
|
||||
bind:value={scaleBind}
|
||||
on:change={correctSlider}
|
||||
required
|
||||
/>
|
||||
@ -578,7 +588,9 @@
|
||||
{#each matrix?.grid ?? [] as row}
|
||||
<tr>
|
||||
{#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}
|
||||
</tr>
|
||||
{/each}
|
||||
@ -597,7 +609,8 @@
|
||||
{#each row as cell}
|
||||
<td
|
||||
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
|
||||
? 'opacity-50'
|
||||
: 'opacity-0'} hover:opacity-50"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user