ctbk/dmx-interface
1
0
Fork 0
mirror of https://github.com/HendrikRauh/dmx-interface.git synced 2025-05-19 10:32:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'DMX-3-configuration-WebUI' into DMX-19

Browse source
This commit is contained in:
Hendrik Rauh 2024-10-26 14:53:32 +02:00 • committed by GitHub
commit 9084c26c0f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 159 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
data/index.html
View file

@ -5,12 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Konfiguration</title>
<link rel="stylesheet" href="/style.css" />
<script src="/script.js" defer></script>
<script type="module" src="/input-visibility.js" defer></script>
<script type="module" src="/submit.js" defer></script>
</head>
<body>
<h1>Konfiguration</h1>
<form action="" method="post">
<form>
<fieldset>
<legend>Verbindung</legend>
@ -73,13 +74,53 @@
</fieldset>
<fieldset>
<legend>Art-Net</legend>
<legend>Input/Output 1</legend>
<label class="switch">
<span>Output</span>
<input
type="checkbox"
name="input-or-output-1"
id="input-input-or-output-1"
data-value-not-checked="output"
data-value-checked="input"
/>
<span class="slider"></span>
<span>Input</span>
</label>
<input
type="number"
name="universe"
id="universe"
name="universe-1"
id="universe-1"
placeholder="Universe"
min="0"
max="15"
/>
</fieldset>
<fieldset>
<legend>Input/Output 2</legend>
<label class="switch">
<span>Output</span>
<input
type="checkbox"
name="input-or-output-2"
id="input-input-or-output-2"
data-value-not-checked="output"
data-value-checked="input"
/>
<span class="slider"></span>
<span>Input</span>
</label>
<input
type="number"
name="universe-2"
id="universe-2"
placeholder="Universe"
min="0"
max="15"
/>
</fieldset>

6
data/script.js → data/input-visibility.js
View file

@ -8,8 +8,14 @@ function updateVisibility() {
const input = form.querySelector(`#${element.dataset.field}`);
if (element.dataset.values.split("|").includes(input.value)) {
element.classList.remove("hidden");
element
.querySelectorAll("input, select, button, textarea")
.forEach((childInput) => (childInput.disabled = false));
} else {
element.classList.add("hidden");
element
.querySelectorAll("input, select, button, textarea")
.forEach((childInput) => (childInput.disabled = true));
}
});
}

53
data/style.css
View file

@ -44,11 +44,60 @@ button {
padding: 8px 16px;
}
:is(div:has(:is(input, select)), input, select)
+ :is(div:has(:is(input, select)), input, select) {
:is(div:has(:is(input, select)), input, select, label)
+ :is(div:has(:is(input, select)), input, select, label) {
margin-top: 8px;
}
.hidden {
display: none;
}
label.switch {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 8px;
-webkit-user-select: none;
user-select: none;
}
label.switch input {
display: none;
}
label.switch .slider {
display: inline-block;
position: relative;
height: 1em;
width: 2em;
background-color: #444;
border-radius: 1em;
border: 4px solid #444;
}
label.switch .slider::before {
content: "";
position: absolute;
height: 100%;
aspect-ratio: 1 / 1;
border-radius: 50%;
top: 50%;
background-color: white;
transition: all 0.1s linear;
}
label.switch:active .slider::before {
transform: scale(1.3);
transform-origin: 50% 50%;
}
label.switch input:not(:checked) + .slider::before {
left: 0%;
translate: 0 -50%;
}
label.switch input:checked + .slider::before {
left: 100%;
translate: -100% -50%;
}

55
data/submit.js Normal file
View file

@ -0,0 +1,55 @@
const form = document.querySelector("form");
function parseValue(input) {
if (input.type === "checkbox") {
return input.checked
? input.dataset.valueChecked
: input.dataset.valueNotChecked;
}
if (input.value === "") {
return null;
}
if (input.type === "number") {
const number = Number(input.value);
return isNaN(number) ? null : number;
}
return input.value;
}
form.addEventListener("submit", (event) => {
event.preventDefault();
const inputFields = document.querySelectorAll(
"form :is(input, select, textarea):not(:disabled)"
);
const data = Array.from(inputFields).reduce((data, input) => {
data[input.name] = parseValue(input);
return data;
}, {});
console.log(data);
putData(data);
});
async function putData(data) {
try {
const res = await fetch("/config", {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
if (!res.ok) {
throw new Error(`Response status: ${res.status}`);
}
const json = await res.json();
console.log(json);
} catch (error) {
console.error(error.message);
}
}

2
platformio.ini
View file

@ -14,5 +14,5 @@ board = lolin_s2_mini
framework = arduino
lib_deps =
hideakitai/ArtNet @ ^0.8.0
me-no-dev/ESP Async WebServer@^1.2.4
bblanchon/ArduinoJson @ ^7.2.0
ESP Async WebServer