15. Interfaces and Applications

Incidentally, our college module named “IoT” coincided with the dates of the Fab Networking and the Interfaces module. So in this college lecture, we learnt about connecting NodeMCU (ESP8266) wirelessly, and interfacing it with a UI software such as Blynk.

BLYNK Hero video:

Process

On the Desktop: Guage for Potentiometer reading

We followed the steps as per our College Instructor. To start off, go to the Blynk webpage and create an account.

Step 1: You start by creating a new template

Choose the device as ESP8266 as that is what we are usign and the connection type as WiFi

Step 2: Adding Datastreams:

Create Datastreams

Let the Type of Pins be Virtual Pins, and the data type be Integers.

The 3 Datastreams should look like this

The Potentiometer should have a range of 0 to 1023, which corresponds to One Byte, the amount of data an Integer data type can take.
The PWM will be 0 to 255 as it requires the values for the colors.
And finally, the On-Off LED will have just a HIGH or LOW value, i.e, 1 or 0.

Step 3: Adding Widgets

Since we want to connect the Potentiometer to Gauge on the Desktop so that it takes the readings of the Potentiometer, we will do the following:

Web Dashboard> drag and drop the gauge widget

Click on the widget and Choose Datastream as the one assigned to it

Gauge widget settings. Choose the corresponding Datastream

Widget is set up

Step 4: Creating a New Device:

Click on New Device +

Choose “from Template”

Create new device

Device created for Potentiometer

Copy the Template ID, Template Name, and Authtoken

If you miss this dialogue box, go to Dev tools to get the Device config and copy it to clipboard:

Step 5: Blynk Code:

Install the Blynk library on the Arduino IDE

Blynk code. Replace the wifi and password, and the device details:

On the App: LED Button and Slider for PWM

Once you install the Blynk app, you will see your existing device there. Click on it. It will take you to the widgets section.
Now here, click on the Developer mode (Tool Icon) on top right. This way you can add widgets.

Now, in the Dev mode, click on the + icon to add widgets. Choose from the list of widgets. For this assignment, I have used the slider and the button.

Click on the widget, it takes you to details of the widget. Here, you will select the Datastream you had initially provided to widget when making the Template. I also switched the Button’s mode to Switch instead of Push.