The Cairo Mini Desk Gadget 01

An open-source, ESP32-based YouTube stats monitor that utilizes the Google API to provide creators with a dedicated hardware dashboard for their channel’s growth. The gadget features a custom GUI developed in EEZ Studio and LVGL and is fully documented for anyone looking to tinker with digital fabrication and embedded systems.

Meet The Cairo Mini Desk Gadget 01

The YouTube Stats Desk Gadget 01 is a 3D-printable ESP32-powered dashboard designed and fabricated entirely from scratch. It merges embedded systems with refined UI design, utilizing a 1.3-inch IPS SPI display, a custom interface built with EEZ Studio, TFT_eSPI library, and LVGL. Integrated WiFi to track live channel analytics via the Google YouTube API. From the internal electronics to the visual layout, every component was thoughtfully developed to balance technical performance with a clean, expressive desk presence.

Open Hardware for Creators. Staying true to open-source values, all code, design files, and project resources are shared openly for anyone to edit, customize, or rebuild. Whether you’re a developer, maker, or fellow content creator, this project invites you to explore the intersection of IoT and digital fabrication while experiencing the satisfaction of building a fully functional connected device from the ground up.

Parts List

Below you can find all the parts that I used to build the Cairo Mini Desk Gadget 01. You can easily print, export, or open on your computer!

We are editing this file frequently to make sure that it’s always up-to-date and to make it easier for you to build the Cairo Mini Desk Gadget 01 on your own. Don’t worry, we made a full build guide for you to follow. Find it at the end of this page

Source Files

Below you can download the STL files. You can use those files to 3D print the Cairo Mini Desk Gadget 01 parts. The material/settings I use to print them: PLA+ / 20% Infill / 0.2mm layer height.
If you are going to order or manufacture them on your own, just simply send those files to any makerspace or a fab lab with an FDM 3D printer machine. All STL files are in mm.

We are always amazed by the community builds! We are encouraging You to make edits and fork our design. Here you can download the STEP file of the Cairo Mini Desk Gadget 01.

Here is an Arduino code ino file for the ESP32 dev board that you can upload to your Cairo Mini Desk Gadget to get it working. This Arduino program utilizes the built-in WiFi on the board to communicate with the Google YouTube API to retrieve your channel stats and display them on the OLED Display.

It’s just a base code. Feel free to customize it if you need. The possibilities are endless!

Inside the Arduino C program, you have to add this information:

• SSID: the name of your WiFi network.
• Password: the password of your WiFi network.
• API_KEY: Your Google Cloud API key token. It’s a unique key. Don’t share it with anyone. You will have to create a new project on Google Cloud, then go to “Enable API & Services”, search for “YouTube API”, select YouTube Data API v3, enable it, then create an API key credentials, copy the created key, and put it in your Arduino program.
• CHANNEL_ID: It’s your unique YouTube channel ID. To get it, go to your YouTube channel from your browser, open YouTube Studio, open settings, open the channel tab, then select the advanced settings tab, then select “Manage YouTube account” under the other settings section, then select advanced settings, lastly copy your channel ID and paste it in your Arduino program.

To be able to upload the Arduino code to your Cairo Mini Desk Gadget. You have to install some libraries: the TFT_eSPI library, the LVGL library, the YoutubeApi library, the ArduinoJson library, and any other libraries you asked to install when you upload your code.

Here you can download the TFT_eSPI config file for the OLED display ST7789 SPI 1.3 inch 240px*240px and the wiring diagram for the device.

To design the GUI for the ESP32 dev board, I used the EEZ Studio. It’s an open-source software that you can freely download and use to tinker with the Cairo Mini Gadget GUI!

Donations

Donations are totally optional and not necessary, but greatly appreciated!

Build Guide

Gallery

The post Cairo Mini Desk Gadget 01 appeared first on Make Some Stuff.

Ever asked how to control your home light system wirelessly over the Internet from any place in the world?! in this step-by-step tutorial we will learn how to do that.

Used Components

Used Software

• Autodesk Eaglecad (Optional).
• Firebase Database.
• Python Editor (Any Editor will work fine).

Introduction

Today, we will learn how to control any RGB LED Strip ambient light wirelessly over Wifi using a custom-built Andoird application connected with the awesome Raspberry Pi board through the Firebase database.

To build this project we need to deal with some stuff like how to build an android mobile app, how to build a firebase database server, how to connect the raspberry pi and the android app together through firebase, how to take different actions based on the incoming data, some power management, electronics Wiring, …
But yo hold on! Don’t worry we will cover all these topics in detail in today’s tutorial. So, bear with me and I promise it will be worth it.

Project Overview/Features

Simply, today we will build a smart device that allows the user to control his/her home ambient lighting system wirelessly over Wifi using any android smartphone, our project is divided into four main parts

• Android mobile application.
  the mobile app is the control panel which the user will interact with to send his/her commands to the lighting system.
• Database.
  is the global server which acts as a postman who takes mails from one person to deliver it to someone else. Firebase database will receive some data from the mobile app and send it to the raspberry pi to take some actions like changing the LED strip light intensity or light color, and other many stuff.
• Electronic and control circuit.
  the control circuit will be based on the raspberry pi board which running a python script reading the incoming data from the firebase database and according to these data will take some different actions.
• Power management.
  it’s the most crucial part, it’s the part which responsible for providing the device with the necessary power to operate properly without damages.

How does the project work?

Simply, the mobile app and the raspberry pi board are connected to the same firebase database. this database saves the data which comes from the mobile app and syncs it with the raspberry pi board in milliseconds, according to these data the raspberry pi board will take some specific actions like turning on the light, changing its brightness, and so on.

Control Three LEDs brightness using GPIO PWM

To control the RGB LED Strip light brightness you need to be familiar with the PWM technique in the raspberry pi world and how to use it. So, let’s start by a simple one and start controlling some normal 5mm LEDs brightness to get familiar with the PWM technique. As I promised you at the beginning of the tutorial, we will start it from scratch to understand every part of the project.

PWM stands for “Pulse Width Modulation” which is used to generate analog values using a digital technique. PWM is usually used to control LEDs brightness, DC Motor speed control, Servo motor rotation angle and that happens by outputting some variable voltage level.

But as we all know that the RPi and any computer is entirely digital system. But at the same time, we need to generate some analog signals from it. So, we need to find a way to convert that digital output signal to an analog output signal. Here comes the PWM technique!

Most of the devices around us are responding relatively in the world of electronics slowly to the signal that they are getting. So, let’s take a normal DC motor as an example, let’s say that we need to run this DC motor at its half speed. So, we need to give it half of its voltage to run at half of its speed. Basically, we are only capable of giving a 3.3V(logic 1) or 0V (logic 0) we can’t give value in between because it’s a digital system as we said before. But here comes the PWM role to modulate the signal up(3.3V) for half the time and down(0V) for half the time with a square wave which is called the duty cycle. that process happens very very rapidly and the motor can’t respond instantaneously to the change of the voltage so it takes some time to accelerate and decelerate which results, the motor averaging the voltage to something near 1.6V and will run at half of its speed. And you can change the motor speed by changing the duty cycle value.

If we take a normal LED as an example we will do the same previous process applying PWM, but because the LED is a simple diode it responds fairly quickly (faster than the motor) to the change of the signal, so your eyes as a human will make the averaging thing. As a result, you will see the LED changing its brightness.

• Period: It’s the sum of the HIGH(3.3V) time and the LOW(0V) time.
• Duty Cycle: Its the percentage of time where the signal was HIGH(3.3V) during the time of period.

Enough Theory! Let’s make some stuff. Let’s take a look at the wiring diagram.

Wiring Diagram

The wiring diagram is very simple, connect each LED on a different PWM pin

The raspberry pi has two different schemes in numbering its GPIO pins. you can use either pin numbers(BOARD) or the Broadcom GPIO pin numbers(BCM). You can only use one numbering scheme in each program.

GPIO Board: Referring to the pin by its number of the plug, the pin number on the physical board which printed on it. Example: PIN#1, PIN#2, …..
GPIO BCM: Referring to the pin by its “Broadcom SOC Channel” number, these are the numbers after the GPIO word. Example: GPIO12, GPIO19, ….

Neither way is wrong, both ways are good and work well without any differences. You have to pick the one which you feel comfortable more with.

The Raspberry Pi 3 Model B has two PWM channels (PWM0, PWM1) each channel has two different GPIO PWM pins available for use.

These three PWM pins GPIO12, GPIO 13, GPIO19 are used by the A/V output audio jack. So, if you don’t need to use the A/V audio jack in your project, these three GPIO PWM pins will be free and available to get used. But you can’t use the A/V output Audio jack and these PWM pins at the same time. In today’s project, we don’t need to use the A/V audio jack so all the PWM pins will be free and available for us to use.

