Rolladensteuerung per ESP8288 + WiFi?

[HaWe]

wie gesagt, ohne Verständnis wie PHP funktioniert müsste ich etwas weiter ausholen, aber im Grunde ist das Konstrukt simple:

du hast eine etwas unvollständige HTML Seite, quasi einen Rumpf zum Darstellen der GPIOs als Beispiel.

wenn du die Webseite aufrufst wird dann der HTML Code ausgegeben wie bei einem stumpfen HTML-Webserver

aber du könntest bei PHP halt PHP-Script und bei Flask halt Python-Code einfach in deinem HTML Code einbetten

dieser wird beim Öffnen der Webseite auf der Seite des Servers aufgerufen, hat also Zugriff auf GPIO und ruft dessen Zustand ab

und gibt dann über die print-Funktion zum Beispiel den passenden HTML Code aus, der an diese Stelle gehört damit man 8 grün eLämpche für die GPIO Pins bekommt

Wenn du jetzt noch vermeiden willst die Seite immer neu zu laden zum Aktualisieren, musst du auch Javascript benutzen und im Browser per Javascript direkte Socket Verbindung zusätzlich zur Webverbindung aufbauen über die kontinuierlich Daten ausgetauscht werden, welche dann in der Webseite im Browser per Javascript aktualisiert werden.

Aber das ist schon eher Königsklasse ohne fertige Frameworks oder passende Libs, trotzdem Reizvoll, wollte schonmal ein Browsergame basierend auf Flask machen das man per Handy und WLAN spielen kann und der Server ist sowass wie das Spielbrett

die Fragen, die sich MIR da aufdrängen, sind:
was ist ein "stumpfer HTML-Webserver"?
wie sieht ein "PHP-Script" aus?
wie sieht ein "Python-Code" aus, insb. "einfach in HTML Code eingebettet"?
was ist das genau mit "bei Flask halt Python-Code"?
was ist das mit dem "über die print-Funktion" und was ist ein "passender HTML Code ", damit "man 8 grüne Lämpche für die GPIO Pins bekommt " ?
wie genau geht "musst du auch Javascript benutzen",
wie geht "im Browser per Javascript direkte Socket Verbindung zusätzlich zur Webverbindung aufbauen"
wie geht das mit "dann in der Webseite im Browser per Javascript aktualisiert werden"


ich hoffe du verstehst, worauf ich hinaus will...
ohne fertigen, vollständigen Code für einen ESP32 (!) und weitergehende Anleitungen wird das keiner verstehen, der die Eingangsfrage

mich würde interessieren wie Du das ansteuern der motoren über die webseite machst... geht das z.b. auch mit esp32?

überhaupt gar nicht erst gestellt hätte

[Ceos]

ich hoffe du verstehst, worauf ich hinaus will...
ohne fertigen, vollständigen Code für einen ESP32 (!) und weitergehende Anleitungen wird das keiner verstehen, der die Eingangsfrage

Das einzige was ich aus deiner Antwort lese ist, das du dich nichtmal 5 Minuten mit Google hinsetzen willst um zu gucken wie ein Webserver funktioniert, wie PHP aussieht und wie es Grundlegend funktioniert Webseiten dynamisch zu gestalten. (Nein ich meine keine Animationen sondern aktualisieren mit externen Daten)

Wenn du dir wenigstens die Mühe machen würdest die Grundlagen selber zu erarbeiten würden sich dir die Zusammenhänge ergeben und bis auf 3 Fragen alles beantwortet.

Eine Webseite mit JS einen Socket öffnen zu lassen und dann das HTML Dokument mit den ausgetauschten Daten updaten sind schon 2 Dinge die eher als Königsdisziplin gelten
und das "print passenden HTML Code" musst du dir einfach wie Lückentext vorstellen, der statische HTML Code ist nur der Rumpf der Webseite und hat Lücken(zum Beispiel ein Platzhalter und Text für die GPIO Pins), die man mit den Ausgaben aus dem Python oder PHP auffüllt (zum Beispiel mit grünen Kreisen und dem Wort "Off" für Pins die Aus sind)

[HaWe]

Das einzige was ich aus deiner Antwort lese ist, das du dich nichtmal 5 Minuten mit Google hinsetzen willst um zu gucken wie ein Webserver funktioniert, wie PHP aussieht und wie es Grundlegend funktioniert Webseiten dynamisch zu gestalten. (Nein ich meine keine Animationen sondern aktualisieren mit externen Daten)

Wenn du dir wenigstens die Mühe machen würdest die Grundlagen selber zu erarbeiten würden sich dir die Zusammenhänge ergeben und bis auf 3 Fragen alles beantwortet.

Eine Webseite mit JS einen Socket öffnen zu lassen und dann das HTML Dokument mit den ausgetauschten Daten updaten sind schon 2 Dinge die eher als Königsdisziplin gelten
und das "print passenden HTML Code" musst du dir einfach wie Lückentext vorstellen, der statische HTML Code ist nur der Rumpf der Webseite und hat Lücken(zum Beispiel ein Platzhalter und Text für die GPIO Pins), die man mit den Ausgaben aus dem Python oder PHP auffüllt (zum Beispiel mit grünen Kreisen und dem Wort "Off" für Pins die Aus sind)

wie genau ein webserver funktioniert, war doch eigentlich genau die Gretchenfrage, zugespitzt auf ESP32.

