Mục lục:

Cây thông Noel do trang web điều khiển (Ai cũng có thể điều khiển nó): 19 bước (có hình ảnh)
Cây thông Noel do trang web điều khiển (Ai cũng có thể điều khiển nó): 19 bước (có hình ảnh)

Video: Cây thông Noel do trang web điều khiển (Ai cũng có thể điều khiển nó): 19 bước (có hình ảnh)

Video: Cây thông Noel do trang web điều khiển (Ai cũng có thể điều khiển nó): 19 bước (có hình ảnh)
Video: Với bạn " Bỏ cuộc" hay " Tiếp tục " cố gắng đây ! #shortsvideo #motivation 2024, Tháng sáu
Anonim
Cây thông Noel do trang web kiểm soát (Ai cũng có thể kiểm soát nó)
Cây thông Noel do trang web kiểm soát (Ai cũng có thể kiểm soát nó)

Bạn muốn biết trang web điều khiển cây thông Noel trông như thế nào?

Đây là video giới thiệu dự án cây thông Noel của tôi. Luồng trực tiếp hiện đã kết thúc, nhưng tôi đã tạo một video, ghi lại những gì đang diễn ra:

Năm nay, giữa tháng mười hai, tôi đang nằm trên giường của mình, cố gắng ngủ giữa một tuần làm việc. Và thay vì ngủ, tôi đã nghĩ về những gì sẽ là một dự án Giáng sinh thú vị để làm. Và rồi một ý tưởng tuyệt vời đã đến với tôi.

Vì tôi lười trang trí Giáng sinh, sẽ rất tuyệt nếu để người khác điều khiển đèn Giáng sinh của tôi, vì vậy tôi sẽ không phải lo lắng về điều đó.

"Điều gì sẽ xảy ra nếu tôi làm một chiếc đèn cây thông Noel mà BẤT CỨ AI có thể điều khiển thông qua giao diện trang web?"

(chèn hai tuần đêm không ngủ)

Vì vậy, tôi đã làm cho nó.

Một cây thông Noel với 20 đèn LED RGB được kết nối với internet qua ESP8266 Arduino.

Một người bạn của tôi (cảm ơn JP) đã giúp tôi thiết lập một trang web (vì tôi không phải là một lập trình viên thông thạo về những thứ liên quan đến trang web).

Và chúng tôi đã thiết lập luồng trực tiếp 24/7 trên youtube về cây của tôi để bạn có thể xem những gì bạn đang bật hoặc tắt mọi lúc.

Dự án này là lý tưởng cho năm nay, vì nhiều người trong chúng ta đang ở trong tình trạng bị khóa, không thể gặp gỡ và giao lưu với bạn bè và gia đình. Tại sao không đoàn kết qua cây thông Noel:)

Trong Tài liệu hướng dẫn này, tôi sẽ giải thích chi tiết cách thức thực hiện dự án này.

Bước 1: Cấp độ kỹ năng

Cấp độ kỹ năng
Cấp độ kỹ năng

Dự án này thiên về phần mềm. Nhưng đừng sợ Một số may mắn và sự giúp đỡ của chú Google sẽ giúp ích vô cùng:)

Bạn sẽ cần phải có một bộ 3 kỹ năng (hoặc bạn sẽ học chúng mà không cần lo lắng): một phần máy chủ web, một phần Arduino và tất nhiên là cây thông Noel!

Kiến thức đề xuất:

• Kỹ năng lập trình và máy tính cơ bản

• Kiến thức cơ bản về thiết bị đầu cuối Linux

• Kiến thức mạng máy tính cơ bản

• Kiến thức cơ bản về điện tử

• Kỹ năng sử dụng Google và các khả năng "đặc biệt" khác

• Nên biết cách dựng cây thông Noel:)

Nếu bạn có chút hiểu biết về công nghệ và lập trình, bạn sẽ có thể học cách thiết lập thứ này theo Tài liệu hướng dẫn này.

Bước 2: Công cụ và thành phần