Code

import RPi.GPIO as GPIO             #import the raspberry pi GPIO library, to be able to use them.
from time import sleep              #import the sleep library, which responsible to do the timing stuff.


redLED = 18				#red LED connected on PWM pin GPIO18
blueLED = 12            #blue LED connected on PWM pin GPIO12
greenLED = 19           #green LED connected on PWM pin GPIO19

GPIO.setwarnings(False)			#disable warnings
GPIO.setmode(GPIO.BCM)	        #set pin numbering system to the (Broadcom chip channel numbering).

GPIO.setup(redLED,GPIO.OUT)     #set the red LED pin(GPIO18) to an output pin.
GPIO.setup(blueLED,GPIO.OUT)    #set the blue LED pin(GPIO12) to an output pin.
GPIO.setup(greenLED,GPIO.OUT)   #set the green LED pin(GPIO19) to an output pin.

red_pwm = GPIO.PWM(redLED,1000)	       	      #create PWM instance with 1000Hz frequency.
blue_pwm = GPIO.PWM(blueLED,1000)             #create PWM instance with 1000Hz frequency.
green_pwm = GPIO.PWM(greenLED,1000)           #create PWM instance with 1000Hz frequency.

red_pwm.start(0)				              #start red LED PWM pin with 0% initial Duty Cycle (OFF).
blue_pwm.start(0)                             #start blue LED PWM pin with 0% initial Duty Cycle (OFF).
green_pwm.start(0)                            #start green LED PWM pin with 0% initial Duty Cycle (OFF).

print("AH Shit! Here we go again! Press CTRL+C to exit")    #Take Care, Meme LORD.

try:
    while True:                                         #the start of the actual program.
        for duty in range(0,101,1):                     #imolement a "for loop" responsible for increasing the red LED light brightness.
            red_pwm.ChangeDutyCycle(duty)               #provide duty cycle in the range 0-100.
            sleep(0.01)                                 #wait 0.01 sec. between each iteration.
        sleep(0.5)                                      #wait 0.5 sec. after the "for loop" is done.

        for duty in range(100,-1,-1):                   #implement a "for loop" responsible for decreasing the red LED light brightness.
            red_pwm.ChangeDutyCycle(duty)               #provide duty cycle in the range 100-0.
            sleep(0.01)                                 #wait 0.01 sec. between each iteration.
        sleep(0.5)                                      #wait 0.5 sec. after the "for loop" is done.
		
        for duty in range (0, 101, 1):                  #repeat the previous logic but this time with the blue LED.
            blue_pwm.ChangeDutyCycle(duty)
            sleep(0.01)
        sleep(0.5)

        for duty in range (100, -1, -1):                #repeat the previous logic but this time with the blue LED.
            blue_pwm.ChangeDutyCycle(duty)
            sleep(0.01)
        sleep(0.5)

        for duty in range(0,101,1):                     #repeat the previous logic but this time with the green LED.
            green_pwm.ChangeDutyCycle(duty)
            sleep(0.01)
        sleep(0.5)

        for duty in range(100,-1,-1):                   #repeat the previous logic but this time with the green LED.
            green_pwm.ChangeDutyCycle(duty)
            sleep(0.01)
        sleep(0.5)

except KeyboardInterrupt: 		# If CTRL+C is pressed, exit cleanly:
    red_pwm.stop() 			    # stop red PWM
    blue_pwm.stop()             # stop blue PWM
    green_pwm.stop()            # stop green  PWM
    GPIO.cleanup() 	            # cleanup all GPIO

Code Explanation

The code is pretty simple and straightforward, first, we need to import two important modules to allow us to use the raspberry pi GPIO pins. Also, import the time module that will make the timing work for us. without importing this module you will not be able to use the sleep() method.

import RPi.GPIO as GPIO
from time import sleep

then we need to initialize three variables called redLED, blueLED, greenLED referring to the three PWM pins that we will use to control our LEDs. Yeah as you noticed we are using the GPIO BCM numbering scheme.

redLED = 18
blueLED = 12
greenLED = 19

Then we need to set the numbering scheme of raspberry pi pins to “GPIO BCM”, then set all the three pins as output pins.

GPIO.setmode(GPIO.BCM)

GPIO.setup(redLED,GPIO.OUT)
GPIO.setup(blueLED,GPIO.OUT)
GPIO.setup(greenLED,GPIO.OUT)

create three PWM instances(instance for each pin) red_pwm, blue_pwm, green_pwm with 1000Hz frequency that will help us to generate the PWM signal. After that, we need to set the initial state of these pins to 0% duty cycle which means that the three pins will be OFF at the beginning of the program.

red_pwm = GPIO.PWM(redLED,1000)
blue_pwm = GPIO.PWM(blueLED,1000)
green_pwm = GPIO.PWM(greenLED,1000)

red_pwm.start(0)
blue_pwm.start(0)
green_pwm.start(0)

Here is the fun part! inside the while loop we write the set of commands(program) that we need to keep executing forever until we force-stop it.

inside the while loop implement a “for loop” it’s initial value 0, at every iteration it will increment by 1 until it reaches 100. This for loop responsible for increasing the red LED light brightness.

while True:                                       
    for duty in range(0,101,1):
        red_pwm.ChangeDutyCycle(duty)
        sleep(0.01)
    sleep(0.5)

The second for loop it’s initial value 100, at every iteration will decrease by 1 until it reaches 0. this for loop is responsible for decreasing the red LED light brightness.

    for duty in range(100,-1,-1):
        red_pwm.ChangeDutyCycle(duty)
        sleep(0.01)
    sleep(0.5)

then repeat the previous logic with the remaining two LEDs. After finishing your code, close and save it, run it by writing python fileName.py in the terminal.

After running it, It’s expected to see this sentence got printed on the terminal AH Shit! Here we go again! Press CTRL+C to exit then the three LEDs light brightness will start to increase and decrease.

I will assume that you did that and it’s working fine with you. VOILA! Officially you are now promoted to the next level. Let’s make it more interesting and control the beefy RGB LED Strip.

Control RGB LED Strip Lighting

Actually, controlling an RGB LED it’s not very different from controlling a normal LED. RGB LED means red, green and blue LED which combines all these three LEDs in one combo. with these three different colors, you can produce almost any color by mixing them with different intensities. To adjust LED intensity we use the PWM technique.

For example, to generate a pure red color, we need to set the red LED to the highest intensity and the green, blue to the lowest intensity. To generate a white color we have to set all the three LEDs to the highest intensity. And By adjusting the intensity of each LED you will generate a new color.

RGB LED Strip pinout

There are two main types of RGB LED strips. The common anode, and the common cathode. In the common anode RGB LED strip, the three LEDs share the same positive lead (Anode), and in the common cathode RGB LED strip, the three LEDs share the same negative lead (Cathode). As a result of that, the RGB LED strip has four leads, one for each LED (red, green, blue) and one common anode or common cathode.

The RGB LED strip that we will use today is Common Anode.

Power Management

Before we connect the RGB LED strip with raspberry pi we need to ask ourselves, Does the raspberry pi board able to provide the beefy RGB LED strip with the needed power to operate properly? The short answer is, of course not.

If you are a math nerd let’s do some calculations. we need to know how much current our RGB LED Strip is going to draw. each RGB cell contains three LEDs(red, green, blue) each LED in the cell draws 20mA at full intensity. So, each RGB cell will draw a current of total 60mA at full intensity, the RGB LED Strip that we are using today contains 20 cells/one meter, and we have a 4-meter long strip. So, Which means that the total drawn current at maximum intensity is equal to:
4(Meter)*20(cell/meter)*60(mA) = 4800MA.

this amount of drawn current will vary depending on the intensity of the LED brightness that you are working with, but we made the calculations at the highest values to work freely and be on the safe side. Now we need a power source that can provide us with those 4.8A at 12V.

The best option I found for that job, is a power supply/converter that converts an AC power to DC, the power supply/converter that we will use today offers 5A at 12VDC which is exactly what we need.

The Power Supply Connections

A power supply is an electrical device that converts one type of electrical type to another. In our case, we will convert a 220VAC to 12VDC.

From the left side, the first three terminals are the input from the AC power source:

• L: life.
• N: neutral.
• GND: earth.

The last four terminals are the 12VDC output, the first two terminals are the GND and the second two terminals are positive.

• V-: GND.
• V+: positive.

And we connect them as follow:

• Brown wire (AC Power source): L (Power supply).
• Blue wire (AC Power source): N (Power supply).
• Green wire (AC Power source): Earth (Power supply).

And the red, and the black wire are the 12VDC output:

• Red Wire: 12VDC Output (V+).
• Black Wire: GND Output (V-).

