Website-Controlled Christmas Tree (anyone Can Control It)

2,238

21.

12.

Introduction: Website-Controlled Christmas Tree (anyone Can Control It)

关于:我喜欢做电子,金属加工,木工,修理的东西和各种酷炫的事情:)

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.

当我懒散圣诞装饰品时,让别人控制我的圣诞灯,所以我不会担心它会很酷。

“如果我制作了一个圣诞树灯,任何人都可以通过网站界面控制的灯光怎么办?”

(insert two weeks of sleepless nights)

所以我做到了。

与二十个RGB LED的圣诞树通过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.

以下是结果:

https://blinkmytree.live/

人们同时控制它越多,效果越好:)

这个项目是今年的理想选择,因为我们很多人都在锁上,无法与朋友和家人见面和社交。为什么不通过圣诞树团结起来:)

(直播流将在1月初运行。如果仍然有人访问它,可能会扩展它。

流将结束后,我将用固定的YouTube视频替换Live Stream Link,显示一切在实践中的工作方式)

在这种指示中,我将详细解释这个项目是如何制作的。

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 :)

你需要有一组3技能(或者你将没有担心他们):一个网络服务器部分,Arduino部分和圣诞树当然!

推荐的知识:

•基本计算机和编程技巧

• Basic Linux terminal knowledge

•基本计算机网络知识

•基本电子知识

• Skills to use Google and other "special" abilities

•应该知道如何设置圣诞树:)

If you have some sense of technology and programming you should be able to learn to set this thing up according to this Instructable.

第2步:工具和组件

On the Christmas tree side, you will need:
•圣诞树(D'OH ......)

•Nodemcu Micro-Controller板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

•Nodemcu的软件(在这种指示中提供)

On the server side you will need:

•具有公共IP的虚拟专用服务器。在这里,你可以在Digitalocean上获得100美元免费https://m.do.co/c/96d53c569fdb

•域名(可选)您可以在任何注册商组织中注册https://uk.godaddy.com/

•专用代码(随附此指示)

Step 3: Configure Virtual Machine (computer) PART 1

让我们直截了当地编码:)


We need a server, which will communicate with the website and NodeMCU.

DigitalCean上的服务器允许我们拥有一个具有公共IP地址的虚拟机,这意味着我们可以在其上运行服务,并在全球范围内访问它们。

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.

您现在可以通过单击“使用Droplet启动”(基本上是DigitallyCeCean的名称为虚拟机)来创建虚拟机(远程访问虚拟计算机)。

配置页面会提出,您可以留下默认值:Ubuntu图像,基本计划,没有块存储(5 $ /月)

第4步:配置虚拟机(计算机)第2部分

数据中心区域是您将创建服务器的位置。

选择最接近的一个和您的潜在用户。这将提供最低的响应时间。

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

单击液滴右侧的三个点,您可以单击“访问控制台”,这将使您访问虚拟计算机。

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.

但是,所有可以通过控制台接口完成。

It is not as scary as it looks :)

步骤6:配置虚拟机(计算机)第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.

下载Filezilla client herehttps://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.

您将能够从虚拟机访问和传输文件。

一旦安装,单击“文件”→“站点管理器”→“新站点”,并在上面的图像上输入数据。

协议:SFTP(安全文件传输协议)

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.

单击“确定”并连接到虚拟机。

您将被警告,主机密钥未知。遵循第二个图像。

为项目创建本地文件夹,并提取您将在此下载的项目文件。

您将在计算机上编辑文件并每次要测试或更新代码时将其传输到虚拟机。

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)

通过运行,我的意思是,输入命令并按Enter键。

Now, we will run apt-get update -y to update the system.

运行APT安装APACHE2 -Y以安装Apache Web服务器。

Your Apache welcome screen should be accessible on yourhttp://虚拟机-IP来自浏览器。

使用虚拟机IP替换虚拟机-IP,例如165.12.45.123。你也可以跳过http:// asit will be automatically added.

Congrats!

注意:

If you want your website to be accessible through a name, rather than IP address (like I usedhttps://blinkmytree.live/ ),转到域提供商网站godaddy或类似(namecheap.com等)并按照以下说明:https://www.digitalocean.com/community/tutorials / ...

某些域名非常便宜。我的域名每年只需2美元。绝对值得金钱:)

Step 8: Install a Web Application Framework

Back to our console. Don't be afraid :)

使用filezilla创建名为app中的文件夹/ home,so / home / app将是您的文件夹

运行cd / home / app转到应用程序文件夹中。

运行apt安装npm -y,以安装npm包管理器。这需要几分钟。

Run npm init -y to create a file package.json, which will track/remember major package data about an app.

运行npm --save安装CORS Express安装模块CORS,Express

CORS是配置跨站点访问权限的模块,Express是Web应用程序框架。

NPM是我们使用的包管理器,我们将使用Node.js JavaScript运行时进行编程我们的应用程序编程接口(API),它将与HTTP服务器组合接受HTTP请求将颜色应用于LED,标记为LED(颜色)在内存中,并将值传递给Nodemcu,它请求它。

注意: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.

现在,如果我们可以在node.js中运行一个小程序,请进行测试

Create a file named index.js with notepad/notepad++ or other editor or integrated development environment your use (Visual Studio Codehttps://code.visualstudio.com/)在您的本地文件夹中。

Put this code in it:

var http = require('http');

http.createserver(函数(req,res){

res.writeHead(200, {'Content-Type': 'text/plain'});

res.end('Hello World!');

})。听(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 athttp://虚拟机-IP:8080from our browser. A white page with Hello World text will appear.

恭喜,您刚刚在Node.js中创建了一个Web服务器!

第9步:准备软件

通过按CTRL + C转到控制台并停止程序。

替换/ home / app /并用index.js替换它的index.js文件。

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.

您刚刚提供了Web应用程序前端http://虚拟机-IP。

Step 10: Undestanding Back-end Code and Making It Work

注意:your back-end code is at /home/app

记住,在本地编辑代码后,不要使用FileZilla将其上传到您的服务器,然后重新启动节点应用程序(控制台:Ctrl + C,箭头向上(显示最后一个命令节点index.js),输入)

有关代码的代码,您需要先输入一些数据。

首先,您需要在index.js中更改主机名变量your own domain or IP(看起来像:165.13.45.123)。

其次,我将通过代码来指导您来理解它。确保不要跳过我在代码中制作的评论。

您可以在index.js文件中看到,我们使用Express模块​​创建一个应用程序。然后,我们将CORS规则应用于它,添加API并启动HTTP服务器。此服务器不会通过获取HTTP请求来服务于Web页面,但它将通过Get HTTP请求提供LED状态,并在收到的PUT HTTP请求上更新LED状态。

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.

步骤11:了解前端代码并使其工作部分1

注意:您的前端代码为AT / var / www / html

请记住,在本地编辑代码后,不要使用FileZilla将其上传到服务器。与Node.js不同,Apache自动重新启动自身,但您必须在浏览器中重新加载页面。使用Ctrl + F5刷新并删除页面的缓存。

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 fromblinkmytree.liveto your own domain or IP, for example: 165.13.45.123.

其次,我将指导您通过现代人理解代码d 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/.

我们想要这个主要功能(敏捷方法的专家会在页面上说用户故事):

•嵌入到页面中的实时视频

• A clickable LEDs on a christmas tree, which was manipulated in Gimp image editor (https://www.gimp.org/).

•与服务器的实际通信,等待更改LED状态。

第12步:了解前端代码并使其工作部分2

一旦我们拥有我们的圣诞树,带有LED和颜色的数量来选择,我们需要为它们创建区域并将动作应用于它们,因此一旦我们单击图像的拾取器部分中的彩色LED,将选择颜色,一个颜色我们单击LED,该命令将被发送到服务器,其中Arduino将选择其值。

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.

当我们有很多区域来定义时,我们使用了在线工具https://www.image-map.net/要定义这些区域并将HTML代码复制到我们的页面。

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.

步骤13:了解前端代码并使其工作部分第3部分

在HTML主体的末尾,在<脚本>区域中,我们放弃了一些JavaScript,以定义我们在onclick事件中调用的函数。在全球范围内,我们定义了一个XMLHTTPREQUEST,我们用于发送PUT请求

We have two functions:

函数set_color(val)

function send_request(id)

For testing API request, I recommend a commonly used software tool called Postmanhttps://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.

步骤14:了解前端代码并使其工作部分4

Your application works.

要注意,数字是反转的,即20是1和1是20,这是因为树上的LED在底部开始,但是为了更好的用户体验,我们将启动导致顶部。

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

ESP8266运行略微修改的基本HTTP客户端示例草图,通过API调用从我的网站接收数据。

如果要使用相同的可寻址RGB条带,您还需要安装用于控制LED条带的库。

https://github.com/adafruit/Adafruit-WS2801-Librar...

在我附加的草图中,您需要将您的Wi-Fi名称和密码插入您的网站(参见评论)

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.

那是!

Congrats, you made it!

Step 16: RGB LED Chain

Uh, oh. Now its time to take a little break from all the coding :)

由于ESP8266没有单独控制LED的GPIO引脚,因此我使用了可寻址的RGB LED链:

https://www.sparkfun.com/products/11020


这样,所有20个RGB LED(60 LED总计)都可以仅由两个引脚 - “数据”和“时钟”和5V电源直接从ESP8266控制。

您可以设置单个RGB颜色和亮度。有一些颜色混合,您可以为每个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.

第17步:装饰圣诞树!

Make it pretty and make sure all the LEDs are visible and nicely spread over the tree.

第18步:最终触摸

当您准备好树时,拍摄漂亮的照片并重复步骤以创建可点击的位置的图像映射(LED位置)

这是与LED接口最直观的方式。

如果您不想过度补充,您可以使用常规按钮。

您还应该在YouTube上启动您的树的直播流(如果您想在实时观看发生的事情)并将流嵌入到您的网站中。

第19步:欣赏你的网站

如果你这样做,你很棒:)
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

https://blinkmytree.live/

流将持续到一月的开始(I might extend it if there will be a lot of people playing with it)

This was a very long Instructable, for a fairly complicated project. But it is worth it at the end :D

Thank you!
如果您想保持联系我正在努力的方式:

您可以订阅我的YouTube频道:

http://www.youtube.com/c/jtmakesit.

您也可以在Facebook和Instagram上关注我

https://www.facebook.com/jtmakesit.

https://www.instagram.com/jt_makes_it.

对于我目前正在努力的剧透,在幕后和其他额外的额外!ps:。,如果你真的,真的很喜欢它,你也可以在这里给我买咖啡,所以我会有更多的能量为未来的项目(这一点需要2周的睡眠,因为我太晚了。:)

https://www.buymeacoffee.com/jtmakesit.


And don't forget to vote for this Instructable in "Anything Goes" contest :)

Anything Goes Contest

这是一个条目
Anything Goes Contest

是第一个分享

    建议书

    • Anything Goes Contest

      Anything Goes Contest
    • Block Code Contest

      Block Code Contest
    • 使它真正的学生设计挑战

      使它真正的学生设计挑战

    12.Discussions

    0.
    MTP51501.

    2 days ago on步骤19.

    令人敬畏的项目,无尽的可能性!在指导方面很棒。

    0.
    JT_Makes_It

    2天前回复

    Thanks!

    1
    build_it_bob.

    3天前

    伟大的项目和执行..富级,用于显示您如何实现的大图片!
    鲍勃D.

    0.
    JT_Makes_It

    2天前回复

    谢谢 :)

    0.
    JT_Makes_It

    回复3天前

    Thanks!

    1
    NEW PEW

    4天前

    酷项目!非常好的想法和顶级执行!刚从荷兰的树一起玩:)。

    0.
    JT_Makes_It

    回复4天前

    Thank you! You are awesome!

    0.
    JT_Makes_It

    回复5天前

    Thanks!

    0.
    randofo

    5.days ago

    It did it! Internet control never gets old.

    0.
    JT_Makes_It

    回复5天前

    正确!:D.