Home / Projects / ESP8266 Projects / NodeMCU IoT Weather Device

NodeMCU IoT Weather Device

This project demonstrates how to read data from the DHT22 temperature and humidity sensor and send that data to the web using an ESP8266 via MQTT.

Setting Up

As already mentioned, this project uses the DHT22 and a NodeMCU ESP8266 board. The hardware connections are straightforward:

Dout GPIO4 (D2)
VCC 3.3V

Here is a photo of my actual setup:

NodeMCU Weather Device

[the_ad id=”3059″]

As for the firmware, I used the following libraries for the sketch:

Basically, all I did was read temperature and humidity data from the DHT22 and publish that data to shiftr’s MQTT broker service. You can use shiftr’s Try channel if you’re short on time but I recommend creating your own account. With that, you can create your own namespace and you will be provided with a Key and Password as shown:

Here, my Key is feceaf58 and my password is 5d0a52d449f797ca.


Next, I modified the AdafruitHuzzahESP8266 example sketch that came with the MQTT library. I added a few lines for reading the data from the DHT22 and also inserted my own Key and password from above. Here is the full sketch:

[the_ad id=”3059″]

Don’t forget to insert your own credentials on the sketch above!

If the sketch is uploaded successfully to the NodeMCU, the Shiftr channel should now show the sent temperature and humidity data:

Embedding Data to Web Page

I’m not done yet! I want to embed the temperature and humidity data to my own web page and add a graph with the values vs. time.

Shiftr provides an example Javascript code for embedding MQTT data. What I did is modify that code so that it displays two messages from two topics:

[the_ad id=”3059″]

Then i used Dygraph for plotting the data against time. This library requires a Dygraph object with given properties.

Here, I created div_g HTML div element where the graph is located.

Here’s my full Javascript code:

[the_ad id=”3059″]

I saved this Javascript code as mqtt.js.

And here’s the HTML as well:

[the_ad id=”3059″]

The web page lacks CSS so it’s kinda ugly. But it works!


Check Also

NodeMCU IoT Environment Monitor

Project Overview This NodeMCU IoT project is a simple demonstration on how to send sensor …

Leave a Reply

Your email address will not be published.