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 pull request #35 from HendrikRauh/DMX-3-configuration-WebUI

Browse source 
Dmx 3 configuration web UI
This commit is contained in:
Raffael Wolf 2024-12-13 18:13:21 +01:00 • committed by GitHub
commit dbb4a773d6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 237 additions and 80 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="1">
<label>
SSID:
<span>SSID:</span>
<input
type="text"
name="ssid"
@ -97,17 +98,24 @@
</div>
<div data-field="input-connection" data-values="0">
<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;
}

2
platformio.ini
View file

@ -12,5 +12,5 @@
platform = espressif32
board = lolin_s2_mini
framework = arduino
lib_deps =
lib_deps =
bblanchon/ArduinoJson @ ^7.2.0

165
src/main.cpp
View file

@ -7,8 +7,8 @@
#endif
#include <AsyncWebServer_ESP32_W5500.h>
//#include "w5500/esp32_w5500.h"
//#include <ESPAsyncWebServer.h>
// #include "w5500/esp32_w5500.h"
// #include <ESPAsyncWebServer.h>
#include <ArtnetWiFi.h>
#include <ArduinoJson.h>
@ -23,33 +23,37 @@ DMXESPSerial dmx1;
DMXESPSerial dmx2;
// Button
#define PIN_LED 7
#define PIN_BUTTON 5
#define PIN_LED 7
#define PIN_BUTTON 5
uint8_t brightness_led = 20;
bool status_led;
hw_timer_t * timer = NULL; //H/W timer defining (Pointer to the Structure)
hw_timer_t *timer = NULL; // H/W timer defining (Pointer to the Structure)
portMUX_TYPE timerMux = portMUX_INITIALIZER_UNLOCKED;
void IRAM_ATTR onTimer() { //Defining Inerrupt function with IRAM_ATTR for faster access
portENTER_CRITICAL_ISR(&timerMux);
status_led = !status_led;
if (!status_led) {
analogWrite(PIN_LED, brightness_led);
} else {
analogWrite(PIN_LED, 0);
}
portEXIT_CRITICAL_ISR(&timerMux);
void IRAM_ATTR onTimer()
{ // Defining Inerrupt function with IRAM_ATTR for faster access
portENTER_CRITICAL_ISR(&timerMux);
status_led = !status_led;
if (!status_led)
{
analogWrite(PIN_LED, brightness_led);
}
else
{
analogWrite(PIN_LED, 0);
}
portEXIT_CRITICAL_ISR(&timerMux);
}
// Ethernet stuff
#define ETH_SCK 36
#define ETH_SS 34
#define ETH_MOSI 35
#define ETH_MISO 37
#define ETH_INT 38
#define ETH_SPI_HOST SPI2_HOST
#define ETH_SPI_CLOCK_MHZ 25
#define ETH_SCK 36
#define ETH_SS 34
#define ETH_MOSI 35
#define ETH_MISO 37
#define ETH_INT 38
#define ETH_SPI_HOST SPI2_HOST
#define ETH_SPI_CLOCK_MHZ 25
byte mac[6] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};
AsyncWebServer server(80);
@ -61,39 +65,59 @@ uint8_t universe1;
uint8_t universe2;
Direction direction1;
Direction direction2;
//const uint16_t size = 512;
//uint8_t data[DMXCHANNELS];
// const uint16_t size = 512;
// uint8_t data[DMXCHANNELS];
void ledBlink(int ms) {
if(timer == NULL) {
timer = timerBegin(0, 80, true); // timer 0, prescalar: 80, UP counting
timerAttachInterrupt(timer, &onTimer, true); // Attach interrupt
void ledBlink(int ms)
{
if (timer == NULL)
{
timer = timerBegin(0, 80, true); // timer 0, prescalar: 80, UP counting
timerAttachInterrupt(timer, &onTimer, true); // Attach interrupt
}
if(ms == 0) {
if (ms == 0)
{
timerAlarmDisable(timer);
analogWrite(PIN_LED, 0);
} else if(ms == 1) {
}
else if (ms == 1)
{
timerAlarmDisable(timer);
analogWrite(PIN_LED, brightness_led);
} else {
ms = ms*1000;
timerAlarmWrite(timer, ms, true); // Match value= 1000000 for 1 sec. delay.
timerAlarmEnable(timer); // Enable Timer with interrupt (Alarm Enable)
}
}
else
{
ms = ms * 1000;
timerAlarmWrite(timer, ms, true); // Match value= 1000000 for 1 sec. delay.
timerAlarmEnable(timer); // Enable Timer with interrupt (Alarm Enable)
}
}
void setup()
{
Serial.begin(9600);
// Get ETH mac
esp_read_mac(mac, ESP_MAC_ETH);
// LED
analogWrite(PIN_LED, brightness_led);
delay(5000);
// delay(5000);
ledBlink(500);
// Button
pinMode(PIN_BUTTON, INPUT_PULLUP);
if (digitalRead(PIN_BUTTON) == LOW)
{
ledBlink(100);
delay(2000);
Serial.println("Reset config");
config.begin("dmx", false);
config.clear();
config.end();
}
// Serial console
Serial.begin(9600);
Serial.print("Start DMX-Interface");
delay(1000);
Serial.println("...");
@ -109,15 +133,15 @@ void setup()
Serial.print("Port A: Universe ");
Serial.print(universe1);
Serial.print(" ");
Serial.println((direction1==Input)?"DMX -> Art-Net":"Art-Net -> DMX");
Serial.println((direction1 == Input) ? "DMX -> Art-Net" : "Art-Net -> DMX");
Serial.print("Port B: Universe ");
Serial.print(universe2);
Serial.print(" ");
Serial.println((direction2==Input)?"DMX -> Art-Net":"Art-Net -> DMX");
Serial.println((direction2 == Input) ? "DMX -> Art-Net" : "Art-Net -> DMX");
Connection connection = static_cast<Connection>(config.getUInt("connection", WiFiAP));
IpMethod ipMethod = static_cast<IpMethod>(config.getUInt("ip-method"), Static);
IpMethod ipMethod = static_cast<IpMethod>(config.getUInt("ip-method"), DHCP);
WiFi.macAddress(mac);
char hostname[30];
@ -126,7 +150,7 @@ void setup()
Serial.println(hostname);
String ssid = config.getString("ssid", hostname);
String pwd = config.getString("pwd", "mbgmbgmbg");
String pwd = config.getString("password", "mbgmbgmbg");
// Default IP as defined in standard https://art-net.org.uk/downloads/art-net.pdf, page 13
IPAddress defaultIp(2, mac[3], mac[4], mac[5]);
@ -141,24 +165,17 @@ void setup()
// wait for serial monitor
delay(5000);
// Button
pinMode(PIN_BUTTON,INPUT_PULLUP);
if(digitalRead(PIN_BUTTON) == LOW){
ledBlink(100);
delay(2000);
Serial.println("Start AP-Mode");
connection = WiFiAP;
}
switch (connection)
{
case WiFiSta:
Serial.println("Initialize as WiFi Station");
WiFi.setHostname(hostname);
WiFi.begin(ssid, pwd);
Serial.println("SSID: " + ssid + ", pwd: " + pwd);
if (ipMethod == Static)
{
WiFi.config(ip, gateway, subnet);
Serial.println("IP: " + ip.toString() + ", gateway: " + gateway + ", subnet: " + subnet);
}
while (WiFi.status() != WL_CONNECTED)
{
@ -173,28 +190,36 @@ void setup()
Serial.println(WiFi.macAddress());
break;
case Ethernet: {
case Ethernet:
{
Serial.println("Initialize as ETH");
ESP32_W5500_onEvent();
if (ETH.begin( ETH_MISO, ETH_MOSI, ETH_SCK, ETH_SS, ETH_INT, ETH_SPI_CLOCK_MHZ, ETH_SPI_HOST, mac )) { // Dynamic IP setup
}else{
if (ETH.begin(ETH_MISO, ETH_MOSI, ETH_SCK, ETH_SS, ETH_INT, ETH_SPI_CLOCK_MHZ, ETH_SPI_HOST, mac))
{ // Dynamic IP setup
}
else
{
Serial.println("Failed to configure Ethernet");
}
ETH.setHostname(hostname);
//ESP32_W5500_waitForConnect();
// ESP32_W5500_waitForConnect();
uint8_t timeout = 5; // in s
Serial.print("Wait for connect");
while (!ESP32_W5500_eth_connected && timeout > 0) {
while (!ESP32_W5500_eth_connected && timeout > 0)
{
delay(1000);
timeout--;
Serial.print(".");
}
Serial.println();
if (ESP32_W5500_eth_connected) {
if (ESP32_W5500_eth_connected)
{
Serial.println("DHCP OK!");
} else {
}
else
{
Serial.println("Set static IP");
ETH.config(ip, gateway, subnet);
}
@ -218,15 +243,15 @@ void setup()
WiFi.softAPsetHostname(hostname);
WiFi.softAP(ssid, pwd);
// AP always with DHCP
//WiFi.softAPConfig(ip, gateway, subnet);
// WiFi.softAPConfig(ip, gateway, subnet);
broadcastIp = WiFi.softAPBroadcastIP().toString();
Serial.print("WiFi AP enabled, IP = ");
Serial.println(WiFi.softAPIP());
Serial.print("MAC address: ");
Serial.println(WiFi.softAPmacAddress());
Serial.println(WiFi.softAPmacAddress());
break;
}
// Initialize DMX ports
Serial.println("Initialize DMX...");
dmx1.init(21, 33, Serial0);
@ -237,31 +262,31 @@ void setup()
artnet.begin();
// if Artnet packet comes to this universe, this function is called
if (direction1 == Output) {
if (direction1 == Output)
{
artnet.subscribeArtDmxUniverse(universe1, [&](const uint8_t *data, uint16_t size, const ArtDmxMetadata &metadata, const ArtNetRemoteInfo &remote)
{
{
for (size_t i = 0; i < size; ++i)
{
dmx1.write((i + 1), data[i]);
}
dmx1.update();
});
dmx1.update(); });
}
if (direction2 == Output) {
if (direction2 == Output)
{
artnet.subscribeArtDmxUniverse(universe2, [&](const uint8_t *data, uint16_t size, const ArtDmxMetadata &metadata, const ArtNetRemoteInfo &remote)
{
{
for (size_t i = 0; i < size; ++i)
{
dmx2.write((i + 1), data[i]);
}
dmx2.update();
});
dmx2.update(); });
}
// if Artnet packet comes, this function is called to every universe
//artnet.subscribeArtDmx([&](const uint8_t *data, uint16_t size, const ArtDmxMetadata &metadata, const ArtNetRemoteInfo &remote) {});
// artnet.subscribeArtDmx([&](const uint8_t *data, uint16_t size, const ArtDmxMetadata &metadata, const ArtNetRemoteInfo &remote) {});
if (!SPIFFS.begin(true))
{
@ -284,10 +309,14 @@ 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) {
onPutConfig(request, data, len, index, total);
Serial.println("restarting ESP...");
ESP.restart();
} });

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