เล่นกับไฟผ่าน WIFI! ESP8266 & Neopixels: 8 ขั้นตอน

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

โดยเว็บไซต์ทางการของ ElectropeakElectroPeak ติดตามเพิ่มเติมโดยผู้เขียน:

เกี่ยวกับ: ElectroPeak เป็นสถานที่ครบวงจรในการเรียนรู้อุปกรณ์อิเล็กทรอนิกส์และนำแนวคิดของคุณมาสู่ความเป็นจริง เราเสนอคำแนะนำชั้นยอดเพื่อแสดงให้คุณเห็นว่าคุณสามารถทำโครงการได้อย่างไร เรายังนำเสนอผลิตภัณฑ์คุณภาพสูงเพื่อให้คุณมี… More About Electropeak »

สร้างเอฟเฟกต์การจำลองไฟสุดเจ๋งด้วยการควบคุมแบบไร้สายด้วย Wi-Fi แอพมือถือ (สำหรับสมาร์ทโฟน Android) ที่มีอินเทอร์เฟซที่ดูดีพร้อมที่จะติดตั้งเพื่อเล่นกับผลงานของคุณ! เราจะใช้ Arduino และ ESP8266 เพื่อควบคุมเปลวไฟ ในตอนท้ายของโครงการนี้ คุณจะได้เรียนรู้:

• NeoPixels ทำงานอย่างไร
• วิธีตั้งโปรแกรม ESP8266 และควบคุมตัวแปรผ่าน wifi
• วิธีสร้างเอฟเฟกต์ไฟสุดเจ๋งด้วย Neopixels

ขั้นตอนที่ 1: บทนำเกี่ยวกับ Neopixels

ไฟ LED ที่สามารถระบุตำแหน่งแยกกันได้หรือมักเรียกว่า Neopixles มีอยู่มาระยะหนึ่งแล้ว และคุณอาจรู้จัก แต่หากคุณไม่คุ้นเคย ไฟ LED เหล่านี้ก็เหมือนกับไฟ LED RGB ปกติ แต่ตามชื่อที่บ่งบอกว่าสีของไฟ LED แต่ละตัวสามารถระบุแยกกันได้ ทำให้สามารถสร้างรูปแบบและแอนิเมชั่นเจ๋งๆ ได้ไม่จำกัด สำหรับ WS2812b คุณต้องมีสายไฟ 3 เส้น 2 สายสำหรับจ่ายไฟและ 1 สายสำหรับข้อมูล นั่นหมายความว่าคุณต้องการเพียงพิน Arduino ฟรีหนึ่งพินเพื่อควบคุม LED จำนวนมากมาย!

ในโครงการนี้ เราจะใช้ LED อัจฉริยะเหล่านี้เพื่อสร้างเอฟเฟกต์ไฟ สำหรับการควบคุม LED เราจะใช้ไลบรารี FastLED ที่ยอดเยี่ยม เราจะใช้ตัวอย่างสเก็ตช์ Fire2012 ของห้องสมุดที่เขียนโดย Mark Kriegsman เราใช้ LED 6 แถบ โดยแต่ละแถบมี LED 30 ดวง (รวม 180 LEDs) เราติด LED นี้บนท่อพีวีซีชิ้นหนึ่งแล้ววางลงในกระบอกแก้ว (กระบอกแก้วเหล่านี้มักใช้เป็นแจกัน) เราต้องกระจายแสงของ LED เพื่อให้ดูต่อเนื่อง โดยเราใช้กระดาษลอกลายซึ่งให้แสงผ่านและกระจายแสง

ขั้นตอนที่ 2: วัสดุที่จำเป็น

ส่วนประกอบฮาร์ดแวร์

• ESP8266 Serial WIFI ไหวพริบ Cloud Board×1
• Neopixels Smart LED Strip (แถบ 60LED/m) ×1
• ตัวแปลงระดับลอจิก ×1
• สายจัมเปอร์ชาย - หญิงขนาด 21 ซม. 40P × 1
• ท่อพีวีซี 60ซม. ขนาด 2” ×1
• กระดาษลอกลาย ×1
• กระบอกแก้ว×1