Về phía cây thông Noel, bạn sẽ cần: • Cây thông Noel (d'oh…)

• Bảng mạch vi điều khiển NodeMCU

(bạn cũng có thể sử dụng ESP32 hoặc các bo mạch hỗ trợ Wi-Fi hoặc Ethernet khác)

• Dải đèn LED RGB địa chỉ. dải đèn LED RGB có địa chỉ sẽ tiết kiệm rất nhiều GPIO của Arduino (https://www.sparkfun.com/products/11020)

• Phần mềm cho NodeMCU (được cung cấp trong tài liệu hướng dẫn này)

Ở phía máy chủ, bạn sẽ cần:

• Một máy chủ riêng ảo với IP công cộng. Tại đây, bạn nhận được 100 đô la miễn phí trên DigitalOcean

• Miền (tùy chọn) bạn có thể đăng ký tại bất kỳ tổ chức đăng ký tên miền nào, ví dụ:

• Mã chuyên dụng (được cung cấp kèm theo Có thể hướng dẫn này)

Bước 3: Cấu hình Máy ảo (máy tính) PHẦN 1

Cấu hình máy ảo (máy tính) PHẦN 1
Cấu hình máy ảo (máy tính) PHẦN 1

Hãy đi thẳng vào mã hóa:)

Chúng tôi cần một máy chủ, máy chủ này sẽ giao tiếp với trang web và NodeMCU.

Máy chủ trên DigitalOcean cho phép chúng tôi có một máy ảo có địa chỉ IP công cộng, có nghĩa là, chúng tôi có thể chạy các dịch vụ trên đó và truy cập chúng trên toàn thế giới.

Sau khi bạn thanh toán đăng ký DigitalOcean hàng tháng (bạn có thể sử dụng bản dùng thử miễn phí 60 ngày), hãy tạo một dự án và đặt tên cho nó là cây thông Noel hoặc bất cứ thứ gì bạn muốn.

Giờ đây, bạn có thể tạo máy ảo của mình (máy tính ảo có thể truy cập từ xa) bằng cách nhấp vào "Bắt đầu với một giọt" (về cơ bản là tên của DigitalOcean` cho một máy ảo).

Một trang cấu hình sẽ xuất hiện và bạn có thể giữ nguyên mặc định: hình ảnh Ubuntu, gói cơ bản và không có bộ nhớ khối (5 đô la / tháng)

Bước 4: Cấu hình Máy ảo (máy tính) PHẦN 2

Cấu hình máy ảo (máy tính) PHẦN 2
Cấu hình máy ảo (máy tính) PHẦN 2
Cấu hình máy ảo (máy tính) PHẦN 2
Cấu hình máy ảo (máy tính) PHẦN 2

Vùng trung tâm dữ liệu là nơi máy chủ của bạn sẽ được tạo.

Chọn người gần bạn nhất và người dùng tiềm năng của bạn. Điều này sẽ cung cấp thời gian phản hồi thấp nhất.

Hơn nữa, trong phần Xác thực, bạn sẽ được yêu cầu nhập mật khẩu để truy cập máy ảo của mình.

Trong phần Hoàn thiện và tạo, giữ mặc định là 1 giọt, chọn tên máy chủ (lại cây thông Noel), chọn dự án của bạn đã tạo trước đó nếu không được chọn theo mặc định và nhấp vào Tạo giọt. Điều này sẽ mất một vài phút. Bằng cách nhấp vào dự án của bạn trong phần điều hướng bên trái, bạn sẽ thấy giọt của mình.

Bước 5: Cấu hình Máy ảo (máy tính) PHẦN 3

Cấu hình máy ảo (máy tính) PHẦN 3
Cấu hình máy ảo (máy tính) PHẦN 3
Cấu hình máy ảo (máy tính) PHẦN 3
Cấu hình máy ảo (máy tính) PHẦN 3
Cấu hình máy ảo (máy tính) PHẦN 3
Cấu hình máy ảo (máy tính) PHẦN 3
Cấu hình máy ảo (máy tính) PHẦN 3
Cấu hình máy ảo (máy tính) PHẦN 3

Bằng cách nhấp vào ba dấu chấm ở bên phải của giọt, bạn có thể nhấp vào Bảng điều khiển truy cập, điều này sẽ khiến bạn truy cập vào máy tính ảo của mình.

Một cửa sổ trình duyệt nhỏ mới sẽ mở ra. Bây giờ, đây không phải là môi trường máy tính để bàn, giống như trên Windows 10 hoặc Ubuntu với máy tính giao diện Đồ họa.

Tuy nhiên, tất cả đều có thể được thực hiện thông qua giao diện console.

Nó không đáng sợ như vẻ ngoài của nó:)

Bước 6: Cấu hình Máy ảo (máy tính) PHẦN 4

Cấu hình máy ảo (máy tính) PHẦN 4
Cấu hình máy ảo (máy tính) PHẦN 4
Cấu hình máy ảo (máy tính) PHẦN 4
Cấu hình máy ảo (máy tính) PHẦN 4

Bạn đã tạo thành công máy ảo của riêng mình trong đám mây DigitalOcean.

Trong các bước tiếp theo, bạn sẽ thiết lập một máy chủ web, được gọi là Apache và thiết lập trang web của riêng bạn.

Tải Filezilla client tại đây https://filezilla-project.org/download.php?platfo… (hoặc tìm phiên bản 32bit cho hệ điều hành 32bit) và cài đặt. Nó là một ứng dụng FTP (File Transfer Protocol).

Bạn sẽ có thể truy cập và chuyển các tệp từ và đến máy ảo của mình.

Sau khi cài đặt, nhấp vào tệp → quản lý trang → trang web mới và nhập dữ liệu như trên hình trên.

Giao thức: SFTP (Giao thức truyền tệp an toàn)

Máy chủ: IP của máy chủ của bạn, tìm trong dự án DigitalOcean của bạn.

Người dùng là root và mật khẩu là những gì bạn đặt khi tạo giọt của mình.

Nhấp vào OK và kết nối với máy ảo của bạn.

Bạn sẽ được cảnh báo, khóa máy chủ không xác định. Làm theo hình ảnh thứ hai.

Tạo một thư mục cục bộ cho dự án và giải nén các tệp dự án của bạn mà bạn sẽ tải xuống tại đây.

Bạn sẽ chỉnh sửa các tệp của mình trên máy tính và chuyển chúng sang máy ảo mỗi khi bạn muốn kiểm tra hoặc cập nhật mã.

Bước 7: Cài đặt Máy chủ Web

Cài đặt Máy chủ Web
Cài đặt Máy chủ Web

Đăng nhập vào bảng điều khiển giọt của bạn bằng tên người dùng root và mật khẩu của bạn.

Vì chúng tôi không có giao diện đồ họa, chúng tôi sử dụng các lệnh để điều khiển máy ảo của bạn. Dưới đây là một số lệnh phổ biến bạn sẽ sử dụng trên Ubuntu (Linux):

• pwd - in thư mục hiện tại của tôi

• ls - liệt kê các tệp và thư mục trong thư mục hiện tại của tôi

• cd / - chuyển đến thư mục / (thư mục, bao gồm các thư mục chính của linux như etc, bin, boot, dev, root, home, var, v.v.)

Ý tôi là, hãy nhập lệnh và nhấn enter.

Bây giờ, chúng tôi sẽ chạy apt-get update -y để cập nhật hệ thống.

Chạy apt install apache2 -y để cài đặt máy chủ web Apache.

Màn hình chào mừng Apache của bạn sẽ có thể truy cập được trên https:// virtual-machine-ip từ trình duyệt của bạn.

Thay thế ip máy ảo bằng ip máy ảo của bạn, ví dụ: 165.12.45.123. Bạn cũng có thể bỏ qua https:// vì nó sẽ được thêm tự động.

Chúc mừng!

Ghi chú:

Nếu bạn muốn trang web của mình có thể truy cập được thông qua tên, thay vì địa chỉ IP (như tôi đã sử dụng https://blinkmytree.live/), hãy truy cập trang web của nhà cung cấp tên miền GoDaddy hoặc tương tự (namecheap.com, v.v.) và làm theo hướng dẫn tại đây:

Một số tên miền rất rẻ. Tên miền của tôi chỉ có giá 2 đô la mỗi năm. Chắc chắn đáng tiền:)

Bước 8: Cài đặt Khung ứng dụng Web

Quay lại bảng điều khiển của chúng tôi. Đừng sợ:)

Sử dụng Filezilla để tạo một thư mục có tên ứng dụng bên trong / home, vì vậy / home / app sẽ là thư mục của bạn

Chạy cd / home / app để chuyển đến thư mục ứng dụng bên trong.

Chạy apt install npm -y để cài đặt trình quản lý gói npm. Điều này sẽ mất một vài phút.

Chạy npm init -y để tạo một tệp package.json, tệp này sẽ theo dõi / ghi nhớ dữ liệu gói chính về một ứng dụng.

Chạy npm - lưu cors cài đặt express để cài đặt cors mô-đun, express

Cors là mô-đun để định cấu hình truy cập trang web chéo và express là một khung ứng dụng web.

Npm là trình quản lý gói mà chúng tôi đã sử dụng và chúng tôi sẽ sử dụng thời gian chạy JavaScript node.js để lập trình giao diện lập trình ứng dụng (API) của chúng tôi, giao diện này kết hợp với máy chủ http sẽ chấp nhận các yêu cầu HTTP để áp dụng màu sắc cho đèn LED, đánh dấu giá trị của chúng (màu sắc) trong bộ nhớ và chuyển các giá trị cho NodeMcu, khi nó yêu cầu.

Lưu ý: Nút trong NodeMcu không liên quan gì đến nút trong node.js. NodeMcu có thể được thay thế bằng bất kỳ bảng phát triển arduino nào được kết nối internet, bảng phát triển NXP hoặc một PCB tùy chỉnh / NXP / Renesas / STM / Atmel. Node.js cũng có thể được thay thế bằng. Net framework, PHP hoặc bất kỳ nền tảng nào khác. Nhưng để đơn giản, chúng tôi đang sử dụng NodeMCU và Node.js.

Bây giờ, chúng ta hãy thực hiện một bài kiểm tra, nếu chúng ta có thể chạy một chương trình nhỏ trong node.js

Tạo tệp có tên index.js bằng notepad / notepad ++ hoặc trình soạn thảo khác hoặc môi trường phát triển tích hợp mà bạn sử dụng (Mã Visual Studio https://code.visualstudio.com/) trong thư mục cục bộ của bạn.

Đặt mã này vào đó:

var http = request ('http');

http.createServer (function (req, res) {

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

res.end ('Xin chào Thế giới!');

}). nghe (8080);

Lưu nó và chuyển nó vào thư mục / home / app dưới dạng index.js bằng cách nhấp đúp / kéo-thả vào tệp trong FileZilla.

Chạy node index.js và để nó chạy.

Bây giờ, chúng ta có thể truy cập trang của mình tại https:// virtual-machine-ip: 8080 từ trình duyệt của mình. Một trang trắng với dòng chữ Hello World sẽ xuất hiện.

Xin chúc mừng, bạn vừa tạo một máy chủ web trong node.js!

Bước 9: Chuẩn bị phần mềm

Đi tới bảng điều khiển và dừng chương trình bằng cách nhấn ctrl + C.

Thay thế tệp index.js của bạn trong / home / app / và thay thế nó bằng index.js của chúng tôi trong.

Bạn có thể tải xuống tất cả các tệp cho trang web tại đây:

drive.google.com/file/d/1oIFdipoJxg6PF5klO…

Sao chép mã cây Chrismas của chúng tôi từ thư mục html vào thư mục từ xa / var / www / html / bằng Filezilla. Nó sẽ tốn chút thời gian. Nếu nó yêu cầu bạn, hãy thay thế index.html bằng một cái mới.

Đặt lại IP của bạn vào trình duyệt web yêu thích của bạn.

Bạn vừa cung cấp giao diện người dùng cho ứng dụng web của mình trên https:// virtual-machine-ip.

Bước 10: Mã back-end không yêu cầu và làm cho nó hoạt động

Mã back-end không yêu cầu và làm cho nó hoạt động
Mã back-end không yêu cầu và làm cho nó hoạt động

Lưu ý: mã back-end của bạn có tại / home / app

Hãy nhớ rằng, sau khi bạn chỉnh sửa mã cục bộ, đừng quên tải nó lên máy chủ của bạn bằng FileZilla và khởi động lại ứng dụng nút của bạn (bảng điều khiển: ctrl + c, mũi tên lên (hiển thị nút lệnh cuối cùng index.js), nhập)

Để mã hoạt động, trước tiên bạn cần nhập một vài dữ liệu.

Trước tiên, bạn sẽ cần thay đổi biến tên máy chủ trong index.js thành miền hoặc IP của riêng bạn, (trông giống như: 165.13.45.123).

Thứ hai, tôi sẽ hướng dẫn bạn qua mã để hiểu nó. Đảm bảo không bỏ qua các nhận xét tôi đã thực hiện trong mã.

Bạn có thể thấy trong tệp index.js, rằng chúng tôi tạo một ứng dụng bằng mô-đun express. Sau đó, chúng tôi áp dụng các quy tắc CORS cho nó, thêm các API và khởi động máy chủ http. Máy chủ này sẽ không phân phát một trang web thông qua các yêu cầu GET http, nhưng nó sẽ phục vụ các trạng thái được dẫn dắt thông qua yêu cầu GET http và cập nhật các trạng thái được dẫn trên các yêu cầu PUT http đã nhận.

API là phương thức phổ biến để trao đổi thông tin giữa các ứng dụng. Chúng tôi sử dụng phổ biến nhất là các API REST mà chúng tôi tự sử dụng. Chúng không có trạng thái và không có kết nối lâu dài (shorturl.at/aoBC3, Các yêu cầu PUT chỉ cần cập nhật các trạng thái được dẫn trong biến mảng ứng dụng (bộ nhớ), các yêu cầu GET chỉ đơn giản là gửi các trạng thái dẫn đến một máy khách.

Câu trả lời cho khách hàng thường là ký hiệu JSON, nhưng đối với phản hồi đơn giản này của 30 trạng thái LED, chúng tôi chỉ cần gửi một chuỗi gồm 30 giá trị được phân tách bằng dấu phẩy.

Bước 11: Hiểu mã Front-end và làm cho nó hoạt động PHẦN 1

Lưu ý: mã giao diện người dùng của bạn tại / var / www / html

Hãy nhớ rằng, sau khi bạn chỉnh sửa mã cục bộ, đừng quên tải nó lên máy chủ của bạn bằng FileZilla. Không giống như node.js, Apache tự khởi động lại, nhưng bạn sẽ phải tải lại trang của mình trong trình duyệt của mình. Sử dụng ctrl + f5 để làm mới và cũng để xóa bộ nhớ cache của trang của bạn.

Để mã hoạt động, bạn sẽ cần nhập ít dữ liệu. Trước tiên, bạn sẽ cần thay đổi biến url trong hàm send_request bên trong index.html từ flashmytree.live thành miền hoặc IP của riêng bạn, ví dụ: 165.13.45.123.

Thứ hai, tôi sẽ hướng dẫn bạn qua mã để hiểu nó. Đảm bảo không bỏ qua các nhận xét tôi đã thực hiện trong mã. Trang là một tài liệu HTML. Bỏ tất cả các quy tắc CSS (kiểu trang và vị trí nội dung) sang một bên, chúng ta sẽ xem xét nội dung quan trọng về chức năng. Để tìm hiểu thêm về CSS, hãy xem

Chúng tôi muốn các tính năng chính này (các chuyên gia về các phương pháp nhanh sẽ nói những câu chuyện của người dùng) trên trang:

• Video trực tiếp được nhúng vào trang

• Đèn LED có thể nhấp trên cây thông Noel, được điều khiển trong trình chỉnh sửa hình ảnh Gimp (https://www.gimp.org/).

• Giao tiếp thực tế với máy chủ, chờ thay đổi trạng thái dẫn.

Bước 12: Hiểu mã Front-end và làm cho nó hoạt động PHẦN 2

Hiểu mã giao diện người dùng và làm cho nó hoạt động PHẦN 2
Hiểu mã giao diện người dùng và làm cho nó hoạt động PHẦN 2

Khi chúng ta đã có cây thông Noel với số lượng đèn LED và màu sắc để chọn, chúng ta cần tạo các khu vực và áp dụng các hành động cho chúng, vì vậy khi chúng ta nhấp vào đèn LED màu trong phần bộ chọn của hình ảnh, một màu sẽ được chọn và một chúng ta nhấp vào một đèn LED, lệnh sẽ được gửi đến máy chủ, nơi Arduino sẽ chọn giá trị của nó.

Trong HTML5, tiêu chuẩn HTML mới nhất, có một thứ gọi là bản đồ hình ảnh. Nó cho phép chúng tôi xác định các khu vực trên một hình ảnh, mà chúng tôi có thể áp dụng trình nghe hành động trên đó.

Vì chúng tôi có rất nhiều khu vực cần xác định, chúng tôi đã sử dụng một công cụ trực tuyến https://www.image-map.net/ để xác định các khu vực này và sao chép mã HTML vào trang của chúng tôi.

Khi chúng ta làm điều đó, chúng ta có thể đặt sự kiện onclick với một hàm mà nó gọi và tham số là số đèn LED cho từng khu vực này. Xem ảnh chụp màn hình ở trên.

Bước 13: Hiểu mã Front-end và làm cho nó hoạt động PHẦN 3

Hiểu mã giao diện người dùng và làm cho nó hoạt động PHẦN 3
Hiểu mã giao diện người dùng và làm cho nó hoạt động PHẦN 3

Bên trong phần cuối của nội dung HTML, trong một vùng, chúng tôi đặt một số JavaScript, để xác định các chức năng mà chúng tôi gọi trong các sự kiện onclick. Trên toàn cầu, chúng tôi xác định một XMLHttpRequest, chúng tôi sử dụng để gửi một yêu cầu PUT

Chúng tôi có hai chức năng:

function set_color (val)

function send_request (id)

Để kiểm tra yêu cầu API, tôi đề xuất một công cụ phần mềm thường được sử dụng có tên là Postman https://www.postman.com/. Nó cho phép chúng tôi chỉ cần gửi yêu cầu API đến máy chủ mà không cần kỹ năng lập trình. Nó cho phép giả lập một máy chủ và chấp nhận các yêu cầu.

Bước 14: Hiểu mã Front-end và làm cho nó hoạt động PHẦN 4

Hiểu mã giao diện người dùng và làm cho nó hoạt động PHẦN 4
Hiểu mã giao diện người dùng và làm cho nó hoạt động PHẦN 4

Ứng dụng của bạn hoạt động.

Hãy lưu ý, các con số bị đảo ngược, nghĩa là 20 là 1 và 1 là 20, điều này là do đèn LED trên cây bắt đầu ở phía dưới, nhưng để có trải nghiệm người dùng tốt hơn, chúng tôi đặt đèn LED bắt đầu lên trên cùng.

Bạn vẫn cần tạo luồng trực tiếp trên YouTube nếu muốn và thay thế mã nhúng của video YouTube bằng mã của riêng bạn.

Bước 15: Mã Arduino

Mã Arduino
Mã Arduino

ESP8266 chạy một bản phác thảo ví dụ HTTP Client cơ bản được sửa đổi một chút, nhận dữ liệu từ trang web của tôi thông qua lệnh gọi API.

Bạn cũng sẽ cần cài đặt các thư viện để điều khiển dải LED nếu bạn muốn sử dụng dải RGB có thể định địa chỉ giống như tôi đã làm.

github.com/adafruit/Adafruit-WS2801-Librar…

Trong bản phác thảo mà tôi đính kèm, bạn sẽ cần phải chèn tên và mật khẩu wi-fi của mình một url vào trang web của bạn (xem phần bình luận)

Về cơ bản, chúng tôi chuyển đổi một phản hồi http thành một chuỗi được gõ C, vì vậy chúng tôi có thể sử dụng hàm C strtok để chia chuỗi bằng dấu phẩy và điền vào bảng led với các giá trị được đọc từ máy chủ. Hơn nữa chúng ta gọi một hàm mà chúng ta đi qua bảng và dựa trên các giá trị, chúng ta chuyển đúng màu mà người dùng mong đợi.

Đó là nó!

Xin chúc mừng, bạn đã thành công!

Bước 16: Chuỗi LED RGB

Chuỗi đèn LED RGB
Chuỗi đèn LED RGB

Ồ, ồ. Bây giờ là lúc để nghỉ ngơi một chút với tất cả các mã:)

Vì ESP8266 không có nhiều chân GPIO để điều khiển đèn LED riêng lẻ, tôi đã sử dụng chuỗi đèn LED RGB có địa chỉ này:

www.sparkfun.com/products/11020

Bằng cách này, tất cả 20 đèn LED RGB (tổng cộng 60 đèn LED) có thể được điều khiển chỉ bằng hai chân - "dữ liệu" và "đồng hồ" và nguồn 5V trực tiếp từ ESP8266.

Kết nối dải với NodeMcu rất dễ dàng. 5V đến Vin trên NodeMcu (5V từ USB), dây màu vàng đến chân 12, dây màu xanh lá cây đến chân 14, nối đất.

Bạn có thể đặt độ sáng và màu RGB riêng lẻ. Với một số pha trộn màu, bạn có thể tạo ra RẤT NHIỀU màu cho mỗi đèn LED.

Ngoài ra còn có một thư viện rất thú vị cho tất cả các loại hiệu ứng FX tuyệt vời với các đèn LED này. Hãy dùng thử nếu bạn thích:

github.com/r41d/WS2801FX

Bước 17: Trang trí cây thông Noel

Trang trí cây Giáng sinh!
Trang trí cây Giáng sinh!

Làm cho nó đẹp và đảm bảo tất cả các đèn LED có thể nhìn thấy và trải rộng trên cây.

Bước 18: Những lần chạm cuối cùng

Lần chỉnh sửa cuối cùng
Lần chỉnh sửa cuối cùng

Khi bạn đã có cây sẵn sàng, hãy chụp một bức ảnh đẹp và lặp lại bước để tạo bản đồ hình ảnh của các vị trí có thể nhấp (vị trí đèn LED)

Đây là cách giao tiếp trực quan nhất với đèn LED.

Nếu bạn không muốn những thứ quá phức tạp, bạn có thể sử dụng các nút thông thường.

Bạn cũng nên bắt đầu luồng trực tiếp về cây của mình trên YouTube (nếu bạn muốn xem những gì diễn ra trong thời gian thực) và nhúng luồng vào trang web của bạn.

Bước 19: Chiêm ngưỡng trang web của bạn

Chiêm ngưỡng trang web của bạn
Chiêm ngưỡng trang web của bạn

Bạn thật tuyệt vời nếu bạn đã thành công đến thế này:) Mời bạn bè của bạn (và tất nhiên là tôi: P) và khiến họ nhấp vào cây của bạn càng nhiều càng tốt:)

n

Đây là một bài hướng dẫn rất dài, cho một dự án khá phức tạp. Nhưng cuối cùng cũng đáng: D

Cảm ơn bạn! Nếu bạn muốn giữ liên lạc về những gì tôi đang làm:

Bạn có thể đăng ký kênh YouTube của tôi:

www.youtube.com/c/JTMakesIt

Bạn cũng có thể theo dõi tôi trên Facebook và Instagram

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

cho những người tiết lộ về những gì tôi hiện đang làm, cảnh hậu trường và các tính năng bổ sung khác! Tái bút:., Nếu bạn THỰC SỰ, THỰC SỰ thích nó, bạn cũng có thể mua cho tôi một ly cà phê ở đây, để tôi có thêm năng lượng cho những dự án sau này (cái này tôi đã mất 2 tuần mất ngủ, vì tôi có ý tưởng này quá muộn):)

www.buymeacoffee.com/JTMakesIt

Và đừng quên bình chọn cho Người hướng dẫn này trong cuộc thi "Anything Goes":)

Đề xuất: