In diesem Beitrag möchte ich dir zeigen, wie du die Sensordaten vom AZ-Envy auf einer Webseite anzeigen lässt.
Den AZ-Envy habe ich dir bereits in den beiden nachfolgend verlinkten Beiträgen vorgestellt und gezeigt wie dieser programmiert wird.
Hier soll es lediglich darum gehen, wie du eine HTML-Seite mit einem Liniendiagramm schreibst und dort die Sensordaten für die Luftqualität, Temperatur sowie rel. Luftfeuchtigkeit darstellst.
AZ-Envy im Überblick
Der AZ-Envy verfügt wie erwähnt über einen Luftqualitätsmesser vom Typ MQ-2 sowie ein Luftfeuchtigkeits-/Temperaturmesser SHT30.
Aufbau einer Wi-Fi-Verbindung
Auf meinem Blog habe ich dir bereits einige Beiträge veröffentlicht, wo ich dir gezeigt habe, wie du eine Wi-Fi-Verbindung am Mikrocontroller mit ESP Chip aufbaust.
Du benötigst von deinem lokalen WLAN die SSID sowie das Passwort.
Der ESP8266 arbeitet im 2.4 GHz WLAN daher musst du hier ggf. im Router darauf achten welches Netzwerk bei dir aktiv ist!
//Bibliothek zum Aufbau einer WiFi Verbindung
#include <ESP8266WiFi.h>
//SSID aus dem Router
const char* ssid = "";
//Passwort für den Zugang zum WLAN
const char* password = "";
//Aufbau eines Webservers mit HttpPort 80
WiFiServer server(80);
void setupWiFi() {
//Ausgabe der SSID auf der seriellen Schnittstelle
Serial.print("Aufbau der WiFi Verbindung zu ");
Serial.print(ssid);
Serial.print(" ");
WiFi.begin(ssid, password);
int index = 0;
//Warten bis die Verbindung aufgebaut wurde,
//oder 10 Versuche gescheitert sind.
while (WiFi.status() != WL_CONNECTED || index < 11) {
delay(500);
index++; //incrementieren des Indexes
Serial.print(".");
}
Serial.println();
//Wenn die Verbindung erfolgreich aufgebaut wurde,
//dann soll die IP-Adresse ausgegeben werden.
if (WiFi.status() == WL_CONNECTED) {
Serial.print("IP-Adresse: ");
Serial.println(WiFi.localIP().toString());
}
}
void setup() {
//begin der seriellen Kommunikation
Serial.begin(9600);
//Aufrufen der Funktion setupWiFi
//zum Aufbau der WiFi-Verbindung.
setupWiFi();
}
void loop() {
// bleibt erstmal leer
}
Wenn das Programm erfolgreich auf den Mikrocontroller gespeichert / hochgeladen wurde, dann sollten wir nachfolgende Ausgabe im seriellen Monitor der Arduino IDE sehen.
Die IP-Adresse können wir nun im Browser eingeben, jedoch werden wir zunächst nur eine Fehlermeldung.
Damit du den Code nicht abtippen musst, kann du dir diesen hier bequem als ZIP-Datei herunterladen.
Erstellen einer Webseite für die Sensordaten
Zunächst schreiben wir die Webseite in einem einfachen Editor wie dem Notepad++. Da wir diese Webseite später vom Mikrocontroller ausliefern möchten, müssen wir diese komprimiert in einer Variablen im Quellcode ablegen (aber dazu später mehr).
Im ersten Schritt möchten wir lediglich die Daten anzeigen lassen. Die Uhrzeit & das Datum ermitteln wir per JavaScript und sparen uns somit einen Zugriff auf NTP-Server, wie ich es im Beitrag ESP8266 – NTP Protokoll für das lesen eines genauen Zeitstempels erläutert habe.
Der Code für dieses kleine Projekt ist schon jetzt recht umfangreich, daher biete ich dir hier einfach die ZIP-Datei zum Download mit allen Ressourcen an.
Die Bibliothek jQuery sowie die CSS-Stylesheets und JavaScript Dateien habe ich auf meiner Domain unter http://ressourcen-draeger-it.de/ abgelegt, somit kannst du dir diese recht einfach einbinden.
Klasse! Das hat mir schnell geholfen. Bei mir war der Jumper noch auf 5V gestellt…ich verzweifelte schon an der Tastenkombination, bis ich auf den blöden Fehler gestoßen bin. Hast Du auch eine Idee, wie ich den Sensor in die Arduino Cloud bekomme?
Hi,
hatte schon überlegt, einen Beitrag zu dem Thema zu veröffentlichen.
Wenn das Interesse ja doch vorhanden ist, dann werde ich das mal machen.
Denke bis Ende der Woche ist der fertig 🙂
Gruß
Stefan
Hey
Ich erreiche die Seite leider nicht. Was mache ich falsch?
http://progs.ressourcen-draeger-it.de/azenvy/
Auch wenn die Ressourcen erreichbar wären, ist die Webseite/Dashboard nutzlos, weil der passende Sketch dafür im Download Paket „AZ-Envy – einfaches Dashboard“ fehlt.
Was man machen kann:
– webseite.html im Browser (FF) öffnen und Seite in einem Ordner speichern, ergibt
„AZ-Envy – Sensordaten.html“ und Ordner „AZ-Envy – Sensordaten-Dateien“
– die Dateien „functions.js“ und „styles.css“ in den Ordner „AZ-Envy – Sensordaten-Dateien“
verschieben.
– die jetzt noch fehlende Datei „jquery-3.6.3.min.js“ findet man hier
„https://code.jquery.com/jquery-3.6.3.min.js“
– runter laden und auch im Ordner „AZ-Envy – Sensordaten-Dateien“ speichern
– die lokale „AZ-Envy – Sensordaten.html“ im Browser öffnen und man erhält das oben
abgebildete Dashboard..
Hi,
vielen Dank für deinen Hinweis, ich habe den Beitrag um die Adressen zu den Dateien ergänzt.
Gruß, Stefan