Arduino/ESP Webserver Steuern&Auslesen

Hallo zusammen,

Ich möchte mir für meinen 3D-Drucker eine art Webserver bauen der Sensoren ausliest und GPIO Pins schaltet bzw. Relais.

Es sollen 2–3 Temperatursensoren und ein Luftqualitätssensor ausgelesen werden.
Mit den Relais sollen Lüfter ein und ausgeschalten werden.

Das ganze soll auf einer Webseite schön angezeigt werden.

Ich habe mich im Netz schon ein wenig schlau gemacht und mit einem ESP32 herumgespielt.
Das Problem ist, das alle Tutorials die gefunden habe, nicht sehr Tief ins Detail gehen, dass ich daraus lernen kann und mir das dann so anpassen kann wie ich es brauche.

Leider beherrsche ich kein CSS und Arduino auch noch nicht 100 %.

Kann mir jemand ein Tutorial oder ein Buch empfehlen, wo ich lerne wie ich mein Projekt umsetzte?
Könnt ihr mir einen Controller empfehlen der Optimal passen würde für mein Projekt?

Ich habe ESP32 Developer Board zu Hause und ein Arduino MKR WIFI 1010.

Mit freundlichen Grüßen

Kleine Bitte.
Dann mal Deinen ersten Post editieren und dort ESP ins Subject reinschreiben.
Das ist kein Arduino.
Lieben Dank - Beste Grüße

Hab ich gemacht :upside_down_face:. Ich habe gesehen das auf Arduino Boards auch Webserver laufen.
Je nach Empfhelung würde ich auch ein Arduino nehmen.

Es kommt eher drauf an, was Du machen sillst.
Ein Arduino mit einem WebServer, dem Du mit einem Ethernetmodul Daten zuführst und zur Verfügung stellst, gibt es schon in den Beispielen.
DATEI-BEISPIELE-ETHERNET -> da alles ansehen.

Die Frage ist, was willst Du jetzt und was bist Du bereit zu lernen.
Ein ESP ist etwas anders - aber für Leute mit Erfahrung in der Web-Programmierung evtl. in diesem Bereich einfacher.

Ich bin bereit alles zu lernen, was ich für mein Vorhaben brauche.
Ob Arduino oder ESP da wollte ich mir eben noch Meinungen einholen in welche Richtung ich gehen soll.
Für mein Projekt sollte der Controller über Wifi laufen.

lg

Zwiespältig:
"laufen" tut alles mit Wifi. Irgendwie.
OTA? dann ESP.
Na morgen wirste schlauer - da kommen noch einige :wink:

Möglicherweise hilft Dir meine Anleitung: Einführung zu fipsok.de.

CSS ist zur Seitenformatierung notwendig, JSON zusammen mit Javascript ist nützlich zur Seitenaktualisierung. Findest Du alles bei Fips.

Der ESP32 kann auch als Access Point mit eigenem WLAN fungieren.

dann verlinke mal 3 dieser Tutorials die du durch gemacht hast, damit wir wissen wie weit du bist und auf was wir bauen können, und beschreibe was genau du zusätzlich wissen willst.

Allein "CSS" hat per se ja wenig mit "Arduino" zu tun. Das eignest du dir am besten stand alone mit einer Seite an. Generell, mach erst mal deine Seite + CSS lokal so dass es dir gefällt ohne Microcontroller.

PS, der ESP32 passt schon.

Es gibt eine library namens ESP-Dash mit der man sehr einfach interaktive Web-interfaces programmieren kann.

Der Nachteil ist dass man keinen Einfluss auf das Design des erzeugten Webinterfaces hat
weil alle HTML-Sachen intern in der library gemacht werden.

In der kostenlos Version von ESP-Dash kann man die Reihenfolge der Elemente nicht ändern
sie werden in einer bestimmten Reihenfolge auf den Bildschirm geklatscht und das wars

Die Pro-Version zum kaufen ist mit 39 Dollar schon etwas happig aber dann kann man die Reihenfolge der Elemente selbst festlegen.
Am Design kann man immer noch nichts ändern. Es sei denn man kniet sich halt doch in HTML, CSS und zusätzlich in Vue.js rein um nachzuvollziehen wie das dort programmiert ist.

Es ist wie immer: ein Fertig-Produkt oder in dem Fall das "fast-fertig-Produkt" ist eben fertig.
Wenn man sein ganz eigenes Ding machen will dann muss man es halt doch aus kleinen Elementen zusammensetzen. Genauso wie Gartenhaus-Bausatz kaufen oder alle Bretter und Balken einzeln kaufen und zusägen.

