Microcontroller Tutorials

Arduino, Raspberry Pi, PIC, Beaglebone Resources

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:

DHT22 NodeMCU
Dout GPIO4 (D2)
VCC 3.3V
GND GND

Here is a photo of my actual setup:

NodeMCU Weather Device

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.

Sketch

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:

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:

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:

I saved this Javascript code as mqtt.js.

And here’s the HTML as well:

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

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.