ต้นคริสต์มาสที่ควบคุมโดยเว็บไซต์ (ใครก็ควบคุมได้): 19 ขั้นตอน (พร้อมรูปภาพ)

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:02

คุณต้องการทราบว่าต้นคริสต์มาสที่ควบคุมโดยเว็บไซต์มีลักษณะอย่างไร?

นี่คือวิดีโอที่แสดงโครงการต้นคริสต์มาสของฉัน สตรีมแบบสดได้สิ้นสุดลงแล้ว แต่ฉันได้ทำวิดีโอขึ้นมาเพื่อจับภาพสิ่งที่เกิดขึ้น:

กลางเดือนธันวาคมปีนี้ ฉันกำลังนอนอยู่บนเตียง พยายามจะนอนกลางสัปดาห์ทำงาน และแทนที่จะนอน ฉันกำลังคิดว่าจะทำโปรเจกต์คริสต์มาสเจ๋งๆ ทำอะไรได้บ้าง และแล้วก็มีความคิดดีๆ เกิดขึ้นกับฉัน

เมื่อฉันขี้เกียจกับการตกแต่งคริสต์มาส คงจะดีถ้าให้คนอื่นมาควบคุมไฟคริสต์มาสของฉัน ฉันก็เลยไม่ต้องกังวลเรื่องนี้

"จะเป็นอย่างไรถ้าฉันสร้างไฟต้นคริสต์มาสที่ใครๆ ก็สามารถควบคุมได้ผ่านอินเทอร์เฟซเว็บไซต์"

(ใส่สองสัปดาห์ของคืนนอนไม่หลับ)

ดังนั้นฉันจึงทำมัน

ต้นคริสต์มาสที่มีไฟ LED RGB 20 ดวงเชื่อมต่อกับอินเทอร์เน็ตผ่าน ESP8266 Arduino

เพื่อนของฉันคนหนึ่ง (ขอบคุณ JP) ช่วยฉันสร้างเว็บไซต์ (เนื่องจากฉันไม่ใช่โปรแกรมเมอร์ที่คล่องแคล่วในเรื่องที่เกี่ยวข้องกับเว็บไซต์)

และเราตั้งค่าสตรีมสดบน YouTube ทุกวันตลอด 24 ชั่วโมงทุกวัน เพื่อให้คุณสามารถดูสิ่งที่คุณเปิดหรือปิดได้ตลอดเวลา

โครงการนี้เหมาะสำหรับปีนี้ เนื่องจากพวกเราหลายคนอยู่ในภาวะล็อกดาวน์ ไม่สามารถพบปะและสังสรรค์กับเพื่อนและครอบครัวได้ ทำไมไม่รวมกันผ่านต้นคริสต์มาส:)

ในคำแนะนำนี้ ฉันจะอธิบายในรายละเอียดว่าโครงการนี้ถูกสร้างขึ้นมาอย่างไร

ขั้นตอนที่ 1: ระดับทักษะ

โครงการนี้เป็นซอฟต์แวร์ที่มุ่งเน้นมากขึ้น แต่อย่ากลัวโชคและความช่วยเหลือของลุง Google จะช่วยได้อย่างมาก:)

คุณจะต้องมีชุดทักษะ 3 อย่าง (หรือคุณจะเรียนรู้ได้โดยไม่ต้องกังวล): ส่วนเว็บเซิร์ฟเวอร์ ส่วน Arduino และต้นคริสต์มาสแน่นอน!

ความรู้ที่แนะนำ:

• คอมพิวเตอร์พื้นฐานและทักษะการเขียนโปรแกรม

• ความรู้เบื้องต้นเกี่ยวกับเทอร์มินัลลินุกซ์

• ความรู้พื้นฐานเกี่ยวกับเครือข่ายคอมพิวเตอร์

• ความรู้พื้นฐานด้านอิเล็กทรอนิกส์

• ทักษะการใช้ Google และความสามารถ "พิเศษ" อื่นๆ

• ควรรู้วิธีจัดต้นคริสต์มาส:)