แอพซอฟต์แวร์

Arduino IDE

เครื่องมือช่าง

• ปืนกาวร้อน
• หัวแร้ง

ขั้นตอนที่ 3: การก่อสร้าง

ก่อนอื่น หากระบอกแก้วที่เหมาะสม กระบอกของเรามีความยาว 60 ซม. และเส้นผ่านศูนย์กลาง 12 ซม.

หากคุณพบกระบอกแก้วฝ้าที่จะดี แต่ถ้าเป็นแก้วใส คุณสามารถใช้กระดาษลอกลายเพื่อปกปิดพื้นผิวของทรงกระบอก (พื้นผิวด้านในหรือด้านนอก) กระดาษลอกลายจะทำหน้าที่กระจายแสงได้ดีและให้ผลลัพธ์ที่ดี หลังจากได้กระบอกแก้วแล้ว ให้วัดความยาวภายในแล้วตัดท่อพีวีซีให้เข้าในกระบอกสูบ กระบอกแก้วของเรามีความสูง 60 ซม. (ไม่รวมฐานที่มีความยาวภายใน 59 ซม.) ดังนั้นเราจึงตัดท่อพีวีซีของเราให้เหลือ 59 ซม. คุณจะติดแถบ LED บนท่อนี้ ท่อที่มีเส้นผ่านศูนย์กลาง 4 ซม. จะสมบูรณ์แบบ ต่อไปเราต้องตัดแถบนำของเราเป็น 6 ส่วนเท่า ๆ กันที่นี่เราใช้แถบความหนาแน่น 60LEDs / m (คุณสามารถใช้ความหนาแน่นที่สูงขึ้นเพื่อให้ได้ผลลัพธ์ที่ดีขึ้นหากต้องการ) เราใช้ความยาว 50 ซม. หกอันซึ่งหมายความว่าเราต้องการ 3 เมตร เว้นระยะห่างทั้ง 6 รอบท่อพีวีซีเท่าๆ กัน แล้วติดแถบเข้ากับท่อ นี่คือลักษณะที่ควรจะเป็น

ในการต่อแถบ LED เข้าด้วยกัน คุณสามารถบัดกรีสายไฟเข้ากับแถบได้โดยตรงตามภาพวาดต่อไปนี้ หรือส่วนหัวของหมุดบัดกรีแรกกับแถบ จากนั้นใช้สายเขียงหั่นขนมเพื่อเชื่อมต่อ

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

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

เราใช้ Arduino IDE สำหรับการเข้ารหัสและอัปโหลดไปยัง ESP8266 คุณต้องใช้บอร์ดที่มี ESP8266 ที่มี SPIFFS ขนาด 3MB หากคุณต้องการอัปโหลดไฟล์ซอฟต์แวร์คอนโทรลเลอร์บน SPIFFS SPIFFS ย่อมาจาก “Serial Peripheral Interface Flash File System” คุณสามารถอัปโหลดไฟล์คอนโทรลเลอร์ไปยังหน่วยความจำนี้เพื่อให้บริการไฟล์จากตำแหน่งนั้น โดยการทำเช่นนี้ คุณสามารถเปิดเบราว์เซอร์ของคุณ (บนโทรศัพท์หรือโน้ตบุ๊ก) และไปที่ที่อยู่ของ ESP ของคุณ (ค่าเริ่มต้นคือ 192.168.4.1) และคุณจะได้รับอินเทอร์เฟซตัวควบคุมในเบราว์เซอร์ของคุณโดยไม่ต้องติดตั้งแอป หากคุณ มี iPhone หรือ iPad นี่เป็นทางเลือกเดียวของคุณ

