mirror of
https://gitlab1.ptb.de/waltem01/Matrix
synced 2025-02-22 12:41:45 +00:00
implemented display on matrix on submit
This commit is contained in:
waltem01
parent
187c87e6d2
commit
64eddff2e0
@ -10,13 +10,14 @@
|
||||
}
|
||||
|
||||
async function get(event: SubmitEvent) {
|
||||
clearMatrix();
|
||||
const form = event.target as HTMLFormElement;
|
||||
|
||||
const response = await fetch(`http://localhost:8080/${form.dataset.endpoint}`, {
|
||||
mode: 'cors'
|
||||
});
|
||||
const data = (await response.json()) as MatrixResponse;
|
||||
alert(data.success ? 'Success!' : 'Error!');
|
||||
const mdata = (await response.json()) as MatrixResponse;
|
||||
if (!mdata.success) alert(`Error while processing '${form.dataset.endpoint}'!`);
|
||||
}
|
||||
|
||||
async function post(event: SubmitEvent) {
|
||||
@ -27,6 +28,18 @@
|
||||
case 'color':
|
||||
colorSelect(fdata);
|
||||
break;
|
||||
case 'pixel':
|
||||
setPixel(fdata);
|
||||
break;
|
||||
case 'rectangle':
|
||||
drawRectangle(fdata);
|
||||
break;
|
||||
case 'circle':
|
||||
drawCircle(fdata);
|
||||
break;
|
||||
// case 'text':
|
||||
// displayText(fdata);
|
||||
// break;
|
||||
}
|
||||
|
||||
const response = await fetch(`http://localhost:8080/${form.dataset.endpoint}`, {
|
||||
@ -35,7 +48,48 @@
|
||||
body: fdata
|
||||
});
|
||||
const mdata = (await response.json()) as MatrixResponse;
|
||||
alert(mdata.success ? 'Success!' : 'Error!');
|
||||
if (!mdata.success) alert(`Error while processing '${form.dataset.endpoint}'!`);
|
||||
}
|
||||
|
||||
// function displayText(formData: FormData) {}
|
||||
|
||||
function drawCircle(formData: 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 hex = colorToHex();
|
||||
for (let a = 0; a < 360; a++) {
|
||||
const nx = Math.round(Math.cos(toRadians(a)) * r + x);
|
||||
const ny = Math.round(Math.sin(toRadians(a)) * r + y);
|
||||
|
||||
if (nx >= 0 && nx < 192 && ny >= 0 && ny < 192) matrix[ny][nx].color = hex;
|
||||
}
|
||||
}
|
||||
|
||||
function toRadians(degrees: number): number {
|
||||
return (degrees / 180) * Math.PI;
|
||||
}
|
||||
|
||||
function drawRectangle(formData: 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 hex = colorToHex();
|
||||
for (let j = y; j < y + h; j++) for (let i = x; i < x + w; i++) matrix[j][i].color = hex;
|
||||
}
|
||||
|
||||
function setPixel(formData: FormData) {
|
||||
const x = parseInt((formData.get('x') as string) ?? '191');
|
||||
const y = parseInt((formData.get('y') as string) ?? '191');
|
||||
|
||||
matrix[y][x].color = colorToHex();
|
||||
}
|
||||
|
||||
function clearMatrix() {
|
||||
matrix.forEach((y) => y.forEach((x) => (x.color = '000000')));
|
||||
}
|
||||
|
||||
function colorSelect(formData: FormData) {
|
||||
@ -47,14 +101,15 @@
|
||||
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;
|
||||
matrix[y][x].color = colorToHex();
|
||||
}
|
||||
|
||||
function colorToHex(): string {
|
||||
return pixelColor.map((e) => e.toString(16).padStart(2, '0')).join('');
|
||||
}
|
||||
|
||||
const matrix = Array.from({ length: 192 }, (_, yIndex) =>
|
||||
@ -106,6 +161,7 @@
|
||||
max="255"
|
||||
step="1"
|
||||
value="255"
|
||||
required
|
||||
/>
|
||||
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="green">Green:</label>
|
||||
<input
|
||||
@ -117,6 +173,7 @@
|
||||
max="255"
|
||||
step="1"
|
||||
value="255"
|
||||
required
|
||||
/>
|
||||
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="blue">Blue:</label>
|
||||
<input
|
||||
@ -128,6 +185,7 @@
|
||||
max="255"
|
||||
step="1"
|
||||
value="255"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
class="border-2 border-black border-b-0 hover:bg-gray-200"
|
||||
@ -155,6 +213,7 @@
|
||||
max="191"
|
||||
step="1"
|
||||
value="0"
|
||||
required
|
||||
/>
|
||||
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="py">Y:</label>
|
||||
<input
|
||||
@ -166,6 +225,7 @@
|
||||
max="191"
|
||||
step="1"
|
||||
value="0"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
class="border-2 border-black border-b-0 cursor-pointer hover:bg-gray-200"
|
||||
@ -193,7 +253,8 @@
|
||||
min="0"
|
||||
max="191"
|
||||
step="1"
|
||||
value="0"
|
||||
value="176"
|
||||
required
|
||||
/>
|
||||
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="ry">Y:</label>
|
||||
<input
|
||||
@ -205,6 +266,7 @@
|
||||
max="191"
|
||||
step="1"
|
||||
value="0"
|
||||
required
|
||||
/><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"
|
||||
@ -214,7 +276,8 @@
|
||||
min="0"
|
||||
max="191"
|
||||
step="1"
|
||||
value="0"
|
||||
value="15"
|
||||
required
|
||||
/>
|
||||
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="h">H:</label>
|
||||
<input
|
||||
@ -225,7 +288,8 @@
|
||||
min="0"
|
||||
max="191"
|
||||
step="1"
|
||||
value="0"
|
||||
value="15"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
class="border-2 border-black border-b-0 cursor-pointer hover:bg-gray-200"
|
||||
@ -252,7 +316,8 @@
|
||||
min="0"
|
||||
max="191"
|
||||
step="1"
|
||||
value="0"
|
||||
value="20"
|
||||
required
|
||||
/>
|
||||
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="cy">Y:</label>
|
||||
<input
|
||||
@ -263,7 +328,8 @@
|
||||
min="0"
|
||||
max="191"
|
||||
step="1"
|
||||
value="0"
|
||||
value="171"
|
||||
required
|
||||
/><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"
|
||||
@ -273,7 +339,8 @@
|
||||
min="0"
|
||||
max="95"
|
||||
step="1"
|
||||
value="0"
|
||||
value="20"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
class="border-2 border-black border-b-0 cursor-pointer hover:bg-gray-200"
|
||||
@ -298,6 +365,7 @@
|
||||
max="191"
|
||||
step="1"
|
||||
value="0"
|
||||
required
|
||||
/>
|
||||
<label class="border-2 border-black border-r-0 pl-1" for="ty">Y:</label>
|
||||
<input
|
||||
@ -309,12 +377,15 @@
|
||||
max="191"
|
||||
step="1"
|
||||
value="0"
|
||||
required
|
||||
/><label class="border-2 border-black border-r-0 pl-1" for="tin">Input:</label>
|
||||
<input
|
||||
class="border-2 border-black border-r-0 cursor-text pl-1 pr-1 bg-gray-100"
|
||||
id="tin"
|
||||
name="text"
|
||||
type="text"
|
||||
value="Hello, World!"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
class="border-2 border-black cursor-pointer hover:bg-gray-200"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user