Wiring Diagram

As we stated before, the RGB LED strip needs 4.8A at 12VDC to operate properly. But at the same time, the Raspberry pi board can’t provide all that power to the RGB LED strip. So, we need a component that can take orders from the Raspberry pi board but provide power from the external 12VDC power supply.

Here comes the TIP122 Darlington transistor, this transistor can drive high power loads by using a small amount of current and voltage.

The TIP122 transistor can handle current up to 5A(Continous) and 8A(Peak) which satisfies our needs.

TIP122 Transistor Pinout

TIP122 Transistor acts like a switch that can drive loads with higher electrical requirements, so by a small amount of current and voltage can drive a high power load, at this example we gonna use the TIP122 which completes the LED strip circuit with the 12-volt power supply, the TIP122 has three legs(base, collector, emitter). The collector will get connected to the load(LED strip), and the emitter will get connected to the ground. And by a small amount of current on the base pin, will close the circuit between the collector and the emitter.

Make it More Professional

What about transferring our breadboard circuit to a professional printed circuit board (PCB) to make our project more rigid and solid.

Raspberry Pi HAT files (PCB)

I designed the project circuit using Autodesk Eagle software. all the PCB files are open-source you can access it from that link. We love open source

You can order your own PCB From PCBWay company these guys have a very good reputation in this field and they ship to more than 170 countries around the world with reasonable prices. all you have to do is to open the project PCB files link and click “Add to cart”. That’s it!

This PCB can get mounted over the Raspberry pi board easily as a normal raspberry pi HAT, it will organize your wiring and will make your project easier to debug.

With that slide switch, you can turn on and off the RGB LED Strip power.

Raspberry Pi Enclosure

I designed a laser cutting enclosure using Autodesk fusion 360, feel free to download the DXF files from that link.

Code

#We will use the same previous Code without any changes.

Code Explanation

The same previous explanation since we are using the same code with the same logic.

After finishing the wiring and your code, close and save it, Run your program by writing python fileName.py in your terminal. Like the last example, After running your program, It’s expected to see this sentence got printed on the terminal AH Shit! Here we go again! Press CTRL+C to exit then the three LEDs light brightness will start to increase and decrease.

After getting sure that everything is working as expected, let’s level it up and build our firebase database.

Building The Firebase Database

The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON and synchronized in realtime to every connected client. If you want to know more check out this link.

As we stated before, the realtime database will receive some data from the mobile app based on the user interaction and will sync it with the raspberry pi in milliseconds. So, to be able to use firebase you need to sign in using your normal Gmail account. then go to your project console to create a new project.

First things first, you need to create a new project in your console.

Then, give a name to your project

We don’t need to set up google analytics now

After creating your project successfully, your project overview page should look something like this. From the left menu, We need to select “Database”

We will choose “Realtime database” and click the “Create Database” button

After that, select “Test Mode” and click “Enable”

Now, your Realtime database should look something like this.

After building the Realtime Database, we need to build the mobile app that will send the data to the firebase database.

Building The Android Mobile APP

Now we need to build the mobile app that the user will use to control the RGB LED Strip from, we used the amazing tool the “MIT APP Inventor” to build it. It’s fast and very easy to use.

App inventor lets you develop android mobile applications using a web browser and a physical mobile phone or just the emulator, the MIT app inventor saves your projects in their clouds to keep tracking your work

First, you need to go to the MIT app inventor official website and login with your Gmail account, then press on the “create apps” button, then start building your mobile app. Easy HA!

To build your mobile app using the app inventor tool, you should deal with two main parts

• The design of the app.
• The programming of the app.

The App Design

The mobile application consists of Six buttons to control the lighting mode(Mode One, Mode Two, …), three sliders to control each LED color lighting intensity, and a button named “power button” to control the state of the LEDs(turning it ON or OFF). The most important part here is to add the “firebaseDB” client components to the app to allow us sending data to our firebase database project that we created before.

After adding the “FirebaseDB” component to the app, we need to put our created Firebase database URL to the mobile application “FirebaseDB” component to specify where does the data will get saved, the Firebase database URL can be found here.

The Programming Of The App

After designing the interface of our app we need to give it life, adding some functionality to each button and slider.

Let’s take the “Mode One” button as an example to see how the logic works. When the user clicks on the “Mode One” button it will send the value “mode1” with the tag “lightMode” to the firebase database project that we created before. and if we opened the firebase database dashboard page we will see that new entry got added to our database. Congrats!

But, when the user clicks the “Mode Two” button the “lightMode” tag value will get updated to the new value which in this case will be “mode2”.

The same logic applies to the remaining buttons, when the user clicks on a button, a specific piece of data will get sent to the database depending on what button the user clicked.

Building the app APK file

download the following .aia file and import it to your “MIT app inventor” account projects dashboard, it will open up the project source, don’t forget to update the “FirebaseURL” to your firebase project database URL.

You can download the .aia source file from that link.

Then build the app APK file and download it to your computer, then send the APK file to your mobile and install it.

Programming The Raspberry Pi

After building the mobile app and sending data successfully from it to the database, the raspberry pi will read that data from the “firebase database” and according to the read data, it will take different actions like changing the lighting mode or increasing the brightness and so on.

Installing The Pyrebase Module

Before we start writing any code, we need to install the “Pyrebase” python module on the raspberry pi board to allow us to communicate with the “Firebase Database” servers. Because by default the “Firebase” doesn’t support the “Python Programming Language” So, some cool guys wrote a python module to allow the python developers to use “Firebase” easily. If you are a Python NERD you can check out the module documentation on their Github page.

We will use “pip” to install the “Pyrebase” module. So, check to see if you currently have pip installed by running the command in the terminal.

pip --version

If it is not currently installed, you can install pip by running the following command

curl https://bootstrap.pypa.io/get-pip.py | python

After getting sure that we have “pip” on our raspberry pi board, we will start installing “Pyrebase” by running this command, and don’t worry if it takes some time.

sudo pip3 install Pyrebase

After finishing installing the “Pyrebase” module, we are now ready to write the final python script that will read data from the “Firebase database” to take some different actions according to that data.

Code

#OK!
#Author: Ahmed Ibrahim
#Date: 2/10/2019
#Website: makesomestuff.org

import RPi.GPIO as GPIO                                                                         #import the RPi.GPIO module to allow us use the board GPIO pins.
import pyrebase                                                                                 #import the pyrebase module which allows us to communicate with the firebase servers.
from time import sleep                                                                          #import the time modulde to allow us do the delay stuff.

config = {                                                              #define a dictionary named config with several key-value pairs that configure the connection to the database.
  "apiKey": "ENTER YOUR API KEY",
  "authDomain": "ENTER YOUR AUTH DOMAIN URL",
  "databaseURL": "ENTER YOUR DATABASE URL",
  "storageBucket": "ENTER YOUR STORAGE BUGET URL"
}

firebase = pyrebase.initialize_app(config)                              #initialize the communication with the "firebase" servers using the previous config data.

redLED = 12                                                                                    #the "redLED" variable refers to the GPIO pin 12 which the red LED is connected on.
blueLED = 19                                                                                   #the "blueLED" variable refers to the GPIO pin 19 which the blue LED is connected on.
greenLED = 18                                                                                  #the "greenLED" variable refers to the GPIO pin 18 which the green LED is connected on.

GPIO.setmode(GPIO.BCM)                                                                         #Set the GPIO Scheme numbering system to the BCM mode.
GPIO.setwarnings(False)                                                                        #disable warnings

GPIO.setup(redLED,GPIO.OUT)                                                                    #set the "redLED" variable pin (12) as an output pin.
GPIO.setup(blueLED,GPIO.OUT)                                                                   #set the "blueLED" variable pin (19) as an output pin.
GPIO.setup(greenLED,GPIO.OUT)                                                                  #set the "greenLED" variable pin (18) as an output pin.

red_pwm = GPIO.PWM(redLED,1000)                                                                #create PWM instance named "red_pwm" with frequency 1000.
blue_pwm = GPIO.PWM(blueLED,1000)                                                              #create PWM instance named "blue_pwm" with frequency 1000.
green_pwm = GPIO.PWM(greenLED,1000)                                                            #create PWM instance named "green_pwm" with frequency 1000.

red_pwm.start(0)                                                                               #start the program with 0% duty cycle (red LED will be OFF).
blue_pwm.start(0)                                                                              #start the program with 0% duty cycle (blue LED will be OFF).
green_pwm.start(0)                                                                             #start the program with 0% duty cycle (green LED will be OFF).

print("AH Shit! Here we go again! Press CTRL+C to exit")                                       #print "AH Shit! Here we go again! Press CTRL+C to exit" at the beginning of the program.

