In a previous story I wrote on this web-log in April 2015 I described how to control a RGB ledstrip with your Android Phone Using Bluetooth. You can find that story by clicking here.
The problem with Bluetooth is it's short range. About 10 meter if you are lucky. The new Blue-tooth variations (BLE) have a longer range and even use less power. However the Arduino modules for this are not so commonly available and there are a lot of smart-phones around that do not support this yet.
Wifi however is something that all smart-phones and tablets have available. And using wifi you can even control things from your desktop computer or notebook.
So let's modify the ledstrip controller for using it with an ESP-8266 so we can control it over wifi.
Basic
For this project I am writing the software in ESP-Basic.
In a previous story on this web-log I showed you how to install ESP-Basic and how to use it. I also presented you some basic (pun intended) programs.
Before we start modifying the led-strip controller I will show you how to control a strip of Neopixels in ESP-Basic using sliders. This will demonstrate how easy it is to control Neopixels with ESP-Basic and how easy it is to make a webpage that contains sliders that control the colors of the Neopixels. Something no other language can do in just a few lines of code.
NodeMCU
ESP-Basic has one (f)law: Neopixels have to be attached to GPIO15 which is also called D8 on NodeMCU modules. So we can not use an ESP-01 module for this project.
Considering the price difference between the NodeMCU and an ESP-01, keeping in mind that you will need a voltage regulator and additional electronics for the ESP-01, the NodeMCU is not a bad choice at all.
And we can use the NodeMCU with Neopixels for some othher projects that I will present shortly.
Neopixels
For those not familiar with Neopixels I'll give a short description.
Neopixels are officially called WS2812. The name Neopixels comes from Lady Ada. But what are they. Well they are RGB leds with a difference. They have a Power and Ground lead and a data-in and data-out lead. So you can daisychain them by connecting the data-in from the Neopixel to the data-out of the previous Neopixel. Next to that each Neopixel has a chip incorporated that simply knows where the Neopixel is in the chain.
You can find an extensive write-up with demo's and how to solder in the story you will find by clicking here.
Let's start with the hardware.
As discussed above please first read the intro-story about the Neopixels.
The hardware is as you can see straightforward. The Neopixels are daisy-chained through a 330 Ohm resistor to D8 of the NodeMCU and they get their power from the 5 Volt line from the NodeMCU. A large capacitor stabilises the power supply.
That's all.
The Basic program.
wprint |<h1 style="text-align:center;">Luc Volders</br>RGB-STRIP</br>CONTROL|
wprint "<br/><br/>"
slider r, 0, 255
cssid htmlid(),"background-color: red"
textbox r
wprint "<br/><br/>"
slider g, 0, 255
cssid htmlid(),"background-color: green"
textbox g
wprint "<br/><br/>"
slider b, 0, 255
cssid htmlid(),"background-color: blue"
textbox b
wprint "<br/><br/>"
button "<h2>Set</h2>", [set]
wprint "<br/></h1>"
wait
[set]
neo.stripcolor(0,6,r,g,b)
wait
Just look at the program and you can see how easy it is. The wprint command prints to the webpage.
The slider g, 0, 255 defines a slider wich gives a variable called g and has a range of 0 to 255.
cssid htmlid(),"background-color: red" is HTML code which gives the slider it's color on the web-page.
button "<h2>Set</h2>", [set] Draws a button on the screen, gives it it's name and makes sure the program jumps to the set routine when the button ism pressed.
And the last line neo.stripcolor(0,6,r,g,b) sets the Neopixel chain in the chosen color. In this example the chain has 7 Neopixels (0 to 6) and the colors are set by the r,g and b variables that we got from the sliders.
And that's all.
A complete web-page with a header, sliders and a button that controls a strip of Neopixels in just 20 lines of code. It could even have been done in less lines but then the page would not have it's fancy looks.
The Basic program puts several HTML codes on the webpage. If you have no knowledge on HTML programming I advise you tale a look at the W3SCHOOLS webpage where yoiu can find a complete course on HTML. The site also has courses on Javascript, CSS and XML.
How to use the program.
First copy the code and open a new file in ESP-Basic. Paste the code in and save it.
Now you just have to run the program and your screen will look like the picture above.
Move the sliders to any position you like and push the set button and the color of the neopixels will change instantly.
On Windows and on Android you will see next to or below the sliders a field in which the RGB values are presented.
You can alter them with the sliders or just type in the desired values.
That's it.
In an upcoming story I will show you how to adjust the program and hardware to control a 'normal' ledstrip with the sliders.
The only thing left here is to present you the source code which you can copy and paste from this page or download at my Github repositry.
https://github.com/Lucvolders/RGB-Strip-Control-with-ESP
UPDATE !!!!
I have altered the code in such a way that when you change the sliders the color off the Neopixel chain will alter immediately.
To achive this you just have to add the following line of code as the first line in the program:
timer 500,[set]
So in the new code on Github I have altered tthe SET button to end the program.
Till next time
Have fun
Luc Volders