หากคุณมีความรู้สึกของเทคโนโลยีและการเขียนโปรแกรมคุณควรจะสามารถเรียนรู้การตั้งค่าสิ่งนี้ตามคำแนะนำนี้

ขั้นตอนที่ 2: เครื่องมือและส่วนประกอบ

ด้านต้นคริสต์มาส คุณจะต้อง:• ต้นคริสต์มาส (d'oh…)

• บอร์ดไมโครคอนโทรลเลอร์ NodeMCU

(คุณยังสามารถใช้ ESP32 หรือบอร์ดที่รองรับ Wi-Fi หรืออีเธอร์เน็ตได้)

• แอดเดรสแถบ LED RGB LED แถบ LED RGB ที่สามารถระบุตำแหน่งได้จะช่วยประหยัด Arduino GPIO ได้มาก (https://www.sparkfun.com/products/11020)

• ซอฟต์แวร์สำหรับ NodeMCU (มีให้ในคำแนะนำนี้)

ทางฝั่งเซิร์ฟเวอร์ คุณจะต้อง:

• เซิร์ฟเวอร์ส่วนตัวเสมือนพร้อม IP สาธารณะ ที่นี่คุณจะได้รับ $100 ฟรีบน DigitalOcean

• โดเมน (ไม่บังคับ) คุณสามารถจดทะเบียนกับองค์กรผู้รับจดทะเบียนใดก็ได้ เช่น

• รหัสเฉพาะ (มาพร้อมกับคำแนะนำนี้)

ขั้นตอนที่ 3: กำหนดค่า Virtual Machine (คอมพิวเตอร์) PART 1

ไปเขียนโค้ดกันเลยครับ:)

เราต้องการเซิร์ฟเวอร์ที่จะสื่อสารกับเว็บไซต์และ NodeMCU

เซิร์ฟเวอร์บน DigitalOcean ช่วยให้เรามีเครื่องเสมือนที่มีที่อยู่ IP สาธารณะ ซึ่งหมายความว่าเราสามารถให้บริการบนเครื่องนั้นและเข้าถึงได้ทั่วโลก

เมื่อคุณชำระค่าสมัครสมาชิก DigitalOcean รายเดือนแล้ว (คุณสามารถใช้การทดลองใช้ฟรี 60 วัน) ให้สร้างโปรเจ็กต์และตั้งชื่อต้นคริสต์มาสหรืออะไรก็ได้ที่คุณต้องการ

ตอนนี้คุณสามารถสร้างเครื่องเสมือนของคุณ (คอมพิวเตอร์เสมือนที่เข้าถึงได้จากระยะไกล) โดยคลิก "เริ่มต้นใช้งานด้วยหยด" (ซึ่งโดยทั่วไปแล้วจะเป็นชื่อของ DigitalOcean สำหรับเครื่องเสมือน)

หน้าการกำหนดค่าจะปรากฏขึ้นและคุณสามารถใช้ค่าเริ่มต้นได้: อิมเมจ Ubuntu แผนพื้นฐานและไม่มีการบล็อกที่เก็บข้อมูล (5$ / เดือน)

ขั้นตอนที่ 4: กำหนดค่า Virtual Machine (คอมพิวเตอร์) PART 2

ภูมิภาคดาต้าเซ็นเตอร์เป็นที่ที่เซิร์ฟเวอร์ของคุณจะถูกสร้างขึ้น

เลือกหนึ่งที่ใกล้ที่สุดกับคุณและผู้มีโอกาสเป็นผู้ใช้ของคุณ สิ่งนี้จะให้เวลาตอบสนองที่ต่ำที่สุด

นอกจากนี้ ในส่วนการรับรองความถูกต้อง คุณจะถูกขอให้ป้อนรหัสผ่านสำหรับการเข้าถึงเครื่องเสมือนของคุณ

ในส่วน Finalize and create ให้คงค่าเริ่มต้นไว้ที่ 1 droplet เลือกชื่อโฮสต์ (ต้นคริสต์มาสอีกครั้ง) เลือกโปรเจ็กต์ของคุณที่สร้างไว้ก่อนหน้านี้ หากไม่ได้เลือกไว้โดยค่าเริ่มต้น แล้วคลิก Create droplet การดำเนินการนี้จะใช้เวลาสักครู่ เมื่อคลิกที่โครงการของคุณในส่วนการนำทางด้านซ้าย คุณจะเห็นหยดของคุณ

ขั้นตอนที่ 5: กำหนดค่า Virtual Machine (คอมพิวเตอร์) PART 3

เมื่อคลิกที่จุดสามจุดทางด้านขวาของหยด คุณสามารถคลิกคอนโซลการเข้าถึง ซึ่งจะทำให้คุณเข้าถึงคอมพิวเตอร์เสมือนของคุณได้

หน้าต่างเบราว์เซอร์ขนาดเล็กใหม่จะเปิดขึ้น นี่ไม่ใช่สภาพแวดล้อมเดสก์ท็อป เช่นใน Windows 10 หรือ Ubuntu ที่มีคอมพิวเตอร์อินเทอร์เฟซแบบกราฟิก

อย่างไรก็ตาม ทั้งหมดสามารถทำได้ผ่านอินเทอร์เฟซคอนโซล

ไม่ได้น่ากลัวอย่างที่คิด:)

