Want to learn 3D Printing, hurry up and register for our upcoming Workshop that starts Dec.16th

IoT RGB LED tutorial using NodeMCU chip

Posted by Momen 11/11/2017 0 Comment(s)

Introduction:

We will create an interface which enable us choose our color from RGB LED, by using NodeMCU chip, then we will explain programming commands.

Before we start this tutorial, we will take a look on NodeMCU chip before we start these tutorial of Internet of Things (IoT).

The NodeMCU Mini is an ESP8266 WiFi micro-controller that runs at 80MHz processing speed and at 3.3V logic voltage. This micro-controller contains a Tensilica chip core as well as a full WiFi stack. You can program the micro-controller using the Arduino IDE software for an easy-to-run Internet of Things (IoT) core or using the Lua script language.

Now we will start our tutorial:

Hardware Components:

  • NodeMCU board.
  • ESPlorer program.
  • Bootstrap studio program.
  • Breadboard.
  • Plate NodeMCU board.
  • 3 Resistors (220 ohm).
  • RGB LED.

Kinds of LED:

1) Common cathode:

types-of-rgb-led

We note from the image the RGB LED are consist of three diodes type (red, green, blue) that hole on large diode. All the negative legs are connected at one path, so these kind of RGB LED called "common cathode".

2) Common anode:

types-of-rgb-led-common-anode

We note from the image the RGB LED are consist of three diodes type (red, green, blue) that hole on large diode. All the positive legs are connected at one path, so these kind of RGB LED called "common anode".

* How Common cathode works:

We will connect the negative leg to the GND and the other legs to the pins of NodeMCU board. That is mean the RGB LED will work by 1(HIGH) and 0 (LOW). It will work by analog values from 0 to 1023.where 0 represent the lowest value and 1023 the highest value.

 
  


** To create more colors:

different-color-table-of-rgb-led

Hardware Design:

Now let’s have a look at the hardware overview of the entire circuit shown in the image. Connect them as shown:

esp8266-rgp-led

We also connect the red wire at pin (D2 ), then the green wire at pin (D3) and blue wire at pin (D4)  in the NodeMCU board.

Software Design:

The Code and explanation:

Copy these code to your ESPlorer software and save it with "ESPlorer_RGB_LED" name or any other name (no problem at this point), then upload the code.

 

wifi.setmode(wifi.STATION)

wifi.sta.config("your ssid","your pass")

print(wifi.sta.getip())

 

r=2

g=3

b=4

 

gpio.mode(r,gpio.OUTPUT)

gpio.mode(g,gpio.OUTPUT)

gpio.mode(b,gpio.OUTPUT)

pwm.setup(r,1000,1023)

pwm.setup(g,1000,1023)

pwm.setup(b,1000,1023)

pwm.start(r)

pwm.start(g)

pwm.start(b)

 

function off()

pwm.setduty(r,1023)

pwm.setduty(g,1023)

pwm.setduty(b,1023)

end

 

function red()

pwm.setduty(r,0)

pwm.setduty(g,1023)

pwm.setduty(b,1023)

end

 

function green()

pwm.setduty(r,1023)

pwm.setduty(g,0)

pwm.setduty(b,1023)

end

 

function blue()

pwm.setduty(r,1023)

pwm.setduty(g,1023)

pwm.setduty(b,0)

end

 

function white()

pwm.setduty(r,0)

pwm.setduty(g,0)

pwm.setduty(b,0)

end

 

function yellow()

pwm.setduty(r,0)

pwm.setduty(g,0)

pwm.setduty(b,1023)

end

 

function aqua()

pwm.setduty(r,1023)

pwm.setduty(g,0)

pwm.setduty(b,0)

end

 

function pink()

pwm.setduty(r,0)

pwm.setduty(g,1023)

pwm.setduty(b,0)

end

 

function orange()

pwm.setduty(r,0)

pwm.setduty(g,433)

pwm.setduty(b,1023)

end

 

srv=net.createServer(net.TCP)

