นาฬิกาแอนิเมชั่น SMART LED ที่เชื่อมต่อกับเว็บพร้อมแผงควบคุมบนเว็บ เซิร์ฟเวอร์เวลาซิงโครไนซ์: 11 ขั้นตอน (พร้อมรูปภาพ)

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

เรื่องราวของนาฬิกาเรือนนี้ย้อนเวลาไปไกลกว่า 30 ปี พ่อของฉันเป็นผู้บุกเบิกแนวคิดนี้เมื่อฉันอายุเพียง 10 ขวบ นานก่อนการปฏิวัติ LED - ย้อนกลับไปเมื่อ LED อยู่ที่ 1/1000 ของความสว่างที่ทำให้ตาพร่ามัวในปัจจุบัน เขาเป็นผู้ริเริ่มอย่างแท้จริง เขาเขียนโค้ดในภาษาแอสเซมบลีและต่อสาย LED แต่ละดวงด้วยมือ (ความอดทนและความมุ่งมั่นที่น่าประทับใจ)! เวอร์ชันดั้งเดิมของเขายังคงใช้งานได้จนถึงทุกวันนี้

ฉันต้องการหยิบมันขึ้นมาจากจุดที่เขาทำค้างไว้และใช้ประโยชน์จากความก้าวหน้าทางเทคโนโลยีเพื่อสร้างนาฬิกาที่สวยงามที่เชื่อมต่อกับเว็บ มีสีสัน เล่นสนุกและเต็มไปด้วยความสนใจ มันก้าวหน้าไปถึงจุดที่เราอยากจะเผยแพร่นาฬิกาสู่สาธารณะในฐานะโครงการโอเพ่นซอร์ส แต่ยังจัดหาผลิตภัณฑ์สำเร็จรูปให้กับผู้ที่สนใจซื้อ ดูแคมเปญ indiegogo ของเราหากคุณสนใจที่จะสนับสนุน!

นาฬิกาในปัจจุบันมีคุณสมบัติมากมายและเป็นผลิตภัณฑ์ที่สมบูรณ์และใช้งานได้จริง เรารู้สึกยินดีเป็นอย่างยิ่งกับผลที่เกิดขึ้นทั้งในด้านคุณภาพและฟังก์ชันการทำงาน แต่ยังรวมถึงชุดคุณลักษณะและความเสถียรด้วย นาฬิกาจะซิงค์ทุกนาทีกับเซิร์ฟเวอร์เวลาเพื่อให้แน่ใจว่าเวลาจะสมบูรณ์แบบเสมอ ผู้ใช้จำเป็นต้องตั้งเขตเวลาเพียงครั้งเดียว เปิดใช้งานโหมดออมแสง และไม่ต้องกังวลกับการตั้งนาฬิกาอีกต่อไป!

แอนิเมชั่นที่แตกต่างกัน 52 แบบพร้อมสี ความเร็ว และความสว่างที่ปรับได้ทำให้ผู้ใช้ควบคุมได้อย่างแม่นยำและเปลี่ยนแปลงได้ไม่จำกัด โหมดโปรดจะถูกบันทึกไว้ในหน่วยความจำ ตัวจับเวลาแสงและกิจกรรมประจำวันสามารถตั้งค่าให้ผู้ใช้ได้รับการแจ้งเตือนด้วยสายตาในเวลาที่เลือก โหมดวันหยุดพิเศษสามารถเพิ่มการเฉลิมฉลองให้กับบ้านของคุณในช่วงฮัลโลวีน ปีใหม่ หรือคริสต์มาส เรายังมีโหมดพิเศษสำหรับวัน pi ซึ่งนาฬิกาจะเคลื่อนไหวตัวเลขของ pi เป็นเวลา 100 หลักทุกชั่วโมง

นาฬิกาขับเคลื่อนโดย Node MCU ESP8266 ที่เชื่อมต่อกับเว็บและตั้งโปรแกรมโดยใช้ภาษา Arduino และไลบรารี c ++ ยอดนิยมที่มาพร้อมกับมาตรฐานในแพลตฟอร์ม Arduino ต้องการทำหรือไม่? นี่คือวิธี:

ขั้นตอนที่ 1: ประกอบวัสดุ