อัปโหลดภาพสเก็ตช์ต่อไปนี้ลงในบอร์ด ESP ของคุณ เราต้องการไลบรารี FastLED ดังนั้นก่อนอื่นให้เพิ่มลงใน Arduino IDE ของคุณหากยังไม่ได้ทำ (คุณสามารถดาวน์โหลดได้ที่นี่) รหัสจำลองการเกิดเพลิงไหม้คือภาพสเก็ตช์ fire2012 ของ Mark Kriegsman ซึ่งคุณสามารถหาได้ในตัวอย่าง ตัวอย่างนั้นใช้สำหรับแถบนำหนึ่งแถบ แต่ที่นี่เราได้แก้ไขรหัสเพื่อใช้จำนวนแถบตัวแปร ยิ่งจำนวนแถบ/ไฟ LED มากเท่าใด เอฟเฟกต์ก็จะยิ่งมากขึ้นเท่านั้น ตรรกะของการจำลองอัคคีภัยได้อธิบายไว้อย่างชัดเจนในไฟล์ตัวอย่าง หากคุณต้องการทราบวิธีการทำงาน อ่านซอร์สโค้ดของตัวอย่าง

ขั้นตอนที่ 5: แอป

ในการควบคุม "รูปลักษณ์" ของไฟ มีสองตัวแปรให้เล่น: SPARKING และ COOLING ซึ่งคุณสามารถควบคุมแบบไดนามิกในซอฟต์แวร์ตัวควบคุมที่อัปโหลดไปยัง SPIFFS หรือแอป Android ที่คุณสามารถดาวน์โหลดได้ คุณยังสามารถควบคุม FPS ได้ที่นี่

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

ขั้นตอนที่ 6: วิธีอัปโหลดไปยัง SPIFFS

ในการอัปโหลดไฟล์ไปยังหน่วยความจำ SPIFFS โดยใช้ Arduino IDE ก่อนอื่นคุณต้องสร้างโฟลเดอร์ชื่อ "data" ภายในโฟลเดอร์ของ Sketch และวางไฟล์ทั้งหมดที่คุณต้องการอัปโหลดในโฟลเดอร์นั้น ไฟล์ที่อัปโหลดที่นี่มีทั้งแบบร่างและโฟลเดอร์นี้

ถัดไป คุณต้องมีปลั๊กอินตัวอัปโหลดระบบไฟล์ Arduino ESP8266 สำหรับ Arduino ทำตามคำแนะนำบนหน้า Github และติดตั้งปลั๊กอิน เมื่อติดตั้งแล้ว คุณจะพบ ESP8266 Sketch Data Upload ใต้เมนูเครื่องมือ ใส่ ESP ของคุณเข้าสู่โหมดการเขียนโปรแกรมแล้วคลิก อดทนรอและปล่อยให้ไฟล์อัปโหลดซึ่งอาจใช้เวลาสักครู่ หมายเหตุ: ตั้งค่า "ความเร็วในการอัปโหลด" เป็น 921600 เพื่อให้เร็วขึ้น

ขั้นตอนที่ 7: มันทำงานอย่างไร

ภาพสเก็ตช์ที่อัปโหลดไปยังบอร์ด ESP8266 จะสร้างเว็บเซิร์ฟเวอร์บนนั้น ซึ่งตอบสนองต่อคำขอที่ส่งจากแอป แอปเพียงแค่ส่งคำขอ GET ไปยังเซิร์ฟเวอร์ (ESP8266) ข้อมูลสีเพื่อสร้างจานสีจะถูกส่งเป็นอาร์กิวเมนต์ในคำขอรับ เช่นเดียวกับพารามิเตอร์อื่นๆ เช่น พารามิเตอร์ Sparking และ Cooling

ตัวอย่างเช่น ในการตั้งค่าความสว่าง คำขอต่อไปนี้จะถูกส่งโดยแอป https://192.168.4.1/conf?brightness=224 มีตัวจัดการสำหรับคำขอนี้ในแบบร่างที่เมื่อได้รับคำขอนี้จะตั้งค่าความสว่าง ตรวจสอบรหัสเพื่อหาข้อมูลเพิ่มเติม

ขั้นตอนที่ 8: แอพ Android

แอพ Android ถูกสร้างขึ้นโดยใช้ Phonegap เป็นเทคโนโลยีที่ให้คุณสร้างแอพมือถือข้ามแพลตฟอร์มโดยใช้เทคโนโลยีเว็บ (HTML, CSS, Javascript) คุณสามารถรับซอร์สโค้ดได้จากลิงค์ต่อไปนี้