there are two libraries
and
With the ESP-DASH-library creating a webinterface boils down to a few lines of code
here is an example-code with which you can switch ON/OFF the onboard-LED to blink with a button
and adjusting the blinkfrequency with a slider with user-pre-defined min-max-limits
#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();
}
}
The Webinterface looks like this:
and if you type ipadress/update you get a standard select file-dialog to upload a new binary-file
as update of your code
The ESP-DASH-library does all the html-stuff in the backround.
This is very effective to create webinterfaces that can interact with an arduino-code
best regards Stefan