นี่คือรายการทั้งหมดที่คุณต้องการพร้อมราคาและลิงก์

• ไม้กลมหนา 18 นิ้ว เส้นผ่านศูนย์กลาง 1 นิ้ว - $10.40 - Lowes
• อะครีลิคกระจายแสง - $5.79 + $6.55 การจัดส่ง = $12.34 จาก Amazon
• (2) สายไฟ LED แบบ prewired 50 - $ 11.67 x 2 = $23.34 จาก eBay
• ไฟ LED ด้านข้าง – $26.62 จาก Adafruit
• ESP 8266 Node MCU - $ 8.39 จาก Amazon
• ผมเปีย 2.5 มม. - $ 6.99 (แพ็ค 10) จาก Amazon
• แผงวงจรสร้างต้นแบบขนาด 4 ซม. x 6 ซม. - $9.99 (แพ็คละ 10 ชิ้น - คุณจะต้องใช้ 1) จาก Amazon
• Terminal Blocks - $ 7.99 (แพ็คละ 20 - คุณจะต้องมี 5 ชิ้น)
• ไม้สน 1x8 ชิ้น - $4.79 จาก Lowes
• วัสดุปูพื้นไม้เนื้อแข็ง 1/4 ชิ้น (สำหรับขาตั้ง) หมายเลขสินค้า 422633 - $10.48 จาก Lowes
• (1) 5v, 5a พาวเวอร์ซัพพลาย - $14.99 จาก Amazon
• วัสดุสำรองยูทิลิตี้ 2.7 มม. (รายการ 757295000023) - $10.98 จาก Home Depot
• (20) สกรูไม้สีดำ #6 - $6.83 - Amazon
• คราบและเคลียร์โค้ท แนะนำเสร็จสิ้นทั่วไป! - ประมาณ $20 จาก Woodcraft
• (2) ถั่วดำ 1/4-20 เม็ด (รายการ 755801) - $1.38 จาก Lowes
• (2) สกรูหัวกระทะสีดำ 1/4-20 (รายการ 755806) - $1.49

ราคารวมของรายการที่นี่: $177.38

เครื่องมือที่จำเป็น:

1. เครื่อง CNC
2. ปืนกาวร้อน
3. หัวแร้ง
4. เดรเมลหรือตะไบมือ
5. เครื่องปอกสายไฟ

ขั้นตอนที่ 2: ทำความคุ้นเคยกับหน้าเว็บ

ส่วนนี้เป็นสิ่งที่ทำให้นาฬิกาทั้งสนุกและเท่ หน้าเว็บแบ่งออกเป็นสี่ส่วน: การตั้งค่าทั่วไป สี แอนิเมชั่นวงแหวน และแอนิเมชั่นตัวเลข

• การตั้งค่าทั่วไป - ส่วนนี้รวมถึงการปรับเปลี่ยนต่างๆ เช่น การประหยัดเวลากลางวัน เขตเวลา ฯลฯ นอกจากนี้ยังมีตัวเลือกให้บันทึกและเรียกใช้การกำหนดค่านาฬิกาที่แตกต่างกันสามแบบในหน้านี้ ซึ่งช่วยให้ผู้ใช้สามารถบันทึกฉากโปรดได้ การตั้งค่าทั้งหมดจะถูกบันทึกไว้ใน eeprom (หน่วยความจำแบบไม่ลบเลือน); นอกจากนี้ การตั้งค่าปัจจุบันจะถูกบันทึกไว้เสมอ ดังนั้นในกรณีที่ไฟฟ้าขัดข้อง นาฬิกาจะกลับคืนสู่ตำแหน่งที่ค้างไว้
• ตัวเลือกสี - ทุกด้านของนาฬิกาสามารถปรับแต่งได้ หากต้องการเปลี่ยนสีขององค์ประกอบใดๆ เพียงคลิกที่ปุ่มที่เกี่ยวข้องกับองค์ประกอบที่คุณต้องการเปลี่ยน จากนั้นคลิกวงล้อสี ภายในวงล้อสีเป็นสีขาวบริสุทธิ์ นอกวงล้อสีจะปิดไฟ LED
• แอนิเมชั่นวงแหวน - แอนิเมชั่นวงแหวนคือเหตุการณ์ที่เกิดขึ้นทุกนาที (เช่น แอนิเมชั่นที่เลื่อนเข็มนาที) หรือกิจกรรมที่น่าสนใจ เช่น ลูกตุ้ม เลือกจากตัวเลือกที่หลากหลายได้ที่นี่
• แอนิเมชั่นตัวเลข - แอนิเมชั่นตัวเลขเป็นการแสดงแสงที่ไม่ได้เชื่อมโยงกับเหตุการณ์เวลา ค่อนข้างสร้างอารมณ์หรือความสนใจ มี 52 ตัวเลือกที่แตกต่างกันที่นี่ และสามารถทำให้น่าสนใจยิ่งขึ้นด้วยการปรับความสว่างหรือความเร็วโดยใช้แถบเลื่อน

