ESP32 Real-Time Voltage Plotter (TH) — ADC → Web Via WebSocket

by devadiy99 in Circuits > Microcontrollers

43 Views, 0 Favorites, 0 Comments

ESP32 Real-Time Voltage Plotter (TH) — ADC → Web Via WebSocket

P1020841-scaled-600x784.jpg

โปรเจ็กต์นี้อ่านค่าแรงดันจากขา ADC ของ ESP32 แล้วส่งค่าขึ้นหน้าเว็บผ่าน WebSocket เพื่อแสดงกราฟแบบเรียลไทม์ด้วย Chart.js เหมาะสำหรับมือใหม่ที่อยากทำดาต้าไลฟ์บนเว็บด้วยบอร์ดเดียวจบ

• พื้นฐาน ESP32 (สเปก/การใช้งาน): ESP32 คืออะไร?

• คู่มือการเขียนโค้ด: Arduino IDE Guide

Supplies

  1. ESP32 DevKit V1
  2. สาย USB
  3. โพเทนชิออมิเตอร์ 10k (หรือแหล่งแรงดันทดสอบที่ ไม่เกิน 3.3V)
  4. เบรดบอร์ด + สายจัมเปอร์
  5. คอมพิวเตอร์ติดตั้ง Arduino IDE — ดู Arduino IDE Guide
ปล. ใช้ขา ADC1 (เช่น GPIO34) เพื่อหลีกเลี่ยงข้อจำกัดเวลาเปิด Wi-Fi และอย่าป้อนไฟเกิน 3.3V

ตั้งค่า Arduino IDE & Libraries

  1. ติดตั้ง ESP32 Board ผ่าน Boards Manager
  2. ติดตั้งไลบรารี: ESPAsyncWebServer, AsyncTCP
  3. หน้าฝั่งเว็บโหลด Chart.js จาก CDN ในไฟล์ HTML ที่ฝังไว้ในสเก็ตช์ (เสิร์ฟจาก "/" )
มือใหม่ดูพื้นฐานตัวบอร์ดได้ที่ ESP32 คืออะไร

เดินสาย ADC

  1. 3.3V → ขาของโพเทนชิออมิเตอร์
  2. GND → อีกขาหนึ่ง
  3. ขากลาง (wiper) → GPIO34 (ADC1) ของ ESP32

สเก็ตช์หลัก

แนวคิดคือเชื่อม Wi-Fi, เปิด WebSocket ที่พาธ "/ws", อ่าน analogRead(GPIO34) ทุก ๆ ~1–2 วินาที แปลงเป็นโวลต์ แล้ว broadcast ไปยังหน้าเว็บ

Download Code

#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <AsyncTCP.h>
#include "index.h"

//const char* ssid = "Your_SSID"; // เปลี่ยนเป็น SSID ของคุณ
//const char* password = "Your_PASSWORD"; // เปลี่ยนเป็น Password ของคุณ
const char* ssid = "kanit2_2.4G"; // เปลี่ยนเป็น SSID ของคุณ
const char* password = "0811888676"; // เปลี่ยนเป็น Password ของคุณ

const int potPin = 34; // Pin ADC

AsyncWebServer server(80);
AsyncWebSocket ws("/ws");

void handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {
AwsFrameInfo *info = (AwsFrameInfo*)arg;
if(info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {
data[len] = 0;
Serial.printf("Received message: %s\n", data);
}
}

void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len) {
switch (type) {
case WS_EVT_CONNECT:
Serial.println("WebSocket client connected");
break;
case WS_EVT_DISCONNECT:
Serial.println("WebSocket client disconnected");
break;
case WS_EVT_DATA:
handleWebSocketMessage(arg, data, len);
break;
case WS_EVT_PONG:
case WS_EVT_ERROR:
break;
}
}

void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
Serial.print("Local ESP32 IP: ");
Serial.println(WiFi.localIP());

ws.onEvent(onEvent);
server.addHandler(&ws);

// ส่งไฟล์ HTML ที่มี Chart.js
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html);
});

server.begin();
}

void loop() {
// อ่านค่า ADC
int adcValue = analogRead(potPin); // เปลี่ยนหมายเลขขา ADC ตามที่คุณใช้งาน
Serial.println(adcValue);
float voltage = adcValue * (3.3 / 4095.0); // แปลงค่า ADC เป็นแรงดันไฟฟ้า

// ส่งค่าแรงดันผ่าน WebSocket
String voltageStr = String(voltage, 2);
Serial.println(voltageStr);
ws.textAll(voltageStr);

delay(1500); // ส่งข้อมูลทุก ๆ 1.5 วินาที
}

ทดสอบบนเบราว์เซอร์

  1. อัปโหลดสเก็ตช์ → เปิด Serial Monitor จด IP
  2. เปิดเบราว์เซอร์ไปที่ http://<ESP32_IP>/
  3. กราฟจะอัปเดตเมื่อหมุนโพเทนชิออมิเตอร์ (หรือแรงดันทดสอบ) แบบเรียลไทม์ผ่าน WebSocket + Chart.js

Downloads

P1020841-scaled-600x784.webp

Troubleshooting

  1. กราฟไม่ขึ้น: ตรวจ IP, ตรวจว่าโหลดหน้า "/" ได้ และคอนโซลไม่มี error
  2. ค่าค้าง/ไม่ไหล: เช็ก Wi-Fi 2.4GHz, ระยะห่างเราเตอร์
  3. ค่าเพี้ยน/เกินช่วง: หลีกเลี่ยงเกิน 3.3V, ใช้ ADC1 (เช่น 32–39; 34 เป็น input-only)
  4. ค้างที่เชื่อมต่อ: ตรวจพาวเวอร์จาก USB/สายไม่แน่น

Download / Full Article

โค้ดฉบับเต็ม + HTML ตัวอย่าง + คำอธิบายละเอียด ดูได้ที่บทความต้นฉบับของ Deva DIY:

Download Code

“สร้างกราฟแรงดันไฟฟ้าแบบเรียลไทม์ด้วย ESP32 และ WebSocket”