ทำระบบเรียกคิวด้วยป้ายไฟ P4/P5 ควบคุมด้วย ESP32 สั่งงานผ่านมือถือ

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

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

รู้จักป้ายไฟ P4/P5 เบื้องต้น

ป้ายไฟ LED Matrix หรือ LED Panel เป็นจอแสดงผลที่ประกอบด้วยหลอด LED จำนวนมากเรียงกันเป็นตาราง (Matrix) สามารถควบคุมให้แสดงผลข้อความ รูปภาพ หรือวิดีโอได้ มักเห็นตามป้ายโฆษณา สนามกีฬา หรือป้ายประกาศต่างๆ ที่มีขนาดใหญ่และมองเห็นได้ชัดเจนแม้ในที่โล่ง โดยตัวเลข P4 และ P5 หมายถึงระยะห่างระหว่างจุดไฟ LED (Pixel Pitch) แต่ละดวงที่วัดเป็นมิลลิเมตร โดย P4 หมายถึง ระยะห่างระหว่าง LED แต่ละดวง 4 มิลลิเมตร และ P5 หมายถึง ระยะห่างระหว่าง LED แต่ละดวง 5 มิลลิเมตร

รูปที่ 1 ป้ายไฟ P4 ด้านหน้า

รูปที่ 2 ป้ายไฟ P4 ด้านหลัง

LED Matrix ใช้เทคนิค Multiplexing ในการควบคุม โดยจะสแกนแถว (Scan Rate) ทีละแถวอย่างรวดเร็ว เช่น 1/16 Scan หมายถึงสแกน 16 แถวสลับกัน ตาเรามองเห็นเป็นภาพเต็มจอเพราะความเร็วในการสแกนสูงมาก (มากกว่า 50-60 Hz) การควบคุมความสว่างทำได้ด้วยเทคนิค BCM (Binary Code Modulation)

P4/P5/P10 ใช้ขั้วต่อ HUB75 เป็นมาตรฐาน โดยประกอบด้วยสายสัญญาณหลัก ดังนี้

• R1, G1, B1 - สัญญาณสี RGB ของครึ่งบน
• R2, G2, B2 - สัญญาณสี RGB ของครึ่งล่าง
• A, B, C, D (E) - สัญญาณเลือกแถว (Address Lines)
• CLK - สัญญาณนาฬิกา (Clock)
• LAT - สัญญาณล็อคข้อมูล (Latch)
• OE - สัญญาณเปิด-ปิดการแสดงผล (Output Enable)
• GND - กราวด์

การควบคุมการแสดงผล ทำผ่านการป้อนสัญญาณควบคุมเข้า HUB75

รูปที่ 3 ขั้วต่อ HUB75 ด้านขาเข้า

การสั่งงาน ESP32 ผ่านมือถือด้วยเทคโนโลยีเว็บ

ESP32 รองรับการเชื่อมต่อ WiFi และรองรับการตั้ง Web Server ขึ้นมา การสั่งงานผ่านมือถือจึงสามารถใช้เทคโนโลยีเว็บได้

เทคโนโลยีพื้นฐานของเว็บฝั่งส่วนหน้าของเว็บไซต์ที่ผู้ใช้เห็น (Frontend) ประกอบด้วยสามภาษาหลักที่ทำงานร่วมกันอย่างลงตัว โดย HTML (HyperText Markup Language) ทำหน้าที่เป็นโครงสร้างและเนื้อหาของเว็บไซต์ เปรียบเหมือนโครงกระดูกของบ้านที่กำหนดว่าจะมีห้องไหนอยู่ตรงไหน มีประตูหน้าต่างอยู่ที่ไหนบ้าง ใช้แท็กต่างๆ เช่น div, p, h1, img เพื่อจัดวางเนื้อหา รูปภาพ ฟอร์มกรอกข้อมูล และองค์ประกอบต่างๆ ส่วน CSS (Cascading Style Sheets) เป็นเหมือนสี ลวดลาย และการตกแต่งบ้าน ที่ทำให้เว็บไซต์สวยงาม กำหนดสีพื้นหลัง ฟอนต์ตัวอักษร ขนาด ระยะห่าง เอฟเฟกต์ต่างๆ และสุดท้ายคือ JavaScript ซึ่งเป็นภาษาโปรแกรมมิ่งที่ทำให้เว็บไซต์สามารถโต้ตอบกับผู้ใช้ได้ เช่น เมื่อคลิกปุ่มแล้วเกิดอะไรขึ้น พิมพ์ข้อความในช่องค้นหาแล้วแสดงผลแบบเรียลไทม์ หรือตรวจสอบความถูกต้องของฟอร์มก่อนส่งข้อมูล โดย JavaScript สามารถเปลี่ยนแปลง HTML และ CSS โดยไม่ต้องโหลดหน้าเว็บใหม่ ทั้งสามภาษานี้ทำงานเสมือนทีมเดียวกัน HTML สร้างโครงสร้าง CSS ตกแต่งให้สวยงาม และ JavaScript เพิ่มความสามารถในการโต้ตอบ ทำให้เว็บไซต์มีทั้งความสวยงามและประสิทธิภาพ

API (Application Programming Interface) เป็นตัวกลางสำคัญที่ทำให้ส่วนหน้าของเว็บไซต์ที่ผู้ใช้เห็น (Frontend) สามารถสื่อสารกับส่วนหลัง (Backend) หรือเซิร์ฟเวอร์ที่เก็บข้อมูลและประมวลผลได้ เปรียบเหมือนพนักงานเสิร์ฟในร้านอาหารที่รับออเดอร์จากลูกค้า นำไปบอกครัว แล้วนำอาหารกลับมาเสิร์ฟให้ลูกค้า โดยรูปแบบที่นิยมใช้มากที่สุดคือ REST API ที่ใช้ HTTP Methods ต่างๆ เช่น GET, POST เป็นต้น กระบวนการทำงานเริ่มจากผู้ใช้กระทำการบางอย่างบนหน้าเว็บ เช่น กดปุ่มแล้ว JavaScript จะจัดการ ส่ง HTTP Request ผ่าน API ไปยังเซิร์ฟเวอร์ เซิร์ฟเวอร์จะประมวลผลตามคำขอ จากนั้นส่ง Response กลับมาในรูปแบบ JSON ซึ่ง JavaScript จะรับข้อมูลมาแสดงผลบนหน้าเว็บโดยไม่ต้องโหลดหน้าใหม่ทั้งหน้า ทำให้ประสบการณ์การใช้งานรวดเร็วและลื่นไหล

ESP32 เป็นไมโครคอนโทรลเลอร์ที่มีความสามารถในการเชื่อมต่อ Wi-Fi และ Bluetooth ในตัว ทำให้สามารถทำหน้าที่ส่วนหลัง (Backend) เป็น Web Server ขนาดเล็กที่ให้บริการ API สำหรับควบคุมอุปกรณ์ IoT หรืออ่านค่าจากเซ็นเซอร์ต่างๆ โดยการทำงานเริ่มจาก ESP32 จะรันโปรแกรมที่เขียนด้วยภาษา C++ ผ่าน Arduino IDE เพื่อสร้าง Web Server ที่รอรับ HTTP Request จากผู้ใช้ ภายใน ESP32 จะมีการกำหนด API Endpoints ต่างๆ เช่น /api/led/on สำหรับเปิดไฟ LED, /api/led/off สำหรับปิดไฟ เมื่อผู้ใช้เปิดหน้าเว็บ (Frontend) บนคอมพิวเตอร์หรือมือถือที่เชื่อมต่อ Wi-Fi เดียวกันกับ ESP32 หน้าเว็บที่สร้างด้วย HTML, CSS, JavaScript จะแสดงส่วนติดต่อผู้ใช้ เช่น ปุ่มเปิด-ปิดไฟ, แถบปรับความสว่าง เมื่อผู้ใช้กดปุ่มหรือโต้ตอบกับหน้าเว็บ JavaScript จะส่ง HTTP Request ไปยัง IP Address ของ ESP32 เช่น http://192.168.4.1/api/led/on ซึ่ง ESP32 จะรับ Request ประมวลผล เช่น สั่งให้ขา GPIO ที่ต่อกับ LED เป็น HIGH เพื่อเปิดไฟ จากนั้นส่ง Response กลับให้ JavaScript นำข้อมูลมาอัพเดทหน้าเว็บ เช่น เปลี่ยนสีปุ่มเป็นสีเขียวแสดงว่าไฟเปิดอยู่ เป็นต้น

บทความนี้แม้จะดูง่าย ใช้โค้ดไม่มาก แต่เบื้องหลังโค้ดเต็มไปด้วยองค์ความรู้พื้นฐานงาน IoT และความรู้การเขียนโปรแกรมคอมพิวเตอร์ระดับกลาง-สูง แนะนำให้ผู้อ่านนำโค้ดตัวอย่างไปศึกษาต่อและปรับแต่งให้เหมาะสมกับการใช้งานของตนเอง

อุปกรณ์ที่ใช้

1) IOXESP32+ บอร์ดพัฒนา ESP32 รุ่นอัพเลเวล (กดที่รูปเพื่อสั่งซื้อสินค้า)

2) IOXESP32 HUB75 Matrix Panel shield โมดูลเสริม ESP32 ต่อจอ P4/P5 (กดที่รูปเพื่อสั่งซื้อสินค้า)

3) IOXESP32 Dual Base บัดกรีขาแล้ว (กดที่รูปเพื่อสั่งซื้อสินค้า)

4) ป้ายไฟ P4 หรือ P5 แบบ RGB พร้อมสายข้อมูล และสายไฟเลี้ยง (กดที่รูปเพื่อสั่งซื้อสินค้า)

5) แหล่งจ่ายไฟ 5V 2A หรือมากกว่า

ประกอบวงจร

เชื่อมต่ออุปกรณ์ทั้งหมดเข้าด้วยกันดังรูปต่อไปนี้

เขียนโปรแกรมสั่งงาน

เปิดโปรแกรม Arduino IDE ขึ้นมา ติดตั้งไลบรารี่ ESP32 HUB75 LED MATRIX PANEL DMA Display ตามขั้นตอนต่อไปนี้

1) กดเปิด Libraly Manager (1) แล้วค้นหา ESP32 HUB75 LED MATRIX PANEL DMA Display (2) จากนั้นกด INSTALL (3)

2) เมื่อติดตั้งเสร็จ ด้านมุมขวาล่างจะมีข้อความแจ้งเตือน (ดังรูป)

ติดตั้งไลบรารี่ Async TCP และ ESP Async WebServer เพิ่มเติม เพื่อความสะดวกในการสร้าง Web Server ด้วย ESP32

นำโค้ดด้านล่างนี้ใส่ลง Arduino IDE

จากนั้นกดสร้างไฟล์สำหรับเก็บโค้ดหน้าเว็บ HTML, CSS, JavaScript กด ... แล้วกด New Tab

ตั้งชื่อไฟล์เป็น index.h แล้วกด OK

คัดลอกโค้ดต่อไปนี้ลงไป

ผลที่ได้ จะมีโค้ดโปรแกรมอยู่ 2 แท็บ (ดังรูป)

เชื่อมต่อบอร์ด IOXESP32+ เข้ากับคอมพิวเตอร์ด้วยสาย USB-C จากนั้นเลือกบอร์ดเป็น IOXESP32 แล้วเลือกพอร์ต

กดอัพโหลดโปรแกรมลงบอร๋ด ผลที่ได้ ที่หน้าจอตัวเลขช่องที่ 1 2 3 จะแสดงเลข 0000 ขึ้นมา

ใช้โทรศัพท์ หรือคอมพิวเตอร์เชื่อมต่อ WiFi ที่ชื่อ ESP32 Queue

เข้าไปที่ http://192.168.4.1 หน้าควบคุมจะแสดงขึ้นมา

ทดสอบกดที่ช่อง 1 - 3 จะพบว่าสามารถควบคุมตัวเลขที่แสดงได้แล้ว

บทส่งท้าย

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

~สวัสดีครับ~

ข้อมูลเขียนบรรณานุกรม