ich persönlich weiß noch nicht mal was ein Socket genau ist, geschweigedenn wie man ihn öffnet. ich kenne auch weder JS noch Python, und auch html kann ich nicht (weder stumpf noch spitz) - höchstens versuchen, fertigen Code zu verstehn wie in meinem Arduino-ESP-Link, aber selbst da sind 90% für mich reine "??????????????????".
Wie man ein print in C/++ schreibt weiß ich (printf() oder bei Arduino Serial.print()), aber was und wie ich wo bei deinem Code an welches print an welcher Codestelle hinschreiben müsste: absolut nicht. Du setzt viel zu viel voraus, und wenn du es erklären willst, dann verweise nicht einfach auf Google, sondern zeig es doch einfach, wie es genau geht!

[Ceos]

Ich brech das ganze mal runter auf die Möglichkeiten und dem zugehörigen Aufwand:

- Apache: (Abseits dass man ein OS dafür braucht und sonst viel zu viel unnötige Funktionen drinne stecken aber als "stumpfer Webserver")
Man kann Webseiten mit HTML konstruieren und dann über entsprechend generierte Unterdokumente den Inhalt in gewissem Maße dynamisch updaten. dafür braucht man aber ein zusätzliches Programm, welches die Unterdokumente dynamisch erstellt und updatet.

- PHP: (Die Ursprungsversion der Idee und am weitesten verbreitet ... braucth auch ein OS)
Man kann Templates (Lückentexte) entwerfen und die Lücken über Variablen oder direkt eingebetteten Code füllen lassen. Das Resultat muss jedoch in die Dokumentstruktur passen!

- Flask/Bottle: (Die Python basierte PHP Lösung)
Ebenfalls basierend auf Templates, aber im Gegensatz zu PHP haben wir über Python viel tiefgreifenderen Zugriff auf die Hardware und im Fall von µPython bis zur Peripherie und können so ganz Schlank und top aktuell Daten generieren ... in PHP hätte ich wohl wieder ein Programm gebraucht dass entweder eine Daeti oder Datenbank oder eine Art der API zu PHP bereitstellt um die Informationen direkt im PHP bereit zu haben.

- Arduino Webserver:
Habe ich noch nie selber aktiv außer zum ausprobieren verwendet, aber was ich daraus gelernt habe, es ist kompliziert.
Man kann alle oben genannten Funktionen abbilden, aber vieles davon muss man immernoch zu Fuss schreiben.
Mir mag hier einiges an Wissen zu effizienten Funktionen fehlen aber wenn ich in den ersten Tutorials schon etwas lese dass ich die Anfrage selber zerlegen und die Antwort selber zusammenstricken muss hab cih auch keine Lust es auszuprobieren

Einfach mal als Vergleich

https://www.arduino.cc/en/Tutorial/WebServer

VS

https://www.tutorialspoint.com/flask...templates.html


Javascript ist wie gesagt Königsklasse und nicht wirklich relevant.
Alle Wege zu erklären und gebrauchsfertige Beispielcodes zu schreiben wäre Aufwand den ich mir bezahlen lassen müsste.
Für dich konkret gibt es nur den Arduino Weg und die Einstiegshürden erscheinen mir einfach zu hoch um mich selber dafür zu motivieren.
Ich persönlich favorisiere den Python Weg weil ich Python in dem Kontext einfach für die "intuitivere" Sprache halte und c/gcc viel zu viele Randbedingungen kennt um die ich mich kümmern muss.

[HaWe]

dankeschön, ich zumindest sehe jetzt schon ein paar Unterschiede deutlich klarer.
https://www.tutorialspoint.com/flask...templates.html
ist aber leider 404 - not found!

[Ceos]

https://www.tutorialspoint.com/flask..._templates.htm ... der ergänzt hinten immer ein kleines "L" wenn ich das in die Link Maske eingebe aber es ist ein htm ... blöde Autovervollständigung

[HaWe]

https://www.tutorialspoint.com/flask..._templates.htm ... der ergänzt hinten immer ein kleines "L" wenn ich das in die Link Maske eingebe aber es ist ein htm ... blöde Autovervollständigung

kompletter esp32 Arduino code für so ein Hello Server:

// http://esp32-server.de/  


#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>


const char* ssid     = "***************";
const char* password = "********************";

const char indexHTML[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
 <head>
  <title>Erstes Programm</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name=viewport content="width=device-width, initial-scale=1"> 
 </head>
 <body>
            <h1 style="text-align: center;">Hallo ESP32</h1>
 </body>
</html>
)=====" ;

WebServer server(80);
IPAddress apIP(192, 168, 2, 1);

void setup()
{
  Serial.begin(115200);
  delay(1000);
  
  Serial.println("Warte auf Verbindung");
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("");

  while (WiFi.status() != WL_CONNECTED) 
  {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("IP Addresse: ");
  Serial.print("http://");Serial.println(WiFi.localIP());
  server.on("/", Ereignis_Index);
  server.onNotFound(handleNotFound);
  server.begin();
  Serial.println("HTTP Server gestartet");
}

void Ereignis_Index()    // Wird ausgeführt wenn "http://<ip address>/" aufgerufen wurde
{
  server.send(200, "text/html", indexHTML);      //dann Index Webseite senden 
}

void handleNotFound()
{
  server.send(404, "text/plain", "File Not Found\n\n");
}

void loop(void) 
{
  server.handleClient();
}