How to turn Witty Cloud into smart light using Blynk

This tutorial will show how to make an analog of a smart light with remote control from Blynk with only a Witty Cloud board.

Things used in this project

Hardware: Witty Cloud board

Software: Blynk IoT Platform

The story

Tonight, going to the bedroom and stumbling once again on the table, I got the idea to make a smart light that will turn on depending on the light and illuminate my way to the bedroom at night. Since I don't have the right parts yet, I decided to design a smart light using a Witty Cloud board.

If you've ever found yourself in a similar situation or you're just interested in following along with my experience, let's do it together! In this tutorial, we'll create a model of a smart light prototype using the built-in light sensor, the LED, and the RGB LED.

To remotely control our smart light, we'll use Blynk, a platform that will allow us to control the LED and RGB LED using the Blynk Console and iOS/Android app.

What we will learn?

Work with Blynk Console:

• Creating first device using QuickStart
• Creating templates
• Creating datastreams
• Customizing the dashboard
• Working with the Switch widget

Work with Blynk App:

• Customize the mobile dashboard

Write code to work with Witty Cloud:

• Declaring variables
• Controlling the device from the Blynk app or web console
• Reading data from the light intensity sensor
• Changing the intensity of the LED and RGB LED
• Detecting physical key presses

Let's get started!

Work with Blynk Console

In the first part of the tutorial, we'll create our project on Blynk Cloud to control the device remotely. This is simple: we just need to go to https://blynk.cloud/ and create a new account.

After confirming our email, we'll see the Blynk Tour and then the Quickstart to create our first device. We'll use this to create our smart light. To do this, we'll go through all the device settings:

We'll choose the ESP8266 hardware (since we're using the Witty Cloud) and Wi-Fi connection.

Next choose PlatformIO IDE

Install Blynk library

Then enter the data of your Wi-Fi network - name and password

Further on the right we will have a ready-made code for connecting the device to Blynk. We take this code and insert it into the project in PlatformIO.

Creating a PlatformIO project

Download the PlatformIO plugin here.

More info about PlatformIO download and use you can find here.

Create new PlatformIO project. You need to open "Home" and click “New Project”. Add name, choose board WeMos D1 R2, and click “Finish”.

Open Home -> Projects, click “Configure” and check if your configurations are the same:

And go to “Project name” -> src -> main.cpp. This file will contain all our code. Insert here code from Blynk QuickStart (Step 4: Code).

To install the Blynk library for PlatformIO, you need to open "Home" go to the "Libraries" section and enter "Blynk" in the search. After that, select the Blynk library and add it to our project by selecting it from the dropdown list.

Next, we need to upload the sketch to the board. In PlatformIO, you need to click the button ->

If you did everything right, when you click the "Next" button in Blynk Console, confetti will appear and congratulations on creating the device 🎉

Then the device will open and we will need to make a few more settings.

Click on the action menu near the device name and choose "Edit Dashboard"

We get to Quickstart Template.

A device template refers to a set of settings that are passed to devices that belong to the same category or type. When creating a Quickstart device, Blynk automatically creates a Quickstart Template and a Quickstart Device is created based on it.

In fact, a template is just a set of settings, on the basis of which we can create several devices with similar characteristics without setting everything up again. At the same time, the template is not a device, it cannot be launched or controlled by a device from it, these are just configurations for a future device.

Datastreams setup

Let's go to the Datastreams tab. We’ll add 2 Virtual Pin datastreams. Delete existing datastreams as we will be creating new ones. To create new Datastream just click on "+ New Datastream" and select Virtual Pin:

1. Name: SwitchLed, Pin: V0, type: Integer, min: 0, max: 1

2. Name: SwitchRGB, Pin: V1, type Integer, min: 0, max: 1

Great, the datastreams have been created, now we only need to create a visualization of the project. To do this, we go to the Web Dashboard tab. Let's delete existing widgets and add new widgets. We will need two Switch widgets to remotely turn the Led and RGB led on and off.

Next, to connect our widgets with datastreams, we click on the settings icon and add - to the first switch widget we will add a datastream with the name SwitchLed, to the second switch widget SwitchRGB. Click “Save”.

After saving the template, all changes will be applied to all devices made according to this template.

Mobile app setup

And now let's make an application for the mobile to control our device from the phone.

‍Turn on the light remotely with only the phone in hand? No problem!

For this, we need to download Blynk App:

iOS: https://apps.apple.com/us/app/blynk-iot/id1559317868

Android: https://play.google.com/store/apps/details?id=cloud.blynk&pli=1

Next, login into the account you created in the previous steps and open your device.

We can customize the dashboard and fully manage our device in the mobile application. There are also a lot more available widgets and options for customizing how to work with the device. All we need is to add the same widgets as on the Web Dashboard (2 switches) and connect the corresponding Datastreams to them (to the first switch widget we will add a datastream with the name SwitchLed, to the second switch widget SwitchRGB). You do not need to create them again, the application will pull them up from our template itself.

That's all, now we have set up both a web dashboard and a mobile dashboard, and we will be able to control our device remotely both sitting at a laptop and from a phone! Very handy!

Writing the code

Let's move on to the last part of our tutorial and write the code.

Let's go back to our main.сpp file. It already has the code to connect to the Blynk, so we will continue to write the code in the same file. Let's declare the variables and assign them corresponding pins on the board. This information can be found by googling "Pin names" + the name of your board.

So, all variables are announced and we can proceed to write methods. At the moment our code looks like this:

Now let's write two methods that will receive data from Blynk and, when clicking on the switcher, will assign 0 or 1, depending on what the user clicked:

Next, we create a setup method in which we will set the settings for our code.

Now our code looks like this:

Next, we write a method for reading data from the light sensor

Next, we write a method that will change the brightness level of the RGB LED depending on the illumination (The brighter the illumination, the lower the brightness and conversely).

Let's add two methods to check if the button is pressed. If the button is pressed, we change the value of LED and RGB LED.

And here we are at the finish line! Let's add data to the loop method to call our methods.

So, we have finished writing the code. It looks like this in full:

Let's upload it to the board.

Now, let's open our Dashboard and check if the slider widgets work.

Hmm... The first slider works correctly, but the second one doesn't.

First, we created two Datastreams: V0 and V1. Then, in the code, we wrote methods for transferring data there... but no, stop. We wrote in method "V2" instead of "V1". Let's fix this in the code and upload it to the board again.

And now, everything works fine!

Let's check if turning on the LED and RGB LED works when we press the buttons on the Witty Cloud board and click on the Switch widgets in Blynk Cloud:

Yes, everything is working!

Well, we made a smart light prototype with only one board. It was simple and very interesting. Now we can monitor and control it remotely. We can also add Chart widget to display our light intensity in the real time and Image Button widgets for a beautiful visualization, but we will deal with this in the future.