Temperature Dashboard Using Arduino UNO, ESP8266 And MQTT

Temperature Dashboard Using Arduino UNO, ESP8266 And MQTT © Apache-2.0

Visualize DHT22 sensor readings collected using Arduino Uno. Data is uploaded over MQTT using ESP8266 and visualized using Thingsboard.

  • 52,790 views
  • 5 comments
  • 58 respects

Components and supplies

Apps and online services

About this project

This sample application performs collection of temperature and humidity values produced by DHT22 sensor and further visualization on the real-time web dashboard. Collected data is pushed via MQTT to Thingsboard server for storage and visualization.

Thingsboard is an open-source server-side platform that allows you to monitor and control IoT devices. It is free for both personal and commercial usage and you can deploy it anywhere.

Once you complete this tutorial, you will see your sensor data on the following dashboard.

Data flow

The DHT22 sensor is connected to Arduino UNO. Arduino UNO connects to the WiFi network using ESP8266. Arduino UNO push data to Thingsboard server via MQTT protocol by using PubSubClient library for Arduino. Data is visualized using built-in customizable dashboard. The application that is running on Arduino UNO is written using Arduino SDK which is quite simple and easy to understand.

ESP8266 Firmware

In the current tutorial WiFiEsp Arduino library is used to connect Arduino board to the internet. This library supports ESP SDK version 1.1.1 and above (AT version 0.25 and above). Please make sure that your ESP8266 has compatible firmware. You can download and flash AT25-SDK112 firmware which is tested in this tutorial.

Please note that serial baud rate of ESP8266 should be set to 9600 by the following AT command:

AT+UART_DEF=9600,8,1,0,0

Thingsboard configuration

Step 1. Install Thingsboard

You will need to have Thingsboard server up and running. Use following guide to install Thingsboard (multiple options supported).

Step 2. Provision your device

This step contains instructions that are necessary to connect your device to Thingsboard.

