AZ-Envy – Sensordaten auf einer Webseite

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.

• Vorstellung AZ-Envy
• AZ-Envy – auslesen der Sensordaten

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://progs.ressourcen-draeger-it.de/azenvy/ abgelegt, somit kannst du dir diese recht einfach einbinden.