diff --git a/Webserver/src/routes/+page.svelte b/Webserver/src/routes/+page.svelte
index c24cefa..0e39c84 100644
--- a/Webserver/src/routes/+page.svelte
+++ b/Webserver/src/routes/+page.svelte
@@ -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
/>