Arduino Uno R4 WiFi Web Server Dashboard | CynoIoT

📑 เนื้อหาในบทความ

📖 ภาพรวมโปรเจกต์

บทความนี้จะพาคุณสร้าง Web Server Dashboard สำหรับควบคุมรีเลย์ (Relay) ผ่านเว็บเบราว์เซอร์ โดยใช้ Arduino Uno R4 WiFi ซึ่งเป็นบอร์ดรุ่นล่าสุดที่มาพร้อมความสามารถในการเชื่อมต่อ WiFi และ Bluetooth ในตัว

🌟 จุดเด่นของ Arduino Uno R4 WiFi

• ใช้ Renesas RA4M1 (ARM Cortex-M4) @ 48 MHz เป็น Main MCU
• ใช้ ESP32-S3 เป็น Co-processor สำหรับ WiFi/Bluetooth
• มี 12x8 LED Matrix บนบอร์ดสำหรับแสดงผล
• เข้ากันได้กับ Arduino IDE และ Arduino IoT Cloud

สิ่งที่คุณจะได้เรียนรู้

✅ การเชื่อมต่อ Arduino Uno R4 WiFi กับเครือข่าย WiFi
✅ การสร้าง Web Server ด้วย WiFiNINA library
✅ การออกแบบ Dashboard UI ที่สวยงาม
✅ การควบคุมรีเลย์ผ่านเว็บเบราว์เซอร์
✅ การตรวจสอบสถานะอุปกรณ์แบบ Real-time

🛠️ อุปกรณ์ที่ต้องใช้

Hardware

🔌

Arduino Uno R4 WiFi

บอร์ดหลักสำหรับโปรเจกต์ (~฿1,200-1,500)

⚡

Relay Module 2 Channel หรือ 4 Channel

สำหรับควบคุมอุปกรณ์ไฟฟ้า (~฿80-150)

🔗

Jumper Wires (Male-to-Female)

สายเชื่อมต่อ (~฿40-60)

💡

หลอดไฟ LED หรืออุปกรณ์ที่ต้องการควบคุม (Optional)

สำหรับทดสอบการทำงาน

Software

• Arduino IDE 2.x - ดาวน์โหลดจาก arduino.cc
• WiFiNINA Library - ติดตั้งผ่าน Library Manager
• เว็บเบราว์เซอร์ - Chrome, Firefox, Safari หรือ Edge

🔌 การต่อวงจร Hardware

ต่อวงจรรีเลย์เข้ากับ Arduino Uno R4 WiFi ตามตารางด้านล่าง:

Relay Module	Arduino Uno R4 WiFi
VCC	5V
GND	GND
IN1	D2
IN2	D3 (Optional)

⚠️ ข้อควรระวัง

• ตรวจสอบขั้ว VCC และ GND ให้ถูกต้องก่อนเชื่อมต่อไฟเลี้ยง
• รีเลย์บางรุ่นใช้ไฟเลี้ยง 3.3V ตรวจสอบ specifications ของ module
• หากใช้กับอุปกรณ์ไฟฟ้า 220V ควรใช้หลอดไฟ LED ขนาดเล็กในการทดสอบก่อน

💻 การติดตั้ง Software

Step 1: ติดตั้ง Arduino Board Package

1เปิด Arduino IDE แล้วไปที่ Tools > Board > Boards Manager
2ค้นหา "Arduino UNO R4 WiFi" แล้วกด Install
3เลือกบอร์ด: Tools > Board > Arduino UNO R4 WiFi

Step 2: ติดตั้ง WiFiNINA Library

1ไปที่ Sketch > Include Library > Manage Libraries
2ค้นหา "WiFiNINA" แล้วกด Install (เวอร์ชันล่าสุด)

📝 โค้ดโปรแกรม

นี่คือโค้ดสำหรับสร้าง Web Server Dashboard ที่ครบถ้วน สามารถ copy ไปใช้ได้เลย

#include <SPI.h>
#include <WiFiNINA.h>

// ===== ตั้งค่า WiFi =====
const char* ssid = "YOUR_WIFI_SSID";        // แทนที่ด้วยชื่อ WiFi ของคุณ
const char* password = "YOUR_WIFI_PASSWORD"; // แทนที่ด้วยรหัส WiFi ของคุณ

// ===== ตั้งค่า Relay Pins =====
const int relay1Pin = 2;  // Relay 1 ต่อกับ Digital Pin 2
const int relay2Pin = 3;  // Relay 2 ต่อกับ Digital Pin 3 (Optional)
const int relayCount = 2;  // จำนวนรีเลย์ที่ใช้งาน

// สร้าง array สำหรับเก็บสถานะรีเลย์
bool relayStates[2] = {false, false};

// สร้าง Web Server ที่พอร์ต 80
WiFiServer server(80);

