Andrew ShvaykaIgor KulikovIgor Khanenko
Published © 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 hours58,270
Temperature Dashboard Using Arduino UNO, ESP8266 And MQTT

Things used in this project

Hardware components

Arduino UNO & Genuino UNO
Arduino UNO & Genuino UNO
×1
ESP8266 ESP-01
Espressif ESP8266 ESP-01
×1
DHT22 Temperature Sensor
DHT22 Temperature Sensor
×1
Breadboard (generic)
Breadboard (generic)
×1
Male/Female Jumper Wires
Male/Female Jumper Wires
×11
Male/Male Jumper Wires
×3
Female/Female Jumper Wires
Female/Female Jumper Wires
×2
Resistor 10k ohm
Resistor 10k ohm
×1

Software apps and online services

Thingsboard

Story

Read more

Schematics

Wiring schema

Code

arduino-dht-esp8266-mqtt.ino

Arduino
#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.json

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

Credits

Andrew Shvayka

Andrew Shvayka

2 projects • 10 followers
Igor Kulikov

Igor Kulikov

2 projects • 2 followers
Igor Khanenko

Igor Khanenko

2 projects • 3 followers

Comments