ขั้นตอนที่ 6: กำหนดค่า Virtual Machine (คอมพิวเตอร์) PART 4

คุณได้สร้างเครื่องเสมือนของคุณเองในคลาวด์ DigitalOcean สำเร็จแล้ว

ในขั้นตอนต่อไป คุณจะต้องตั้งค่าเว็บเซิร์ฟเวอร์ที่เรียกว่า Apache และตั้งค่าหน้าเว็บของคุณเอง

ดาวน์โหลดไคลเอนต์ Filezilla ที่นี่ https://filezilla-project.org/download.php?platfo… (หรือค้นหาเวอร์ชัน 32 บิตสำหรับระบบปฏิบัติการ 32 บิต) และติดตั้ง เป็นไคลเอนต์ FTP (File Transfer Protocol)

คุณจะสามารถเข้าถึงและถ่ายโอนไฟล์จากและไปยังเครื่องเสมือนของคุณได้

เมื่อติดตั้งแล้ว ให้คลิกไฟล์ → ตัวจัดการไซต์ → ไซต์ใหม่ แล้วป้อนข้อมูลตามภาพด้านบน

โปรโตคอล: SFTP (โปรโตคอลการถ่ายโอนไฟล์ที่ปลอดภัย)

โฮสต์: IP ของเซิร์ฟเวอร์ของคุณ ค้นหาในโครงการ DigitalOcean ของคุณ

ผู้ใช้คือรูทและรหัสผ่านคือสิ่งที่คุณตั้งไว้เมื่อสร้างดรอปเล็ตของคุณ

คลิกตกลงและเชื่อมต่อกับเครื่องเสมือนของคุณ

คุณจะได้รับคำเตือน ไม่ทราบรหัสโฮสต์ ตามภาพที่สอง

สร้างโฟลเดอร์ในเครื่องสำหรับโปรเจ็กต์ และแตกไฟล์โปรเจ็กต์ที่คุณจะดาวน์โหลดที่นี่

คุณจะแก้ไขไฟล์ในคอมพิวเตอร์และโอนไปยังเครื่องเสมือนทุกครั้งที่คุณต้องการทดสอบหรืออัปเดตโค้ด

ขั้นตอนที่ 7: ติดตั้งเว็บเซิร์ฟเวอร์

ล็อกอินเข้าสู่คอนโซลดรอปเล็ตของคุณด้วยชื่อผู้ใช้รูทและรหัสผ่านของคุณ

เนื่องจากเราไม่มีอินเทอร์เฟซแบบกราฟิก เราจึงใช้คำสั่งเพื่อควบคุมเครื่องเสมือนของคุณ ต่อไปนี้คือคำสั่งทั่วไปที่คุณจะใช้กับ Ubuntu (Linux):

• pwd – พิมพ์ไดเร็กทอรีปัจจุบันของฉัน

• ls – แสดงรายการไฟล์และโฟลเดอร์ในไดเร็กทอรีปัจจุบันของฉัน

