WEMOS D1 – WLAN Thermometer mit DHT11 Sensor

Wie man den Wemos D1 anschließt und programmiert habe ich ich Tutorial WEMOS D1 – Arduino UNO kompatibles Board mit ESP8266 Chip erläutert. In diesem Tutorial möchte ich gerne einen DHT11 Sensor anschließen und diese Werte auf einer Webseite darstellen.

Aufbau Wemos D1 mit DHT11 Sensor
Aufbau Wemos D1 mit DHT11 Sensor

Ziel

Ziel soll es sein dem Benutzer eine Webseite darzustellen auf welcher er bequem die Sensorwerte des DHT11 Sensors ablesen kann.

Ablage der Resourcen

Die zu diesem Tutorial nötigen Resourcen werden auf einer Subdomain abgelegt dieses hat den Vorteil, das kein zusätzliches SD Card Modul benötigt wird.

Darstellen der Sensorwerte

Die Sensorwerte werden mit dem JavaScript Framework Google Gauges dargestellt. Dieses Framework wird extern eingebunden.

Darstellung der Sensorwerte mit Google Gauges.
Darstellung der Sensorwerte mit Google Gauges.

Schritt 1 – Der Aufbau

Der Aufbau ist relativ simple denn der DHT11 Sensor verfügt über 3 bzw. 4 Pins (je nach Model).

 

DHT11 Sensor am Wemos D1 R2
DHT11 Sensor am Wemos D1 R2

In der Schaltung würde dieses wie folgt aussehen:

Aufbau, Wemos D1 R2 mit DHT11 Sensor
Aufbau, Wemos D1 R2 mit DHT11 Sensor

Schritt 2 – Der Quellcode

Der nachfolgende Quellcode basiert auf dem Tutorial WEMOS D1 – Arduino UNO kompatibles Board mit ESP8266 Chip wo ich bereits eine kleine Webseite für den Wemos D1 R2 geschrieben habe. Der Refresh der Seite wird mit einem neuladen durchgeführt (F5 im Browser).

Das Beispiel kann man nun jedoch noch um folgende Funktionen erweitern:

  • automatischer refresh nach x Sekunden (der DHT11 Sensor liefert alle 2 sek. einen neuen Wert)
  • upload der Daten in eine Datenbank
  • darstellen vergangener Werte in einem Liniendiagramm
  • usw.

Downloads

 