html และ javascript สำหรับหน้านี้รวมอยู่ในซอร์สโค้ดที่โฮสต์บน github เราจะไปที่นั้นในอีกสักครู่

ขั้นตอนที่ 3: เตรียมไฟล์ CNC

งานก่อสร้างเครื่อง CNC กำลังเร่งเครื่อง CNC ของคุณ แต่อย่างที่ใครๆ ก็รู้ งาน CNC คือการตั้งค่า 95% และการตัด 5%! คำสองสามคำเกี่ยวกับการตั้งค่ามีความสำคัญที่นี่

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

หมายเหตุสำคัญ: คุณจะต้องพลิกนาฬิกาและ CNC ทั้งสองด้านของเครื่องเพื่อให้แน่ใจว่าคุณจัดทำดัชนีชิ้นไม้ของคุณ ตรวจสอบให้แน่ใจว่าคุณสามารถพลิกและวางไว้ในที่เดียวกันได้ นี่เป็นสิ่งจำเป็นสำหรับการตัดนาฬิกาที่ดี!

ตอนนี้สำหรับบันทึกบางอย่างเกี่ยวกับงาน CAD และ CAM

ไฟล์ Cad (ProductionClockMaster.3dm) เป็นไฟล์ Rhino3d และมีเลเยอร์ CAD ที่จำเป็นทั้งหมดสำหรับนาฬิกา หากคุณต้องการรูปแบบทั่วไปมากกว่านี้ ฉันได้รวม *dxf export ของเลเยอร์ด้านหน้าและด้านหลังของนาฬิกาด้วย นี่ควรเป็นข้อมูลทั้งหมดที่คุณต้องการ

งาน CNC CAM แบ่งออกเป็น 9 การดำเนินงาน CNC ที่แยกจากกัน ไฟล์ Mach3 gcode จริงจะรวมอยู่ในที่เก็บ GitHub เช่นเดียวกับไฟล์ VCarve ที่สร้างขึ้น (ถ้าคุณต้องการเปิดและส่งออกโดยใช้ตัวประมวลผลโพสต์อื่น)

ไฟล์ทั้งหมดสำหรับโครงการมีอยู่ใน GItHub นี่คือวิธีตีความไฟล์ พวกเขาค่อนข้างอธิบายตนเอง แต่นี่คือความช่วยเหลือเพิ่มเติมเพื่อขจัดความสับสนที่อาจเกิดขึ้น ไฟล์ห้าไฟล์แรกแสดงตามลำดับการดำเนินการตัด ชื่อไฟล์ลงท้ายในวงเล็บด้วยขนาดของเครื่องมือตัด ตัวอย่างเช่น - 01_กระเป๋าหลัง_v1.8_(1-2 นิ้ว)

• ชื่อไฟล์นี้ขึ้นต้นด้วย 01 จึงเป็นการดำเนินการครั้งแรก
• มันจะตัดกระเป๋าด้านหลังออก
• นี่คือเวอร์ชัน 1.8 (ฉันเริ่มต้นด้วย 0.0 เพื่อบอกคุณว่าฉันทำผิดพลาดไปกี่ครั้ง!)
• ใช้เครื่องมือตัด 1/2 นิ้ว

นอกจากการดำเนินการกับบล็อกไม้ทั้งห้านี้แล้ว ยังมีการทำงานของขาตั้งสองแบบ การทำงานของชิ้นส่วนอะคริลิก และการทำงานของแผ่นปิดด้านหลัง