• cd / – ย้ายไปที่ / ไดเร็กทอรี (โฟลเดอร์ซึ่งรวมถึงไดเร็กทอรีหลักของ linux เช่น bin, boot, dev, root, home, var เป็นต้น)

โดยการรันฉันหมายถึงป้อนคำสั่งแล้วกด Enter

ตอนนี้เราจะเรียกใช้ apt-get update -y เพื่ออัปเดตระบบ

เรียกใช้ apt install apache2 -y เพื่อติดตั้งเว็บเซิร์ฟเวอร์ Apache

หน้าจอต้อนรับ Apache ของคุณควรสามารถเข้าถึงได้จาก https://virtual-machine-ip จากเบราว์เซอร์ของคุณ

แทนที่ virtual-machine-ip ด้วย ip เครื่องเสมือนของคุณ เช่น 165.12.45.123 คุณยังสามารถข้าม https:// เนื่องจากจะถูกเพิ่มโดยอัตโนมัติ

ยินดีด้วย!

บันทึก:

หากคุณต้องการให้เว็บไซต์ของคุณสามารถเข้าถึงได้ผ่านชื่อ แทนที่จะเป็นที่อยู่ IP (เช่นฉันใช้ https://blinkmytree.live/) ให้ไปที่เว็บไซต์ผู้ให้บริการโดเมน GoDaddy หรือที่คล้ายกัน (namecheap.com เป็นต้น) และทำตามคำแนะนำ ที่นี่:

ชื่อโดเมนบางชื่อมีราคาไม่แพงมาก โดเมนของฉันมีค่าใช้จ่ายเพียง 2$ ต่อปี คุ้มค่าเงินแน่นอน:)

ขั้นตอนที่ 8: ติดตั้ง Web Application Framework

กลับไปที่คอนโซลของเรา ไม่ต้องกลัว:)

ใช้ Filezilla เพื่อสร้างโฟลเดอร์ชื่อ app ภายใน /home ดังนั้น /home/app จะเป็นโฟลเดอร์ของคุณ

เรียกใช้ cd /home/app เพื่อไปที่โฟลเดอร์ภายในแอป

รัน apt install npm -y เพื่อ installl npm package manager การดำเนินการนี้จะใช้เวลาสักครู่

เรียกใช้ npm init -y เพื่อสร้างไฟล์ package.json ซึ่งจะติดตาม/จดจำข้อมูลแพ็กเกจหลักเกี่ยวกับแอป

รัน npm --save install cors express เพื่อติดตั้งโมดูล cors, express

Cors เป็นโมดูลสำหรับกำหนดค่าการเข้าถึงข้ามไซต์และ Express เป็นเฟรมเวิร์กแอปพลิเคชันเว็บ

Npm เป็นโปรแกรมจัดการแพ็คเกจที่เราใช้และเราจะใช้รันไทม์ JavaScript ของ node.js เพื่อตั้งโปรแกรมอินเทอร์เฟซการเขียนโปรแกรมแอปพลิเคชัน (API) ของเรา ซึ่งจะรวมกับเซิร์ฟเวอร์ http ยอมรับคำขอ HTTP สำหรับการใช้สีกับ LED ทำเครื่องหมายค่า (สี) ในหน่วยความจำ และส่งค่าไปยัง NodeMcu เมื่อร้องขอ

หมายเหตุ: โหนดใน NodeMcu ไม่มีส่วนเกี่ยวข้องกับโหนดใน node.js สามารถแทนที่ NodeMcu ด้วยบอร์ดพัฒนา Arduino ที่เชื่อมต่ออินเทอร์เน็ต บอร์ดพัฒนา NXP หรือ Microchip/NXP/Renesas/STM/Atmel PCB แบบกำหนดเอง Node.js สามารถแทนที่ด้วย. Net framework, PHP หรือแพลตฟอร์มอื่นๆ แต่เพื่อความง่าย เราใช้ NodeMCU และ Node.js

ตอนนี้ มาทำการทดสอบกัน ถ้าเราสามารถรันโปรแกรมขนาดเล็กใน node.js. ได้