// HTML Template สำหรับ Dashboard
String getHTML() {
  String html = R"(
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arduino Uno R4 WiFi - Relay Dashboard</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            padding: 30px;
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 10px;
            font-size: 28px;
        }
        .subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 30px;
            font-size: 14px;
        }
        .status-bar {
            background: #f5f5f5;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .status-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .status-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #4CAF50;
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .relay-card {
            background: #f9f9f9;
            border: 2px solid #e0e0e0;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }
        .relay-card:hover {
            border-color: #667eea;
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
        }
        .relay-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .relay-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
        .relay-status {
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }
        .relay-status.on {
            background: #4CAF50;
            color: white;
        }
        .relay-status.off {
            background: #f44336;
            color: white;
        }
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background-color: #667eea;
        }
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        .refresh-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .refresh-btn:hover {
            transform: translateY(-2px);
        }
        .refresh-btn:active {
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🤖 Relay Control Dashboard</h1>
        <p class="subtitle">Arduino Uno R4 WiFi - Web Server</p>

        <div class="status-bar">
            <div class="status-item">
                <div class="status-dot"></div>
                <span>Connected</span>
            </div>
            <div class="status-item">
                <span>IP: )";

  html += WiFi.localIP().toString();
  html += R"(</span>
            </div>
        </div>

        <div class="relay-card">
            <div class="relay-header">
                <span class="relay-title">🔌 Relay 1</span>
                <span class="relay-status )" + String(relayStates[0] ? "on" : "off") + R"(">)" + String(relayStates[0] ? "ON" : "OFF") + R"(</span>
            </div>
            <label class="switch">
                <input type="checkbox" onchange="toggleRelay(1, this.checked)" )" + String(relayStates[0] ? "checked" : "") + R"(>
                <span class="slider"></span>
            </label>
        </div>

        <div class="relay-card">
            <div class="relay-header">
                <span class="relay-title">🔌 Relay 2</span>
                <span class="relay-status )" + String(relayStates[1] ? "on" : "off") + R"(">)" + String(relayStates[1] ? "ON" : "OFF") + R"(</span>
            </div>
            <label class="switch">
                <input type="checkbox" onchange="toggleRelay(2, this.checked)" )" + String(relayStates[1] ? "checked" : "") + R"(>
                <span class="slider"></span>
            </label>
        </div>

        <button class="refresh-btn" onclick="location.reload()">🔄 Refresh Status</button>
    </div>

    <script>
        function toggleRelay(relay, state) {
            fetch('/relay' + relay + '?state=' + (state ? 'on' : 'off'))
                .then(response => location.reload());
        }
    </script>
</body>
</html>
)";

  return html;
}

void setup() {
    // เริ่ม Serial Monitor สำหรับ Debug
    Serial.begin(9600);

    // ตั้งค่า Relay Pins เป็น Output
    pinMode(relay1Pin, OUTPUT);
    pinMode(relay2Pin, OUTPUT);

    // ปิดรีเลย์ทั้งหมดในตอนเริ่มต้น
    digitalWrite(relay1Pin, LOW);
    digitalWrite(relay2Pin, LOW);

    // เชื่อมต่อ WiFi
    Serial.print("กำลังเชื่อมต่อ WiFi: ");
    Serial.println(ssid);

    // ตรวจสอบว่ามี WiFi module หรือไม่
    if (WiFi.status() == WL_NO_MODULE) {
        Serial.println("ไม่พบ WiFi module!");
        while (true);
    }

    // เริ่มเชื่อมต่อ WiFi
    while (WiFi.begin(ssid, password) != WL_CONNECTED) {
        Serial.print(".");
        delay(500);
    }

    Serial.println("\n✅ เชื่อมต่อ WiFi สำเร็จ!");
    Serial.print("📡 IP Address: ");
    Serial.println(WiFi.localIP());

    // เริ่ม Web Server
    server.begin();
    Serial.println("🚀 Web Server เริ่มทำงานแล้ว!");
    Serial.println("เปิดเว็บเบราว์เซอร์ไปที่: http://" + WiFi.localIP().toString());
}

void loop() {
    // รับการเชื่อมต่อจาก Client
    WiFiClient client = server.available();

    if (client) {
        Serial.println("📱 มี Client เชื่อมต่อใหม่");

        // อ่าน request จาก Client
        String currentLine = "";
        while (client.connected()) {
            if (client.available()) {
                char c = client.read();
                Serial.write(c);

                // ถ้าขึ้นบรรทัดใหม่ แปลว่าจบ request
                if (c == '\n') {
                    // ตรวจสอบว่าเป็นคำสั่งควบคุมรีเลย์หรือไม่
                    if (currentLine.indexOf("GET /relay1?state=on") >= 0) {
                        digitalWrite(relay1Pin, HIGH);
                        relayStates[0] = true;
                        Serial.println("🔌 Relay 1: ON");
                    } else if (currentLine.indexOf("GET /relay1?state=off") >= 0) {
                        digitalWrite(relay1Pin, LOW);
                        relayStates[0] = false;
                        Serial.println("🔌 Relay 1: OFF");
                    } else if (currentLine.indexOf("GET /relay2?state=on") >= 0) {
                        digitalWrite(relay2Pin, HIGH);
                        relayStates[1] = true;
                        Serial.println("🔌 Relay 2: ON");
                    } else if (currentLine.indexOf("GET /relay2?state=off") >= 0) {
                        digitalWrite(relay2Pin, LOW);
                        relayStates[1] = false;
                        Serial.println("🔌 Relay 2: OFF");
                    }

                    // ถ้าบรรทัดว่าง แปลว่าจบ HTTP headers
                    if (currentLine.length() == 0) {
                        // ส่ง HTTP response
                        client.println("HTTP/1.1 200 OK");
                        client.println("Content-type: text/html");
                        client.println("Connection: close");
                        client.println();

                        // ส่ง HTML Dashboard
                        client.println(getHTML());
                        break;
                    } else {
                        currentLine = "";
                    }
                } else if (c != '\r') {
                    currentLine += c;
                }
            }
        }

        // ปิดการเชื่อมต่อ
        client.stop();
        Serial.println("❌ Client ตัดการเชื่อมต่อแล้ว\n");
    }
}