หนึ่งการทำงานที่ไม่เหมือนใครคือการทำงานของ T-slot CNC นี่เป็นช่องสำหรับสลักเกลียวบนขาตั้งเดสก์ท็อปเพื่อเลื่อนเข้าไป คุณจะต้องมีบิต T-slot เช่นเดียวกับที่แสดงในภาพด้านบน

อีกครั้งหากคุณต้องการสิ่งอื่นนอกเหนือจากโปรเซสเซอร์ Mach3 มาตรฐานให้เปิดไฟล์ VCarve และส่งออกในรูปแบบท้องถิ่นของคุณ ขั้นตอนต่อไป เราจะเดินผ่านการตัดแกนและแสดงทีละขั้นตอนว่านาฬิกาควรมีลักษณะอย่างไรในแต่ละขั้นตอน

ขั้นตอนที่ 4: ตัดแกนนาฬิกา ขาตั้งเดสก์ท็อป กระเบื้องอะครีลิคและวัสดุสำรอง

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

ขั้นตอนที่ 5: ปรับแต่งด้วย Clock Face Art และ Finish

นาฬิกาสามารถใช้งานได้ดีโดยไม่ต้องมีขั้นตอนนี้ แต่การปรับแต่งตามความต้องการหรือรสนิยมของคุณก็เป็นเรื่องสนุก เราได้ลองใช้การออกแบบต่างๆ มากมาย และท้องฟ้ามีขีดจำกัดที่นี่ เราอยากเห็นตัวอย่างสิ่งที่คุณคิดขึ้นมา!

ในแง่ของการตกแต่ง เราได้ลองสิ่งต่างๆ มากมาย แต่ชอบความเรียบง่ายและง่ายต่อการย้อมสี เรายังชอบสีทับหน้า General Finishes เนื่องจากติดตั้งง่าย ทนทาน และดูดีเป็นพิเศษ! ถึงเวลาต้องทำก่อนที่เราจะเริ่มติดตั้งอุปกรณ์อิเล็กทรอนิกส์

เคล็ดลับ: อย่าลืมทำให้ขาตั้งเดสก์ท็อป ปลั๊กแผ่นรองด้านหลัง และแผ่นรองด้านหลังเปื้อนไปด้วย พกพาไปไหนมาไหนได้ง่ายและลืมเครื่องประดับชิ้นนี้ไปได้เลย!

ขั้นตอนที่ 6: กระเบื้องอะครีลิคและการประกอบขาตั้ง

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

นอกจากนี้ ในเวลานี้ คุณยังสามารถกดน็อต 1/4-20 ลงในขาตั้งและผูกเข้ากับสลักเกลียวที่เลื่อนไปตามช่อง T-slot ได้ วางขาตั้งลงในฐานด้วยกาวเล็กน้อย และตอนนี้ขาตั้งเดสก์ท็อปของคุณก็พร้อมแล้ว!

ขั้นตอนที่ 7: ติดตั้ง Pre-Wired LED ลงใน Clock Core

โอเค เราใกล้จะถึงแล้ว! อาจเป็นเพราะส่วนที่ใช้เวลานานที่สุดของนาฬิกาคือการกดที่ LED แต่ละดวง มีไฟ LED ทั้งหมด 100 ดวงในส่วนนี้ของนาฬิกา และเนื่องจาก LED มีแถบ 50 แถบ คุณจะต้องใช้แถบสองแถบที่เชื่อมต่อแบบ end-to-end ความคลาดเคลื่อนของช่อง LED นั้นโดยทั่วไปแล้วจะพอดี แม้ว่าค่าความเผื่อในการกดพอดีจะยึด LED ไว้ แต่เราก็ใช้กาวร้อนเล็กน้อย (แต้มเล็กๆ มาก) เพื่อเพิ่มความปลอดภัย กาวมากเกินไปและส่วนเกินจะบีบออกและปิดกั้นไฟ LED

หลังจากขั้นตอนนี้ คุณจะมีลูปจำนวนมากที่ออกมาจากด้านหลังของนาฬิกาซึ่งจะต้องกดลงเพื่อให้แผงด้านหลังเข้าที่ ลมร้อนเล็กน้อยจากเครื่องเป่าผมทำให้สายไฟมีความยืดหยุ่นและงอได้ง่าย อีกครั้ง การใช้กาวร้อนช่วยยึดสายไฟเหล่านี้ให้แน่น

