ESP32 WebTable 예제 데이터 표 인터페이스 튜토리얼
개요
WebTable 예제는 ESP32 프로젝트의 실시간 정보를 표시하기 위한 웹 기반의 두 열 데이터 표 인터페이스를 제공합니다. ESP32용으로 설계된 교육 플랫폼으로, 고급 데이터 시각화 기능, 지능형 값 변화 하이라이팅, 그리고 교육 생태계와의 원활한 통합을 제공합니다.
주요 특징
핵심 기능
- 두 열 데이터 표: 정리된 데이터 표시를 위한 깔끔한 속성-값 쌍
- 실시간 값 업데이트: 페이지를 새로고침하지 않고 WebSocket 기반의 즉시 데이터 갱신
- 메모리 효율적 설계: ESP32 메모리에 값 저장이 없고 모든 추적은 웹 인터페이스에서 수행됩니다
- 동적 구성: ESP32 setup() 함수에서 표 구조를 한 번만 설정합니다
- 인터랙티브 컨트롤: 수동 데이터 요청 및 자동 재연결 기능을 위한 새로고침 버튼
지능형 하이라이팅 시스템
- 스마트 변화 감지: 시간이 지남에 따라 실제로 어떤 값이 변하는지 자동으로 감지합니다.
- 자동 값 추적: 현재 값과 이전 값을 자동으로 비교합니다.
- 이중 수준 하이라이팅:
- 빨간색 하이라이팅: 활발하게 변화하는 값들에 대해
- 파란색 하이라이트: 시간이 지나도 안정적으로 남아 있는 값들에 대하여
- 설정 필요 없음: 시스템은 구성 없이 어떤 값이 변경되는지 자동으로 학습합니다.
- 시각적 피드백: 매끄러운 애니메이션은 값 업데이트에 대한 명확한 시각적 피드백을 제공합니다.
현대적인 웹 인터페이스
- 반응형 디자인: 데스크탑, 태블릿, 모바일 기기에서 원활하게 작동합니다
- 전문적인 스타일링: 카드 스타일의 레이아웃과 호버 효과, 현대적 미학
- 연결 상태: WebSocket 연결 상태에 대한 시각적 표시
- 푸터 통합: 다른 DIYables 웹앱과 일관된 스타일링
- 빈 상태 처리: 데이터가 없을 때의 사용자 친화적인 메시지
준비물
| 1 | × | 38-pin ESP32 ESP-WROOM-32 Dev Module - Narrow | 쿠팡 | 아마존 | |
| 1 | × | (또는) 38-pin ESP32 ESP-WROOM-32 Dev Module - Wide | 쿠팡 | 아마존 | |
| 1 | × | (또는) 30-pin ESP32 ESP-WROOM-32 Dev Module - Wide | 아마존 | |
| 1 | × | (또는) ESP32 Uno-form board | 아마존 | |
| 1 | × | (또는) ESP32 S3 Uno-form board | 아마존 | |
| 1 | × | USB 케이블 타입-A to 타입-C (USB-A PC용) | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-C to 타입-C (USB-C PC용) | 아마존 | |
| 1 | × | (추천) ESP32용 스크루 터미널 확장 보드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) Breakout Expansion Board for ESP32 | 쿠팡 | 아마존 | |
| 1 | × | (추천) ESP32용 전원 분배기 | 쿠팡 | 아마존 |
공개: 이 포스팅 에 제공된 일부 링크는 아마존 제휴 링크입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
설정 지침
자세한 사용 방법
다음 지시를 단계별로 따라가세요:
- 이 ESP32를 처음 사용하는 경우, Arduino IDE에서 ESP32를 위한 개발 환경 설정 튜토리얼을 참조하세요 ESP32 - 소프트웨어 설치.
- ESP32 보드를 USB 케이블로 컴퓨터에 연결합니다.
- 컴퓨터에서 Arduino IDE를 실행합니다.
- 적절한 ESP32 보드(예: ESP32 Dev Module)와 COM 포트를 선택합니다.
- Arduino IDE 왼쪽 바의 Libraries 아이콘으로 이동합니다.
- "DIYables ESP32 WebApps"를 검색한 다음 DIYables가 만든 DIYables ESP32 WebApps 라이브러리를 찾습니다.
- 라이브러리를 설치하려면 Install 버튼을 클릭합니다.
- 다른 라이브러리 의존성을 설치하라는 요청을 받게 됩니다.
- Install All 버튼을 클릭하여 모든 라이브러리 의존성을 설치하세요.
- Arduino IDE에서, File 예제 DIYables ESP32 WebApps WebTable 예제를 열거나, 코드를 복사해 Arduino IDE의 에디터에 붙여넣으세요
/*
* DIYables ESP32 WebApps Library - WebTable Example
*
* This example demonstrates how to create a web-based table interface
* that displays real-time data in a two-column format (attribute-value pairs).
*
* Features:
* - Two-column table with attributes and real-time values
* - WebSocket-based real-time updates
* - Configurable table rows in setup()
* - Dynamic value updates during runtime
* - Modern responsive web interface
*
* Hardware: ESP32 Boards
*
* Instructions:
* 1. Update WiFi credentials below
* 2. Upload the code to your Arduino
* 3. Open Serial Monitor to get the IP address
* 4. Open web browser and go to:
* - Home page: http://[ARDUINO_IP]/
* - WebTable: http://[ARDUINO_IP]/web-table
* 5. Watch real-time data updates in the table
*
* Created by DIYables
* Visit: https://diyables.com for more tutorials and projects
*/
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
// WiFi credentials - Update these with your network details
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Initialize web server and pages
ESP32ServerFactory serverFactory;
DIYablesWebAppServer server(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebTablePage tablePage;
// Variables to simulate sensor data
float temperature = 20.5;
float humidity = 65.0;
int lightLevel = 512;
unsigned long uptime = 0;
bool ledState = false;
int counter = 0;
void setup() {
Serial.begin(9600);
Serial.println("DIYables ESP32 WebApp - Web Table Example");
// Initialize built-in LED
pinMode(LED_BUILTIN, OUTPUT);
// Add web apps
server.addApp(&homePage);
server.addApp(&tablePage);
// Optional: Add 404 page for better user experience
server.setNotFoundPage(DIYablesNotFoundPage());
// Start the WebApp server
server.begin(WIFI_SSID, WIFI_PASSWORD);
// Set up callback for data requests
tablePage.onTableValueRequest(onDataRequested);
// Configure table structure in setup - attributes are set once
setupTableStructure();
Serial.println("WebTable Server started!");
}
void loop() {
server.loop();
// Update sensor values every 2 seconds
static unsigned long lastUpdate = 0;
if (millis() - lastUpdate > 2000) {
updateSensorValues();
sendRealTimeUpdates();
lastUpdate = millis();
}
// Toggle LED every 5 seconds
static unsigned long lastLedToggle = 0;
if (millis() - lastLedToggle > 5000) {
ledState = !ledState;
digitalWrite(LED_BUILTIN, ledState);
// Send LED status update to web interface
tablePage.sendValueUpdate("LED Status", ledState ? "ON" : "OFF");
lastLedToggle = millis();
}
delay(10);
}
// Setup table structure - called once in setup()
void setupTableStructure() {
Serial.println("Setting up table structure...");
// Add table rows with attributes only (no values stored)
tablePage.addRow("Device Name");
tablePage.addRow("Temperature");
tablePage.addRow("Humidity");
tablePage.addRow("Light Level");
tablePage.addRow("Uptime");
tablePage.addRow("LED Status");
tablePage.addRow("Counter");
tablePage.addRow("WiFi SSID");
tablePage.addRow("IP Address");
tablePage.addRow("Free Memory");
Serial.println("Table structure configured with " + String(tablePage.getRowCount()) + " rows");
}
// Simulate sensor readings and send values to web interface
void updateSensorValues() {
// Simulate temperature sensor (20-30°C range)
temperature = 20.0 + (sin(millis() / 10000.0) * 5.0) + random(-10, 10) / 10.0;
// Simulate humidity sensor (40-80% range)
humidity = 60.0 + (cos(millis() / 8000.0) * 15.0) + random(-20, 20) / 10.0;
// Simulate light sensor (0-1023 range)
lightLevel = 512 + (sin(millis() / 5000.0) * 400) + random(-50, 50);
if (lightLevel < 0) lightLevel = 0;
if (lightLevel > 1023) lightLevel = 1023;
// Update uptime
uptime = millis() / 1000;
// Increment counter
counter++;
}
// Send real-time updates to web interface
void sendRealTimeUpdates() {
// Send individual value updates to web clients
tablePage.sendValueUpdate("Temperature", String(temperature, 1) + "°C");
tablePage.sendValueUpdate("Humidity", String(humidity, 1) + "%");
tablePage.sendValueUpdate("Light Level", String(lightLevel));
tablePage.sendValueUpdate("Uptime", formatUptime(uptime));
tablePage.sendValueUpdate("Counter", String(counter));
tablePage.sendValueUpdate("Free Memory", String(getFreeMemory()) + " bytes");
}
// Callback function called when web client requests table data
void onDataRequested() {
Serial.println("Web client requested table data");
// Send all current values to web interface
tablePage.sendValueUpdate("Device Name", "ESP32");
tablePage.sendValueUpdate("Temperature", String(temperature, 1) + "°C");
tablePage.sendValueUpdate("Humidity", String(humidity, 1) + "%");
tablePage.sendValueUpdate("Light Level", String(lightLevel));
tablePage.sendValueUpdate("Uptime", formatUptime(uptime));
tablePage.sendValueUpdate("LED Status", ledState ? "ON" : "OFF");
tablePage.sendValueUpdate("Counter", String(counter));
tablePage.sendValueUpdate("WiFi SSID", WIFI_SSID);
tablePage.sendValueUpdate("IP Address", WiFi.localIP().toString());
tablePage.sendValueUpdate("Free Memory", String(getFreeMemory()) + " bytes");
}
// Format uptime in human-readable format
String formatUptime(unsigned long seconds) {
unsigned long days = seconds / 86400;
unsigned long hours = (seconds % 86400) / 3600;
unsigned long minutes = (seconds % 3600) / 60;
unsigned long secs = seconds % 60;
String result = "";
if (days > 0) result += String(days) + "d ";
if (hours > 0) result += String(hours) + "h ";
if (minutes > 0) result += String(minutes) + "m ";
result += String(secs) + "s";
return result;
}
// Get approximate free memory
int getFreeMemory() {
// Simple approximation for demonstration
// In a real application, you might use a more accurate method
return 2048 - (counter % 1024);
}
와이파이 설정
다음 줄들을 업데이트하여 코드에서 WiFi 자격 증명을 구성합니다:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- ESP32에 코드를 업로드하려면 Arduino IDE에서 Upload 버튼을 클릭합니다
- 시리얼 모니터를 엽니다
- 시리얼 모니터에서 결과를 확인하세요. 아래와 같이 보입니다.
8
Serial.println("Hello World!");
Message (Enter to send message to 'ESP32 Dev Module' on 'COM15')
New Line
9600 baud
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
📱 Web Interface: http://192.168.0.2
🔗 WebSocket: ws://192.168.0.2:81
📋 Available Applications:
🏠 Home Page: http://192.168.0.2/
📊 Web Table: http://192.168.0.2/web-table
==========================================
- 아무것도 보이지 않으면 ESP32 보드를 재부팅하십시오.
웹 인터페이스 사용
- 같은 와이파이(Wi‑Fi) 네트워크에 연결된 컴퓨터나 모바일 기기에서 웹 브라우저를 엽니다
- 시리얼 모니터에 표시된 IP 주소를 웹 브라우저에 입력합니다
- 예: http://192.168.1.100
- 아래 그림과 같은 홈 페이지가 표시됩니다:
- Web Table 링크를 클릭하면 아래와 같이 Web Table 앱의 UI가 표시됩니다:
- 또는 IP 주소 뒤에 /web-table를 붙여 페이지에 직접 접속할 수도 있습니다. 예: http://192.168.1.100/web-table
- 웹 테이블 인터페이스가 표시됩니다:
- 실시간 데이터 표: 속성과 해당 현재 값을 가지는 두 열의 표
- 지능형 하이라이팅: 변경 중인 값과 안정적인 값을 자동으로 색상으로 표시
- 연결 상태: WebSocket 연결 상태를 시각적으로 표시하는 지표
- 새로고침 버튼: 최신 데이터를 위한 수동 새로고침 기능
- 자동 업데이트: 값이 WebSocket을 통해 실시간으로 업데이트됩니다
지능형 하이라이트 시스템
작동 원리
WebTable은 시간이 지남에 따라 어떤 값이 변경되는지 자동으로 감지하는 고급 하이라이팅 시스템을 제공하며 ESP32 코드에서 별도의 설정이 필요하지 않습니다.
자동 변경 감지
웹 인터페이스는 자동으로 데이터를 추적하고 시각적 피드백을 제공합니다:
- 빨간색 하이라이트: 자주 변하는 값에 적용됩니다(예: 센서 판독값, 카운터, 타이머 등)
- 파란색 하이라이트: 변하지 않는 값에 적용됩니다(예: 디바이스 이름, IP 주소, 구성 설정 등)
- 설정이 필요 없음: ESP32가 업데이트를 보낼 때 시스템이 자동으로 학습합니다
당신이 보는 것
- 시간이 지남에 따라 변하는 값(온도, 가동 시간, 센서 수치)은 빨간색으로 강조 표시됩니다
- 정적 정보(장치 이름, 와이파이 SSID, IP 주소)는 파란색으로 강조 표시됩니다
- 이는 어떤 데이터가 활성적으로 변하는지와 안정적인 정보를 빠르게 식별하는 데 도움이 됩니다
주요 혜택
- 구성 필요 없음: 그저 sendValueUpdate()를 사용하면 하이라이팅이 자동으로 작동합니다
- 시각화: 시스템의 어느 부분이 활성화되어 있는지 쉽게 확인할 수 있습니다
- 초보자 친화적: 웹 프로그래밍 지식 없이도 작동합니다
- 메모리 효율적: 모든 하이라이팅은 웹 브라우저에서 발생하며, Arduino에서는 발생하지 않습니다
- 실시간 업데이트: 값이 업데이트되는 즉시 하이라이팅이 반영됩니다
표 구조 구성
테이블 구조는 setup() 함수에서 한 번 구성되며, addRow() 메서드를 사용합니다:
void setupTableStructure() {
// Add table rows with attributes and initial values
tablePage.addRow("Device Name", "ESP32");
tablePage.addRow("Temperature", "0.0°C");
tablePage.addRow("LED Status", "OFF");
tablePage.addRow("Uptime", "0 seconds");
tablePage.addRow("WiFi Signal", "0 dBm");
tablePage.addRow("Free Memory", "0 bytes");
}
실시간 가치 업데이트
값은 런타임 중에 sendValueUpdate() 메서드를 사용하여 업데이트됩니다:
직접 업데이트 방법(권장)
void updateSensorValues() {
// Read sensor data
float temperature = readTemperature();
bool ledStatus = digitalRead(LED_BUILTIN);
// Send updates directly to web interface
tablePage.sendValueUpdate("Temperature", String(temperature, 1) + "°C");
tablePage.sendValueUpdate("LED Status", ledStatus ? "ON" : "OFF");
tablePage.sendValueUpdate("Uptime", formatUptime(millis() / 1000));
}
직접 업데이트의 이점
- 메모리 효율성이 높은: ESP32 메모리에는 값이 저장되지 않음
- 실시간: 웹 인터페이스에 즉시 업데이트
- 자동 하이라이팅: 웹 인터페이스가 변경을 자동으로 감지
- 간소화된 코드: 로컬 값 저장 관리 필요 없음
코드 설명
핵심 구성 요소
#include <DIYablesWebApps.h>
// Initialize web server and table page
DIYablesWebAppServer server;
DIYablesWebTablePage tablePage;
설정 함수
void setup() {
Serial.begin(9600);
// Setup WiFi connection
server.setupWiFi(WIFI_SSID, WIFI_PASSWORD);
// Add table page to server
server.addWebApp(tablePage);
// Set up callback for data requests
tablePage.onTableValueRequest(onDataRequested);
// Configure table structure
setupTableStructure();
// Start the server
server.begin();
}
루프의 실시간 업데이트
void loop() {
server.handleClient();
// Update sensor values every 2 seconds
static unsigned long lastUpdate = 0;
if (millis() - lastUpdate > 2000) {
updateSensorValues();
sendRealTimeUpdates();
lastUpdate = millis();
}
delay(10);
}
콜백 함수
// Called when web interface requests table data
void onDataRequested() {
Serial.println("Web client requested table data");
// Update all current values before sending
updateSensorValues();
// The table data is automatically sent by the library
}
값 업데이트 함수들
void updateSensorValues() {
// Update sensor readings
temperature = readTemperatureSensor();
humidity = readHumiditySensor();
// Update values in table
tablePage.updateValue("Temperature", String(temperature, 1) + "°C");
tablePage.updateValue("Humidity", String(humidity, 1) + "%");
}
void sendRealTimeUpdates() {
// Send updates to web clients
tablePage.sendValueUpdate("Temperature", String(temperature, 1) + "°C");
tablePage.sendValueUpdate("Humidity", String(humidity, 1) + "%");
}
API 메서드
DIYablesWebTablePage 클래스 메서드
addRow(속성, 초기값)
- 테이블 구조에 새 행을 추가합니다
- 매개변수:
- attribute: 문자열 - 속성 이름(왼쪽 열)
- initialValue: 문자열 - 초기값(오른쪽 열, 선택적)
- 사용법: setup()에서 호출되어 표 구조를 구성합니다.
updateValue(속성, 값)
- 속성 이름으로 값을 업데이트합니다(로컬 저장소에서만)
- 매개변수:
- attribute: 문자열 - 업데이트할 속성 이름
- value: 문자열 - 설정할 새로운 값
- 사용법: 로컬 테이블 데이터를 업데이트합니다
값 갱신(인덱스, 값)
- 행 인덱스로 값을 업데이트합니다(로컬 저장소에서만)
- 매개변수:
- index: int - 행 인덱스 (0 기반)
- value: 문자열 - 설정할 새 값
- 사용법: 로컬 테이블 데이터를 위치에 따라 업데이트합니다.
값 업데이트 전송(속성, 값)
- 속성 이름으로 웹 클라이언트에 값 업데이트를 전송합니다
- 매개변수:
- attribute: 문자열 - 업데이트할 속성의 이름
- value: 문자열 - 전송할 새 값
- 사용법: 웹 인터페이스의 실시간 업데이트
값 업데이트 전송(인덱스, 값)
- 행 인덱스로 웹 클라이언트에 값 업데이트를 전송합니다
- 매개변수:
- index: int - 행 인덱스(0부터 시작)
- value: String - 전송할 새 값
- 사용 방법: 위치에 따라 웹 인터페이스를 실시간으로 업데이트
테이블 데이터 보내기()
- 전체 테이블 데이터를 웹 클라이언트로 전송합니다
- 사용법: 웹 인터페이스에서 전체 테이블을 새로 고침합니다
테이블 비우기()
- 모든 테이블 데이터를 삭제하고 행 수를 재설정합니다
- 사용법: 테이블 구조를 재설정합니다(거의 필요하지 않습니다)
행의 수 가져오기()
- 테이블의 행 수를 반환합니다
- 반환값: int - 현재 행 수
- 사용법: 테이블 크기 정보를 가져옵니다
속성 가져오기(index)
- 행 인덱스로 속성 이름을 가져옵니다
- 매개변수: index: int - 행 인덱스(0부터 시작)
- 반환값: 문자열 - 속성 이름
- 사용법: 테이블 구조 정보에 접근합니다
값 가져오기(index)
- 행 인덱스로 값을 가져옵니다
- 매개변수: index: int - 행 인덱스(0부터 시작)
- 반환값: 문자열 - 현재 값
- 사용법: 현재 표 값을 조회합니다
onTableValueRequest(콜백)
- 웹 클라이언트의 데이터 요청에 대한 콜백 함수를 설정합니다
- 매개변수: void (*callback)() - 데이터가 요청될 때 호출될 함수
- 용도: 웹 클라이언트의 데이터 요청을 처리합니다
웹소켓 통신
웹에서 아두이노로 보내는 메시지
- TABLE:GET_DATA - 전체 테이블 데이터 요청
- TABLE:UPDATE:attribute:value - 특정 속성의 값 업데이트
ESP32에서 웹으로 보내는 메시지
- TABLE_DATA:attr1:val1|attr2:val2|... - 전체 표 데이터 전송
- VALUE_UPDATE:attribute:value - 단일 값 업데이트 전송
문제 해결
일반적인 문제
- 표에 데이터가 표시되지 않음
- 문제: 빈 표 또는 '데이터가 없습니다' 메시지
- 원인: 표 구조가 설정되지 않았거나 와이파이 연결 문제
- 해결 방법:
- setupTableStructure()가 setup()에서 호출되는지 확인하세요.
- 와이파이 연결 상태를 확인
- 데이터를 수동으로 요청하려면 새로고침 버튼을 클릭하세요.
- 시리얼 모니터에서 오류 메시지를 확인하세요
2. 실시간으로 값들이 업데이트되지 않음
- 문제: ESP32 업데이트에도 불구하고 표에 오래된 값이 표시됩니다
- 원인: WebSocket 연결이 끊겼거나 업데이트 함수가 호출되지 않음
- 해결책:
- 웹 페이지에서 연결 상태 표시기를 확인합니다
- 웹 페이지를 새로고침
- sendValueUpdate()가 올바르게 호출되는지 확인합니다.
- 네트워크 안정성 점검
- 하이라이팅이 작동하지 않음
- 문제: 값들에 빨간색 또는 파란색 강조 표시가 나타나지 않습니다.
- 원인: JavaScript가 값의 변경을 올바르게 감지하지 못합니다.
- 해결 방법:
- 변경 감지를 재설정하려면 웹 페이지를 새로고침하세요
- 값이 실제로 변경되고 있는지 확인하십시오(직렬 모니터를 확인하세요)
- 하이라이트가 멈춘 것 같으면 브라우저 캐시를 지우세요.
- 값들은 하이라이팅 시스템을 트리거하기 위해 여러 차례의 업데이트가 필요합니다.
4. "Arduino에 연결되지 않음" 오류
- 문제: 새로고침 버튼을 클릭할 때 오류
- 원인: WebSocket 연결에 실패했습니다
- 해결 방법:
- ESP32의 IP 주소가 올바른지 확인
- ESP32가 같은 와이파이 네트워크에 연결되어 있는지 확인
- ESP32를 재시작하고 웹 페이지를 새로고침하세요.
- 방화벽 설정을 확인하십시오.
3. "Arduino에 연결되지 않음" 오류
- 문제: 새로 고침 버튼을 클릭할 때 발생하는 오류
- 원인: WebSocket 연결에 실패했습니다
- 해결 방법:
- ESP32의 IP 주소가 올바른지 확인
- ESP32가 같은 와이파이 네트워크에 있는지 확인
- ESP32를 재시작하고 웹 페이지를 새로고침
- 방화벽 설정 확인
4. 표 구조 변경 사항이 반영되지 않음
- 문제점: 추가되거나 제거된 행이 웹 인터페이스에 표시되지 않습니다
- 원인: 표 구조는 setup()에서만 구성됩니다
- 해결책:
- 구조 변경을 적용하려면 ESP32를 재시작하십시오.
- 동적 변경이 필요한 경우 clearTable() 및 addRow()를 사용하세요
- ESP32 재시동 후 웹 페이지 새로고침
디버깅 팁
시리얼 디버깅 활성화:
void onDataRequested() {
Serial.println("Web client requested table data");
Serial.println("Sending table configuration...");
// Send table configuration to web client
tablePage.sendTableConfig();
}
값 업데이트 모니터링:
void updateSensorValues() {
float temperature = readTemperature();
Serial.print("Updating temperature: ");
Serial.println(String(temperature, 1) + "°C");
// Send update to web interface (highlighting will be handled automatically)
tablePage.sendValueUpdate("Temperature", String(temperature, 1) + "°C");
}
연결 상태 확인:
void setup() {
// ... other setup code
setupTableStructure();
Serial.println("Table configured with real-time highlighting");
Serial.println("Values will be highlighted automatically based on changes");
}
고급 사용 예제
스마트 하이라이팅이 적용된 센서 모니터링
void updateEnvironmentalSensors() {
// Read various sensors
float temperature = readTemperatureSensor();
float humidity = readHumiditySensor();
int lightLevel = analogRead(A0);
bool motionDetected = digitalRead(2);
// Send updates - highlighting happens automatically
tablePage.sendValueUpdate("Temperature", String(temperature, 1) + "°C");
tablePage.sendValueUpdate("Humidity", String(humidity, 1) + "%");
tablePage.sendValueUpdate("Light Level", String(lightLevel));
tablePage.sendValueUpdate("Motion", motionDetected ? "DETECTED" : "CLEAR");
}
시스템 상태 대시보드
void updateSystemStatus() {
// System information that changes over time gets red highlighting
tablePage.sendValueUpdate("Uptime", formatUptime(millis() / 1000));
tablePage.sendValueUpdate("Free Memory", String(ESP.getFreeHeap()) + " bytes");
tablePage.sendValueUpdate("WiFi Signal", String(WiFi.RSSI()) + " dBm");
// Static information that doesn't change gets blue highlighting
tablePage.sendValueUpdate("Device ID", "Arduino-" + String(ESP.getChipId()));
tablePage.sendValueUpdate("Firmware", "v1.0.0");
}
조건부 상태 업데이트
void updateStatusWithConditions() {
float temperature = readTemperature();
// Format status messages based on conditions
String tempStatus;
if (temperature > 30.0) {
tempStatus = String(temperature, 1) + "°C (HIGH)";
} else if (temperature < 10.0) {
tempStatus = String(temperature, 1) + "°C (LOW)";
} else {
tempStatus = String(temperature, 1) + "°C (NORMAL)";
}
// The highlighting system will automatically detect if status changes
tablePage.sendValueUpdate("Temperature Status", tempStatus);
}
다중 웹 애플리케이션 통합
// Combine WebTable with other web apps
void setup() {
// Add multiple web apps
server.addWebApp(tablePage); // Data table with smart highlighting
server.addWebApp(monitorPage); // Serial monitor
server.addWebApp(sliderPage); // Control interface
// Configure table for system monitoring
tablePage.addRow("System Status", "Running");
tablePage.addRow("Active Connections", "0");
tablePage.addRow("Data Points Logged", "0");
}
응용 프로그램 및 사용 사례
교육 프로젝트
- 센서 모니터링: 실시간 센서 판독값을 자동으로 변화가 있을 때 강조 표시로 보여주기
- 시스템 상태 대시보드: ESP32 시스템 정보를 시각적 피드백과 함께 표시
- 사물인터넷 데이터 시각화: 활성 값과 정적 값을 지능적으로 강조 표시하여 실시간 데이터를 시각화
- 학습 도구: 데이터 시각화 및 실시간 통신 개념 시연
현실 세계의 응용
- 환경 모니터링: 변화 탐지 기능이 포함된 온도, 습도, 대기질
- 가정 자동화: 시스템 상태, 장치 상태 및 동작 매개변수
- 산업 모니터링: 장비 상태, 경보 및 성능 지표
- 농업 시스템: 토양 상태, 기상 데이터 및 관개 상태
STEM 교육의 핵심 이점
- 시각적 학습: 자동 하이라이팅으로 시간이 지남에 따라 데이터가 어떻게 변하는지 확인하세요
- 실시간 시스템: WebSocket 통신과 실시간 데이터 업데이트를 체험해 보세요
- 구성 필요 없음: 지능형 하이라이팅이 자동으로 작동합니다
- 현대적인 웹 인터페이스: 현대적인 웹 개발 기법을 배워보세요
기술 사양
메모리 사용량(최적화된 설계)
- 플래시 메모리: WebTable 기능을 위한 약 8KB(지능형 하이라이팅 포함)
- SRAM 사용량: 동작 중 약 1KB(Arduino에 값 저장 없음)
- WebSocket 버퍼: 메시지 처리를 위한 약 1KB
- 최대 행 수: 20 (MAX_TABLE_ROWS로 구성 가능)
- 메모리 효율: 값은 ESP32 메모리 대신 웹 브라우저에서 추적됩니다
성능 특성
- 업데이트 주기: 웹소켓을 통한 실시간(폴링 없음)
- 응답 시간: 값 업데이트당 50ms 미만
- 하이라이트 속도: 값 변화에 대한 즉각적인 시각적 피드백
- 네트워크 오버헤드: 값 업데이트당 약 30~50바이트의 네트워크 오버헤드
- 변경 탐지: 시간에 따른 값의 자동 비교
지능형 하이라이팅 기능
- 자동 탐지: 설정 없이 시간이 지남에 따라 어떤 값이 변화하는지 식별합니다
- 이중 단계 시스템: 변화하는 값은 빨간색, 안정적인 값은 파란색
- 구성 필요 없음: 수동 설정이나 ESP32 코딩 없이 작동합니다
- 메모리 효율적: 모든 추적은 웹 브라우저에서 수행되며 아두이노에서는 수행되지 않습니다
- 전문적인 외관: 매끄러운 애니메이션이 명확한 시각적 피드백을 제공합니다
비디오 튜토리얼
아래 동영상 데모는 아래 코드를 사용합니다:
/*
* 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다
* 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/esp32/diyables-esp32-web-apps-web-table
*/
/*
* DIYables ESP32 WebApps Library - WebTable Example
*
* This example demonstrates how to create a web-based table interface
* that displays real-time data in a two-column format (attribute-value pairs).
*
* Features:
* - Two-column table with attributes and real-time values
* - WebSocket-based real-time updates
* - Configurable table rows in setup()
* - Dynamic value updates during runtime
* - Modern responsive web interface
*
* Hardware: ESP32 Boards
*
* Instructions:
* 1. Update WiFi credentials below
* 2. Upload the code to your Arduino
* 3. Open Serial Monitor to get the IP address
* 4. Open web browser and go to:
* - Home page: http://[ARDUINO_IP]/
* - WebTable: http://[ARDUINO_IP]/web-table
* 5. Watch real-time data updates in the table
*
* Created by DIYables
* Visit: https://diyables.com for more tutorials and projects
*/
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
#include <DHT.h>
// WiFi credentials - Update these with your network details
const char WIFI_SSID[] = "Nhuan 3";
const char WIFI_PASSWORD[] = "15671108";
// Initialize web server and pages
ESP32ServerFactory serverFactory;
DIYablesWebAppServer server(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebTablePage tablePage;
#define LED_BUILTIN 22
#define DHTPIN 23
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
// Variables to simulate sensor data
float temperature = 20.5;
float humidity = 65.0;
int lightLevel = 512;
unsigned long uptime = 0;
bool ledState = false;
int counter = 0;
void setup() {
Serial.begin(9600);
Serial.println("DIYables ESP32 WebApp - Web Table Example");
// Initialize built-in LED
pinMode(LED_BUILTIN, OUTPUT);
dht.begin();
// Add web apps
server.addApp(&homePage);
server.addApp(&tablePage);
// Optional: Add 404 page for better user experience
server.setNotFoundPage(DIYablesNotFoundPage());
// Start the WebApp server
server.begin(WIFI_SSID, WIFI_PASSWORD);
// Set up callback for data requests
tablePage.onTableValueRequest(onDataRequested);
// Configure table structure in setup - attributes are set once
setupTableStructure();
Serial.println("WebTable Server started!");
}
void loop() {
server.loop();
// Update sensor values every 2 seconds
static unsigned long lastUpdate = 0;
if (millis() - lastUpdate > 2000) {
updateSensorValues();
sendRealTimeUpdates();
lastUpdate = millis();
}
// Toggle LED every 3 seconds
static unsigned long lastLedToggle = 0;
if (millis() - lastLedToggle > 3000) {
ledState = !ledState;
digitalWrite(LED_BUILTIN, ledState);
// Send LED status update to web interface
tablePage.sendValueUpdate("LED Status", ledState ? "ON" : "OFF");
lastLedToggle = millis();
}
delay(10);
}
// Setup table structure - called once in setup()
void setupTableStructure() {
Serial.println("Setting up table structure...");
// Add table rows with attributes only (no values stored)
tablePage.addRow("Device Name");
tablePage.addRow("Temperature");
tablePage.addRow("Humidity");
tablePage.addRow("Light Level");
tablePage.addRow("Uptime");
tablePage.addRow("LED Status");
tablePage.addRow("Counter");
tablePage.addRow("WiFi SSID");
tablePage.addRow("IP Address");
tablePage.addRow("Free Memory");
Serial.println("Table structure configured with " + String(tablePage.getRowCount()) + " rows");
}
// Simulate sensor readings and send values to web interface
void updateSensorValues() {
// Simulate temperature sensor (20-30°C range)
//temperature = 20.0 + (sin(millis() / 10000.0) * 5.0) + random(-10, 10) / 10.0;
// Simulate humidity sensor (40-80% range)
//humidity = 60.0 + (cos(millis() / 8000.0) * 15.0) + random(-20, 20) / 10.0;
humidity = dht.readHumidity();
temperature = dht.readTemperature();
// Check if any reads failed and exit early (to try again).
if (isnan(humidity) || isnan(temperature)) {
Serial.println(F("Failed to read from DHT sensor!"));
return;
}
// Simulate light sensor (0-1023 range)
lightLevel = 512 + (sin(millis() / 5000.0) * 400) + random(-50, 50);
if (lightLevel < 0) lightLevel = 0;
if (lightLevel > 1023) lightLevel = 1023;
// Update uptime
uptime = millis() / 1000;
// Increment counter
counter++;
}
// Send real-time updates to web interface
void sendRealTimeUpdates() {
// Send individual value updates to web clients
tablePage.sendValueUpdate("Temperature", String(temperature, 1) + "°C");
tablePage.sendValueUpdate("Humidity", String(humidity, 1) + "%");
tablePage.sendValueUpdate("Light Level", String(lightLevel));
tablePage.sendValueUpdate("Uptime", formatUptime(uptime));
tablePage.sendValueUpdate("Counter", String(counter));
tablePage.sendValueUpdate("Free Memory", String(getFreeMemory()) + " bytes");
}
// Callback function called when web client requests table data
void onDataRequested() {
Serial.println("Web client requested table data");
// Send all current values to web interface
tablePage.sendValueUpdate("Device Name", "ESP32");
tablePage.sendValueUpdate("Temperature", String(temperature, 1) + "°C");
tablePage.sendValueUpdate("Humidity", String(humidity, 1) + "%");
tablePage.sendValueUpdate("Light Level", String(lightLevel));
tablePage.sendValueUpdate("Uptime", formatUptime(uptime));
tablePage.sendValueUpdate("LED Status", ledState ? "ON" : "OFF");
tablePage.sendValueUpdate("Counter", String(counter));
tablePage.sendValueUpdate("WiFi SSID", WIFI_SSID);
tablePage.sendValueUpdate("IP Address", WiFi.localIP().toString());
tablePage.sendValueUpdate("Free Memory", String(getFreeMemory()) + " bytes");
}
// Format uptime in human-readable format
String formatUptime(unsigned long seconds) {
unsigned long days = seconds / 86400;
unsigned long hours = (seconds % 86400) / 3600;
unsigned long minutes = (seconds % 3600) / 60;
unsigned long secs = seconds % 60;
String result = "";
if (days > 0) result += String(days) + "d ";
if (hours > 0) result += String(hours) + "h ";
if (minutes > 0) result += String(minutes) + "m ";
result += String(secs) + "s";
return result;
}
// Get approximate free memory
int getFreeMemory() {
// Simple approximation for demonstration
// In a real application, you might use a more accurate method
return 2048 - (counter % 1024);
}
요약
WebTable 예제는 다음과 같은 방법을 보여줍니다:
- 속성-값 쌍으로 구성된 구조화된 데이터 표시 만들기
- WebSocket 통신을 통해 실시간 값 업데이트 구현
- 값을 자동으로 감지하는 지능형 하이라이팅 활용
- 아두이노에 값을 저장하지 않고 메모리 효율이 높은 시스템 구축
- Setup()에서 한 번만 테이블 구조를 구성해 일관된 구성을 보장
- 자동 데이터 새로 고침 기능이 있는 웹 클라이언트 요청 처리
- 스마트 변화 탐지 알고리즘을 통한 시각적 피드백 제공
- 현대적 데이터 모니터링 애플리케이션을 위한 반응형 웹 인터페이스 생성
핵심 혁신: 지능형 하이라이팅
이 WebTable 구현의 두드러진 특징은 다음과 같은 지능형 하이라이트 시스템입니다:
- 하드코딩 없이 어떤 값이 변하는지 자동으로 학습한다.
- 시간이 지남에 따라 데이터 패턴이 변화할 때 동적으로 적응한다.
- 두 단계 색상 코드로 시각적 피드백을 제공한다.
- ESP32 메모리를 소비하지 않으면서 효율적으로 작동한다.
- 구성 없이 모든 유형의 데이터에 보편적으로 작동한다.
이 예시는 정리된 데이터 표시가 필요한 프로젝트, 시각적 피드백이 포함된 실시간 모니터링 대시보드, 자동 변경 감지 기능이 있는 시스템 상태 인터페이스, 그리고 IoT 애플리케이션에서의 고급 데이터 시각화 기술을 교육용으로 시연하는 데에 특히 적합합니다.