# function name: mode6
# arguments:
#   redIntensity: the brightness intensity of the red LED.
#   greenIntensity: the brightness intensity of the green LED.
#   blueIntensity: the brightness intensity of the blue LED.
# return: this funtion return nothing.
# this function is responsible for the pattern of the lighting mode. Feel free to change the lighting pattern as you want.
def mode6 (redIntensity, greenIntensity, blueIntensity):
    for duty in range (0, redIntensity, 1):
        red_pwm.ChangeDutyCycle(duty)
        sleep(0.01)
    sleep(0.3)
    for duty in range (redIntensity - 1, -1, -1):
        red_pwm.ChangeDutyCycle(duty)
        sleep(0.01)
    sleep(0.3)
    for duty in range (0, blueIntensity, 1):
        blue_pwm.ChangeDutyCycle(duty)
        sleep(0.01)
    sleep(0.3)
    for duty in range (blueIntensity - 1, -1, -1):
        blue_pwm.ChangeDutyCycle(duty)
        sleep(0.01)
    sleep(0.3)
    for duty in range (0, greenIntensity, 1):
        green_pwm.ChangeDutyCycle(duty)              #provide duty cycle in the range 0-100.
        sleep(0.01)
    sleep(0.3)
    for duty in range (greenIntensity - 1, -1 ,-1):
       green_pwm.ChangeDutyCycle(duty)               #provide duty cycle in the range 0-100
       sleep(0.01)
    sleep(0.3)

# function name: mode5
# arguments:
#   redIntensity: the brightness intensity of the red LED.
#   greenIntensity: the brightness intensity of the green LED.
#   blueIntensity: the brightness intensity of the blue LED.
# return: this funtion return nothing.
# this function is responsible for the pattern of the lighting mode. Feel free to change the lighting pattern as you want.
def mode5(redIntensity, greenIntensity, blueIntensity):
    for duty in range (0, redIntensity, 1):
        red_pwm.ChangeDutyCycle(duty)
        sleep(0.001)
    sleep(0.3)
    for duty in range (redIntensity - 1, -1, -1):
        red_pwm.ChangeDutyCycle(duty)
        sleep(0.001)
    sleep(0.3)
    for duty in range (0, blueIntensity, 1):
        blue_pwm.ChangeDutyCycle(duty)
        sleep(0.001)
    sleep(0.3)
    for duty in range (blueIntensity - 1 , -1, -1):
        blue_pwm.ChangeDutyCycle(duty)
        sleep(0.001)
    sleep(0.3)
    for duty in range (0, greenIntensity, 1):
        green_pwm.ChangeDutyCycle(duty)              #provide duty cycle in the range 0-100.
        sleep(0.001)
    sleep(0.3)
    for duty in range (greenIntensity - 1 , -1, -1):
       green_pwm.ChangeDutyCycle(duty)               #provide duty cycle in the range 0-100
       sleep(0.001)
    sleep(0.3)

# function name: mode4
# arguments:
#   redIntensity: the brightness intensity of the red LED.
#   greenIntensity: the brightness intensity of the green LED.
#   blueIntensity: the brightness intensity of the blue LED.
# return: this funtion return nothing.
# this function is responsible for the pattern of the lighting mode. Feel free to change the lighting pattern as you want.
def mode4(redIntensity, greenIntensity, blueIntensity):
    for duty in range (0, redIntensity, 1):
        red_pwm.ChangeDutyCycle(duty)
        sleep(0.01)
    sleep(0.5)
    green_pwm.ChangeDutyCycle(0)
    sleep(0.2)
    green_pwm.ChangeDutyCycle(greenIntensity - 1)

    for duty in range (0, blueIntensity, 1):
        blue_pwm.ChangeDutyCycle(duty)
        sleep(0.01)
    sleep(0.5)
    blue_pwm.ChangeDutyCycle(0)
    sleep(0.2)
    blue_pwm.ChangeDutyCycle(blueIntensity - 1)

    for duty in range (0,greenIntensity,1):
        green_pwm.ChangeDutyCycle(duty)
        sleep(0.01)
    sleep(0.5)
    red_pwm.ChangeDutyCycle(0)
    sleep(0.2)
    red_pwm.ChangeDutyCycle(redIntensity - 1)

    red_pwm.ChangeDutyCycle(0)
    green_pwm.ChangeDutyCycle(0)
    blue_pwm.ChangeDutyCycle(0)

# function name: mode3
# arguments:
#   redIntensity: the brightness intensity of the red LED.
#   greenIntensity: the brightness intensity of the green LED.
#   blueIntensity: the brightness intensity of the blue LED.
# return: this funtion return nothing.
# this function is responsible for the pattern of the lighting mode. Feel free to change the lighting pattern as you want.
def mode3(redIntensity, greenIntensity, blueIntensity):
    red_pwm.ChangeDutyCycle(0)
    green_pwm.ChangeDutyCycle(0)
    blue_pwm.ChangeDutyCycle(0)

    red_pwm.ChangeDutyCycle(redIntensity - 1)
    blue_pwm.ChangeDutyCycle(blueIntensity - 1)
    green_pwm.ChangeDutyCycle(greenIntensity - 1)

# function name: mode2
# arguments:
#   redIntensity: the brightness intensity of the red LED.
#   greenIntensity: the brightness intensity of the green LED.
#   blueIntensity: the brightness intensity of the blue LED.
# return: this funtion return nothing.
# this function is responsible for the pattern of the lighting mode. Feel free to change the lighting pattern as you want.
def mode2(redIntensity, greenIntensity, blueIntensity):
    red_pwm.ChangeDutyCycle(0)
    green_pwm.ChangeDutyCycle(0)
    blue_pwm.ChangeDutyCycle(0)

    blue_pwm.ChangeDutyCycle(blueIntensity - 1)
    sleep(0.1)
    blue_pwm.ChangeDutyCycle(0)
    sleep(0.1)
    green_pwm.ChangeDutyCycle(greenIntensity - 1)
    sleep(0.1)
    green_pwm.ChangeDutyCycle(0)
    sleep(0.1)
    red_pwm.ChangeDutyCycle(redIntensity - 1)
    sleep(0.1)
    red_pwm.ChangeDutyCycle(0)
    sleep(0.1)

# function name: mode1
# arguments:
#   redIntensity: the brightness intensity of the red LED.
#   greenIntensity: the brightness intensity of the green LED.
#   blueIntensity: the brightness intensity of the blue LED.
# return: this funtion return nothing.
# this function is responsible for the pattern of the lighting mode. Feel free to change the lighting pattern as you want.
def mode1(redIntensity, greenIntensity, blueIntensity):
    red_pwm.ChangeDutyCycle(redIntensity - 1)
    sleep(0.02)
    red_pwm.ChangeDutyCycle(0)
    sleep(0.02)
    red_pwm.ChangeDutyCycle(redIntensity - 1)
    sleep(0.02)
    red_pwm.ChangeDutyCycle(0)
    sleep(0.02)

    green_pwm.ChangeDutyCycle(greenIntensity - 1)
    sleep(0.02)
    green_pwm.ChangeDutyCycle(0)
    sleep(0.02)
    green_pwm.ChangeDutyCycle(greenIntensity - 1)
    sleep(0.02)
    green_pwm.ChangeDutyCycle(0)
    sleep(0.02)

    blue_pwm.ChangeDutyCycle(blueIntensity - 1)
    sleep(0.02)
    blue_pwm.ChangeDutyCycle(0)
    sleep(0.02)
    blue_pwm.ChangeDutyCycle(blueIntensity - 1)
    sleep(0.02)
    blue_pwm.ChangeDutyCycle(0)
    sleep(0.02)

try:
    while True:                                                                              #the beginning of the main program.

        database = firebase.database()                                             #take an instance from the firebase database which is pointing to the root directory of your database.
        RGBControlBucket = database.child("RGBControl")                            #get the child "RGBControl" path in your database and store it inside the "RGBControlBucket" variable.
        powerState = RGBControlBucket.child("powerState").get().val()                        #read the power state value from the tag "powerState" which is a node inside the database.
#        print("power state is: " + str(powerState))

                                                                                             # if the "powerState" variable value is equal to "true"
        if "true" in powerState.lower():
            database = firebase.database()                                         #take an instance from the firebase database which is pointing to the root directory of your database.
            RGBControlBucket = database.child("RGBControl")                        #get the child "RGBControl" path in your database and store it inside the "RGBControlBucket" variable.
            redLightIntensity = RGBControlBucket.child("redLightIntensity").get().val()  #read the red LED intensity value from the tag "redLightIntensity" which is a node inside the database then store that value inside the "redLightIntensity" variable.
            