Open Thingsboard Web UI (http://localhost:8080) in browser and login as tenant administrator

  • login: tenant@thingsboard.org
  • password: tenant

Goto “Devices” section. Click “+” button and create device with name “Arduino UNO Demo Device”.

Once device created, open its details and click “Manage credentials”. Enter “ARDUINO_DEMO_TOKEN” in “Access token” field and click “Save”.

Click “Copy Device ID” in device details to copy your device id to clipboard. Paste your device id to some place, this value will be used in further steps.

Step 3. Provision your dashboard

Download the dashboard file using this link. Use import/export instructions to import the dashboard to your Thingsboard instance.

Programming the Arduino UNO device

If you already familiar with basics of Arduino UNO programming using Arduino IDE you can skip the following step and proceed with step 2.

Step 1. Arduino IDE

In order to start programming Arduino UNO device you will need Arduino IDE installed and all related software.

Download and install Arduino IDE.

To learn how to connect your Uno board to the computer and upload your first sketch please follow this guide.

Step 2. Install Arduino libraries

Open Arduino IDE and go to Sketch -> Include Library -> Manage Libraries. Find and install the following libraries:

Note that this tutorial was tested with the following versions of the libraries:

  • PubSubClient 2.6
  • WiFiEsp 2.1.2
  • Adafruit Unified Sensor 1.0.2
  • DHT sensor library 1.3.0

Step 3. Prepare and upload sketch.

Download and open arduino-dht-esp8266-mqtt.ino sketch.

Note You need to edit following constants and variables in the sketch:

  • WIFI_AP - name of your access point
  • WIFI_PASSWORD - access point password
  • thingsboardServer - Thingsboard HOST/IP address that is accessable within your wifi network.

Connect your Arduino UNO device via USB cable and select “Arduino/Genuino Uno” port in Arduino IDE. Compile and Upload your sketch to device using “Upload” button.

After application will be uploaded and started it will try to connect to Thingsboard node using mqtt client and upload “temperature” and “humidity” timeseries data once per second.

Troubleshooting

When application is running you can select “Arduino/Genuino Uno” port in Arduino IDE and open “Serial Monitor” in order to view debug information produced by serial output.

Data visualization

Finally, open Thingsboard Web UI. You can access this dashboard by logging in as a tenant administrator:

  • login: tenant@thingsboard.org
  • password: tenant

Go to “Devices” section and locate “Arduino UNO Demo Device”, open device details and switch to “Latest telemetry” tab. If all is configured correctly you should be able to see latest values of “temperature” and “humidity” in the table.

After, open “Dashboards” section then locate and open “Arduino DHT22: Temperature & Humidity Demo Dashboard”. As a result you will see two time-series charts and two digital gauges displaying temperature and humidity level (see first picture in this tutorial).

Code

arduino-dht-esp8266-mqtt.inoArduino
#include "DHT.h"
#include <WiFiEspClient.h>
#include <WiFiEsp.h>
#include <WiFiEspUdp.h>
#include <PubSubClient.h>
#include "SoftwareSerial.h"

#define WIFI_AP "YOUR_WIFI_AP"
#define WIFI_PASSWORD "YOUR_WIFI_PASSWORD"

#define TOKEN "ARDUINO_DEMO_TOKEN"

// DHT
#define DHTPIN 4
#define DHTTYPE DHT22

char thingsboardServer[] = "YOUR_THINGSBOARD_HOST_OR_IP";

// Initialize the Ethernet client object
WiFiEspClient espClient;

// Initialize DHT sensor.
DHT dht(DHTPIN, DHTTYPE);

PubSubClient client(espClient);

SoftwareSerial soft(2, 3); // RX, TX

int status = WL_IDLE_STATUS;
unsigned long lastSend;

void setup() {
  // initialize serial for debugging
  Serial.begin(9600);
  dht.begin();
  InitWiFi();
  client.setServer( thingsboardServer, 1883 );
  lastSend = 0;
}

void loop() {
  status = WiFi.status();
  if ( status != WL_CONNECTED) {
    while ( status != WL_CONNECTED) {
      Serial.print("Attempting to connect to WPA SSID: ");
      Serial.println(WIFI_AP);
      // Connect to WPA/WPA2 network
      status = WiFi.begin(WIFI_AP, WIFI_PASSWORD);
      delay(500);
    }
    Serial.println("Connected to AP");
  }

  if ( !client.connected() ) {
    reconnect();
  }

  if ( millis() - lastSend > 1000 ) { // Update and send only after 1 seconds
    getAndSendTemperatureAndHumidityData();
    lastSend = millis();
  }

  client.loop();
}

void getAndSendTemperatureAndHumidityData()
{
  Serial.println("Collecting temperature data.");

  // Reading temperature or humidity takes about 250 milliseconds!
  float h = dht.readHumidity();
  // Read temperature as Celsius (the default)
  float t = dht.readTemperature();

  // Check if any reads failed and exit early (to try again).
  if (isnan(h) || isnan(t)) {
    Serial.println("Failed to read from DHT sensor!");
    return;
  }

  Serial.print("Humidity: ");
  Serial.print(h);
  Serial.print(" %\t");
  Serial.print("Temperature: ");
  Serial.print(t);
  Serial.print(" *C ");

  String temperature = String(t);
  String humidity = String(h);


  // Just debug messages
  Serial.print( "Sending temperature and humidity : [" );
  Serial.print( temperature ); Serial.print( "," );
  Serial.print( humidity );
  Serial.print( "]   -> " );

  // Prepare a JSON payload string
  String payload = "{";
  payload += "\"temperature\":"; payload += temperature; payload += ",";
  payload += "\"humidity\":"; payload += humidity;
  payload += "}";

  // Send payload
  char attributes[100];
  payload.toCharArray( attributes, 100 );
  client.publish( "v1/devices/me/telemetry", attributes );
  Serial.println( attributes );
}

void InitWiFi()
{
  // initialize serial for ESP module
  soft.begin(9600);
  // initialize ESP module
  WiFi.init(&soft);
  // check for the presence of the shield
  if (WiFi.status() == WL_NO_SHIELD) {
    Serial.println("WiFi shield not present");
    // don't continue
    while (true);
  }

  Serial.println("Connecting to AP ...");
  // attempt to connect to WiFi network
  while ( status != WL_CONNECTED) {
    Serial.print("Attempting to connect to WPA SSID: ");
    Serial.println(WIFI_AP);
    // Connect to WPA/WPA2 network
    status = WiFi.begin(WIFI_AP, WIFI_PASSWORD);
    delay(500);
  }
  Serial.println("Connected to AP");
}

void reconnect() {
  // Loop until we're reconnected
  while (!client.connected()) {
    Serial.print("Connecting to Thingsboard node ...");
    // Attempt to connect (clientId, username, password)
    if ( client.connect("Arduino Uno Device", TOKEN, NULL) ) {
      Serial.println( "[DONE]" );
    } else {
      Serial.print( "[FAILED] [ rc = " );
      Serial.print( client.state() );
      Serial.println( " : retrying in 5 seconds]" );
      // Wait 5 seconds before retrying
      delay( 5000 );
    }
  }
}
arduino_dht_temp_dashboard.jsonJSON
Dashboard configuration
{
   "title":"Arduino DHT22: Temperature & Humidity Demo Dashboard",
   "configuration":{
      "description":"Demo dashboard for sample applications that upload temperature and humidity received from Arduino with DHT22 sensor",
      "widgets":[
         {
            "isSystemType":true,
            "bundleAlias":"charts",
            "typeAlias":"timeseries",
            "type":"timeseries",
            "title":"Timeseries - Chart.js",
            "sizeX":8,
            "sizeY":5,
            "row":0,
            "col":0,
            "config":{
               "datasources":[
                  {
                     "type":"device",
                     "deviceAliasId":"1",
                     "dataKeys":[
                        {
                           "name":"temperature",
                           "label":"Temperature, C",
                           "type":"timeseries",
                           "color":"#2196f3",
                           "settings":{
                              "showLines":true,
                              "fillLines":false,
                              "showPoints":false
                           },
                           "_hash":0.7438679421517123
                        }
                     ],
                     "name":"Arduino Uno Demo Device"
                  }
               ],
               "timewindow":{
                  "realtime":{
                     "timewindowMs":120000
                  }
               },
               "showTitle":true,
               "backgroundColor":"#fff",
               "color":"rgba(0, 0, 0, 0.87)",
               "padding":"8px",
               "settings":{

               },
               "title":"Temperature"
            }
         },
         {
            "isSystemType":true,
            "bundleAlias":"digital_gauges",
            "typeAlias":"digital_thermometer",
            "type":"latest",
            "title":"Digital thermometer",
            "sizeX":4,
            "sizeY":5,
            "row":0,
            "col":8,
            "config":{
               "datasources":[
                  {
                     "type":"device",
                     "deviceAliasId":"1",
                     "dataKeys":[
                        {
                           "name":"temperature",
                           "type":"timeseries",
                           "label":"temperature",
                           "color":"#2196f3",
                           "settings":{

                           },
                           "_hash":0.12513745304517898
                        }
                     ],
                     "name":"Arduino Uno Demo Device"
                  }
               ],
               "timewindow":{
                  "realtime":{
                     "timewindowMs":60000
                  }
               },
               "showTitle":false,
               "backgroundColor":"#000000",
               "color":"rgba(0, 0, 0, 0.87)",
               "padding":"0px",
               "settings":{
                  "maxValue":125,
                  "donutStartAngle":90,
                  "showValue":true,
                  "showMinMax":true,
                  "gaugeWidthScale":0.75,
                  "levelColors":[
                     "#304ffe",
                     "#7e57c2",
                     "#ff4081",
                     "#d32f2f"
                  ],
                  "refreshAnimationType":"<>",
                  "refreshAnimationTime":700,
                  "startAnimationType":"<>",
                  "startAnimationTime":700,
                  "titleFont":{
                     "family":"RobotoDraft",
                     "size":12,
                     "style":"normal",
                     "weight":"500"
                  },
                  "labelFont":{
                     "family":"RobotoDraft",
                     "size":8,
                     "style":"normal",
                     "weight":"500"
                  },
                  "valueFont":{
                     "family":"Segment7Standard",
                     "style":"normal",
                     "weight":"500",
                     "size":14
                  },
                  "minMaxFont":{
                     "family":"Segment7Standard",
                     "size":8,
                     "style":"normal",
                     "weight":"500"
                  },
                  "dashThickness":0.85,
                  "decimals":1,
                  "gaugeColor":"#333333",
                  "neonGlowBrightness":35,
                  "gaugeType":"verticalBar",
                  "minValue":-40,
                  "showUnitTitle":true,
                  "unitTitle":"Temperature C"
               },
               "title":"Digital thermometer"
            }
         },
         {
            "isSystemType":true,
            "bundleAlias":"charts",
            "typeAlias":"timeseries",
            "type":"timeseries",
            "title":"Timeseries - Chart.js",
            "sizeX":8,
            "sizeY":5,
            "row":5,
            "col":0,
            "config":{
               "datasources":[
                  {
                     "type":"device",
                     "deviceAliasId":"1",
                     "dataKeys":[
                        {
                           "name":"humidity",
                           "label":"Humidity, %",
                           "type":"timeseries",
                           "color":"#2196f3",
                           "settings":{
                              "showLines":true,
                              "fillLines":false,
                              "showPoints":false
                           },
                           "_hash":0.37845111848900936
                        }
                     ],
                     "name":"Arduino Uno Demo Device"
                  }
               ],
               "timewindow":{
                  "realtime":{
                     "timewindowMs":120000
                  }
               },
               "showTitle":true,
               "backgroundColor":"#fff",
               "color":"rgba(0, 0, 0, 0.87)",
               "padding":"8px",
               "settings":{

               },
               "title":"Humidity Level"
            }
         },
         {
            "isSystemType":true,
            "bundleAlias":"digital_gauges",
            "typeAlias":"digital_vertical_bar",
            "type":"latest",
            "title":"Digital vertical bar",
            "sizeX":4,
            "sizeY":5,
            "row":5,
            "col":8,
            "config":{
               "datasources":[
                  {
                     "type":"device",
                     "deviceAliasId":"1",
                     "dataKeys":[
                        {
                           "name":"humidity",
                           "label":"humidity",
                           "type":"timeseries",
                           "color":"#2196f3",
                           "settings":{

                           },
                           "_hash":0.3269453210790785
                        }
                     ],
                     "name":"Arduino Uno Demo Device"
                  }
               ],
               "timewindow":{
                  "realtime":{
                     "timewindowMs":60000
                  }
               },
               "showTitle":false,
               "backgroundColor":"#000000",
               "color":"rgba(0, 0, 0, 0.87)",
               "padding":"0px",
               "settings":{
                  "maxValue":100,
                  "donutStartAngle":90,
                  "showValue":true,
                  "showMinMax":true,
                  "gaugeWidthScale":0.75,
                  "levelColors":[
                     "#3d5afe",
                     "#0288d1"
                  ],
                  "refreshAnimationType":"<>",
                  "refreshAnimationTime":700,
                  "startAnimationType":"<>",
                  "startAnimationTime":700,
                  "titleFont":{
                     "family":"RobotoDraft",
                     "size":12,
                     "style":"normal",
                     "weight":"500"
                  },
                  "labelFont":{
                     "family":"RobotoDraft",
                     "size":8,
                     "style":"normal",
                     "weight":"500"
                  },
                  "valueFont":{
                     "family":"Segment7Standard",
                     "style":"normal",
                     "weight":"500",
                     "size":14
                  },
                  "minMaxFont":{
                     "family":"Segment7Standard",
                     "size":8,
                     "style":"normal",
                     "weight":"normal"
                  },
                  "neonGlowBrightness":20,
                  "decimals":0,
                  "showUnitTitle":true,
                  "gaugeColor":"#151c3d",
                  "gaugeType":"verticalBar",
                  "showTitle":false,
                  "minValue":0,
                  "dashThickness":0.85,
                  "unitTitle":"Humidity %"
               },
               "title":"Digital vertical bar"
            }
         }
      ],
      "deviceAliases":{
         "1":{
            "alias":"Arduino UNO Demo Device",
            "deviceId":"{DEVICE_ID}"
         }
      }
   }
}

Schematics

Wiring schema
Rb48tdkqjdfbtewqc5sv

Comments

Similar projects you might like

Control Arduino Uno Using ESP8266 WiFi Module and Blynk App

Project tutorial by Adithya TG

  • 5,254 views
  • 10 comments
  • 18 respects

Connect to Blynk using ESP8266 as Arduino Uno wifi shield

Project tutorial by Nolan Mathews

  • 71,136 views
  • 11 comments
  • 50 respects

WiFi ESP8266 and DHT22 Sensor

Project tutorial by Hernanduino

  • 18,759 views
  • 7 comments
  • 20 respects

ESP8266 ESP-01 Webserver

by Robin

  • 100,367 views
  • 18 comments
  • 131 respects
Add projectSign up / Login