Skip to content

Technik Blog

Programmieren | Arduino | ESP32 | MicroPython | Python | Raspberry Pi | Raspberry Pi Pico

Menu
  • Smarthome
  • Arduino
  • ESP32 & Co.
  • Raspberry Pi & Pico
  • Solo Mining
  • Über mich
  • Deutsch
  • English
Menu

AZ-Envy – Sensordaten auf einer Webseite

Posted on 3. April 20234. Oktober 2024 by Stefan Draeger

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
  • Aufbau einer Wi-Fi-Verbindung
  • Erstellen einer Webseite für die Sensordaten

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 des Boards "AZ-Envy"
Aufbau des Boards „AZ-Envy“

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.

AZ-Envy – Aufbau einer WiFi VerbindungHerunterladen

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.

AZ-Envy – einfaches DashboardHerunterladen

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.

  • http://ressourcen-draeger-it.de/progs/azenvy/css/styles.css
  • http://ressourcen-draeger-it.de/progs/azenvy/js/functions.js
  • http://ressourcen-draeger-it.de/progs/azenvy/js/jquery-3.6.3.min.js

5 thoughts on “AZ-Envy – Sensordaten auf einer Webseite”

  1. Andreas sagt:
    5. April 2023 um 01:17 Uhr

    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?

    Antworten
    1. Stefan Draeger sagt:
      5. April 2023 um 21:43 Uhr

      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

      Antworten
  2. Raphael Maier sagt:
    20. Mai 2023 um 15:23 Uhr

    Hey
    Ich erreiche die Seite leider nicht. Was mache ich falsch?

    http://progs.ressourcen-draeger-it.de/azenvy/

    Antworten
  3. Birger T sagt:
    3. Oktober 2024 um 19:06 Uhr

    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..

    Antworten
    1. Stefan Draeger sagt:
      4. Oktober 2024 um 06:57 Uhr

      Hi,

      vielen Dank für deinen Hinweis, ich habe den Beitrag um die Adressen zu den Dateien ergänzt.

      Gruß, Stefan

      Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Fragen oder Feedback?

Du hast eine Idee, brauchst Hilfe oder möchtest Feedback loswerden?
Support-Ticket erstellen

Newsletter abonnieren

Bleib auf dem Laufenden: Erhalte regelmäßig Updates zu neuen Projekten, Tutorials und Tipps rund um Arduino, ESP32 und mehr – direkt in dein Postfach.

Jetzt Newsletter abonnieren

Unterstütze meinen Blog

Wenn dir meine Inhalte gefallen, freue ich mich über deine Unterstützung auf Tipeee.
So hilfst du mit, den Blog am Leben zu halten und neue Beiträge zu ermöglichen.

draeger-it.blog auf Tipeee unterstützen

Vielen Dank für deinen Support!
– Stefan Draeger

Kategorien

Tools

  • Unix-Zeitstempel-Rechner
  • ASCII Tabelle
  • Spannung, Strom, Widerstand und Leistung berechnen
  • Widerstandsrechner
  • 8×8 LED Matrix Tool
  • 8×16 LED Matrix Modul von Keyestudio
  • 16×16 LED Matrix – Generator

Links

Blogverzeichnis Bloggerei.de TopBlogs.de das Original - Blogverzeichnis | Blog Top Liste Blogverzeichnis trusted-blogs.com

Stefan Draeger
Königsberger Str. 13
38364 Schöningen

Tel.: 01778501273
E-Mail: info@draeger-it.blog

Folge mir auf

  • Impressum
  • Datenschutzerklärung
  • Disclaimer
  • Cookie-Richtlinie (EU)
©2025 Technik Blog | Built using WordPress and Responsive Blogily theme by Superb
Cookie-Zustimmung verwalten
Wir verwenden Technologien wie Cookies, um Geräteinformationen zu speichern und/oder darauf zuzugreifen. Wir tun dies, um das Surferlebnis zu verbessern und um personalisierte Werbung anzuzeigen. Wenn Sie diesen Technologien zustimmen, können wir Daten wie das Surfverhalten oder eindeutige IDs auf dieser Website verarbeiten. Wenn Sie Ihre Zustimmung nicht erteilen oder zurückziehen, können bestimmte Funktionen beeinträchtigt werden.
Funktional Immer aktiv
Die technische Speicherung oder der Zugang ist unbedingt erforderlich für den rechtmäßigen Zweck, die Nutzung eines bestimmten Dienstes zu ermöglichen, der vom Teilnehmer oder Nutzer ausdrücklich gewünscht wird, oder für den alleinigen Zweck, die Übertragung einer Nachricht über ein elektronisches Kommunikationsnetz durchzuführen.
Vorlieben
Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Präferenzen erforderlich, die nicht vom Abonnenten oder Benutzer angefordert wurden.
Statistiken
Die technische Speicherung oder der Zugriff, der ausschließlich zu statistischen Zwecken erfolgt. Die technische Speicherung oder der Zugriff, der ausschließlich zu anonymen statistischen Zwecken verwendet wird. Ohne eine Vorladung, die freiwillige Zustimmung deines Internetdienstanbieters oder zusätzliche Aufzeichnungen von Dritten können die zu diesem Zweck gespeicherten oder abgerufenen Informationen allein in der Regel nicht dazu verwendet werden, dich zu identifizieren.
Marketing
Die technische Speicherung oder der Zugriff ist erforderlich, um Nutzerprofile zu erstellen, um Werbung zu versenden oder um den Nutzer auf einer Website oder über mehrere Websites hinweg zu ähnlichen Marketingzwecken zu verfolgen.
Optionen verwalten Dienste verwalten Verwalten von {vendor_count}-Lieferanten Lese mehr über diese Zwecke
Einstellungen anzeigen
{title} {title} {title}