ctbk/dmx-interface
1
0
Fork 0
mirror of https://github.com/HendrikRauh/dmx-interface.git synced 2025-05-18 21:55:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added logic for loading available networks

Browse source
This commit is contained in:
RaffaelW 2024-11-09 22:38:37 +01:00
parent 5c5e8e9e5a
commit 12aa87ac90
7 changed files with 145 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
data/icons/refresh.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFF"><path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 330 B

28
data/index.html
View file

@ -8,6 +8,7 @@
<script type="module" src="/input-visibility.js" defer></script>
<script type="module" src="/loading-screen.js" defer></script>
<script type="module" src="/load-data.js" defer></script>
<script type="module" src="/networks.js" defer></script>
<script type="module" src="/submit.js" defer></script>
<script type="module" src="/reset.js" defer></script>
</head>
@ -32,8 +33,8 @@
<h1>Konfiguration</h1>
<fieldset>
<legend>Verbindung</legend>
<label for="ip-method"
>IP-Zuweisung:
<label>
<span>IP-Zuweisung:</span>
<select
name="ip-method"
id="input-ip-method"
@ -45,7 +46,7 @@
</label>
<div data-field="input-ip-method" data-values="0">
<label>
IP-Adresse:
<span>IP-Adresse:</span>
<input
type="text"
name="ip"
@ -54,7 +55,7 @@
/>
</label>
<label>
Subnetzmaske:
<span>Subnetzmaske:</span>
<input
type="text"
name="subnet"
@ -63,7 +64,7 @@
/>
</label>
<label>
Gateway:
<span>Gateway:</span>
<input
type="text"
name="gateway"
@ -73,7 +74,7 @@
</label>
</div>
<label>
Verbindungsmethode:
<span>Verbindungsmethode:</span>
<select
name="connection"
id="input-connection"
@ -86,7 +87,7 @@
</label>
<div data-field="input-connection" data-values="0">
<label>
SSID:
<span>SSID:</span>
<input
type="text"
name="ssid"
@ -97,17 +98,24 @@
</div>
<div data-field="input-connection" data-values="1">
<label>
Netzwerk:
<span>Netzwerk:</span>
<select
name="ssid"
id="input-network"
id="select-network"
title="Netzwerk"
></select>
<button
type="button"
id="refresh-networks"
class="icon-button"
>
<img src="/icons/refresh.svg" alt="Neu laden" />
</button>
</label>
</div>
<div data-field="input-connection" data-values="0|1">
<label>
Password:
<span>Password:</span>
<input
type="password"
name="password"

60
data/networks.js Normal file
View file

@ -0,0 +1,60 @@
const networkDropdown = document.querySelector("#select-network");
const refreshButton = document.querySelector("#refresh-networks");
const refreshIcon = refreshButton.querySelector("img");
let isLoading = false;
refreshButton.addEventListener("click", async () => {
updateNetworks();
});
function insertNetworks(networks) {
networks.unshift(""); // add empty option
networkDropdown.textContent = ""; // clear dropdown
for (const ssid of networks) {
const option = document.createElement("option");
option.value = ssid;
option.innerText = ssid;
networkDropdown.appendChild(option);
}
}
async function loadNetworks() {
if (isLoading) return;
isLoading = true;
refreshButton.classList.remove("error-bg");
refreshIcon.classList.add("spinning");
try {
const res = await fetch("/networks", {
method: "GET",
});
if (!res.ok) {
throw Error(`response status: ${res.status}`);
}
const networks = await res.json();
refreshIcon.classList.remove("spinning");
isLoading = false;
// remove duplicate values
return Array.from(new Set(networks));
} catch (e) {
refreshIcon.classList.remove("spinning");
refreshButton.classList.add("error-bg");
isLoading = false;
return [];
}
}
async function updateNetworks() {
const networks = await loadNetworks();
if (networks) {
insertNetworks(networks);
}
}
updateNetworks();

30
data/style.css
View file

@ -3,6 +3,7 @@
--color-on-primary: white;
--color-background: #222;
--color-danger: #fa2b58;
--icon-button-size: 2.5rem;
}
body {
@ -38,11 +39,16 @@ fieldset {
label {
display: block;
display: flex;
gap: 8px;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
label span {
flex-grow: 1;
}
input,
select {
width: clamp(200px, 100%, 400px);
@ -60,6 +66,10 @@ select:focus {
border-color: var(--color-primary);
}
select:has(+ .icon-button) {
width: calc(clamp(200px, 100%, 400px) - var(--icon-button-size) - 8px);
}
button {
border: none;
inset: none;
@ -143,10 +153,14 @@ label.switch input:checked + .slider::before {
justify-content: center;
}
h2.error {
.error {
color: var(--color-danger);
}
.error-bg {
background-color: var(--color-danger) !important;
}
button.reload {
display: block;
margin: 0 auto;
@ -195,3 +209,17 @@ button.reload {
transform: rotate(360deg);
}
}
.icon-button {
padding: 8px;
font-size: 0;
width: var(--icon-button-size);
height: var(--icon-button-size);
}
.spinning {
animation-name: spin;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

6
src/main.cpp
View file

@ -46,6 +46,7 @@ void setup()
// WiFi.begin(ssid, pwd);
WiFi.softAP(ssid, pwd);
WiFi.softAPConfig(ip, gateway, subnet);
WiFi.scanNetworks(true);
// WiFi.config(ip, gateway, subnet);
// while (WiFi.status() != WL_CONNECTED) {
// Serial.print(".");
@ -54,6 +55,8 @@ void setup()
// Serial.print("WiFi connected, IP = ");
// Serial.println(WiFi.localIP());
delay(5000);
// Initialize Art-Net
artnet.begin();
@ -94,6 +97,9 @@ void setup()
ESP.restart(); });
server.on("/networks", HTTP_GET, [](AsyncWebServerRequest *request)
{ onGetNetworks(request); });
server.onRequestBody([](AsyncWebServerRequest *request, uint8_t *data, size_t len, size_t index, size_t total)
{
if (request->url() == "/config" && request->method() == HTTP_PUT) {

29
src/routes/config.cpp
View file

@ -1,6 +1,7 @@
#include "config.h"
#include <stdexcept>
#include <ArduinoJson.h>
#include "WiFi.h"
Preferences config;
@ -161,3 +162,31 @@ void onPutConfig(AsyncWebServerRequest *request, uint8_t *data, size_t len, size
request->send(400, "text/plain", e.what());
}
}
void onGetNetworks(AsyncWebServerRequest *request)
{
JsonDocument doc;
JsonArray array = doc.to<JsonArray>();
int numberOfNetworks = WiFi.scanComplete();
if (numberOfNetworks == WIFI_SCAN_FAILED)
{
WiFi.scanNetworks(true);
}
else if (numberOfNetworks)
{
for (int i = 0; i < numberOfNetworks; ++i)
{
array.add(WiFi.SSID(i));
}
WiFi.scanDelete();
if (WiFi.scanComplete() == WIFI_SCAN_FAILED)
{
WiFi.scanNetworks(true);
}
}
String jsonString;
serializeJson(doc, jsonString);
request->send(200, "application/json", jsonString);
}

2
src/routes/config.h
View file

@ -35,4 +35,6 @@ void onGetConfig(AsyncWebServerRequest *request);
void onPutConfig(AsyncWebServerRequest *request, uint8_t *data, size_t len, size_t index, size_t total);
void onGetNetworks(AsyncWebServerRequest *request);
// #endif