mirror of
https://gitlab1.ptb.de/waltem01/Matrix
synced 2024-12-25 11:31:46 +00:00
created testpanel for matrix
This commit is contained in:
waltem01
parent
591dc8a3cd
commit
9082e1adf6
@ -1,2 +1,289 @@
|
|||||||
<h1>Welcome to SvelteKit</h1>
|
<script lang="ts">
|
||||||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user