lucstechblog: Blynk part 2: Sending data to Blynk

For an index to all my stories click this text.

This is part 2 in the series about Blynk. If you have no experience with Blynk please read the first part first. This will tell you what Blynk is, how to install it on your Phone or tablet and how to install the software on your microcontroller. You can find the first part here:

http://lucstechblog.blogspot.com/2021/03/blynk-part-1-starting-with-blynk.html

In the first part I connected a led to the ESP8266 and controlled it with Blynk.
Let's make things a bit more complicated. Let's dim the led.

On the top right side of the Blynk app screen there is a square. Press on it and it will change to a triangle. When the square is visible the app is running. When the triangle is visible the app is in edit mode. And that is what we want now.

Press on the + and a list of all widgets will be shown. Choose a slider.

Long press the slider and move it across the screen to an empty place. At the ends there are dots. With the dots you can enlarge the slider. Alter it to your liking.

Click on the slider access the settings page for it..

Click on PIN to set the pin to which this slider is attached.
On the bottom on the screen you can choose for a real pin (Digital on the ESP) or a virtual pin. Choose the Digital pin and attach it to gp14.
GP14 is where the led is connected on our ESP8266. And yes: both the slider as the button which is already present are connected to the same led.

I renamed the slider to "Fade the led"
You can also alter the number of steps. I left the numer of steps as it is from 0 to 1023.

Now run the program again by pressing on the triangle on top of the screen.

And this is how the screen looks completed.

The good part is that we do not have to alter anything at the ESP8266 side. The Blynk library takes care of all basic fuctions. Just try moving the slider and you will see the led fading more or less.

Adding a button to the ESP8266

Let's make things a bit more complicated. Let us add a button to the ESP8266 and show its state on our Blynk screen.

First thing to do is to add an indicator for the button to our Blynk screen. So open the screen editor again by pressing on the square at the top of your screen so it is changed into an arrow again.

Press + and add a LED

Long press on the led widget and move it to the right. Then enlarge it so it is as big as the button.

Change the PIN in Virtual V1.

Change the color to any color you like. I choose red. You can do that by pressing on the dot next to the name of the led. And just like we altered the name of the button I also altered the name of the led in ESP8266 Led. Name it like you want as for example: button, door sensor, drawer or whatever you are going to build with it.

We have now created a led on the Blynk screen which is connected to a virtual pin.

Virtual pins

The Blynk APP has no real input pins like an ESP8266, ESP32 or Arduino has. Therefore Blynk's makers introduced the virtual pins concept.

In your ESP8266, ESP32, Arduino etc program you can write data to such a virtual pin. The Blynk app receives the data and connects it to the virtual pin in the APP. In the APP the virtual pin is connected to a led on the screen, or a graph (which we will see later on) or any of the other output widgets.

There are 255 virtual pins available in each project. So we can send data from 255 sensors to 1 Blynk project.......

The ESP8266 program

We are using the same breadboard setup as in the first part in this series. So refer to that for building your hardware setup.

#define BLYNK_PRINT Serial

#include <ESP8266WiFi.h>
#include <BlynkSimpleEsp8266.h>

// You should get Auth Token in the Blynk App.
char auth[] = "YOUR TOKEN HERE";

// Your WiFi credentials.
char ssid[] = "YOUR ROUTERS NAME";
char pass[] = "PASSWORD";

const int button = D6;

WidgetLED led1(V1);

BlynkTimer timer;

void buttonLedWidget()
{
    if (digitalRead(button) == LOW) 
      {
      led1.on();
      } 
    else 
      {
      led1.off();
      }
}

void setup()
{
  Serial.begin(9600);

  Blynk.begin(auth, ssid, pass);

  pinMode(button, INPUT);

  timer.setInterval(500L, buttonLedWidget);
}

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

As usual I go over the program to make clear what the code does.

#define BLYNK_PRINT Serial

#include <ESP8266WiFi.h>
#include <BlynkSimpleEsp8266.h>

// You should get Auth Token in the Blynk App.
char auth[] = "YOUR TOKEN HERE";

// Your WiFi credentials.
char ssid[] = "YOUR ROUTERS NAME";
char pass[] = "PASSWORD";

This is the same as in the previous story. The libraries are loaded. Put your authentification token in where it says so and fill in your routers credentials.

const int button = D6;

The button is attached to D6 on the ESP8266 with a pull-up resistor.

WidgetLED led1(V1);

Here Blynk is told that a widget exists that is a led. We call it led1 and it is attached to V1 (virtual pin 1) in the app.

BlynkTimer timer;

A timer is activated and called timer......

void buttonLedWidget()
{
    if (digitalRead(button) == LOW)
      {
      led1.on();
      }
    else
      {
      led1.off();
      }
}