#            print("red Light Intensity is: " + str(redLightIntensity))

            database = firebase.database()                                         #take an instance from the firebase database which is pointing to the root directory of your database.
            RGBControlBucket = database.child("RGBControl")                        #get the child "RGBControl" path in your database and store it inside the "RGBControlBucket" variable.
            blueLightIntensity = RGBControlBucket.child("blueLightIntensity").get().val()  #read the blue LED intensity value from the tag "blueLightIntensity" which is a node inside the database then store that value inside the "blueLightIntensity" variable.
            
#            print("blue Light Intensity is: " + str(blueLightIntensity))

            database = firebase.database()                                         #take an instance from the firebase database which is pointing to the root directory of your database.
            RGBControlBucket = database.child("RGBControl")                        #get the child "RGBControl" path in your database and store it inside the "RGBControlBucket" variable.
            greenLightIntensity = RGBControlBucket.child("greenLightIntensity").get().val()  #read the green LED intensity value from the tag "greenLightIntensity" which is a node inside the database then store that value inside the "greenLightIntensity" variable.
            
#            print("green Light Intensity is: " + str(greenLightIntensity))

            database = firebase.database()                                         #take an instance from the firebase database which is pointing to the root directory of your database.
            RGBControlBucket = database.child("RGBControl")                        #get the child "RGBControl" path in your database and store it inside the "RGBControlBucket" variable.
            lightPresetMode = RGBControlBucket.child("lightMode").get().val()  #read the light preset mode value from the tag "lightMode" which is a node inside the database then store that value inside the "lightPresetMode" variable.
            
#            print("light preset mode is: " + str(lightPresetMode))
            #           if the variable "lightPresetMode" value is equal to "mode6", call the mode6 function.
            if "mode6" in lightPresetMode.lower():
                mode6(int(redLightIntensity), int(greenLightIntensity), int(blueLightIntensity))
            #           if the variable "lightPresetMode" value is equal to "mode5", call the mode5 function.
            elif "mode5" in lightPresetMode.lower():
                mode5(int(redLightIntensity), int(greenLightIntensity), int(blueLightIntensity))
            #           if the variable "lightPresetMode" value is equal to "mode4", call the mode4 function.
            elif "mode4" in lightPresetMode.lower():
                mode4(int(redLightIntensity), int(greenLightIntensity), int(blueLightIntensity))
            #           if the variable "lightPresetMode" value is equal to "mode3", call the mode3 function.
            elif "mode3" in lightPresetMode.lower():
                mode3(int(redLightIntensity), int(greenLightIntensity), int(blueLightIntensity))
            #           if the variable "lightPresetMode" value is equal to "mode2", call the mode2 function.
            elif "mode2" in lightPresetMode.lower():
                mode2(int(redLightIntensity), int(greenLightIntensity), int(blueLightIntensity))
            #           if the variable "lightPresetMode" value is equal to "mode1", call the mode1 function.
            elif "mode1" in lightPresetMode.lower():
                mode1(int(redLightIntensity), int(greenLightIntensity), int(blueLightIntensity))
    #                   if the variable "lightPresetMode" value is not equal to any of the above values, print "DAMN, the power state is: false" on the terminal for debugging purposes.
        else:
            print("DAMN, the power state is: " + powerState)


except KeyboardInterrupt: # If CTRL+C is pressed, exit cleanly:
    red_pwm.stop() # stop red PWM
    blue_pwm.stop() # stop blue PWM
    green_pwm.stop() # stop green PWM
    GPIO.cleanup() # cleanup all GPIO

Code Explanation

the most important part here is to connect your python script to the “Firebase database” servers to be able to read the data from it. We define a dictionary named config with several key-value pairs that configure the connection to the database. The apiKey, authDomain, databaseUrl, and storageBucket values needed to connect to your database can be found in the Firebase console.

config = {                                                              #define a dictionary named config with several key-value pairs that configure the connection to the database.
  "apiKey": "ENTER YOUR PROJECT API KEY",
  "authDomain": "ENTER YOUR AUTH DOMAIN URL",       # "projectId.firebaseapp.com"
  "databaseURL": "ENTER YOUR DATABASE URL",         # "https://databaseName.firebaseio.com"
  "storageBucket": "ENTER YOUR STORAGE BUGET URL"   # "projectId.appspot.com"
}

To find the “API Key”, “authDomain”, “databaseURL”, “storageBucket” values, go to your database dashboard click on the gear icon, then “Project settings”.

Then you will find your project API key. Copy and paste it inside your python script. To find the “authDomain” you need to get the project ID, after getting your Project ID your “authDomain” will be like this “projectId.firebaseapp.com”.
your “storageBucket” will be like this “projectId.appspot.com”.

and to get your “databaseURL” go to your project database dashboard and copy that URL. That’s It!

If you want more code explanation, please read the code comments it’s well documented.

How does It Work?

After finishing the wiring and your code, close and save it, Run your program by writing python3 fileName.py in your terminal.
Like the last example, After running your program, It’s expected to see this sentence got printed on the terminal AH Shit! Here we go again! Press CTRL+C to exit then you will be able to control the LED Strip from your mobile app, Voila!

Note: You must run your program using python3, because the “pyrebase” module only works with python3 any other python version will not work.

Troubleshooting

If you see that error message when you run your program

don’t worry open your terminal and execute that commands

pip install --upgrade pyasn1-modules

this command will install your missing modules.

Running The Program Automatically On Startup

We don’t need to run the program manually by ourselves every time we boot up our raspberry pi board, it will be a good idea if we get our program to run automatically whenever the raspberry pi boots.

After the desktop environment starts (LXDE-pi, in this case), it runs whatever commands it finds in the profile’s autostart script, which is located at /home/pi/.config/lxsession/LXDE-pi/autostart for our Raspberry Pi.

First, we need to create a .desktop File, Open a terminal, and execute the following commands to create an autostart directory (if one does not already exist) and edit a .desktop file for our project code

mkdir /home/pi/.config/autostart
nano /home/pi/.config/autostart/IoTUsingRaspberryPi.desktop

Copy in the following text into the “IoTUsingRaspberryPi.desktop” file. Feel free to change the Name and Exec variables to your particular application.

[Desktop Entry]
Type=Application
Name=IoTUsingRaspberryPiAndFirebase
Exec=/usr/bin/python3 /your program absolute path/programName.py

That’s it! Now, at every time you boot up your raspberry pi, the program will start running automatically.

Troubleshooting

 your script does not run as soon as you see the desktop?!

there could be several issues. First, make sure that you have logged in (autostart does not start until you have logged in). You could also try enabling auto-login in raspi-config. Second, make sure you are using the absolute directory path (e.g. /home/pi/IoTUsingRaspberryPi.py). Third, make sure that you are using the python version 3 not anything else.

My Setup

Final

We are done! in today’s tutorial, we learned how to build a simple mobile app using MIT App inventor. Also, we learned how to control RGD LED strips using the raspberry pi board, and how to communicate with the firebase database servers through a python script. Lastly, how to control an RGB LED strip wirelessly from anywhere in the world.

Lastly, if you have any questions drop it in the comments section below, I will be more than happy to hear from you

The post IoT Using Raspberry Pi and Firebase and Android appeared first on Make Some Stuff.

Ever asked how to control your home appliances from any place in the world? In this step by step tutorial, we will learn how to control things wirelessly through the internet using our Awesome Arduino board.

Hardware

1. Arduino Nano
2. ESP8266-01
3. Two-channel Relay
4. any AC load.
5. Two LEDs.
6. Breadboard.
7. Bunch of resistors (1K, 2.2K).
8. Bunch of jumpers (Male-female, male-male).

Used Software

1. Arduino IDE.
2. Visual Studio Code (optional).
3. Autodesk Eagle (Optional).
4. Any web Browser.

Introduction

Today, we will build a device that connects to the internet and allow the user to control his/her home remotely over wifi. we will use the Arduino board(any model will do the job well) with the ESP8266-01 wifi module to make this device. Let’s get started!

What’s a smart home?

Smart home technology uses devices such as linking sensors, features and other appliances connected to the internet of things (IoT) that can be remotely monitored, controlled or accessed and provide services that respond to the needs of the users.

Wikipedia

Working Scenario

The Control Panel

We will build a simple web page that will work as a control panel for the user allows him to control any home appliance connected to our system. To build the web page we will use:

• HTML
• CSS
• Jquery

The Embedded Hardware

the web page sends some orders to the ESP8266-01 which is working as a web server connected to the Arduino board. And according to the incoming data, the Arduino board will take some actions like turning on the bulb, turning off the TV and in this part, we will use:

• Arduino
• ESP8266-01

Getting Started with the ESP8266-01

As we stated before, we need our Arduino board to get connected to the Internet but the Arduino Nano the version which we are using today doesn’t have that feature. So, we will use the ESP8266-01 wifi module to add the wifi feature to our tiny Arduino board.