ทั้งหมดบอกว่ากระบวนการนี้ใช้เวลาประมาณ 45 นาทีถึงหนึ่งชั่วโมง ดูภาพด้านบนเพื่อดูว่าขั้นตอนนี้ควรมีลักษณะอย่างไร รับชมวิดีโอไทม์แลปส์แสนสนุก! ถ้าเพียงเราสามารถวางสายได้อย่างรวดเร็ว!

ขั้นตอนที่ 8: ประกอบอุปกรณ์อิเล็กทรอนิกส์

การเดินสายไฟฟ้าเป็นเรื่องง่ายแต่มีคำอธิบายโดยละเอียดดังนี้ เราพบวิธีที่ง่ายที่สุดในการเดินสายคือการใช้โปรโตบอร์ดขนาด 4 ซม. x 6 ซม. (ขนาดของช่อง CNC) และติดตั้งขั้วต่อสกรูที่จะรับแถบ LED และอะแดปเตอร์ไฟ DC เราพยายามบัดกรีในลักษณะที่ตรงไปตรงมามากกว่า และไม่เพียงแต่จะยุ่งยากและยากเท่านั้น แต่ยังทำให้ไม่สามารถถอดหรือเปลี่ยนความกล้าของนาฬิกาได้ในกรณีที่ ESP8266 พังหรือจำเป็นต้องอัปเกรด การใช้ส่วนหัวมีความยืดหยุ่นมากกว่า และเราคิดว่าง่ายกว่า

เมื่อติดตั้งขั้วสกรูแล้ว ให้ทำตามแผนภาพการเดินสายเพื่อเชื่อมต่อขั้วกับหมุดที่ถูกต้อง ไม่มีส่วนประกอบจริงบน PCB มีเพียงร่องรอยจากส่วนหัวไปยังหมุด ESP8266 ที่เหมาะสม

พิน 4 คือพินสำหรับไฟ LED วงแหวน และพิน 2 คือพินสำหรับตัวเลข บวกไปที่ VSS และค่าลบไปที่พื้น

สิ่งเดียวที่จำเป็นต้องมีคือตัวต้านทาน 300ohm บนขาข้อมูลของแถบ LED ในทุกแถบ WS2812b ที่ฉันเคยเห็น (และเคยเห็นมามากมาย) นี่คือหมุดตรงกลาง ตัวต้านทานนี้ปกป้องแถบจากแรงดันไฟกระชากและไฟกระชากที่เป็นอันตรายซึ่งอาจทำให้เกิดความเสียหายหรือพฤติกรรมที่คาดเดาไม่ได้ ฉันละเลยการติดตั้งตัวต้านทานนี้และได้เผาไฟ LED ตัวแรกบนแถบ (บางครั้งไม่มีอะไรเกิดขึ้นและทำงานได้อย่างสมบูรณ์) ควรเพิ่มตัวต้านทานแบบอินไลน์ซึ่งหมายความว่ามันทำหน้าที่เหมือนลิงค์ในห่วงโซ่ที่เชื่อมต่อบอร์ดกับสายไฟเข้ากับ LED แถบ LED บางเส้นมีตัวต้านทานเหล่านี้ติดตั้งอยู่แล้วและบางเส้นไม่มี หากคุณไม่แน่ใจว่าแถบ LED ของคุณมีหรือไม่ ให้ดำเนินการต่อและเพิ่มอีกหนึ่งแถบ การทำเช่นนี้ไม่มีอันตราย ตรวจสอบให้แน่ใจว่าได้เพิ่มตัวต้านทานนี้แบบอินไลน์ให้ใกล้ที่สุดกับด้าน LED ของสายเชื่อมต่อ ไม่ใช่ด้าน PCB

ช่องที่ด้านหลังนาฬิกาออกแบบมาเพื่อวัตถุประสงค์สองประการ ทั้งสามารถรับหม้อแปลง 5v สำหรับติดตั้งบนผนังหรือสามารถเก็บแบตเตอรี่สำรองได้ ภาพประกอบนี้เป็นชุดแบตเตอรี่ 5v ทั่วไปที่ใช้ในการขยายช่วงของอุปกรณ์ไร้สาย เพียงซื้ออะแดปเตอร์ USB เป็น 2.5 มม. และนาฬิกาของคุณก็ใช้พลังงานจากแบตเตอรี่แล้ว!

