asynchronous web controlled thermostat

ESP32 Asynchrones Web -kontrolliertes Thermostat

Dieses Projekt stammte aus einer Diskussion, die ich mit Yves Bourdon im zufälligen Nerd -Tutorial -Labor -Forum über die Implementierung einer aktualisierten Webschnittstelle zur Steuerung eines ESP32 geführt habe, ohne die gesamte Seite neu zu laden oder ein Formular einzureichen. Mit anderen Worten, hier ist die Idee, asynchrone Anforderungen vom Client -Browser auszuführen, um den Mikrocontroller am Status der zu angezeigten Daten abzufragen und dann lokale Aktualisierungen der Benutzeroberfläche durchzuführen, sobald die von der ESP32 bereitgestellten Daten empfangen werden.

Es gibt verschiedene Techniken, um dies zu erreichen, einschließlich der Verwendung von Websockets, von denen ich traditionelle Methoden, die auf AJAX angewiesen sind, sehr bevorzuge. Trotzdem wollte Yves verstehen, wie diese Technik mit Ajax implementiert werden kann. Dies ist der Zweck dieses Projekts. Ein anderer wird folgen, um zu veranschaulichen, wie man mit Websockets fortfahren ...

Projektübersicht

Um Yves 'anfängliche Anfrage nach einem angeschlossenen Thermostat zu beantworten, habe ich mich entschlossen, einen ziemlich einfachen Stromkreis mit einem ESP32- und einem DHT11 -Temperatursensor einzurichten (aber jeder Sensor kann den Job erledigen). Ich habe auch eine LED hinzugefügt, um durch einen Blitz die Momente anzuzeigen, in denen der Navigator den ESP32 befragt, um die aktuelle Temperatur zu erhalten. Und die Benutzeroberfläche zur Steuerung des ESP32 ist mit jedem modernen Browser kompatibel. Besonders auf Smartphones:

Mit der Webschnittstelle kann der Benutzer den Temperaturbereich des Thermostats einstellen. Sobald einer der Schwellenwerte geändert wird, wird eine asynchrone HTTP -Anfrage an den ESP32 gesendet, um den neuen Temperaturbereich in seinem EEPROM -Speicher zu speichern. Auf diese Weise würde der Thermostat mit dem zuletzt aufgezeichneten Temperaturbereich initialisiert, wenn der ESP32 aus irgendeinem Grund neu starten würde (nach einem Stromausfall). Mit einer Reboot kann diese Funktion getestet werden, indem der ESP32 -Befehl neu gestartet wird.

Jedes Mal, wenn die aktuelle Temperaturlesung aufgenommen wird, wird die Schnittstelle auf völlig transparente Weise aktualisiert, ohne dass die Seite neu geladen werden muss. Und die Temperaturanzeige passt sich automatisch an die Situation an, indem Sie die Farbe ändern, um anzuzeigen, ob alles in Ordnung ist oder ob Sie außerhalb des zulässigen Bereichs sind. Ein Lesefehler am Sensor kann ebenfalls auftreten. Die Anzeige berücksichtigt dies:

Vorläufige Lesungen

Um zu verstehen, was wir hier tun, schlage ich vor, dass Sie sich das folgende Tutorial in zufälligen Nerd -Tutorials ansehen:

ESP32/ESP8266 Thermostat Web Server - Steuerungsausgabe basierend auf der Temperatur

Wenn Sie mit der Verwendung von Spiffs nicht vertraut sind, ermutige ich Sie, dieses Tutorial auch zu lesen:

ESP32 -Webserver Verwenden von SPIFFs (SPI -Flash -Dateisystem)

Erforderliche Teile

• 1 ESP32
• 1 DHT11 -Temperatursensor
• 1 LED
• 2 Widerstände (220 Ω und 4,7 kΩ)

Schaltplan und Pinouts

• GPIO23 ist mit der Anode der LED verbunden
• Die Kathode der LED ist durch einen 220 Ω -Widerstand mit dem Boden verbunden
• GPIO32 ist mit dem Datenstift des DHT11 -Temperatursensors verbunden
• DHT11 ist mit einem 4,7 kΩ-Widerstand auf seinem Datenstift aufgerufen

Der Code

Ich habe meinen Code mit dem Paltformio IDE und dem Visual Studio Code Editor entwickelt. Daher wird das Hauptprogramm als main.cpp bezeichnet und befindet sich im src -Verzeichnis. Wenn Sie die Arduino -IDE verwenden, müssen Sie dieses Programm in die Wurzel des Projekts verschieben und als solche umbenennen:

 mv src/main.cpp esp32-asynchronous-web-controlled-thermostat.ino

Die Codestruktur

Der Code ist in drei Verzeichnisse unterteilt:

• src enthält den C ++ - Code zum Kompilieren und Hochladen in das ESP32
• data enthält den Quellcode für Web -Benutzeroberflächen, um auf die ESP32 -SPIFF hochzuladen
• scss enthält den Quellcode der CSS -Stilblätter im SCSS -Format

Die Webbenutzeroberfläche wird auf dem ESP32 -Flash -Speicherdateisystem als 5 separate Dateien gespeichert:

• index.html (die Grenzflächenstruktur)
• index.css (das grafische Layout der Schnittstelle)
• index.js (das Dynamic Interface Management -Programm)
• D7MR.woff2 (die für numerische Anzeigen verwendete Schriftart)
• favicon.ico (die winzige Ikone für den Browser)

Die Webschnittstelle ist grafisch von einem CSS -Stylesheet formatiert. Der Quellcode ist im SCSS -Format (SASSY CSS) geschrieben und mit dem sass -Programm zusammengestellt, um die CSS -Datei zu erhalten. Sehen Sie sich die offizielle Sass -Website an, um mehr zu erfahren.

Im Allgemeinen liegt die SCSS -Syntax sehr nahe an CSS. Wenn Sie die Quelldatei ändern möchten, müssen Sie das sass -Tool installieren und die CSS -Datei wie folgt neu kompilieren:

 sass -t compressed --sourcemap=none --update scss:data

Sie können die CSS -Datei jedoch auch direkt ändern, wenn Sie kein zusätzliches Tool installieren möchten.

AJAX -Implementierung

Ich schlage hier zwei Techniken vor, um den asynchronen Austausch zwischen dem Client -Browser und dem Webserver auf dem ESP32 zu implementieren:

• Eine klassische Methode, die das XMLHttpRequest -Objekt von JavaScript verwendet
• Eine modernere Methode, die das Async/Awed -Protokoll von JavaScript verwendet

Sie haben also die Wahl, das eine oder andere zu verwenden.

Ich habe den gesamten Code sorgfältig kommentiert, um es Ihnen leichter zu verstehen. Zögern Sie nicht, im Forum Fragen zu stellen, indem Sie diesen Beitrag beantworten, der dem Projekt gewidmet ist.

Credits

• Ich möchte mir besonders no dev danken, Autor der fantastischen ESP32AsyncWebserver -Bibliothek, die unser Leben viel einfacher macht, wenn wir über eine Webanwendung mit ESP32 interagieren möchten.

• Ich möchte auch Keshikan für seine DSEG7 Modern Mini -reguläre Schriftart danken, die ich für die digitalen Displays der Schnittstelle verwendet habe.