💡 Tips

• อย่าลืมแก้ไข ssid และ password ตาม WiFi ของคุณ
• หากใช้รีเลย์เพียง 1 ตัว สามารถละเว้นส่วนของ relay2 ได้
• ใช้ Serial Monitor (Baud rate: 9600) ในการตรวจสอบสถานะ

🧪 การทดสอบ

ขั้นตอนการทดสอบ

1
อัปโหลดโค้ด
กดปุ่ม Upload ใน Arduino IDE แล้วรอให้เสร็จสิ้น
2
เปิด Serial Monitor
ตั้ง Baud rate เป็น 9600 แล้วดู IP address ที่แสดง
3
เปิดเว็บเบราว์เซอร์
พิมพ์ http://[IP_ADDRESS] เช่น http://192.168.1.100
4
ทดสอบสลับสถานะรีเลย์
กดปุ่ม Toggle ใน Dashboard แล้วสังเกตเสียงคลิกจากรีเลย์

🎯 Expected Result

เมื่อเปิดเว็บเบราว์เซอร์ คุณจะเห็น Dashboard ที่สวยงาม พร้อมปุ่มสลับสถานะรีเลย์ 2 ตัว เมื่อกดปุ่ม จะได้ยินเสียงคลิกจากรีเลย์ และสถานะจะเปลี่ยนจาก OFF เป็น ON (หรือกลับกัน)

🔧 การแก้ปัญหา

❌ ไม่สามารถเชื่อมต่อ WiFi ได้

• ตรวจสอบว่าชื่อและรหัส WiFi ถูกต้อง
• ตรวจสอบว่า Router ทำงานปกติ
• ลองเปลี่ยนเป็น WiFi 2.4GHz (ESP32-S3 รองรับเฉพาะ 2.4GHz)

❌ เข้าไม่ได้ IP Address ในเว็บเบราว์เซอร์

• ตรวจสอบว่าอุปกรณ์ที่ใช้เข้าเว็บอยู่ในเครือข่ายเดียวกับ Arduino
• ลอง ping IP address เพื่อตรวจสอบการเชื่อมต่อ
• รอสักครู่ Web Server อาจต้องใช้เวลา 1-2 วินาที

❌ รีเลย์ไม่ทำงาน

• ตรวจสอบการต่อสายจาก Arduino ไปยัง Relay Module
• ตรวจสอบว่า Relay Module ได้รับไฟเลี้ยง 5V
• ลองใช้ Multimeter วัดสัญญาณที่ขา IN ของรีเลย์

❌ หน้าเว็บโหลดไม่สำเร็จ

• ตรวจสอบว่ามีพื้นที่ว่างบน Arduino เพียงพอ
• ลองลดขนาด HTML code หากจำเป็น
• ตรวจสอบ Serial Monitor สำหรับ error messages

🚀 ขั้นตอนถัดไป

ยินดีด้วย! คุณสามารถสร้าง Web Server Dashboard สำหรับควบคุมรีเลย์ได้แล้ว นี่คือไอเดียสำหรับพัฒนาต่อยอด:

📊 เพิ่มการแสดงผลข้อมูล

เพิ่มเซ็นเซอร์วัดอุณหภูมิ ความชื้น หรือแสงและแสดงผลบน Dashboard

⏰ ตั้งเวลาอัตโนมัติ

เพิ่มฟีเจอร์ Timer สำหรับเปิด/ปิดรีเลย์อัตโนมัติตามเวลาที่กำหนด

🔐 เพิ่ม Authentication

เพิ่มระบบ Login ด้วย username/password เพื่อความปลอดภัย

☁️ เชื่อมต่อ Cloud Platform

เชื่อมต่อกับ Arduino IoT Cloud, Blynk หรือ CynoIoT Platform

📝 สรุป

ในบทความนี้ คุณได้เรียนรู้:

✅ การเชื่อมต่อ Arduino Uno R4 WiFi กับรีเลย์
✅ การสร้าง Web Server ด้วย WiFiNINA library
✅ การออกแบบ Dashboard UI ที่สวยงาม
✅ การควบคุมรีเลย์ผ่านเว็บเบราว์เซอร์

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

บทความ: สร้าง Web Server Dashboard ควบคุมรีเลย์ด้วย Arduino Uno R4 WiFi