Tutorial #8: Controlling RGB LED onboard Arduino Nano ESP32 via Blynk IoT

Introduction

In this tutorial we will control the RGB LED onboard the Arduino Nano ESP32 via the Blynk IoT Cloud and app. If you just got the Nano ESP32 you are likely interested in making an IoT-related project (IoT = Internet of Things). The famous and now familiar Espressif ESP32 module finds a home onboard the Arduino Nano. Two worlds collided and created this powerful, yet tiny device that makes it super easy for anyone to get going. Add into the mix the Blynk IoT cloud and app and you’ve got all the tool you need to make anything your imagination can come up with. Let’s get going!

Hardware Requirements

All you will need for this tutorial is a computer, a USB-C cable and one Arduino Nano ESP32. There are two versions of this board. One comes with male header pins already soldered, and one comes without headers. Either will work for this tutorial as we will not be wiring any external components. We recommended the following sources:

Software Requirements

We will need the following software for this tutorial.

  1. Download and install the Arduino IDE. When you’ve installed the latest version, make sure to also install the Arduino ESP32 core. Instruction can be found here.
  2. Visit the Blynk IoT website and make an account. Here we list their “getting started” page. There is a free account that allows you two connect up to two devices and use basic widgets on the app. That is all we will need for this tutorial, so go ahead and make an account. Note that you do not necessarily need to install their smartphone app. In fact you can make everything we will make in this tutorial via their website platform. That being said, we are a big fan of their app. So we do suggest you also download their app.

Step 1) Making a Blynk Template (Using their web interface)

We will use the Blynk web interface to make a template. For this step it is assumed that the user has already made an account on Blynk and is able to log in. The purpose of this step is to get the custom BLYNK_TEMPLATE_ID that is used in the Arduino IDE sketch (step 2 below).

  1. Navigate to the Template page. You may see the Quickstart Template already there by default. We will make a new template by pressing “+ New Template”.
  1. Upon pressing “+ New Template” a window will pop up. The user can enter the Name and select the Hardware and Connection Type. If desired a Description can also be entered. These don’t really make any difference and are only used for your own reference.

Upon pressing “Done”, the new Template should appear as shown below. Note that no devices should be connected at this time (but will be in a later step).

  1. Now click into the newly-made template and look near the bottom-right corner in the Firmware configuration for A) the BLYNK_TEMPLATE_ID, and B) the BLYNK_TEMPLATE_NAME. Take note of these as we will use them in a later step. You can simply click on them and this will automatically copy this piece of code.

Step 2) Uploading the Sketch to the Arduino Nano ESP32

Copy the following code into Arduino IDE. Make sure to change the BLYNK_TEMPLATE_ID to the one that you got in the previous step, as well that the BLYNK_TEMPLATE_NAME matches to the Firmware configuration. Go ahead and upload this code to the Nanoe ESP32 micrcontroller. Note that it will not yet work. As soon as the micrcontroller tries to run the line BlynkEdgent.begin(); it will hang. We need to next add the device to the template, which we will do in the next step.

// Controlling RGB onboard Arduino Nano ESP32 via Blynk IoT
// Last Update: Sept 2, 2023
// For support, contact@PTSolns.com

// Resources:
// Arduino Cheatsheeet: https://docs.arduino.cc/tutorials/nano-esp32/cheat-sheet, see section on RGB

// Description
// We will use the onboard RGB LED and control each of their three colors via the Blynk IoT cloud and app.
// Note that the pins of the RGB are active-low, meaning that to turn them ON
, we need to corresponding pinstate to LOW. This is shown in the example sketch below.
// RGB pins:
// Red, r_pin   = 14
// Green, g_pin = 15
// Blue, b_pin  = 16

#define BLYNK_TEMPLATE_ID "INSERT TEMPLATE ID THAT YOU GOT FROM BLYNK"
#define BLYNK_TEMPLATE_NAME "RGBBlynk" // Put any name you like
#define BLYNK_FIRMWARE_VERSION "0.0.1" // Put any version number you like
#define USE_ESP32_DEV_MODULE 
#include "BlynkEdgent.h" 

// Arduino Nano ESP32 has these pins for the onboard RGB LED:
const int r_pin = 14;
const int g_pin = 15;
const int b_pin = 16;

int r_pin_state;
int g_pin_state;
int b_pin_state;

// Upon device power-up, the hardware pin states will be synchronized to whatever the corresponding virtual pin states are.
BLYNK_CONNECTED() {
  Blynk.syncAll();
}

// Update pin states when they are changed on the IoT cloud
BLYNK_WRITE(V0) {
  r_pin_state = param.asInt();
}

BLYNK_WRITE(V1) {
  g_pin_state = param.asInt();
}

BLYNK_WRITE(V2) {
  b_pin_state = param.asInt();
}

void setup() {
  pinMode(r_pin, OUTPUT);
  pinMode(g_pin, OUTPUT);
  pinMode(b_pin, OUTPUT);

  BlynkEdgent.begin();   
}

void loop() {
  BlynkEdgent.run();
  
  if (r_pin_state == 0) {
    digitalWrite(r_pin, HIGH); // HIGH means OFF for the Arduino Nano ESP32
  } else {
    digitalWrite(r_pin, LOW); // LOW means ON for the Arduino Nano ESP32
  }

  if (g_pin_state == 0) {
    digitalWrite(g_pin, HIGH);
  } else {
    digitalWrite(g_pin, LOW);
  }

  if (b_pin_state == 0) {
    digitalWrite(b_pin, HIGH);
  } else {
    digitalWrite(b_pin, LOW);
  }
}

Step 3) Adding a Device to the Template

For this next step, go to the Blynk IoT 2.0 app and press “+ Add New Device”. This option can be found near the top-right by pressing on three horizontal lines as shown below.

From there simply walk though the instructions to connect the device. Some troubleshooting tips:

  • Turn OFF VPN on your smartphone as this might block the connection to be established. Once the device is connected, you can turn the VPN back on and it will continue to work.
  • Make sure that the Nano ESP32 microcontroller is close to the smartphone.

Step 4) Add Widgets

Once the device is successfully added, you should see a block on the main home page of the Blynk IoT 2.0 app with the name “RGBBlynk”, or similar. When you click inside it, it should be empty. Let’s add some widgets. In our case we want to turn ON and OFF the three LEDs of the RGB LED onboard the Arduino Nano ESP32. For this simply project we will add Button widgets and configure them for each of the three datastreams. Looking back at the sketch we uploaded we see that virtual pin V0 is assigned to the Red LED, V1 to Green LED, and V2 to the Blue LED. Once you added a Button widget to the canvas, connect the datastreams and configure as you like. You can play around with these settings and design options. The only configuration that is important to set is in the Settings, to change the Mode to Switch.

Once you’ve added the three buttons and configured them, you might get something like as is shown below. And that’s it! Now when you press any of these buttons (which should act as switches), the corresponding LED onboard the Arduino Nano ESP32 should turn ON or OFF. Give it a try 😀

Contact Us

If you have any questions or suggestions about this tutorial, please feel free to Contact Us.