You want to know what a website controlled Christmas tree looks like?
Here it is (live streaming will be on 24/7 into the beginning of January (or more, if people will still play with it)https://blinkmytree.live/
This year, in the middle of December, I was lying in my bed, trying to sleep in the middle of a work week. And instead of sleeping I was thinking of what would be a cool Christmas project to do. And then a cool idea struck me.
As I am lazy with Christmas decorations, it would be cool to let someone else control my Christmas lights, so I wont have to worry about it.
"What if I made a Christmas tree lights that ANYONE could be able to control via a website interface?"
(insert two weeks of sleepless nights)
So I made it.
A Christmas tree with twenty RGB LEDs connected to the internet via ESP8266 Arduino.
A friend of mine (thank you JP) helped me set up a website (since I am not a fluent programmer for website related stuff).
And we set up a 24/7 youtube live stream of my tree so you will be able to see what you are turning on or off at all times.
And here is the result:
The more people control it at the same time, the better the effect :)
This project is ideal for this year, since many of us are in the lockdown, unable to meet and socialise with friends and family. Why not unite via Christmas tree :)
(The live stream will run until the beginning of January. might extend it if there will still be people visiting it.
After the stream will end, I will replace the live stream link here with a fixed youtube video, displaying how everything works in practice)
In this tutorial I will explain in the detail how this project was made.
Step 1: Skill Level
This project is more software oriented. But don't be afraid Some luck and help of uncle Google will help immensely :)
You will need to have a set of 3 skills (or you will learn them no worry): a web server part, the Arduino part and Christmas tree of course!
Recommended knowledge:
• Basic computer and programming skills
• Basic Linux terminal knowledge
• Basic computer networking knowledge
• Basic electronics knowledge
• Skills to use Google and other "special" abilities
• Should know how to set up a Christmas tree :)
If you have some sense of technology and programming you should be able to learn to set this thing up according to this tutorial.
.
Step 2: Tools and Components
On the Christmas tree side, you will need:• Christmas tree (d'oh...)
• A NodeMCU micro-controller board https://www.aliexpress.com/item/32656775273.html?s...
(you can also use ESP32 or other Wi-Fi or Ethernet capable boards)
• Addressable RGB LED strip. addressable RGB led strip will save a lot of Arduino GPIOs ( https://www.sparkfun.com/products/11020 )
• Software for the NodeMCU (provided in this tutorial)
On the server side you will need:
• A virtual private server with public IP. Here you get $100 free on DigitalOcean https://m.do.co/c/96d53c569fdb
• A domain (optional) you can register at any registrar organization, for example https://uk.godaddy.com/
• Dedicated Code (supplied with this tutorial)
Step 3: Configure Virtual Machine (computer) PART 1
Let's go straight into coding :)
We need a server, which will communicate with the website and NodeMCU.
Servers on DigitalOcean allow us to have a virtual machine with a public IP address, which means, we can run services on it, and access them worldwide.
Once you pay a DigitalOcean monthly subscription (you can use 60 day free trial), create a project and name it a Christmas tree or whatever you want.
You can now create your virtual machine (remote accessible virtual computer) by clicking "Get started with a droplet" (which is basically DigitalOcean`s name for a virtual machine).
A configuration page will come up and you can stay with a default: Ubuntu image, basic plan and no block storage (5$ /month)
Step 4: Configure Virtual Machine (computer) PART 2
A datacenter region is the place your server will be created.
Choose the nearest one to you and your potential users. This will provide the lowest response time.
Further, in Authentication section, you will be asked to enter a password for accessing your virtual machine.
In the Finalize and create section, keep default of 1 droplet, choose a host name (Christmas tree again), select your project created previously if not selected by default and click Create droplet. This will take a few minutes. By clicking on your project in the navigation section on the left you will see your droplet.
Step 5: Configure Virtual Machine (computer) PART 3
By clicking on the three dots on the right of the droplet you can click Access console, which will make you access your virtual computer.
A new small browser window will open. Now, this is not a desktop environment, like on your Windows 10 or Ubuntu with Graphical interface computer.
However, all can be done via a console interface.
It is not as scary as it looks :)
Step 6: Configure Virtual Machine (computer) PART 4
You have successfully created your own virtual machine in a DigitalOcean cloud.
In the next steps, you will set up a web server, called Apache and set up your own web page.
Download Filezilla client here https://filezilla-project.org/download.php?platfo... (or find 32bit version for 32bit operating system) and install it. It is a FTP (File Transfer Protocol) client.
You will be able to access and transfer files from and to your virtual machine.
Once installed, click file→site manager→ new site and enter data like on an image above.
Protocol: SFTP (Secure File Transfer Protocol)
Host: IP of your server, find in your DigitalOcean project.
User is root and password is what you set it at creation of your droplet.
Click OK and connect to your virtual machine.
You will be warned, the host key is unknown. Follow the second image.
Create a local folder for the project, and extract your project files you will download here.
You will edit your files on your computer and transfer them to your virtual machine every time you want to test or update the code.
Step 7: Install a Web Server
Login to your droplet console with username root and your password.
As we don`t have a graphical interface, we use commands to control your virtual machine. Here are some common commands you will use on Ubuntu (Linux):
• pwd – print my current directory
• ls – list files and folders in my current directory
• cd / – move to / directory (folder, which includes linux major directories like etc, bin, boot, dev, root, home, var and so on)
By run, I mean, enter the command and press enter.
Now, we will run apt-get update -y to update the system.
Run apt install apache2 -y to install Apache web server.
Your Apache welcome screen should be accessible on your http://virtual-machine-ip from your browser.
Replace virtual-machine-ip with your virtual machine ip, for example 165.12.45.123. You can also skip the http:// as it will be automatically added.
Congrats!
Note:
If you want your website to be accessible through a name, rather than IP address (like I used https://blinkmytree.live/ ), go to domain provider site GoDaddy or similar (namecheap.com etc..) and follow the instructions here: https://www.digitalocean.com/community/tutorials/...
Some domain names are very inexpensive. My domain did cost only 2$ per year. Definitely worth the money :)
Step 8: Install a Web Application Framework
Back to our console. Don't be afraid :)
Use Filezilla to create a folder named app inside /home, so /home/app will be your folder
Run cd /home/app to go to inside app folder.
Run apt install npm -y, to installl npm package manager. This will take a few minutes.
Run npm init -y to create a file package.json, which will track/remember major package data about an app.
Run npm --save install cors express to install modules cors, express
Cors is module for configuring cross site access and express is a web application framework.
Npm is a package manager we used and we will use node.js JavaScript runtime to program our application programming interface (API), which will, combined with a http server, accept HTTP requests for applying colors to LEDs, mark their values (colors) in memory, and pass the values to NodeMcu, when it requests it.
Note: Node in NodeMcu has nothing to do with node in node.js. NodeMcu could be replaced with any internet connected arduino development board, NXP development board, or a custom Microchip/NXP/Renesas/STM/Atmel PCB. Node.js could also be replaced with .Net framework, PHP or any other platform. But for simplicity, we are using NodeMCU and Node.js.
Now, lets make a test, if we can run a small program in node.js
Create a file named index.js with notepad/notepad++ or other editor or integrated development environment your use (Visual Studio Code https://code.visualstudio.com/) in your local folder.
Put this code in it:
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World!');
}).listen(8080);
Save it and transfer it to folder /home/app as index.js with doubleclick/drag-drop on file in FileZilla.
Run node index.js, and leave it running.
Now, we can access our page at http://virtual-machine-ip:8080 from our browser. A white page with Hello World text will appear.
Congrats, you just created a web server in node.js!
Step 9: Prepare the Software
Go to console and stop the program by pressing ctrl+C.
Replace your index.js file in /home/app/ and replace it with our index.js in.
You can download all the files for the website here:
https://drive.google.com/file/d/1oIFdipoJxg6PF5klO...
Copy our Chrismas tree code from html folder to remote directory /var/www/html/ with Filezilla. It will take some time. If it asks you, replace index.html with new one.
Put your IP again in your favorite web browser.
You have just made your web application front-end available on http://virtual-machine-ip.
Step 10: Undestanding Back-end Code and Making It Work
Note: your back-end code is at /home/app
Remember, after you edit your code locally, don`t forget to upload it to your server using FileZilla, and restart your node application (console: ctrl+c, arrow up (shows last command node index.js), enter)
For code to work, you will need to enter a few data first.
Firstly, you will need to change hostname variable in index.js to your own domain or IP, (something that looks like: 165.13.45.123).
Secondly, I will guide you through code to understand it. Make sure not to skip comments I made in code.
You can see in the index.js file, that we create an app using express module. Then, we apply CORS rules to it, add the APIs and start a http server. This server wont serve a web-page through GET http requests, but it will serve led states through GET http request and update led states on received PUT http requests.
APIs are common practice to exchange information between applications. Most common we use are REST APIs we use ourselves. They are stateless and don't have a persistent connection (shorturl.at/aoBC3, https://www.smashingmagazine.com/2018/01/understa... ).
PUT requests simply updates the led states in app array variable (memory), GET requests simply sends led states to a client.
The answer to the client is usually in JSON notation, but for this simple response of 30 LED states, we simply send a string of 30 comma separated values.
Step 11: Understanding the Front-end Code and Making It Work PART 1
Note: your front-end code is at /var/www/html
Remember, after you edit your code locally, don`t forget to upload it to your server using FileZilla. Unlike node.js, Apache restarts itself automatically, but you will have to reload your page in your browser. Use ctrl+f5 to refresh and to delete the cache of your page also.
For code to work, you will need to enter few data. First, you will need to change the url variable in send_request function inside index.html from blinkmytree.live to your own domain or IP, for example: 165.13.45.123.
Second, I will guide you through code to understand it. Make sure not to skip comments I made in code. Page is an HTML document. Leaving all CSS rules (page style and content position) aside, we will look at functionality important content. To learn more about CSS, check https://www.w3schools.com/css/.
We wanted this main features (experts of agile methods would say user stories) on the page:
• Live video embedded into the page
• A clickable LEDs on a christmas tree, which was manipulated in Gimp image editor (https://www.gimp.org/).
• Actual communication with a server, waiting to change led states.
Step 12: Understanding the Front-end Code and Making It Work PART 2
Once we have our Christmas tree with numbers of LEDs and colors to pick, we need to create areas and apply actions to them, so once we click on the colored LED in a picker section of an image, a color will be selected, and one we click on a LED, the command will be sent to the server, where the Arduino will pick its value.
In HTML5, the newest HTML standard, there is something called an image map. It allows us to define areas on an image, which we can apply action listeners on it.
As we have a lot of areas to define, we used a tool online https://www.image-map.net/ to define these areas and copied HTML code to our page.
Once we do that, we can put onclick event with a function it calls and parameter of a LED number to each of these areas. See the screenshot above.
Step 13: Understanding the Front-end Code and Making It Work PART 3
Inside the end of HTML body, in a < script > region, we put some JavaScript, to define the functions we call in onclick events. Globally, we define a XMLHttpRequest, which we use to send a PUT request
We have two functions:
function set_color(val)
function send_request(id)
For testing API request, I recommend a commonly used software tool called Postman https://www.postman.com/. It allows us to simply send API request to the server, without programming skills. It allows to mock a server, and accept requests as well.
Step 14: Understanding the Front-end Code and Making It Work PART 4
Your application works.
Be aware, the numbers are reversed, that is, 20 is 1 and 1 is 20, this is because LEDs on the tree starts on the bottom, but for better user experience, we put a start led to the top.
You will still need to create a live stream on YouTube if you want it, and replace the embed code of the YouTube video with your own.
Step 15: The Arduino Code
The ESP8266 runs a basic HTTP Client example sketch that is slightly modified, receiving the data from my website via an API call.
You will also need to install libraries for controling the LED strip if you want to use the same addressable RGB strip as I did.
https://github.com/adafruit/Adafruit-WS2801-Librar...
In the sketch I attached, you will need to insert your wi-fi name and password an an url to your website (see the comments)
We basically convert a http response into a C-typed string, so we can use C function strtok to split the string by commas and fill the leds table with values read from a server. Than we call a function where we go through the table, and based on the values, we turn the correct color the user expects.
That`s it!
Congrats, you made it!
Step 16: RGB LED Chain
Uh, oh. Now its time to take a little break from all the coding :)
Since the ESP8266 does not have many GPIO pins to control LEDs individually, I used this addressable RGB LED chain:
https://www.sparkfun.com/products/11020
This way, all 20 RGB leds (60 leds total) can be controlled by only two pins - "data" and "clock" and 5V power directly from ESP8266.
You can set individual RGB color, and brightness. With some color mixing, you can produce A LOT of colors for each LED.
There is also a very cool library for all sorts of cool FX effects with these LEDs. Try it out if you like:
https://github.com/r41d/WS2801FX
Step 17: Decorate the Christmas Tree!
Make it pretty and make sure all the LEDs are visible and nicely spread over the tree.
Step 18: Final Touches
When you have the tree ready, take a nice photo and repeat the step for creating the image map of the clickable positions (LED positions)
This is the most intuitive way of interfacing with the LEDs.
If you don't want to overcomplicate stuff, you can use regular buttons.
You should also start a live stream of your tree on YouTube (if you want to watch what happens in real time) and embed the stream into your site.
Step 19: Admire Your Website
You are awesome if you made it this far :)Invite your friends (and me of course :P ) and make them click your tree as much as possible :)
But until then, you can play with my tree
The stream will run until the beginning of January (I might extend it if there will be a lot of people playing with it)
This was a very long tutorial, for a fairly complicated project. But it is worth it at the end :D
Thank you! If you want to stay in touch on what I am working on:
You can subscribe to my YouTube channel:
http://www.youtube.com/c/JTMakesIt
You can also follow me on Facebook and Instagram
https://www.facebook.com/JTMakesIt
https://www.instagram.com/jt_makes_it
for spoilers on what I am currently working on, behind the scenes and other extras! PS:., if you REALLY, REALLY liked it, you can also buy me a coffee here, so I will have more energy for future projects (this one took 2 weeks of sleep away from me, since I got this idea too late) :)
https://www.buymeacoffee.com/JTMakesIt
And don't forget to vote for this tutorial in "Anything Goes" contest :)
Jure Trošt
jery93
Comments
Please log in or sign up to comment.