Für ESP8266 oder ESP32
ElegantOTA
in Verbindung mit
ESP-DASH
Hier ein Democode mit dem man über Webinterface die OnBoard-LED von ESP8266 oder EPS32node-MCUs das Blinken per Button ein/ausschalten kann und die Blinkfrequenz per Schieberegler einstellen. Dazu muss null HTML-programmiert werden. Das macht die DASH-library im Hintergrund.
#include <Arduino.h>
#if defined(ESP8266)
/* ESP8266 Dependencies */
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
/* on ESP8266 LED is connected to Vdd => HIGH = LED off */
#define LEDStateOff HIGH
#elif defined(ESP32)
/* ESP32 Dependencies */
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#define LEDStateOff LOW
#endif
#include <AsyncElegantOTA.h> // manual https://randomnerdtutorials.com/esp32-ota-over-the-air-arduino/
#include <ESPDash.h>
const char *ssid = "FRITZ!Box 7490";
const char *password = "";
unsigned long MyTestTimer = 0; // variables used with millis() MUST be of type unsigned long
const byte OnBoard_LED = 2;
bool DoBlink = true;
unsigned long BlinkFreq = 500;
int Slider2Pos = 5;
AsyncWebServer MyServer(80);
ESPDash MyDashboard(&MyServer);
// Button Card Format - (Dashboard Instance, Card Type, descriptive Text)
Card MyButton(&MyDashboard, BUTTON_CARD, "Blink On / Off");
// Slider Card Format - (Dashboard Instance, Card Type, descriptive Text, Card Symbol(optional), int min, int max)
Card MySlider1(&MyDashboard, SLIDER_CARD, "Blink-Period in Milliseconds", "", 50, 1000);
Card MySlider2(&MyDashboard, SLIDER_CARD, "2ndSlider", "Testtext", 0, 10);
void PrintFileNameDateTime() {
Serial.println("Code running comes from file ");
Serial.println(__FILE__);
Serial.print(" compiled ");
Serial.print(__DATE__);
Serial.print(" ");
Serial.println(__TIME__);
}
boolean TimePeriodIsOver (unsigned long &expireTime, unsigned long TimePeriod) {
unsigned long currentMillis = millis();
if ( currentMillis - expireTime >= TimePeriod )
{
expireTime = currentMillis; // set new expireTime
return true; // more time than TimePeriod) has elapsed since last time if-condition was true
}
else return false; // not expired
}
void BlinkHeartBeatLED(int IO_Pin, int BlinkPeriod) {
static unsigned long MyBlinkTimer;
pinMode(IO_Pin, OUTPUT);
if ( TimePeriodIsOver(MyBlinkTimer,BlinkPeriod) ) {
digitalWrite(IO_Pin,!digitalRead(IO_Pin) );
}
}
void setup(){
Serial.begin(115200);
delay(200);
Serial.println("Setup-Start");
PrintFileNameDateTime();
pinMode(OnBoard_LED, OUTPUT);
digitalWrite(OnBoard_LED, LOW);
Serial.print("Trying to connect to WiFi..");
Serial.print(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.print("connected \r\n type this IP-Adress into your browser ");
Serial.println(WiFi.localIP() );
Serial.println("to see the ESP-Dash-Board");
// Attach Button Callback this function gets executed every time the Button is clicked
MyButton.attachCallback([&](bool MyButtonState){
DoBlink = MyButtonState;
Serial.println("Button Triggered: " + String((MyButtonState)?"true":"false"));
MyButton.update(MyButtonState); //Make sure we update our button's value and send update to dashboard */
MyDashboard.sendUpdates();
});
// Attach Slider Callback this function gets executed every time the slider is adjusted to a new value
MySlider1.attachCallback([&](int MySliderValue){
BlinkFreq = MySliderValue;
Serial.println("MySlider1 Triggered: " + String(MySliderValue));
MySlider1.update(MySliderValue); // Make sure we update our slider's value and send update to dashboard */
MyDashboard.sendUpdates();
});
MySlider2.attachCallback([&](int MySliderValue){
Serial.println("slider2 Triggered: " + String(MySliderValue));
Slider2Pos = MySliderValue;
MySlider2.update(MySliderValue);
MyDashboard.sendUpdates();
});
AsyncElegantOTA.begin(&MyServer); // Start ElegantOTA
MyServer.begin(); // Start server
MyButton.update(DoBlink);
MySlider1.update( int(500) );
MyDashboard.sendUpdates();
}
void loop() {
AsyncElegantOTA.loop(); // this line enables the OTA-updating
if (DoBlink) {
BlinkHeartBeatLED(OnBoard_LED,BlinkFreq / 2); // half and half On/Off
}
else {
digitalWrite(OnBoard_LED,LEDStateOff);
}
if ( TimePeriodIsOver(MyTestTimer,1000) ) {
Slider2Pos++;
if (Slider2Pos > 10) {
Slider2Pos = 0;
}
MySlider2.update( int(Slider2Pos) ); // your code can change the sliders value too
MyDashboard.sendUpdates();
}
}
Mit den paar Zeilen hat man dann ein Webinterface
das so aussieht
Und OTA-updaten geht dann über
http://IPadresse/update
und hat einen Standard Datei wählen Dialog
Wenn man das Design OK findet unglaublich effektiv
um ein Webinterface mit Interaktion zu programmieren.
Wenn mehrere Browser Das Webinterface anzeigen lassen wird die Anzeige auf
allen Fenstern/Browsern sofort automatisch aktualisiert.
viele Grüße Stefan