there are a lot of ESP wifi modules models out there, which one should I choose?! Well, almost all the ESP family wifi modules out there will do the job well but each one has its own features and specifications. I encourage you to look at each one specifications and features to choose the most suitable one for your needs.

According to my needs, I found the ESP8266-01 is the most suitable one and that’s for many reasons. It’s very famous in the makers community. As a result, it got a very solid online community that you can find an answer to almost any question or problem you face with this awesome small module. Also, its price is very cheap(around 1.5$). Also, it’s very easy to use with the Arduino board since its a Serial wifi module it can communicate with the Arduino board over the serial communication. It has a built-in Microcontroller which means that you can use it as a standalone microcontroller and wifi module in one combo which is super cool. It has built-in two GPIOs. Only with 1.5$, you will get all of these features which is super cool, actually.
let’s get a closer look at this module.

ESP8266-01 Pinout

• VCC: connect to +3.3V power source. don’t connect it with a 5V source it will get damaged.
• GND: -ve pin, connect it to the ground of your circuit.
• CH_PD: chip enables pin – Active HIGH. connect it to a logic value HIGH to allow the module to boot up.
• RST: Chip Reset pin – Active LOW, when it pulled LOW it Resets the module.
• GPIO0, GPIO2: General purpose input/output pins.
• Tx: connect to the Rx of the microcontroller(Arduino) to establish serial communication.
• Rx: connect to the Tx of the microcontroller(Arduino) to establish serial communication.

ESP8266-01 Configuration

As we stated before the ESP8266-01 module communicates with the Arduino board over the Serial communication, which means that we need to connect it with the Arduino’s Serial pins 0, 1(Tx, Rx). But the problem here is that these pins will be busy because we will use the Arduino Serial monitor alongside the ESP8266-01 for debugging purposes. So, we need to find another two Serial communication pins to use them with the ESP8266-01.

Fortunately, Arduino made this easy. There’s a library called “SoftwareSerial” which was developed to allow serial communication on other digital pins of the Arduino, using software to replicate the functionality. For example, by using this library I can set the pins 2, 3(SoftwareSerial) as Rx and Tx alongside the pins 0, 1(Hardware Serial).

“SoftwareSerial” library works great as long as the transmission speed is less than 19,200 baud. But, there’s a small problem here! the ESP8266-01 wifi module comes from the factory programmed to communicate at speed 115,200 baud which is somehow hard at the “SoftwareSerial” library to communicate at. So, we need to reprogram our wifi module to set the communication speed to 9600 baud which works pretty good with the “SoftwareSerial” library. To do that we will use some “AT Commands”.

Changing the ESP8266-01 communication speed

First step: Upload an empty program to the Arduino board

At this step, we are uploading an empty code to the Arduino board. Just to be sure that there’s nothing is Executing in the background by the Arduino board.

Second Step: Wiring the ESP8266-01 with the Arduino board

To Reconfigure the ESP8266-01 and change the communication speed(baud rate) we use the AT-commands. Simply, AT commands are some instructions used to control modems, mobile phones, Bluetooth modules, wifi modules, GSM Modules, … with these commands we can get basic information about our mobile phone or GSM Modules like the name of the manufacturer, model number, IMEI and so on.

“AT” is an abbreviation for “ATtention” and it’s called AT-commands because every command starts with “AT”. the “AT” prefix is not a part of the commands itself it just tells the module the start of the commands.

Some Important AT Commands

Command number “4” depends on your ESP8266-01 firmware version, if this command doesn’t work with you AT+CIOBAUD=<baud> Try this one AT+UART_DEF=<baud>,8,1,0,0

Step 1: Open the Serial Monitor

Step 2: Set the Communication speed to 115,200 baud

As we stated before, the ESP comes from the manufacturer programmed to communicate at speed 115,200 baud. So we need to set the Arduino communication speed to 115,200 too for the first time only then we will change that later.

Also, you should select “Both NL & CR”.

Step 3: Send “AT” and wait for the response to be sure that the ESP module is hearing you.

Step 4: Now, change the ESP8266-01 communication speed

My ESP8266-01 module loaded firmware is 1.6. and this command AT+UART_DEF=<baud>,8,1,0,0 works well for me. If it doesn’t work with you, try this AT+CIOBAUD=<baud> .

If it responds with “OK” now your ESP module communication baud rate changed from 115,200 baud to 9600 baud. CONGRATS!

Let’s change the Serial monitor communication speed back to 9600 and send “AT” again to see if the ESP module can hear us at the new Speed(9600) or not.

LOOK! it’s working. the ESP8266-01 now can communicate with the Arduino board at 9600 baud rate instead of 115,200 baud rate.

Now, let’s try to connect with the Wifi network

Once you press enter, the ESP8266-01 will search for this network and connect with it. If the process succeeds it will return this
WIFI CONNECTED
WIFI GOT IP

At this point, we successfully changed the ESP8266-01 communication speed from 115,200 baud to 9600 baud. Now, we need to build the control panel(Web Page) which the user will use to control his home appliances. So, let’s build it!

What’s the Internet?

Actually, the internet is a wire buried under the ground it can be fiber optics, copper, or even a satellite but the internet is simply a wire.
Any two computers connected to that wire can communicate. If the computer is connected directly to that wire it’s called a server and if it is not connected directly to that wire it’s called a client.

Server: is a special computer that runs a specific Operating system like Apache, this special computer saves some web pages, files, databases on its disk drive. any server connected to the internet has a unique IP Address like 172.217.171.228, the IP address is just like a phone number that helps people to find each other easily. Since that IP Address is not very easy for humans to remember. So, we just gave it a name like: google.com(Domain name).

Client: it’s a computer like what you and I are using every day, it’s connected indirectly to the internet through an internet service provider(ISP) and it also has a unique IP address.

Working Scenario

Simply, it starts with a request sent from a web browser(Client) like google chrome, firefox and ends with the response received from the webserver.

You entered the website URL makesomestuff.org in a browser from a computer(client), then this browser sends a request to the webserver that hosts the website, the webserver then returns a response containing HTML page or any other document format to the browser to display it.

Exactly, that’s what we need to do today in our project. We need to send a request from the web browser(Client) to the ESP8266-01(Webserver) which both of them are connected to the same local network. This request contains some data which tells the Arduino what to do turn on or off a light bulb. So, let’s build the web page!

Building The Web Page

To build our web page we have to deal with HTML, CSS, Javascript. if you never heard about these names before, don’t worry I got you.

HTML: Stands for “HyperText markup language” we use it to build any web page main structure. Like adding some buttons, images, paragraphs, headers, tables, and many more elements. it consists of a series of elements that tell the browser how to display the web page content. these elements represent by something called tags.

CSS: It stands for cascading style sheet. After building the web page main structure, you need to make this structure looks nice here comes CSS to make some styling. it’s a language that describes the style of an HTML element. it consists of some selectors and deceleration blocks.

Javascript: it’s a programming language that we will use to make the web page more interactive like adding some animations, maps and it allows us to make some complex things on the web page. Mainly, we will use it today to send an HTTP request from the client(web browser) to the webserver(ESP8266-01) to take some actions like turning on or off a light bulb.

Build The Web Page Structure

To easily understand the upcoming explanation, I recommend Reading this cool HTML intro.

As we see our control panel is very simple, it contains two headers each one has a different size, one image, and two buttons one for turning on an LED and the second one for turning it off.

Code

<!DOCTYPE html>
<html>

<head>
    <title>Smart Home System</title>
</head>

<body>

    <h1> Smart Home Control Panel</h1>                               
    <h4>Sorry But I'm a Meme Addict!</h4>
    <img src="dogMeme.jpg" width="400px" height="400px">
    <br>
    <button id="111" class="button">LAMP ON</button>
    <br>
    <button id="110" class="button">LAMP OFF</button>
</body>

</html>

Code Explanation

• <!DOCTYPE html>: declaration defines that this document is an HMTL5 document.
• <html>: the root element of an HTML page.
• <head>: contains meta-information about the page.
• <title>: specifies the title of the document. this title appears on the web page browser tab.
• <body>: contains the visible web page content.
• <h1>: defines a large element.
• <h4>: defines a smaller header. when the header value decreases the font decreases.
• <img>: adds an image to the web page. the image that you want to display should be in the same project folder.
• <br>: advance the cursor to a new line.
• <button>: adds a button to the page content.

Each button is our web page has very important two attributes the id, and the class attributes. we will talk about why we assigned these two values to the buttons in the Jquery code explanation.

Styling The Web Page

To easily understand the upcoming explanation, I recommend Reading this cool CSS intro.