คุณจะต้องเจาะรูจากช่องตรงกลางไปยัง PCB เพื่อรับผมเปียตัวเมีย DC ทำได้โดยง่ายเพียงแค่ทำมุมสว่านของคุณ ให้แน่ใจว่าได้อยู่ตื้นเพื่อไม่ให้เจาะผ่านหน้าปัดนาฬิกา! แสดงให้เห็นการเจาะที่เสร็จสมบูรณ์โดยผมเปียที่พันอยู่ในโพรงอย่างเรียบร้อย

ขั้นตอนที่ 9: อัปโหลดรหัส

รหัสสำหรับนาฬิกาสามารถพบได้ในหน้า github ของ brightlightart โค้ดได้รับการปรับปรุงอย่างต่อเนื่องและมีการแสดงความคิดเห็นเป็นอย่างดี หากคุณไม่คุ้นเคยกับไฟล์ *.ino นี่เป็นรูปแบบไฟล์ Arduino และจำเป็นต้องคอมไพล์ด้วย Arduino IDE เมื่อคอมไพล์แล้ว คุณจะอัปโหลดผ่านแจ็ค microUSB มาตรฐานบน ESP8266 หากคุณต้องการความช่วยเหลือเกี่ยวกับวิธีการใช้ ESP 8266 ต่อไปนี้คือบทช่วยสอนที่ยอดเยี่ยมเกี่ยวกับการเขียนโปรแกรมด้วยอินเทอร์เฟซยอดนิยมนี้ มันค่อนข้างจะใกล้หมดกล่อง แต่ก็ไม่เชิง!

ไฟล์ต่าง ๆ เหล่านี้ทำอะไรได้บ้าง? นี่คือรายละเอียดโครงสร้างของไฟล์เหล่านี้และสิ่งที่พวกเขาทำในภาพรวม

โฟลเดอร์เว็บเซิร์ฟเวอร์

Index.htm -เมื่อรหัสถูกอัปโหลดครั้งแรกไปยัง ESP8266 คุณจะเห็นหน้าอัปโหลดที่ขอให้คุณอัปโหลดไฟล์ อัปโหลดไฟล์ index.htm ไฟล์นี้ทำหน้าที่ในหน้าเว็บ - ไฟล์อื่นๆ ในโฟลเดอร์นั้นโฮสต์อยู่ที่ brightlightart.com แต่อยู่ที่นี่เพื่อใช้อ้างอิงในกรณีที่คุณต้องการเปลี่ยนสไตล์ชีต/จาวาสคริปต์และโฮสต์เอง

โฟลเดอร์หลัก

• enLIGHTen-LED-Clock.ino - นี่คือไฟล์หลักและมาจากโครงการ McLighting ที่ยอดเยี่ยม สคริปต์ได้รับการแก้ไขอย่างมากจากสถานะเดิม แต่เราเป็นหนี้บุญคุณในโครงการนี้เป็นจุดเริ่มต้นที่ยอดเยี่ยมสำหรับโครงการของเรา
• colormodes.h - จัดการอนิเมชั่นแสงส่วนใหญ่บนวงแหวน ยังจัดการฟังก์ชั่นเวลา
• definitions.h - กำหนดตัวแปรส่วนกลางส่วนใหญ่
• request_handlers.h - สิ่งนี้จะสื่อสารกับ ESP8266 และจัดการคำขอที่เข้ามาและส่งข้อมูลไปยัง ESP8266
• spiffs_webserver.h - ช่วยให้บริการและตีความหน้าเว็บ นี่เป็นไฟล์เดียวที่ไม่มีการเปลี่ยนแปลงจากโครงการ McLighting
• WS2812FX.cpp - จัดการภาพเคลื่อนไหวแบบเบาบนตัวเลข เกือบทั้งหมดนำมาจากไลบรารี kitsurfer WS2812B ที่ยอดเยี่ยม การเปลี่ยนแปลงหลักในที่นี้คือการเพิ่มฟังก์ชันการทำงานสำหรับเข็มชั่วโมงที่จะติดสว่าง
• WS2812FX.h - ไฟล์ส่วนหัวที่ไปกับไลบรารี WS2812fx นี้ส่วนใหญ่ไม่เปลี่ยนแปลง

