Team Thingsboard: Andrew Shvayka, Igor Kulikov, Igor Khanenko

Published December 12, 2016 © Apache-2.0

Temperature Dashboard Using Arduino UNO, ESP8266 And MQTT

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

BeginnerProtip2 hours82,708

Temperature Dashboard Using Arduino UNO, ESP8266 And MQTT

Things used in this project

Hardware components

Arduino UNO

Espressif ESP8266 ESP-01

DHT22 Temperature Sensor

Breadboard (generic)

Male/Female Jumper Wires

Male/Male Jumper Wires

Female/Female Jumper Wires

Resistor 10k ohm

Software apps and online services

Thingsboard

Story

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

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:

PubSubClient by Nick O’Leary.

WiFiEsp by bportaluri

Adafruit Unified Sensor by Adafruit

DHT sensor library by Adafruit

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:

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

#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 );
    }
  }
}

{
   "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}"
         }
      }
   }
}

Temperature Dashboard Using Arduino UNO, ESP8266 And MQTT

Things used in this project

Hardware components

Software apps and online services

Story

Data flow

ESP8266 Firmware

Thingsboard configuration

Programming the Arduino UNO device

Troubleshooting

Data visualization

Schematics

Wiring schema

Code

arduino-dht-esp8266-mqtt.ino

arduino_dht_temp_dashboard.json

Credits

Andrew Shvayka

Igor Kulikov

Igor Khanenko

Comments

Embed the widget on your own site

Temperature Dashboard Using Arduino UNO, ESP8266 And MQTT

Temperature Dashboard Using Arduino UNO, ESP8266 And MQTT

Things used in this project

Hardware components

Software apps and online services

Story

Data flow

ESP8266 Firmware

Thingsboard configuration

Programming the Arduino UNO device

Troubleshooting

Data visualization

Schematics

Wiring schema

Code

arduino-dht-esp8266-mqtt.ino

arduino_dht_temp_dashboard.json

Credits

Andrew Shvayka

Igor Kulikov

Igor Khanenko

Comments

Related channels and tags