Now, the web page looks nicer (NOT TOO MUCH xD) we gave it a cool green background color, we make the page content centered aligned, and we change the headers font color and font family which made the web page more alive. We used CSS to do all of this styling stuff.

Code

<!DOCTYPE html>
<html>

<head>
    <title>Smart Home System</title>
</head>

<body style="background-color: seagreen; color: seashell; text-align: center;">

    <h1> Smart Home Control Panel</h1>                               
    <h4>Sorry But I'm a Meme Addict!</h4>
    <img src="dogMeme.jpg" width="400px" height="400px">
    <br>
    <button style="margin: 10px;" id="111" class="button">LAMP ON</button>
    <br>
    <button style="margin:10px;" id="110" class="button"> LAMP OFF</button>
</body>

</html>

Code Explanation

We added some few lines of code to make our web page looks nicer. We added style="background-color: seagreen; color: seashell; text-align: center;" inside the body tag to make all the web page content in the center of the page and to set the background color to seagreen also to set the font color to seashell.

Also, we added style="margin: 10px;" inside the two button tags to set a margin of 10 pixels around the four sides of each button.

Sending a Request To The Webserver

To easily understand the upcoming explanation, I recommend Reading this cool Jquery intro.

Now, after building our web page structure and styling it we need to add some functionality to the two buttons which we added earlier in the web page. we need when the user clicks the “LAMP ON” button his/her browser sends a request contains some unique data to the server(ESP8266-01) this unique data tells the Arduino to turn on the lamp. The same thing with the second button “LAMP OFF” when the user clicks it, the browser will send a request contains some unique data to the server(ESP8266-01) this unique data tells the Arduino to turn off the lamp. Let’s take a look at the code.

<!DOCTYPE html>
<html>

<head>
    <title>Smart Home System</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body style="background-color: seagreen; color: seashell; text-align: center;">

    <h1> Smart Home Control Panel</h1>                               
    <h4>Sorry But I'm a Meme Addict!</h4>
    <img src="dogMeme.jpg" width="400px" height="400px">
    <br>
    <button style="margin: 10px;" id="111" class="button">LAMP ON</button>
    <br>
    <button style="margin:10px;" id="110" class="button"> LAMP OFF</button>
        <script>                                                        //starting Javascript.
        $(".button").click(function () {                            //if any button from the ".button" class is clicked
            var p = $(this).attr('id');                             //get this button id and store it inside the "p" variable.
            pin: p                                                  //a dictionary contains the button id to get sent to the web server.
            $.get("http://192.168.1.4:80/", {                      //then send a get request to the web server"http://192.168.1.4:80/" (":80" means port number 80) with some data in a form of dictionary {pin: p} which is the butoon id. IMPORTANT NOTE: DON'T FORGET TO CHANGE THE IP ADDRESS WITH YOUR ESP8266 NEW IP ADDRESS.
            pin: p
            });
        });
    </script>
</body>

</html>

Code Explanation

First Things First, we need to import the Jquery library in our code. So, we added this line in the head tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

All the magic happens in this interesting part.

    <script>                                                        //starting Javascript.
        $(".button").click(function () {                            //if any button from the ".button" class is clicked
            var p = $(this).attr('id');                             //get this button id and store it inside the "p" variable.
            pin: p                                                  //a dictionary contains the button id to get sent to the web server.
            $.get("http://192.168.1.4:80/", {                      //then send a get request to the web server"http://192.168.1.4:80/" (":80" means port number 80) with some data in a form of dictionary {pin: p} which is the butoon id. IMPORTANT NOTE: DON'T FORGET TO CHANGE THE IP ADDRESS WITH YOUR ESP8266 NEW IP ADDRESS.
            pin: p
            });
        });
    </script>

$(".button").click(function () {
When the user clicks on any button associated with the class “button”, trigger the following function.

var p = $(this).attr('id');
Get the value of the clicked button attribute “id” and store it inside the “p” variable.

pin: p
Put the variable “p” value in a dictionary (key-value) it’s key is “pin” and the value is “p” variable value.

$.get("http://172.20.10.11:80/", { pin: p });});
Then, send a GET request to the webserver which it’s IP address is “172.20.10.11”. this GET request contains the value of the attribute id pressed button.

In case the user pressed the “LAMP ON” button this id value will be 111, so the GET request header will contain some data like this pin=111. look at the next figure!

At the opposite side, if the user pressed “LAMP OFF” button the request will contain this data pin=110.

Code Logic

I know you asking now why the heck did he choose 111 and 110 specifically? Ok, Lemme answer you fam. Actually, the number 111 and 110 divides into two parts.

• Part one: is the first two numbers which are in both cases will be “11”, it refers to the Arduino pin number which the load I need to control is connected on.
• Part two: is the third number which changes between 1 and 0 depending on the clicked button. And it refers to the pin state(ON or OFF).

In the Arduino code, we will receive this data and separate these two parts from each other and save each part in a different variable, part one in variable pinNumber and the second part in variable pinState, then we will write this simple line of code to control the connected load
digitalWrite(pinNumber, pinState);

Connecting The Load

Now, we need to connect the load with the Arduino board to control it. Before connecting any high voltage device like the air conditioner or even the TV, we need to test our circuit and the code with some low voltage stuff like LEDs only to make sure that everything is working well. Here’s the wiring diagram

The wiring is pretty simple, we are connecting the LED positive leg to the Arduino digital pin 11, and the negative leg to the GND through a 1k ohm resistor.

Arduino Code

#include <SoftwareSerial.h>                         //including the SoftwareSerial library will allow you to use the pin no. 2,3 as Rx, Tx.
SoftwareSerial esp8266(2,3);                        //set the Rx ==> Pin 2; TX ==> Pin3.

#define serialCommunicationSpeed 9600               // <========= define a constant named "serialCommunicationSpeed" with a value 9600. it referes to the Software and hardware serial communication speed(baud rate).
#define DEBUG true                                  //make a constant named "DEBUG" and it's value true. we will use it later.

int redLED =12;                                     //assign a variable named "redLED" with an integer value 12, it refers to the pin which the red LED is connected on.
int blueLED =11;                                    //assign a variable named "blueLED" with an integer value 11, it refers to the pin which the blue LED is connected on.


void setup()

{
  pinMode(redLED,OUTPUT);                           //set the pin number 12 as an output pin.
  pinMode(blueLED,OUTPUT);                          //set the pin number 11 as an output pin.
  
  digitalWrite(redLED,LOW);                         //turn the red LED off at the beginning of the program.
  digitalWrite(blueLED,HIGH);                       //turn the blue LED on at the beginning of the program.

  Serial.begin(serialCommunicationSpeed);           //begin the Hardware serial communication (0, 1) at speed 9600.
  esp8266.begin(serialCommunicationSpeed);          //begin the software serial communication (2, 3) at speed 9600.

  InitWifiModule();                                 //call this user-defined function "InitWifiModule()" to initialize a communication between the ESP8266 and your access point (Home Router or even your mobile hotspot).

  digitalWrite(blueLED,LOW);                        //after finishing the initialization successfully, turn off the blue LED (just an indicator).
}

void loop()                                                         //our main program, some fun are about to start)
{

  if(esp8266.available())                                           //if there's any data received and stored in the serial receive buffer, go and excute the if-condition body. If not, dont excute the if-condition body at all.
  {
    if(esp8266.find("+IPD,"))                                       //search for the "+IPD," string in the incoming data. if it exists the ".find()" returns true and if not it returns false.
    {
      delay(1000);                                                  //wait 1 second to fill up the buffer with the data.
      int connectionId = esp8266.read()-48;                         //Subtract 48 because the read() function returns the ASCII decimal value. And 0 (the first decimal number) starts at 48. We use it to convert from ASCI decimal value to a character value.
      esp8266.find("pin=");                                         //Advance the cursor to the "pin=" part in the request header to read the incoming bytes after the "pin=" part which is the pinNumer and it's state.
      int pinNumber = (esp8266.read()-48)*10;                       //read the first Byte from the Arduino input buffer(i.e. if the pin 12 then the 1st number is 1) then multiply this number by 10. So, the final value of the "pinNumber" variable will be 10.
      pinNumber = pinNumber + (esp8266.read()-48);                  //read the second Byte from the Arduino input buffer(i.e. if the pin number is 12 then the 2nd number is 2) then add this number to the first number. So, the final value of the "pinNumber" variable will be 12.
      int statusLed =(esp8266.read()-48);                           //read the third byte from the Arduino input buffer. then save it inside the "statusLed" variable. At any case, it will be 1 or 0.

      digitalWrite(pinNumber, statusLed);                           //then turn the LED at "pinNumber" on or off depending on the "statusLed" variable value.

      Serial.println(connectionId);                                 //print the "connectionId" value on the serial monitor for debugging purposes.
      Serial.print(pinNumber);                                      //print the "pinNumber" value on the serial monitor for debugging purposes.
      Serial.print("      ");                                       //print some spaces on the serial monitor to make it more readable.
      Serial.println(statusLed);                                    //print the "statusLed" value on the serial monitor for debugging purposes.

      String closeCommand = "AT+CIPCLOSE=";                         //close the TCP/IP connection.
      closeCommand+=connectionId;                                   //append the "connectionId" value to the string.
      closeCommand+="\r\n";                                         //append the "\r\n" to the string. it simulates the keyboard enter press.
      sendData(closeCommand,1000,DEBUG);                            //then send this command to the ESP8266 module to excute it.
      
    }
  }
}