srv:listen(80,function(conn)

    conn:on("receive", function(client,request)

 

local buf = "";

        buf = buf.."HTTP/1.1 200 OK\n\n"

local _, _, method, path, vars = string.find(request, "([A-Z]+) (.+)?(.+) HTTP");

if(method == nil)then

            _, _, method, path = string.find(request, "([A-Z]+) (.+) HTTP");

end

 

local _GET = {}

if (vars ~= nil)then

for k, v in string.gmatch(vars, "(%w+)=(%w+)&*") do

                _GET[k] = v

end

end

        buf = buf.."<!DOCTYPE HTML>"

        buf = buf.."<html><head>";

        buf = buf.."<meta charset=\"utf-8\">";

        buf = buf.."<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">";

        buf = buf.."<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">";

        buf = buf.."<script src=\"https://code.jquery.com/jquery-2.1.3.min.js\"></script>";

        buf = buf.."<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css\">";

        buf = buf.."</head><div class=\"container\">";

        buf = buf.."<h1>ِRGB controller</h1>";

        buf = buf.."<form role=\"form\">";

        buf = buf.."<div class=\"radio\">";

        buf = buf.."<label><input type=\"radio\" name=\"color\" value=\"off\" onclick=\"this.form.submit()\">off</input>";

        buf = buf.."<label><label><input type=\"radio\" name=\"color\" value=\"red\" onclick=\"this.form.submit()\">red</input>";

        buf = buf.."<label><label><input type=\"radio\" name=\"color\" value=\"green\" onclick=\"this.form.submit()\">green</input>";

        buf = buf.."<label><label><input type=\"radio\" name=\"color\" value=\"blue\" onclick=\"this.form.submit()\">blue</input>";

        buf = buf.."<label><label><input type=\"radio\" name=\"color\" value=\"white\" onclick=\"this.form.submit()\">white</input>";

        buf = buf.."</label></div>";

        buf = buf.."<div class=\"radio\">";

        buf = buf.."<label><input type=\"radio\" name=\"color\" value=\"yellow\" onclick=\"this.form.submit()\">yellow</input>";

        buf = buf.."<label><label><input type=\"radio\" name=\"color\" value=\"pink\" onclick=\"this.form.submit()\">pink</input>";

        buf = buf.."<label><label><input type=\"radio\" name=\"color\" value=\"orange\" onclick=\"this.form.submit()\">orange</input>";

        buf = buf.."<label><label><input type=\"radio\" name=\"color\" value=\"aqua\" onclick=\"this.form.submit()\">aqua</input>";    

        buf = buf.."</label></div>";

        buf = buf.."</form>";

        buf = buf.."</div>";

        buf = buf.."</html>"

 

if(_GET.color == "off")then

              off()

elseif(_GET.color == "red")then

              red()

elseif(_GET.color == "green")then

              green()         

elseif(_GET.color == "blue")then

              blue()

elseif(_GET.color == "white")then

              white()         

elseif(_GET.color == "yellow")then

              yellow()

elseif(_GET.color == "pink")then

              pink()         

elseif(_GET.color == "orange")then

              orange()

elseif(_GET.color == "aqua")then

              aqua()                                   

end

 

        client:send(buf)

        client:close()

       

collectgarbage()

end)

end)

 

esp8266-code

  • Set up the ESP8266 chip to receive Wi-Fi. That is mean we will runs the ESP8266 as a client.
  • In the second line we have the function that have tow arguments :

"ssid" We will write the name of the network we want to connect to.

"pass" We will write the secret password of the network we want to connect to.

  • In line 3 we will print the IP that we will use to connect to the server network page.
 
 esp8266-code-gpio-mode

 

 

 

 

 

 

 

 

  • The Lines from 5 to 7, we define 3 variables .
  • In the Line 9 we configure the green LED as an output.
  • In the Line 10 we configure the red LED as an output.
  • In the Line 11 we configure the blue LED as an output.

esp8266-code-pwm

  • In the line 12 we Adjust PWM properties for the red leg LED, where the frequency equal 1000 Hz with started value equal 1023 (this is mean that the red led will be off).
  • In the line 13 we Adjust PWM properties for the green leg LED, where the frequency equal 1000 Hz with started value equal 1023 (this is mean that the green led will be off).
  • In the line 14 we Adjust PWM properties for the blue leg LED, where the frequency equal 1000 Hz with started value equal 1023 (this is mean that the blue led will be off).
  • Lines 15 to 17: to work the previous commands in the lines 12, 13 , 14, we will write these function for every led color with changing only the argument to the specific color type by PWM property. 