Hier ist ein Demo-Code der die onboard-LED blinken lässt.
Man kann mit einem Schieberegler die Blinkfrequenz verändern
und mit einem Button das Blinken ein-/auschalten

#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>          // https://github.com/me-no-dev/AsyncTCP
  #include <ESPAsyncWebServer.h> // https://github.com/me-no-dev/ESPAsyncWebServer
  #define  LEDStateOff LOW
#endif
#include <AsyncElegantOTA.h> // manual https://randomnerdtutorials.com/esp32-ota-over-the-air-arduino/
                             // https://github.com/ayushsharma82/AsyncElegantOTA
#include <ESPDash.h>         // https://github.com/ayushsharma82/ESP-DASH


const char *ssid     = "";
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();
  }  
}

Das webinterface sieht so aus

In dem Demo-Code ist zusätzlich auch gleich noch elegant OTA eingebaut
Das liefert einen Standard Dateisuchen Dialog im Browser über das man ein vorkompiliertes Programm als neue "firmware" drahtlos O)ver T)he A)ir = OTA aufspielen kann
image

vgs

Hallo,

danke für die ganzen Antworten.

Ich habe mich mit diesen Tutorials befasst:

Wie schon beschreiben geben mir die Tutorials leider nicht das Know-how um einen Sketch alleine und auf meine Bedürfnisse zugeschnitten anzufertigen.

@agmue Danke für die Anleitung, ich denke diese und die verlinkte Webseite sollte mich bei meinem Vorhaben weiterbringen.

Diese "Pushbullet Tab" Funktion würde ich auch gerne bei mir integrieren.

@noiasca

Das ich zuerst die CSS Webseite erstelle und dann den Code halte ich auch für die richtige vorgehensweise.

@StefanL38

Danke ich seh mir das ganze Mal an, ich kann mir dort sicher auch ein wenig Wissen herausholen.

Das ganze Thema mit Webserver ist anscheinend sehr Komplex. :sweat:

Meine Daten über einen fremden Server zu schicken, ist nicht so mein Ding, wenn es einfacher geht. Ich nutze lieber den ESP32 als Access Point (AP) und einen Browser mit HTML-Seite zum Ansehen und Knöpfchen drücken, Slider schieben oder Radio-Button klicken. Die Daten "fliegen" direkt vom ESP zum Läppi/Händi. Router und Internet sind nicht notwendig.

Ist aber Geschmacksache :wink:

Das machen heutzutage sogar Festnetztelefone. :rofl: :sunglasses:

Beide Seiten kannst in die Tonne treten, da sie nicht auf die jeweiligen webserver Beispiele in der IDE aufbauen und somit komplexität im Usersketch haben, die es nicht braucht.

Hast dir den in #7 verlinkten Beitrag durchgelesen und kommst mit der Seite von Fips nun zurecht?

Hallo,

Ja hab mir den Beitrag durchgelesen und die Seite angesehen.
Beides hat mehr Licht auf das Thema geworfen, ob das reicht um mich an mein Ziel zu bringen weiß ich noch nicht genau.

Ich hatte noch ein Buch zuhause zum Thema HTML5 und CSS , das nehme ich gerade auf Hochtour durch. Dann werde ich mir die Webseite so erstellen wie ich es mir vorstelle und dann versuchen mit den Infos im Beitrag #7 den Webserver zum laufen zu bekommen.
Klingt das nach einem guten Plan?

Lg

1 Like

Na...
Wer hat sowas noch?
:wink:

Ja.


Ich zusammen mit meiner Fritz!Box, mehreren Schnurlostelefonen und einer schicken DECT-Türsprechstelle. Alle Telefone klingeln zusammen mit der Türklingel mit einem speziellen Klingelton, mit der Person vor der Tür kann ich plaudern. "Bitte legen Sie das Paket vor die Tür!" ist vermutlich der meistgesagte Satz und praktisch, wenn man auf Distanz bleiben möchte.

Naja, das ist momentan noch Haustelefon :wink:
Ich hab ne DoorLine2ab und ne Weiterleitung aufs Handy - zusammen mit den Fon's im Hause...

Aber echtes Festnetz, also a/b, das dürfte wohl vorbei sein.

Eine Frage der Begriffe, Du meinst analoges Festnetz, ich habe Voice-over-IP-Festnetz, weil stationär gebunden. Das analoge Festnetz dürfte kaum noch existieren.