/******************************************************************************************************************************************************************************************
* Name: sendData
* Description: this Function regulates how the AT Commands will ge sent to the ESP8266.
* 
* Params: command - the AT Command to send 
*                 - timeout - the time to wait for a response 
*                 - debug - print to Serial window?(true = yes, false = no)
*                 
* Returns: The response from the esp8266 (if there is a reponse)
*/
String sendData(String command, const int timeout, boolean debug)
{
    String response = "";                                             //initialize a String variable named "response". we will use it later.
    
    esp8266.print(command);                                           //send the AT command to the esp8266 (from ARDUINO to ESP8266).
    long int time = millis();                                         //get the operating time at this specific moment and save it inside the "time" variable.
    while( (time+timeout) > millis())                                 //excute only whitin 1 second.
    {      
      while(esp8266.available())                                      //is there any response came from the ESP8266 and saved in the Arduino input buffer?
      {
        char c = esp8266.read();                                      //if yes, read the next character from the input buffer and save it in the "response" String variable.
        response+=c;                                                  //append the next character to the response variabl. at the end we will get a string(array of characters) contains the response.
      }  
    }    
    if(debug)                                                         //if the "debug" variable value is TRUE, print the response on the Serial monitor.
    {
      Serial.print(response);
    }    
    return response;                                                  //return the String response.
}



/******************************************************************************************************************************************************************************************
* Name: InitWifiModule
* Description: this Function gives the commands that we need to send to the sendData() function to send it.
* 
* Params: Nothing.
*                 
* Returns: Nothing (void).
*/
void InitWifiModule()
{
  sendData("AT+RST\r\n", 2000, DEBUG);                                                  //reset the ESP8266 module.
  //delay(1000);
  sendData("AT+CWJAP=\"PUT YOUR SSID\",\"PUT YOUR PASSWORD\"\r\n", 2000, DEBUG);        //connect to the WiFi network.
  delay (3000);
  sendData("AT+CWMODE=1\r\n", 1500, DEBUG);                                             //set the ESP8266 WiFi mode to station mode.
  delay (1000);
  sendData("AT+CIFSR\r\n", 1500, DEBUG);                                                //Show IP Address, and the MAC Address.
  delay (1000);
  sendData("AT+CIPMUX=1\r\n", 1500, DEBUG);                                             //Multiple conections.
  delay (1000);
  sendData("AT+CIPSERVER=1,80\r\n", 1500, DEBUG);                                       //start the communication at port 80, port 80 used to communicate with the web servers through the http requests.
}

code explanation

the code is pretty straightforward, we implemented two different functions InitWifiModule() and sendData()

the sendData() function job is regulating how the AT commands will get sent to the ESP8266-01 module.
the InitWifiModule() function job is to provide the sendData() function the AT commands that we need to send to the ESP8266-01.

in the loop() function we read the income HTTP request header and search for the “+IPD,” which means that the request has successfully arrived, then we read the pin value which it will be “111” if the user clicked the “LAMP ON” button and “110” if the user clicked “LAMP OFF” button.

don’t forget to put your wifi SSID and Password in the Arduino code line no. 103
sendData("AT+CWJAP=\"PUT YOUR SSID\",\"PUT YOUR PASSWORD\"\r\n", 2000, DEBUG); //connect to the WiFi network.

for more code explanayion please read the comments in the code, it’s well documented

How It Works

After uploading the code to the Arduino board, open the Serial monitor and read the responses that the ESP module is sending.

at the beginning of the program, if you see something like the previous figure with “OK” at the end of the page, it means that the ESP8266-01 module is successfully connected to your wifi (Access point) and got an IP and MAC address . Now, you can open your fancy web page and try to control some stuff

But, if you see something like the previous figure with a “FAIL” or “ERROR” at the end of the page, it means that your ESP module cant connect to your wifi (Access point) for some reasons, try to check if entered the right SSID and password for your network.

Adding a High Voltage Load

After we tested our code and got sure that everything is working like a charm, we need to replace this boring LED with a High volage load like an air conditioner, TV or a light bulb. But to control all of these high voltage appliances we have to deal with relays.

What’s and why relay? Ok, the relay is a mechanical switch, which is toggled on or off by energizing a coil. it’s mainly used to control a high powered circuit using a low power signal (5V or 0V). So we can control a high powered device like an air conditioner or an AC lamp turning it on or off only by a 5V or 0V signal. Which is amazing!

The Two-channel relay module has two control pins(IN1, IN2) these pins should get connected to two Arduino digital pins to control the state of the two coils, closes or opens the load circuit.

At the opposite side of the relay module, the COM(common) should get connected to one end of the load. the other end of the load is either connected to the NC(Normally Close) or NO(Normally open), if connected to the NO the load remains Disconnected before trigger and vice versa.

Wiring Diagram

As you see, we are using a two-channel relay module that gives us the ability to control two different AC loads. We are connecting the first relay at digital output pin 11(Arduino) and the second relay to digital output pin 12(Arduino)

We will make a small modification to our web page, we will add another two buttons(ON and OFF) to control the second connected load.

<!DOCTYPE html>
<html>

<head>
    <title>Smart Home System</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body style="background-color: seagreen; color: seashell; text-align: center;">

    <h1> Smart Home Control Panel</h1>                               
    <h4>Sorry But I'm a Meme Addict!</h4>
    <img src="dogMeme.jpg" width="400px" height="400px">
    <br>
    <button style="margin: 10px;" id="111" class="button">Blue LED ON</button>
    <button id="110" class="button">Blue LED OFF</button>
    <br>
    <button style="margin:10px;" id="121" class="button"> Red LED ON</button>
    <button id="120" class="button">Red LED OFF</button>
    <script>                                                        //starting Javascript.
        $(".button").click(function () {                            //if any button from the ".button" class is clicked
            var p = $(this).attr('id');                             //get this button id and store it inside the "p" variable.
            pin: p                                                  //a dictionary contains the button id to get sent to the web server.
            $.get("http://192.168.1.4:80/", {                       //then send a get request to the web server"http://192.168.1.4:80/" (":80" means port number 80) with some data in a form of dictionary {pin: p} which is the butoon id. IMPORTANT NOTE: DON'T FORGET TO CHANGE THE IP ADDRESS WITH YOUR ESP8266 NEW IP ADDRESS.
            pin: p
            });
        });
    </script>
</body>

</html>

How It Works

Just like the last trial, You upload the Arduino code to the board (if not uploaded yet) and open the serial monitor and make sure that your ESP module is connected successfully to your access point and got an IP and MAC address.

Then open your fancy web page and start controlling your stuff

Make it more professional!

What about transferring our breadboard circuit to a professional printed circuit board (PCB) to make our project more rigid and solid, I designed the project circuit using Autodesk Eagle software. all the PCB files are open-source you can access it from the following link. we love open source

You can order your own PCB From PCBWay company these guys have a very good reputation in this field and they ship to more than 170 countries around the world with reasonable prices. all you have to do is to open the project PCB files link and press “Add to cart”. That’s it!

Troubleshooting

• if your ESP Module is successfully connected to your access point but there is no action happens when you click the web page buttons
  • make sure that your PC or Laptop and the ESP module is connected to the same Access point.
  • In Jquery code, make sure that you wrote the right ESP module IP address.
  • make sure that you are sending the request from your web browser from port 80(HTTP). example: $.get("http://192.168.1.4:80/"
  • Make sure that you are connecting the load at Arduino digital pins 11 and 12.

Don’t forget to save the Web page code file after any change or modification, and reload the web page in the web browser after any code modification to take effect.

Final

We are done! in today’s tutorial, we learned how to build a simple web page using HTML, CSS, and jquery. Also, we learned how to control an AC load wirelessly from a web-based control panel, and how to use the awesome ESP8266-01 Wifi module with the Arduino board.

Lastly, if you have any questions drop it in the comments section below, I will be more than happy to hear from you

The post IoT Using ESP8266-01 and Arduino appeared first on Make Some Stuff.