TF MakerMAKER
กลับไปหน้าโปรเจค
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(); }

ขั้นตอนการทำ

ต้องการอุปกรณ์สำหรับโปรเจคนี้?

เลือกซื้ออุปกรณ์คุณภาพดีได้ที่ร้านเรา

ดูสินค้า