กลับไปหน้าโปรเจค
IoTง่าย
ควบคุม LED ผ่าน WiFi Web Dashboard ด้วย MiniPLC-32uA
สร้าง Web Server บน MiniPLC-32uA CPU ควบคุม LED 4 ดวง + อ่าน Digital Input ผ่าน WiFi แสดงผลบน Browser
1–2 ชั่วโมง7 ชิ้นส่วน82 views
อุปกรณ์ที่ใช้
MiniPLC-32uA CPU Module
Breadboard
LED 4 ดวง + ตัวต้านทาน 330Ω
สวิตช์กดติด 2 ตัว
USB-to-Serial Adapter (FTDI / CH340)
สาย Jumper
Power Supply 5V (USB)
วงจร / การต่อสาย
โค้ด
#include <WiFi.h>
#include <WebServer.h>
// === WiFi Config ===
const char* ssid = "YOUR_SSID";
const char* password = "YOUR_PASSWORD";
// === Output Pins (J4 Header) ===
// O0=IO27, O1=IO14, O2=IO12, O3=IO13
const int ledPin[4] = {27, 14, 12, 13};
bool ledState[4] = {false, false, false, false};
// === Input Pins (J4 Header) ===
// I0=IO36, I1=IO39 (input-only pins)
const int inputPin[2] = {36, 39};
// === Buzzer ===
const int buzzerPin = 23; // Buzzer บน CPU Board
WebServer server(80);
String buildHTML() {
String html = "<!DOCTYPE html><html><head>";
html += "<meta charset='utf-8'><meta name='viewport' content='width=device-width,initial-scale=1'>";
html += "<title>MiniPLC-32uA Dashboard</title>";
html += "<style>";
html += "body{font-family:sans-serif;background:#0f172a;color:#e2e8f0;max-width:500px;margin:0 auto;padding:20px}";
html += "h1{color:#3b82f6;text-align:center;font-size:20px}";
html += ".card{background:#1e293b;border-radius:12px;padding:16px;margin:12px 0}";
html += ".btn{display:inline-block;padding:10px 20px;border:none;border-radius:8px;color:#fff;font-size:15px;cursor:pointer;margin:4px}";
html += ".on{background:#22c55e} .off{background:#ef4444}";
html += ".grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}";
html += ".item{text-align:center;padding:8px;border-radius:8px;background:#334155}";
html += ".high{color:#22c55e;font-weight:bold} .low{color:#64748b}";
html += "</style></head><body>";
html += "<h1>MiniPLC-32uA CPU Dashboard</h1>";
// LED Controls
html += "<div class='card'><h3>LED Output (O0-O3)</h3><div class='grid'>";
for (int i = 0; i < 4; i++) {
html += "<a href='/led?ch=" + String(i) + "'>";
html += "<button class='btn " + String(ledState[i] ? "on" : "off") + "' style='width:100%'>";
html += "O" + String(i) + ": " + String(ledState[i] ? "ON" : "OFF");
html += "</button></a>";
}
html += "</div></div>";
// Inputs
html += "<div class='card'><h3>Digital Input</h3><div class='grid'>";
for (int i = 0; i < 2; i++) {
bool val = digitalRead(inputPin[i]);
html += "<div class='item'>I" + String(i) + ": ";
html += "<span class='" + String(val ? "high" : "low") + "'>" + String(val ? "HIGH" : "LOW") + "</span></div>";
}
html += "</div></div>";
// Buzzer
html += "<div class='card'><a href='/buzz'><button class='btn on' style='width:100%'>Buzzer BEEP</button></a></div>";
html += "<p style='text-align:center;color:#64748b;font-size:13px'>MiniPLC-32uA CPU · ESP32-WROOM · TF Maker</p>";
html += "</body></html>";
return html;
}
void handleRoot() { server.send(200, "text/html", buildHTML()); }
void handleLED() {
if (server.hasArg("ch")) {
int ch = server.arg("ch").toInt();
if (ch >= 0 && ch < 4) {
ledState[ch] = !ledState[ch];
digitalWrite(ledPin[ch], ledState[ch]);
}
}
server.sendHeader("Location", "/");
server.send(302);
}
void handleBuzz() {
tone(buzzerPin, 2000, 200);
server.sendHeader("Location", "/");
server.send(302);
}
void setup() {
Serial.begin(115200);
for (int i = 0; i < 4; i++) {
pinMode(ledPin[i], OUTPUT);
digitalWrite(ledPin[i], LOW);
}
for (int i = 0; i < 2; i++) {
pinMode(inputPin[i], INPUT);
}
pinMode(buzzerPin, OUTPUT);
WiFi.begin(ssid, password);
Serial.print("Connecting WiFi");
while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); }
Serial.println();
Serial.print("IP: ");
Serial.println(WiFi.localIP());
server.on("/", handleRoot);
server.on("/led", handleLED);
server.on("/buzz", handleBuzz);
server.begin();
Serial.println("Dashboard Ready!");
}
void loop() { server.handleClient(); }