ปั้น Web UI ให้ ESP32 โคตรง่ายด้วย ESP-GenUI แค่ลากวางก็จบปิ๊ง!

ESP-GenUI Web Interface Builder
หน้าตาการทำงานของ ESP-GenUI ที่ให้เราลาก Node มาเชื่อมกันเพื่อสร้างเว็บควบคุม ESP32

Wassup ชาว Maker ทุกคน! 🛠️ ยุคนี้เวลาทำโปรเจกต์อุปกรณ์ฝังตัว (Embedded projects) หรือ Smart Home ถ้าไม่มีหน้าจอเอาไว้โชว์ค่าเซนเซอร์ มันก็จะดูจืดๆ ไปหน่อยใช่ไหมครับ?1 หลายคนเลยเลือกที่จะทำ "หน้าเว็บควบคุม (Web Interface)" ให้ตัวบอร์ด ESP32 ปล่อย Wi-Fi ออกมาให้เรากดดูผ่านมือถือได้

แต่ปัญหาโลกแตกของสายฮาร์ดแวร์คือ... "เขียน HTML/CSS ไม่เป็นโว้ยยยย!"

วันนี้สวรรค์ทรงโปรดแล้วครับ! เมื่อนักพัฒนาที่ชื่อ [Geoffrey Wells] ได้สร้างทูลสุดเทพชื่อว่า "ESP-GenUI" ขึ้นมา เพื่อตอบโจทย์คนอยากได้หน้า UI สวยๆ แต่ไม่อยากปวดหัวนั่งพิมพ์โค้ดเว็บเอง!1

ESP-GenUI มันคืออะไร? ทำงานยังไง? 🧐

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

  • มี Node ให้เลือกเพียบ: มีบล็อกคำสั่งสำเร็จรูปให้ใช้เยอะมาก ไม่ว่าจะเป็น ปุ่มเปิด-ปิดไฟ (GPIO control), เกจวัดอุณหภูมิ, หรือแม้แต่ดึงภาพจากกล้อง (Camera feeds) มาโชว์บน Dashboard ก็ยังได้!1
  • สายเชื่อมโยง (Node-based): อารมณ์เหมือนเล่นเกมลากเส้นจับคู่ แค่ลากสายจากเซนเซอร์ไปหาเกจวัดค่า แค่นี้มันก็ผูกโค้ดให้เราหลังบ้านเสร็จสรรพ1
  • แฟลชลงบอร์ดผ่านหน้าเว็บ: อันนี้โคตรตึง! คุณสามารถกดปุ่มแฟลชโค้ด (Flash) ลงบอร์ด ESP32 ผ่านเบราว์เซอร์ได้เลย ไม่ต้องง้อโปรแกรมเสริม!1
  • ส่งออกเป็นโค้ด Arduino: แต่ถ้าใครสาย Custom อยากเอาโค้ดไปแต่งต่อ มันก็สามารถ Generate ออกมาเป็นโค้ดเพื่อเปิดใน Arduino IDE ได้เช่นกันครับ1

💡 ป้ายยาไอเทมเด็ด: การมี Dashboard สวยๆ ไว้ดูค่าเซนเซอร์แบบนี้ บอร์ดตระกูล ESP32 คือตัวเลือกอันดับหนึ่งเลยครับ เพราะมีทั้ง Wi-Fi และ Bluetooth ในตัว!

หากเพื่อนๆ กำลังมองหา บอร์ด ESP32 รุ่นต่างๆ, เซนเซอร์อุณหภูมิ/ความชื้น, หรือโมดูลกล้อง เพื่อเอาไปลองเล่นกับ ESP-GenUI แวะมาจัดของแท้พร้อมส่งได้ที่ Globalbyte Shop เลยครับ ทัก LINE OA มาปรึกษาแอดมินก่อนได้ เราพร้อมซัพพอร์ตสายหาทำเสมอ!

🔗 ข้อมูลอ้างอิงและช่องทางไปลองเล่น:

ใครคันไม้คันมือ อยากลองเข้าไปลากๆ วางๆ ออกแบบหน้า UI ของตัวเอง แอดมินเชียร์ให้จิ้มลิงก์ไปลองเล่นบนหน้าเว็บของเค้าได้เลยครับ ฟรี!

*Disclaimer (ข้อจำกัดความรับผิดชอบ): เนื้อหาบทความนี้ถูกเรียบเรียงและสรุปมาจากโปรเจกต์ Open Source ของนักพัฒนาชาวต่างชาติ ข้อมูลการสร้างโค้ดและการเชื่อมต่อฮาร์ดแวร์อาจมีการอัปเดตเวอร์ชัน ผู้ที่ต้องการใช้งานจริงควรเข้าไปลองเล่นและศึกษาคู่มือจาก เว็บไซต์ต้นฉบับ เพื่อให้ได้ผลลัพธ์การทำงานที่ถูกต้องที่สุดครับ!1

แท็ก


Blog posts

เข้าสู่ระบบ

ลืมรหัสผ่านใช่ไหม?

ยังไม่มีบัญชีใช่ไหม?
สร้างบัญชี