This function is called by the timer activated in the setup.
The code reads the state of the button and if the putton pin is LOW the button is pressed and led1.on() is activated. This puts the led in the Blynk app ON.
If the button pin is HIGH the button is not pressed and led1.off() is activated. This keeps the led in our Blynk app OFF.

void setup()
{
Serial.begin(9600);

Blynk.begin(auth, ssid, pass);

pinMode(button, INPUT);

timer.setInterval(500L, buttonLedWidget);
}

In the Setup() the serial monitor is activated. The Serial Monitor will show in its output wether the connection with the Blynk server succeeded. So you have some kind of feedback that shows what is going on.

Next Blynk is started with the authentification code and your routers credentials so an internet connection with the Blynk server can be established.

The pin to which the button is attached is defined as an input pin.

And lastly the timer is set. The interval is set at 500 which makes the timer run the buttonLedWidget routine every half second.

This results in the program testing two times per second if the button is pressed or not. And the state of the button is then send to V1 (virtual pin one) in the Blynk app in which the led on the APP's screen is set on or off.

The concept of virtual pins might be confusing in the beginning but the more you work with them the more you will get the hang of it.

Sending data to your Blynk app

One last step is to send data from the ESP8266 to Blynk. I am going to send random figures but you can attach all kinds of sensors like a Dallas DS18B20 thermometer, LDR, potmeter, flexsensor or whatever you like.

We are going to make all kind of visual representations of the random data on the Blynk screen. Lets start with a gauge.

First put the app in editing mode by clicking on the square at the top-right part on your screen. Then press + to add another widget.

From the display section choose the Gauge.

The Gauge appears on the edit menu. Long press it to move it to the position you want it and alter its size to your liking. Then click on it to alter its settings.

Just as with the other widgets Alter its PIN and this time into V2. I altered the values to be displayed in minumum 0 and maximum 20. I choose the large text size and altered the color into yellow

And there it is.

Now we need to alter the ESP8266 software to send random figures to Blynk.

ESP8266 program a with led, button and randon values.

#define BLYNK_PRINT Serial

#include <ESP8266WiFi.h>
#include <BlynkSimpleEsp8266.h>

// You should get Auth Token in the Blynk App.
char auth[] = "YOUR TOKEN HERE";

// Your WiFi credentials.
char ssid[] = "YOUR ROUTERS NAME";
char pass[] = "PASSWORD";

const int button = D6;
int randomnr;

WidgetLED led1(V1);

BlynkTimer timer;

void buttonLedWidget()
{
    if (digitalRead(button) == LOW) 
      {
      led1.on();
      } 
    else 
      {
      led1.off();
      }
}

void sendrandom()
{
  randomnr = random(0, 20);
  Blynk.virtualWrite(V2, randomnr);
}

void setup()
{
  Serial.begin(9600);

  Blynk.begin(auth, ssid, pass);

  pinMode(button, INPUT);

  timer.setInterval(500L, buttonLedWidget);
  timer.setInterval(1000L, sendrandom);

  randomSeed(analogRead(0));
}

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

This is the same program as the previous one with just some small changes.
I added another timer in setup() which calls the sendrandom routine.
And I added the sendrandom routine which sends a random value to Blynks V2.

Press the arrow button on the Blynk screen to activate the screen, and presto there is a Gauge that changes its value every second.

Now let's add some more displays for the same data.

I added 3 more widgets. The first is a Value Display, the second is a Horizontal Level and the third is a Superchart. On each I altered the PIN setting to V2 so they all give the same value. I also altered the color and texts. You can change them to your own liking.

Going further.

There are many possibillities opening here. I did not even cover a tenth of the available widgets.

Using the buttons you can switch leds but also relays on and off.
Using the leds on the Blynk APP you can have a visual feedback on door sensors, PIR sensors, your 3D printers filament sensor etc etc etc.

There is a joystick widget. With that you could build a remote controlled car. The ZEGBRA widget can set the color of led strips. The Gauges and text widgets can display temperatures, LDR values and also the values from your ESP's analog inputs.

There are numerous widgets and a lot of examples in the Arduino IDE and in the Example Code Builder that was discussed in the previous article.

Just use your imagination and start experimenting.

Running out of energy.

As we were adding more and more widgets to our screen the energy is getting lower and lower. At a certain moment there is not enough energy left to put more widgets to your screen. For most projects the amount of energy you are granted is enough. But for large projects it is not.

An option is then to buy energy from Blynk. This is one way how the Blynk company earns money to keep this service going. There is however another option which will also cost some money but gives you unlimited energy. That is by running your own Blynk server. And that is what we are going to do in a follow-up story.

So till next time.
Have fun

Luc Volders

Friday, April 2, 2021

Blynk part 2: Sending data to Blynk