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

created testpanel for matrix

Browse Source
This commit is contained in:
waltem01 2023-11-24 07:11:31 +01:00
parent 591dc8a3cd
commit 9082e1adf6
1 changed files with 289 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

291
Webserver/src/routes/+page.svelte
View File

@ -1,2 +1,289 @@
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<script lang="ts">
interface MatrixResponse {
success: boolean;
}
async function get(event: SubmitEvent) {
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!');
}
async function post(event: SubmitEvent) {
const form = event.target as HTMLFormElement;
const fdata = new FormData(form);
const response = await fetch(`http://localhost:8080/${form.dataset.endpoint}`, {
method: form.method,
mode: 'cors',
body: fdata
});
const mdata = (await response.json()) as MatrixResponse;
alert(mdata.success ? 'Success!' : 'Error!');
}
</script>
<h1 class="text-4xl font-bold mb-5">RGB LED Matrix</h1>
<div class="grid grid-rows-7 p-1">
<form class="grid grid-cols-2" method="GET" data-endpoint="update" on:submit|preventDefault={get}>
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="update">Update:</label>
<input
class="border-2 border-black border-b-0 cursor-pointer hover:bg-gray-200"
id="update"
name="update"
type="submit"
value="Submit"
/>
</form>
<form class="grid grid-cols-2" method="GET" data-endpoint="clear" on:submit|preventDefault={get}>
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="clear">Clear:</label>
<input
class="border-2 border-black border-b-0 cursor-pointer hover:bg-gray-200"
id="clear"
name="clear"
type="submit"
value="Submit"
/>
</form>
<form
class="grid grid-cols-8"
method="POST"
data-endpoint="color"
on:submit|preventDefault={post}
>
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="color">Set Color:</label>
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="red">Red:</label>
<input
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
id="red"
name="r"
type="number"
min="0"
max="255"
step="1"
value="255"
/>
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="green">Green:</label>
<input
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
id="green"
name="g"
type="number"
min="0"
max="255"
step="1"
value="255"
/>
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="blue">Blue:</label>
<input
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
id="blue"
name="b"
type="number"
min="0"
max="255"
step="1"
value="255"
/>
<input
class="border-2 border-black border-b-0 hover:bg-gray-200"
id="color"
name="color"
type="submit"
value="Submit"
/>
</form>
<form
class="grid grid-cols-6"
method="POST"
data-endpoint="pixel"
on:submit|preventDefault={post}
>
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="pixel">Set Pixel:</label
><label class="border-2 border-black border-b-0 border-r-0 pl-1" for="px">X:</label>
<input
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
id="px"
name="x"
type="number"
min="0"
max="191"
step="1"
value="0"
/>
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="py">Y:</label>
<input
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
id="py"
name="y"
type="number"
min="0"
max="191"
step="1"
value="0"
/>
<input
class="border-2 border-black border-b-0 cursor-pointer hover:bg-gray-200"
id="pixel"
name="pixel"
type="submit"
value="Submit"
/>
</form>
<form
class="grid grid-cols-10"
method="POST"
data-endpoint="rectangle"
on:submit|preventDefault={post}
>
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="rectangle"
>Rectangle:</label
><label class="border-2 border-black border-b-0 border-r-0 pl-1" for="rx">X:</label>
<input
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
id="rx"
name="x"
type="number"
min="0"
max="191"
step="1"
value="0"
/>
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="ry">Y:</label>
<input
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
id="ry"
name="y"
type="number"
min="0"
max="191"
step="1"
value="0"
/><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"
id="w"
name="w"
type="number"
min="0"
max="191"
step="1"
value="0"
/>
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="h">H:</label>
<input
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
id="h"
name="h"
type="number"
min="0"
max="191"
step="1"
value="0"
/>
<input
class="border-2 border-black border-b-0 cursor-pointer hover:bg-gray-200"
id="rectangle"
name="rectangle"
type="submit"
value="Submit"
/>
</form>
<form
class="grid grid-cols-8"
method="POST"
data-endpoint="circle"
on:submit|preventDefault={post}
>
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="circle">Circle:</label
><label class="border-2 border-black border-b-0 border-r-0 pl-1" for="cx">X:</label>
<input
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
id="cx"
name="x"
type="number"
min="0"
max="191"
step="1"
value="0"
/>
<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="cy">Y:</label>
<input
class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
id="cy"
name="y"
type="number"
min="0"
max="191"
step="1"
value="0"
/><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"
id="radius"
name="r"
type="number"
min="0"
max="95"
step="1"
value="0"
/>
<input
class="border-2 border-black border-b-0 cursor-pointer hover:bg-gray-200"
id="circle"
name="circle"
type="submit"
value="Submit"
/>
</form>
<form class="grid grid-cols-8" method="POST" data-endpoint="text" on:submit|preventDefault={post}>
<label class="border-2 border-black border-r-0 pl-1" for="text">Text:</label><label
class="border-2 border-black border-r-0 pl-1"
for="tx">X:</label
>
<input
class="border-2 border-black border-r-0 cursor-text pl-1 bg-gray-100"
id="tx"
name="x"
type="number"
min="0"
max="191"
step="1"
value="0"
/>
<label class="border-2 border-black border-r-0 pl-1" for="ty">Y:</label>
<input
class="border-2 border-black border-r-0 cursor-text pl-1 bg-gray-100"
id="ty"
name="y"
type="number"
min="0"
max="191"
step="1"
value="0"
/><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"
/>
<input
class="border-2 border-black cursor-pointer hover:bg-gray-200"
id="text"
name="text"
type="submit"
value="Submit"
/>
</form>
</div>