13 Gedanken zu „WEMOS D1 – WLAN Thermometer mit DHT11 Sensor

  • März 12, 2018 um 09:03
    Permalink

    Ich habe das Beispiel für meine Verhältnisse (D1 mini, DHT22) leicht geändert nachgebaut. Klappt einwandfrei! Auch die externen Dateien auf meinen Server übertragen läuft prinzipiell. Lediglich das ° von °C in der Datei gauges.js macht Schwierigkeiten. Liegt die Datei auf meinem Server wird es als °C dargestellt, ist die Datei auf dem Originalserver ist alles richtig. Was mache ich falsch?

    Wohlgemerkt es handelt sich um die exakt gleiche Datei, die nur auf unterschiedlichen Servern liegt. Vermutlich ist irgendwas mit dem Zeichensatz. Aber was und wie muss ich einstellen? Hat jemand einen Tipp für mich?

    Danke schon mal im voraus.

    Martin

    Antwort
    • März 12, 2018 um 09:16
      Permalink

      Hallo Martin,

      ja das liegt am Zeichensatz. Prüfe doch mal wenn du die Datei speicherst in welchem Format diese abgelegt wird.
      Notepad++ kann hier behilflich sein dort kannst du die Datei in unterschiedlichen Formaten anzeigen.

      Gruß,

      Stefan

      Antwort
  • März 12, 2018 um 09:42
    Permalink

    Danke Stefan, das war es! Und ich habe wieder was gelernt..

    Martin

    Antwort
  • März 16, 2018 um 18:48
    Permalink

    Hallo Stefan,

    ein ähnliches Projekt wie oben beschrieben hane ich auch im Fokus, jedoch möchte ich die Daten von mehreren Sensoren (Garage, Wintergarten, …) auf einer Seite darstellen. Ist das möglich?

    Vielen Dank im Voraus

    Ralf

    Antwort
    • März 16, 2018 um 18:50
      Permalink

      Hi Ralf,

      klar ist das möglich deine grenzen sind nur vom Controller (anzahl der PINs und dem Speicher) gesetzt. Du musst halt „nur“ die HTML Seite erweitern.

      Wenn du Probleme hast kannst du dich gerne bei mir per E-Mail melden.

      Gruß,

      Stefan

      Antwort
  • März 17, 2018 um 19:35
    Permalink

    Hallo,

    sehr schönes Projekt, kannst du mir sagen, wie ich auf der Website auch einen digitalen Eingang des WeMos darstellen kann.
    Vielen Dank.
    Gruß Stefan

    Antwort
    • März 17, 2018 um 19:37
      Permalink

      Hi,

      der DHT11 ist ja digital angeschlossen.
      Was möchtest du denn genau machen?
      Welchen Sensor möchtest du verwenden?
      Wie soll die Darstellung sein?

      Gruß,

      Stefan

      Antwort
  • April 1, 2018 um 18:37
    Permalink

    Hallo Stefan,
    ich möchte gern den sketch auf einen ESP12 über ein Router der nicht am Internet angeschlossen ist verwenden.
    Die Anzeige soll auf einen Notebook über diesen Router per WLAN verbunden ist erfolgen.
    Die Verbindung zum Notebook klappt sehr gut, nur ich bekomme die Darstellung der Sensorwerte mit Google Gauge nicht zu sehen.
    Mein Problem ist, ich weis nicht wie ich das JavaScript Framework Google Gauges in die Arduino IDE einbinden kann, bzw. mit #include zufügen kann.
    Also local auf den ESP12 (ESP8266) ablegen.

    Andere Projekte,die mit den Internet verbunden sind und die Gauge Darstellung vom Internet beziehen hab ich schon zum laufen bekonnen.
    Nur für diese Anwendung hab ich kein Internet zur verfügung(im Garten).

    Über ein Tipp wäre ich sehr dankbar.

    Gruß
    Erich

    Antwort
    • April 1, 2018 um 19:49
      Permalink

      Hallo Erich,

      danke für deinen Kommentar. Ich würde dieses über ein SD Card Modul lösen.
      Auf die SD Card wird die minify Version von Google Gauges kopiert und dann geladen und dynamisch in die Seite eingebaut. Nautürlich muss man hier noch prüfen welche zusätzlichen Resourcen (CSS, Images) noch benötigt werden.

      Gruß,

      Stefan

      Antwort
  • April 2, 2018 um 14:18
    Permalink

    Hallo Stefan danke für die Info.

    Den Aufwand mit der SD Karte wollte ich mir nicht machen.
    Es scheint auch möglich zu sein die html Webseite direckt auf auf den ESP8266 abzulegen.
    Im Projekt Verzeichnis einen Ordner „data“ anlegen. Dort die Webseite hinein kopieren und mit einen zusätzlichen tool ESP8266FS-0.1.3 mit der Arduino IDE den Ordner „data“ in den ESP8266 zu kopieren.
    Auf dieser Seite ist beschrieben wie man das Tool in die Arduino IDE einbindet.
    https://circuits4you.com/2018/01/31/upload-image-png-jpeg-to-esp8266-web-page/

    Das hochladen des Ordners „data“ in den ESP8266 geht auch.
    Mit den Aufruf und der Übergabe der Messwerte an die Webseite hab ich noch so meine Probleme.
    Ich werde mein Glück weiter versuchen.
    Gruß erich

    Antwort
  • Juni 30, 2018 um 07:51
    Permalink

    Hallo Stefan,
    dein Programm hat mir sehr weiter geholfen bei meinem Projekt, jedoch bin ich auf ein Problem gestoßen. Ich habe dein Projekt für mich ein wenig umgeschrieben und anstelle des DHT11 benutzte ich einen DHT22, was denke ich eigentlich kein Problem darstellen sollte. Mein Problem besteht darin, dass wenn ich nach dem Hochladen des Sketches ins Internet gehe und oben meine ip eingebe, jedoch anstelle der Daten des Server bekomme ich nur zu sehen, dass diese Webseite nicht verfügbar ist. Man muss dazu sagen, dass ich in diesen Dingen noch ein Anfänger bin und ehrlich gesagt nicht weiß was ich falsch mache.

    Ich wäre sehr Dankbar, wenn sie eine Lösung wüssten.

    LG Vivien

    Antwort
    • Juni 30, 2018 um 18:09
      Permalink

      Hallo Vivien,
      setze dir doch mal eine Ausgabe in der Funktion „setup“ und in der „loop“ auf dem seriellen Monitor der Arduino IDE, ich denke mal das, dass Sketch abbricht bevor der ESP eine Wifi Verbindung aufbauen kann.

      P.S. Du kannst mir gerne den Sketch an meine E-Mail info@draeger-it.blog senden.

      Gruß,

      Stefan

      Antwort
  • Oktober 17, 2018 um 22:51
    Permalink

    Hallo Stefan,

    Deine Anleitung hat mir sehr weiter geholfen: Ich wollte einen einfachen und günstigen Sensor zur Temperatur- und Luftfeuchtigkeitsüberwachung im Gartenhaus haben, wo die Balkonpflanzen überwintern. Bei 6,50 € für einen Wemos D1 Wifi Arduino UNO und 1,80 € für den DHT11 kann ich wirklich mit meckern & die Sache hat auch auf Anhieb funktioniert!!!

    Schöne Grüße und vielen Dank!
    Markus

    Antwort

Schreibe einen Kommentar

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