สร้างไฟล์ชื่อ index.js ด้วย notepad/notepad++ หรือโปรแกรมแก้ไขอื่นๆ หรือสภาพแวดล้อมการพัฒนาแบบรวมที่คุณใช้ (Visual Studio Code https://code.visualstudio.com/) ในโฟลเดอร์ในเครื่องของคุณ

ใส่รหัสนี้ในนั้น:

var http = ต้องการ ('http');

http.createServer (ฟังก์ชัน (req, res) {

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

res.end('สวัสดีชาวโลก!');

}).ฟัง(8080);

บันทึกและโอนไปยังโฟลเดอร์ /home/app เป็น index.js ด้วย doubleclick/drag-drop บนไฟล์ใน FileZilla

เรียกใช้โหนด index.js และปล่อยให้มันทำงาน

ตอนนี้ เราสามารถเข้าถึงหน้าเว็บของเราได้ที่ https://virtual-machine-ip:8080 จากเบราว์เซอร์ของเรา หน้าสีขาวพร้อมข้อความ Hello World จะปรากฏขึ้น

ยินดีด้วย คุณเพิ่งสร้างเว็บเซิร์ฟเวอร์ใน node.js!

ขั้นตอนที่ 9: เตรียมซอฟต์แวร์

ไปที่คอนโซลและหยุดโปรแกรมโดยกด ctrl+C

แทนที่ไฟล์ index.js ของคุณใน /home/app/ และแทนที่ด้วย index.js ของเรา

คุณสามารถดาวน์โหลดไฟล์ทั้งหมดสำหรับเว็บไซต์ได้ที่นี่:

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

คัดลอกโค้ดต้นคริสต์มาสของเราจากโฟลเดอร์ html ไปยังไดเร็กทอรีระยะไกล /var/www/html/ ด้วย Filezilla จะใช้เวลาสักครู่ ถ้ามันถามคุณ ให้แทนที่ index.html ด้วยอันใหม่

ใส่ IP ของคุณอีกครั้งในเว็บเบราว์เซอร์ที่คุณชื่นชอบ

คุณเพิ่งทำให้เว็บแอปพลิเคชันส่วนหน้าของคุณพร้อมใช้งานบน

ขั้นตอนที่ 10: ทำความเข้าใจโค้ดแบ็คเอนด์และทำให้ใช้งานได้

หมายเหตุ: รหัสส่วนหลังของคุณอยู่ที่ /home/app

อย่าลืมว่าหลังจากที่คุณแก้ไขโค้ดในเครื่องแล้ว อย่าลืมอัปโหลดไปยังเซิร์ฟเวอร์ของคุณโดยใช้ FileZilla และรีสตาร์ทแอปพลิเคชันโหนดของคุณ (คอนโซล: ctrl+c ลูกศรขึ้น (แสดงโหนดคำสั่งสุดท้าย index.js) ให้ป้อน)

เพื่อให้โค้ดใช้งานได้ คุณจะต้องป้อนข้อมูลบางอย่างก่อน

ประการแรก คุณจะต้องเปลี่ยนตัวแปรชื่อโฮสต์ใน index.js เป็นโดเมนหรือ IP ของคุณเอง (มีลักษณะดังนี้: 165.13.45.123)

ประการที่สอง ฉันจะแนะนำคุณเกี่ยวกับรหัสเพื่อทำความเข้าใจ อย่าลืมข้ามความคิดเห็นที่ฉันทำในโค้ด

คุณสามารถเห็นได้ในไฟล์ index.js ที่เราสร้างแอปโดยใช้โมดูลด่วน จากนั้น เราใช้กฎ CORS เพิ่ม API และเริ่มเซิร์ฟเวอร์ http เซิร์ฟเวอร์นี้จะไม่ให้บริการหน้าเว็บผ่านคำขอ GET http แต่จะให้บริการสถานะนำผ่านคำขอ GET http และอัปเดตสถานะนำบนคำขอ PUT http ที่ได้รับ

API เป็นวิธีปฏิบัติทั่วไปในการแลกเปลี่ยนข้อมูลระหว่างแอปพลิเคชัน ส่วนใหญ่ที่เราใช้คือ REST API ที่เราใช้เอง พวกเขาเป็นคนไร้สัญชาติและไม่มีการเชื่อมต่อแบบถาวร (shorturl.at/aoBC3, คำขอ PUT เพียงอัปเดตสถานะนำในตัวแปรอาร์เรย์ของแอป (หน่วยความจำ) คำขอ GET เพียงส่งสถานะนำไปยังไคลเอ็นต์

คำตอบสำหรับไคลเอ็นต์มักจะอยู่ในรูปแบบ JSON แต่สำหรับการตอบสนองอย่างง่ายของสถานะ LED 30 สถานะ เราเพียงแค่ส่งสตริงค่าที่คั่นด้วยเครื่องหมายจุลภาค 30 ค่า

ขั้นตอนที่ 11: ทำความเข้าใจกับ Front-end Code และทำให้มันใช้งานได้ PART 1

หมายเหตุ: รหัสส่วนหน้าของคุณอยู่ที่ /var/www/html

อย่าลืมว่าหลังจากที่คุณแก้ไขโค้ดในเครื่องแล้ว อย่าลืมอัปโหลดไปยังเซิร์ฟเวอร์ของคุณโดยใช้ FileZilla Apache จะรีสตาร์ทเองโดยอัตโนมัติไม่เหมือนกับ node.js แต่คุณจะต้องโหลดหน้าเว็บซ้ำในเบราว์เซอร์ ใช้ ctrl+f5 เพื่อรีเฟรชและลบแคชของเพจด้วย

เพื่อให้โค้ดใช้งานได้ คุณจะต้องป้อนข้อมูลบางส่วน ขั้นแรก คุณจะต้องเปลี่ยนตัวแปร url ในฟังก์ชัน send_request ภายใน index.html จาก blinkmytree.live เป็นโดเมนหรือ IP ของคุณเอง เช่น 165.13.45.123

ประการที่สอง ฉันจะแนะนำคุณเกี่ยวกับรหัสเพื่อทำความเข้าใจ อย่าลืมข้ามความคิดเห็นที่ฉันทำในโค้ด หน้าเป็นเอกสาร HTML ละเว้นกฎ CSS ทั้งหมด (รูปแบบหน้าและตำแหน่งเนื้อหา) เราจะพิจารณาเนื้อหาที่สำคัญของฟังก์ชันการทำงาน หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ CSS โปรดดูที่

เราต้องการคุณสมบัติหลักนี้ (ผู้เชี่ยวชาญของวิธีเปรียวจะพูดถึงเรื่องราวของผู้ใช้) บนหน้า:

• วิดีโอสดที่ฝังอยู่ในเพจ

• ไฟ LED ที่คลิกได้บนต้นคริสต์มาส ซึ่งปรับแต่งในโปรแกรมแก้ไขรูปภาพ Gimp (https://www.gimp.org/)

• การสื่อสารจริงกับเซิร์ฟเวอร์เพื่อรอเปลี่ยนสถานะนำ

ขั้นตอนที่ 12: ทำความเข้าใจกับ Front-end Code และทำให้มันใช้งานได้ ตอนที่ 2

เมื่อเรามีต้นคริสต์มาสที่มีจำนวน LED และสีให้เลือกแล้ว เราต้องสร้างพื้นที่และดำเนินการกับต้นคริสต์มาส ดังนั้นเมื่อเราคลิกที่ LED สีในส่วนตัวเลือกของรูปภาพ สีจะถูกเลือก และสีหนึ่งจะถูกเลือก เราคลิกที่ LED คำสั่งจะถูกส่งไปยังเซิร์ฟเวอร์ซึ่ง Arduino จะเลือกค่าของมัน

ใน HTML5 ซึ่งเป็นมาตรฐาน HTML ใหม่ล่าสุด มีบางอย่างที่เรียกว่าแผนผังรูปภาพ ช่วยให้เราสามารถกำหนดพื้นที่บนรูปภาพ ซึ่งเราสามารถปรับใช้ผู้ฟังการดำเนินการกับรูปภาพได้

เนื่องจากเรามีพื้นที่มากมายให้กำหนด เราจึงใช้เครื่องมือออนไลน์ https://www.image-map.net/ เพื่อกำหนดพื้นที่เหล่านี้และคัดลอกโค้ด HTML ไปยังเพจของเรา

เมื่อเราทำเช่นนั้นแล้ว เราสามารถใส่เหตุการณ์ onclick ด้วยฟังก์ชันที่เรียกใช้และพารามิเตอร์ของหมายเลข LED ในแต่ละพื้นที่เหล่านี้ ดูภาพหน้าจอด้านบน

ขั้นตอนที่ 13: ทำความเข้าใจกับ Front-end Code และทำให้มันใช้งานได้ ตอนที่ 3

ภายในส่วนท้ายของเนื้อหา HTML ในภูมิภาค เราใส่ JavaScript เพื่อกำหนดฟังก์ชันที่เราเรียกใช้ในเหตุการณ์ onclick ทั่วโลก เรากำหนด XMLHttpRequest ซึ่งเราใช้ส่งคำขอ PUT

เรามีสองหน้าที่:

ฟังก์ชัน set_color(val)

ฟังก์ชัน send_request(id)

สำหรับการทดสอบคำขอ API ฉันแนะนำเครื่องมือซอฟต์แวร์ที่ใช้กันทั่วไปชื่อ Postman https://www.postman.com/ ช่วยให้เราส่งคำขอ API ไปยังเซิร์ฟเวอร์ได้ง่ายๆ โดยไม่ต้องใช้ทักษะในการเขียนโปรแกรม อนุญาตให้จำลองเซิร์ฟเวอร์และยอมรับคำขอได้เช่นกัน

ขั้นตอนที่ 14: ทำความเข้าใจกับ Front-end Code และทำให้มันใช้งานได้ ตอนที่ 4

ใบสมัครของคุณใช้งานได้

ระวัง ตัวเลขจะกลับกัน นั่นคือ 20 คือ 1 และ 1 คือ 20 นี่เป็นเพราะ LED บนต้นไม้เริ่มต้นที่ด้านล่าง แต่เพื่อประสบการณ์การใช้งานที่ดีขึ้น เราจึงเริ่มต้นที่ด้านบน

คุณจะต้องสร้างสตรีมแบบสดบน YouTube หากต้องการ และแทนที่โค้ดฝังตัวของวิดีโอ YouTube ด้วยโค้ดของคุณเอง

ขั้นตอนที่ 15: รหัส Arduino

ESP8266 เรียกใช้ร่างตัวอย่างไคลเอ็นต์ HTTP พื้นฐานที่มีการปรับเปลี่ยนเล็กน้อย โดยรับข้อมูลจากเว็บไซต์ของฉันผ่านการเรียก API

คุณจะต้องติดตั้งไลบรารี่เพื่อควบคุมแถบ LED หากคุณต้องการใช้แถบ RGB ที่กำหนดแอดเดรสได้แบบเดียวกับที่ฉันทำ

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

ในภาพร่างที่ฉันแนบ คุณจะต้องใส่ชื่อ wi-fi และรหัสผ่าน URL ไปยังเว็บไซต์ของคุณ (ดูความคิดเห็น)

โดยทั่วไปเราจะแปลงการตอบสนอง http เป็นสตริงประเภท C ดังนั้นเราจึงสามารถใช้ฟังก์ชัน C strtok เพื่อแยกสตริงด้วยเครื่องหมายจุลภาคและเติมตาราง leds ด้วยค่าที่อ่านจากเซิร์ฟเวอร์ กว่าที่เราเรียกใช้ฟังก์ชันที่เราดูตาราง และตามค่า เราจะเปลี่ยนสีที่ถูกต้องตามที่ผู้ใช้คาดหวัง

แค่นั้นแหละ!

ยินดีด้วย คุณทำได้!

ขั้นตอนที่ 16: RGB LED Chain

เอ่อโอ้. ตอนนี้ได้เวลาพักจากการเขียนโค้ดทั้งหมดแล้ว:)

เนื่องจาก ESP8266 ไม่มีพิน GPIO จำนวนมากสำหรับควบคุม LED ทีละดวง ฉันจึงใช้เชน RGB LED ที่กำหนดแอดเดรสนี้ได้:

www.sparkfun.com/products/11020

ด้วยวิธีนี้ ไฟ LED RGB ทั้งหมด 20 ดวง (รวม 60 ไฟ LED) สามารถควบคุมได้โดยใช้เพียงสองพินเท่านั้น - "ข้อมูล" และ "นาฬิกา" และกำลังไฟ 5V โดยตรงจาก ESP8266

การเชื่อมต่อแถบกับ NodeMcu เป็นเรื่องง่าย 5V ถึง Vin บน NodeMcu (5V จาก USB), สายสีเหลืองต่อพิน 12, สายสีเขียวถึงพิน 14, กราวด์กับกราวด์

คุณสามารถตั้งค่าสี RGB และความสว่างแต่ละสีได้ ด้วยการผสมสี คุณสามารถผลิตสีได้มากมายสำหรับ LED แต่ละดวง

นอกจากนี้ยังมีไลบรารี่ที่ยอดเยี่ยมสำหรับเอฟเฟกต์ FX สุดเจ๋งด้วยไฟ LED เหล่านี้ ลองใช้ถ้าคุณชอบ:

github.com/r41d/WS2801FX

ขั้นตอนที่ 17: ตกแต่งต้นคริสต์มาส

ทำให้สวยงามและตรวจดูให้แน่ใจว่าไฟ LED ทั้งหมดมองเห็นได้และกระจายไปทั่วต้นไม้อย่างสวยงาม

ขั้นตอนที่ 18: สัมผัสสุดท้าย

เมื่อคุณมีต้นไม้พร้อมแล้ว ให้ถ่ายรูปสวย ๆ และทำซ้ำขั้นตอนเพื่อสร้างแผนผังภาพของตำแหน่งที่คลิกได้ (ตำแหน่ง LED)

นี่เป็นวิธีการเชื่อมต่อกับ LED ที่ใช้งานง่ายที่สุด

หากคุณไม่ต้องการทำสิ่งต่าง ๆ ให้ซับซ้อนเกินไป คุณสามารถใช้ปุ่มปกติได้

คุณควรเริ่มสตรีมแบบสดของต้นไม้ของคุณบน YouTube (หากคุณต้องการดูว่าเกิดอะไรขึ้นในแบบเรียลไทม์) และฝังสตรีมลงในไซต์ของคุณ

ขั้นตอนที่ 19: ชื่นชมเว็บไซต์ของคุณ

คุณยอดเยี่ยมมากถ้าคุณทำได้ขนาดนี้:) เชิญเพื่อนของคุณ (และฉันแน่นอน:P) และทำให้พวกเขาคลิกต้นไม้ของคุณให้มากที่สุด:)

NS

นี่เป็นคำสั่งที่ยาวมากสำหรับโครงการที่ค่อนข้างซับซ้อน แต่สุดท้ายก็คุ้ม:D

ขอขอบคุณ! หากคุณต้องการติดตามสิ่งที่ฉันกำลังทำอยู่:

คุณสามารถสมัครรับข้อมูลจากช่อง YouTube ของฉัน:

www.youtube.com/c/JTMakesIt

คุณสามารถติดตามฉันได้ทาง Facebook และ Instagram

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

สำหรับสปอยเลอร์ในสิ่งที่ฉันกำลังทำอยู่ เบื้องหลังและสิ่งพิเศษอื่น ๆ! PS:. ถ้าคุณชอบมันจริงๆ คุณสามารถซื้อกาแฟให้ฉันได้ที่นี่ ฉันจะมีพลังงานมากขึ้นสำหรับโครงการในอนาคต (อันนี้ใช้เวลา 2 สัปดาห์ในการนอนหลับจากฉันเพราะฉันได้ความคิดนี้สายเกินไป):)

www.buymeacoffee.com/JTMakesIt

และอย่าลืมโหวต Instructable นี้ในการประกวด "Anything Goes":)