ฮายยยยชาว Maker และนักปั่นทุกคน! เวลาไปปั่นจักรยานทางไกล หรือปั่นสำรวจเส้นทางใหม่ๆ ปัญหาคลาสสิกที่ทุกคนต้องเจอคือ "จะเอามือถือเครื่องใหญ่ๆ ไปติดบนแฮนด์จักรยานยังไงให้ไม่เกะกะ?" ใช่มั้ยครับ? ไหนจะกลัวมือถือหล่นพัง ไหนจะกินแบตเตอรี่จากการเปิดหน้าจอค้างไว้ แถมเวลามีแจ้งเตือนเด้งมาก็ทำเอาเสียสมาธิอีกต่างหาก

วันนี้เราเลยขอพาทุกคนไปส่องโปรเจกต์ "TURN-OFF" ของคุณ ayushmaan45 ที่ได้เปลี่ยนความหงุดหงิดเหล่านั้น ให้กลายเป็นอุปกรณ์ GPS นำทางไซส์มินิสุดล้ำ! ที่หน้าตาเหมือนหลุดมาจากหนัง Sci-Fi ยึดติดกับแฮนด์ได้พอดีเป๊ะ โชว์เฉพาะลูกศรนำทางล้วนๆ ไม่มีอะไรมากวนใจ!

คอนเซปต์สุดฉลาด: มือถือ = สมอง, ESP32 = หน้าจอ

ความเจ๋งของโปรเจกต์นี้ไม่ได้อยู่ที่การยัดทุกอย่างลงไปในบอร์ดเล็กๆ นะครับ แต่เขาใช้ "สถาปัตยกรรมแบบกระจายศูนย์ (Distributed Architecture)"

• มือถือ (Phone): จะทำหน้าที่เป็น "สมอง" คอยเปิด GPS, ดึงข้อมูลแผนที่, ค้นหาเส้นทางผ่าน API และคำนวณระยะทางทั้งหมด (รันผ่าน Web App บนเบราว์เซอร์)
• ตัวเครื่อง TURN-OFF (ESP32): ทำหน้าที่เป็นแค่ "จอแสดงผล" รอรับคำสั่งผ่าน Wi-Fi (WebSockets) ว่าจะต้องแสดงลูกศรเลี้ยวซ้าย เลี้ยวขวา หรือตรงไป แค่นั้นเอง!

ด้วยวิธีนี้ ทำให้ตัวเครื่อง TURN-OFF ประหยัดแบตเตอรี่สุดๆ และไม่ต้องเขียนโค้ดฝั่งฮาร์ดแวร์ให้ซับซ้อนจนเกินไปครับ

ฮาร์ดแวร์ที่ใช้ (ของมันต้องมี!)

เพื่อให้อุปกรณ์มีขนาดเล็กที่สุด เขาเลือกใช้ชิ้นส่วนฮาร์ดแวร์เพียงไม่กี่อย่าง:

• บอร์ด Waveshare ESP32-S3 1.69" TFT Display (บอร์ดนี้มีจอสีติดมาให้เลย สะดวกมาก)
• แบตเตอรี่ LiPo 1000mAh
• สวิตช์เลื่อน (Sliding Power Switch)
• สายไฟ น็อต และเคสพลาสติกที่พิมพ์จาก 3D Printer (ใช้เส้น Hyper PLA)

ชิ้นส่วนเคสที่ออกแบบด้วย Fusion 360 และการจัดสายไฟสุดเนี้ยบภายในเครื่อง

ซอฟต์แวร์และการเขียนโค้ด (Software & APIs)

ระบบซอฟต์แวร์แบ่งออกเป็น 2 ฝั่งครับ ฝั่งมือถือ (Web App) และฝั่งบอร์ด (ESP32 Firmware)

1. ฝั่งมือถือ (Phone Web App)

เขาเขียนแอปด้วย HTML/JS ธรรมดาๆ เลยครับ โดยใช้ API ฟรี 2 ตัวคือ:

• Nominatim (OpenStreetMap): เอาไว้ค้นหาสถานที่ปลายทาง
• OpenRouteService: เอาไว้สร้างเส้นทางปั่นจักรยาน (Routing) และดึงคำสั่งบอกทาง (Turn-by-turn directions)

เมื่อแอปประมวลผลเสร็จ มันจะส่งคำสั่งสั้นๆ เช่น LEFT|250m|NAVIGATING ผ่าน WebSockets ไปหา ESP32 ครับ

2. ฝั่งบอร์ด (ESP32 Firmware)

หน้าตา UI สุดเท่สีดำ-เขียว (เพื่อสู้แสงแดด) ถูกออกแบบในโปรแกรม Lopaka แล้ว Export โค้ดออกมา ฝั่งบอร์ด ESP32 ก็แค่รับคำสั่งจาก WebSockets แล้วแสดงภาพลูกศรตามที่มือถือส่งมา

หน้าตาการออกแบบ UI บน Lopaka, โค้ดบน Arduino IDE และ Web App ฝั่งมือถือ

ตัวอย่างโค้ดฝั่ง ESP32 (รับคำสั่ง WebSocket)

Copy Code

#include <WebSocketsServer.h>
#include <ArduinoJson.h>

WebSocketsServer webSocket = WebSocketsServer(81);

void webSocketEvent(uint8_t num, WStype_t type, uint8_t* payload, size_t length) {
    if(type == WStype_TEXT) {
        DynamicJsonDocument doc(256);
        deserializeJson(doc, payload);
        
        String direction = doc["direction"].as<String>();
        String distanceText = doc["distance"].as<String>();
        
        // อัปเดตหน้าจอตามคำสั่งที่ได้รับ
        if(direction == "LEFT") {
            drawLEFT(tft);
        } else if(direction == "RIGHT") {
            drawRIGHT(tft);
        }
    }
}

ตัวอย่างโค้ดฝั่ง Web App (มือถือส่งคำสั่ง)

Copy Code

// เชื่อมต่อกับ IP ของ ESP32 (ที่ปล่อย Hotspot)
const ESP32_IP = "10.42.177.234";
const ws = new WebSocket(`ws://${ESP32_IP}:81`);

ws.onopen = () => {
    console.log("CONNECTED TO TURN-OFF");
};

// ส่งคำสั่งเลี้ยวไปให้ ESP32
function sendNavigationData(dir, dist) {
    ws.send(`${dir}|${dist}|NAVIGATING`);
}

เบื้องหลังความสำเร็จ (ที่เต็มไปด้วยความพัง!)

เห็นสวยๆ แบบนี้ เบื้องหลังโปรเจกต์นี้ทำเอาผู้สร้างปวดหัวไปหลายตลบเลยครับ! ตั้งแต่ปัญหาไลบรารีจอแสดงผลที่ทำให้จอดำ (จนต้องเปลี่ยนมาใช้ Adafruit GFX/ST7789), ปัญหา WebSockets หลุด, เบราว์เซอร์มือถือบล็อก GPS, ขั้วสวิตช์หักตอนบัดกรี และที่พีคสุด... เผลอทำหน้าจอแครก (ร้าว) ตอนประกอบ! ทำให้หน้าจอมีเส้น Glitch ติดมาด้วย แต่เขาก็ปล่อยเลยตามเลย ถือซะว่าเป็นสไตล์ Cyberpunk ไปละกัน (ฮา)

และนี่ก็คือเสน่ห์ของงาน DIY ครับ ต่อให้พังหรือพลาดยังไง สุดท้ายผลลัพธ์ที่ได้มันก็ภูมิใจเสมอ!