รวมไฟล์เพิ่มเติม

นอกเหนือจากไฟล์ที่รวมอยู่ในนี้ คุณจะต้องใช้ไลบรารีต่อไปนี้ เหล่านี้เป็นไลบรารีมาตรฐานและรวมไว้อย่างง่ายดายโดยการค้นหาภายใน IDE

• NtpClientLib.h
• DNSServer.h
• FS.h
• ESP8266mDNS.h
• EEPROM.h
• WiFiClient.h
• Ticker.h
• WiFiUdp.h
• WiFiManager.h
• WebSocketsServer.h
• WebSockets.h
• ESP8266WiFi.h
• ESP8266เว็บเซิร์ฟเวอร์

ขั้นตอนที่ 10: การตั้งค่าเริ่มต้นของนาฬิกาและการสาธิต EnLIGHTen

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

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

เมื่อเริ่มต้นอีกครั้ง คุณจะเห็นชุดตัวเลขตามลำดับ หมายเลขที่แสดงคือที่อยู่ IP ของหน้าเว็บที่คุณต้องการเชื่อมต่อ ตัวอย่างเช่น อาจแสดง 1, 9, 2,., 1, 6, 8,., 0,., 3, 1 ซึ่งแปลเป็น https://192.168.0.31 พิมพ์ที่อยู่นี้ลงในหน้าเว็บและตอนนี้คุณควรเชื่อมต่อกับนาฬิกาของคุณแล้ว กำหนดค่าออกไปและสนุก! อีกครั้ง นาฬิกาใช้เทคโนโลยี websocket ดังนั้นการเปลี่ยนแปลงใดๆ ที่คุณทำควรมีผลทันทีโดยไม่จำเป็นต้องกดบันทึกหรืออัปเดตหน้าเว็บ มันโต้ตอบและสนุกมากในเรื่องนี้!

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

เมื่อคุณคุ้นเคยกับการทำงานของโค้ดแล้ว อย่าลืมติดตั้ง backing material! รูเจาะล่วงหน้าช่วยให้จัดตำแหน่งได้ง่าย กดสายใดๆ ที่ภาคภูมิใจ และตอนนี้การเดินสายของคุณปลอดภัยแล้ว และนาฬิกาก็ดูเสร็จแล้ว!

ขั้นตอนที่ 11: สร้าง พัฒนา สนับสนุน และเพลิดเพลิน

เราชอบที่จะเห็นผู้คนจำนวนมากสร้างและเพลิดเพลินกับนาฬิกาเรือนนี้ให้มากที่สุด เรารักโครงการนี้และเราต้องการให้ผู้อื่นแบ่งปันประสบการณ์! เรามีความสนุกสนานมากมายในการแก้ปัญหา การเอาชนะอุปสรรค การสควอชบั๊ก และการได้รับรางวัลด้วยแสงสว่างที่มีความหมายและสนุกสนาน ประโยชน์ที่เราได้รับจากชุมชนโอเพนซอร์ซที่สร้างสรรค์นั้นประเมินค่าไม่ได้ และสนับสนุนให้เราเผยแพร่แหล่งข้อมูลนี้เพื่อการเรียนรู้ร่วมกัน การปรับปรุงอย่างต่อเนื่อง และความเพลิดเพลินทางเทคนิค เราชอบที่จะได้ยินเกี่ยวกับการสร้างที่ประสบความสำเร็จและวิธีปรับปรุงนาฬิกา enLIGHTen ของคุณ กรุณาวางสายและแจ้งให้เราทราบ!

ไม่ใช่ทุกคนที่มีเวลา ทักษะ เครื่องมือหรือทรัพยากรในการสร้างนาฬิกาเหล่านี้ตั้งแต่เริ่มต้น ดังนั้นหากคุณสนใจที่จะซื้อนาฬิกาที่เสร็จสมบูรณ์ ไม่ว่าจะเป็นผลิตภัณฑ์สำเร็จรูปหรือเป็นฐานสำหรับการพัฒนาอย่างต่อเนื่อง โปรดสนับสนุนเราใน indiegogo