IoT Part 3: Smartphone Dashboard

IOT Workshop day 3/4

During this workshop you will start to integrate your ESP32 with a smarphone dashboard. At the end of this workshop you should have the following things working:

Blynk dashboard is able to:

  • Controls
  • Button
  • slider
  • value display
  • Receive data from the ESP32
  • Send data to the ESP32
    • ldr
    • dht
    • relais
    • moisture

Install Blynk and read first sensor (DHT)

Install the Blynk app and create an account

In order to monitor and actuate the light level there needs to be an interface. We are going to be using the Blynk app as this primary interface. This app allows you to control and read the I/O of the ESP32.

  • Open the app store on your smartphone and download the Blynk App.
  • Open the app and create a new account. Give your project a name and select the board you want to use. In our case an ESP32 Dev Board. Set the connection type to WiFi. Click Create Project. You will receive an Auth Token by mail, you will need that token later on.

Install the Blynk library in PlatformIO

Go to the library manager and install the Blynk library.

Example Blynk script

Make a new script file and put this code in it. Change the following things:

  • Auth token
  • Wifi network name
  • Wifi password

#include <Arduino.h>
#define BLYNK_PRINT Serial

#include <WiFi.h>
#include <WiFiClient.h>
#include <BlynkSimpleEsp32.h>
#include <DHT.h>

// You should get Auth Token in the Blynk App.
// Go to the Project Settings (nut icon).
char auth[] = "YOURAUTHCODE";

// Your WiFi credentials.
// Set password to "" for open networks.
char ssid[] = "YOURWIFINETWORKNAME";
char pass[] = "YOURWIFIPASSWORD";

// Define all your pins here
#define DHTPIN 32
#define DHTTYPE DHT11



DHT dht(DHTPIN, DHTTYPE);
BlynkTimer timer;

// This function will read the DHT sensor values and send them to the Blynk server
void readDhtSensor()
{
  float h = dht.readHumidity();
  float t = dht.readTemperature(); // or dht.readTemperature(true) for Fahrenheit

  if (isnan(h) || isnan(t)) {
    Serial.println("Failed to read from DHT sensor!");
    return;
  }
  // You can send any value at any time.
  // Please don't send more that 10 values per second.
  Serial.println("Successfully read from DHT sensor!");
  Serial.print("The temperature is: ");
  Serial.println(t);
  Serial.print("The humidity is: ");
  Serial.println(h);

  Blynk.virtualWrite(V1, h);
  Blynk.virtualWrite(V2, t);
}

void setup()
{
  // Debug console
  Serial.begin(9600);

  Blynk.begin(auth, ssid, pass);

  dht.begin();

  // Setup a function to be called every 5 seconds
  timer.setInterval(5000L, readDhtSensor);
}

void loop()
{
  Blynk.run();
  timer.run();
}

Make sure you are using GPIO32 for the DHT sensor. Connect the DHT sensor and upload the script.

Add relevant buttons to Blynk dashboard

Go to your project in the Blynk application on your phone.
Click the + icon on the top right of your screen. Select the Gauge and add it to your project.
image

Set it up like this:


The settings for this widget must be:

  • Use Virtual pin 1
  • Value range is from 0 to 50
  • Label is °C
  • Value will be pushed from ESP

Now add another widget (Gauge) for the humidity on virtual pin number 2. If everything went well you should be able to see the temperature and humidity measured by your ESP32 on your phone.

Toggle LED from the Blynk app

In the previous step we sent some values from the ESP32 to the Blynk dashboard. Now we will try to turn on the LED on the ESP32 from your phone.
To do this you need to add a BLYNK_WRITE() function at the bottom of your code.

BLYNK_WRITE(V3)
{
  if (param.asInt()==1) {
    digitalWrite(ledPin, HIGH);
  }else {
    digitalWrite(ledPin, LOW);
  }
}

At the start of your code add a define for your ledPin

#define ledPin 2

And in the setup add the pinmode

pinMode(ledPin, OUTPUT);

Relay

Use the above example for turning on and off your LED to control your Relay.
Add the following things to your code:

  • Define your Relay pin at the start of your code
  • Set the correct pinmode in you setup
  • Make sure to match the virtual pin in your code with the virtual pin in your app

LDR and Moisture sensor

Make sure to connect the following sensors:

  • LDR
  • Moisture

Try to merge the code you already have for these sensors to the Blynk script you have right now.

Also add a two more gauges in your phone app, match these with the pins in your code.

Great job! You integrated all of your sensors in your phone dashboard. Next week we will automate the system and make it Smart!