esp8266-code-pwm-dutycycle

  • Lines 19 to 23: here we create a new function named {off()} to switch off the RGB LED by appropriate values that we are defined.(take a look at the previous table).
  • Lines 25 to 29: we create a {red()} function to turn on the red color on the RGB LED  by given the RGB legs appropriate values as we learned from the previous table.
  • Lines 31 to 35: also we create a {green()} function to turn on the green color on the RGB LED  by given the RGB legs appropriate values as we learned from the previous table.
 
 esp8266-pwm-code


Lines 37 to 41: we create a {blue()} function to turn on the blue color on the RGB LED  by given the RGB legs appropriate values as we learned from the previous table

  • Lines 43 to 47: we create a {white()} function to turn on the white color on the RGB LED  by given the RGB legs appropriate values as we learned from the previous table.
  • Lines 49 to 53: we create a {yellow()} function to turn on the yellow color on the RGB LED  by given the RGB legs appropriate values as we learned from the previous table.
  • Lines 55 to 59: we create a {aqua()} function to turn on the aqua color on the RGB LED  by given the RGB legs appropriate values as we learned from the previous table.

esp8266-code-pwm-code

  • Lines 61 to 65: we create a {pink()} function to turn on the pink color on the RGB LED  by given the RGB legs appropriate values as we learned from the previous table.
  • Lines 55 to 59: we create a {orange()} function to turn on the orange color on the RGB LED  by given the RGB legs appropriate values as we learned from the previous table.

esp8266-code-create-server

  • Line 73-74: these commands created to Display the contents of the network page that we have created by using bootstrap studio program. Port 80 used to make a connection between a server and client.

esp8266-code-network-display

  • Line 75: in these function we will include the commands that help us designing and coordinate the sever page network
  • Lines 77 to 89: group of difference commands that will save and storing the sever page network and the same for (URL)(link of the  page).

esp8266-code-html

  • Lines from 90 to 115: 42 are the commands that used to create the web pages by bootstrap studio program or we can use any program where we have a good use                                                                                                           

                                    esp8266-code-rgb-controller                               

  *line 98 in the source code.

  *lines from 100 to 106 in the source code.

  *lines from 107 to 112 in the source code.

  • We note when we select any type of buttons, we will see the changing on the (URL) as we selected. For example: we will select (off ) button, then the type of color will changed to (off) like in these image:

esp8266-code-ip-address

Also we when we select (pink), we will see as in the previous example:

                      esp8266-code-ip-address-color-pink

esp8266-code-color-conditions

esp8266-code-color-conditions

  • Lines from 117 and 118: these if statement function we created to test the value of color if is it (off) or not. Then if the value equal to (off) then the function {off()} will be execute. The same idea will apply exactly for the lines (119 to 135).

esp8266-code-end-of-code

  • Line 137: these command created to display the sever page network that we created by Bootstrap studio program.
  • Line 138: these function created to close connection client.
  • Line 140: This function searches for unused resources and data to deletes from memory to obtain a free memory space for other purposes.
  • Line 141: end of the function { conn:on أﺍ")أﺍ receive",function(client,request) }
  • Line 142: end of the function { srv:listen 80 أﺍ)أﺍ ,function(conn) }

 

  • Now we will upload the program on the NodeMCU chip and starting our experiment:

After finishing the code we will connect the NodeMCU chip to the computer. Then we select the port that’s connected to the NodeMCU chip. Also we will chose 9600 as the speed of data transfer as in these image:

nodemcu-software

If we are do not find the port, we should press on the refresh button.

Then we click on the activate button connection    nodemcu-open   and the communication process will start as in these image:

nodemcu-software-communication-process

  • Then we will upload the program by click on ( save to ESP ) button. Then we will save the code at (init.lua) name.
  • After saving the code at (init.lua) name, then the code will upload as in these image:

nodemcu-code

Now how to get the IP address:

After uploading the program on NodeMCU chip the IP will appear in the below like in these image:

nodemcu-software-after-uploading

But if not appear, then we will write these command { =wifi.sta.getip() } in the transmission box as in these image :

nodemcu-software-wifi-sta

Then we press send, then the IP address will appear.

  • Few notes on the name of code file:

To run the program that was saved at ESP8266 properly, it is preferable to name all the files with (.init.lua) and save each code file at a new folder with same name of our project.

Let's have a look at Image below which explains the steps:

init-files

Finally:

We hope that you have enjoyed and benefited from this tutorial. We say goodbye until the next tutorial.

Leave a Comment