아두이노 WebTable 예제 데이터 테이블 인터페이스 튜토리얼
개요
WebTable 예제는 Arduino 프로젝트의 실시간 정보를 표시하기 위한 웹 기반의 두 열 데이터 표 인터페이스를 제공합니다. 아두이노 우노 R4 WiFi 및 DIYables STEM V4 IoT 교육 플랫폼을 위해 설계된 이 시스템은 고급 데이터 시각화 기능, 지능형 값 변화 하이라이트 및 교육 생태계와의 원활한 통합을 제공합니다.
주요 기능
핵심 기능
- 두 열 데이터 표: 정돈된 데이터 표시를 위한 속성-값 쌍
- 실시간 값 업데이트: 페이지를 새로 고치지 않고 WebSocket 기반의 즉시 데이터 갱신
- 메모리 사용을 최소화한 설계: Arduino 메모리에 값 저장 없음 - 모든 추적은 웹 인터페이스에서 수행됩니다
- 동적 구성: Arduino setup() 함수에서 표 구조를 한 번만 설정
- 대화형 제어: 수동 데이터 요청용 새로고침 버튼과 자동 재연결 기능
지능형 하이라이팅 시스템
- 스마트 변경 감지: 시간이 지남에 따라 실제로 어떤 값이 변경되는지 자동으로 감지합니다
- 자동 값 추적: 현재 값과 이전 값을 자동으로 비교합니다
- 이중 수준 하이라이트:
- 빨간색 하이라이트: 활발히 변화하는 값들에 대해
- 파란색 하이라이트: 시간이 지남에 따라 안정적으로 유지되는 값에 대해
- 설정 필요 없음: 시스템은 구성을 전혀 하지 않아도 어떤 값이 변하는지 자동으로 학습합니다
- 시각적 피드백: 매끄러운 애니메이션은 값이 업데이트될 때 명확한 시각적 피드백을 제공합니다
현대적인 웹 인터페이스
- 반응형 디자인: 데스크톱, 태블릿, 모바일 기기에서 매끄럽게 작동합니다
- 전문적인 스타일링: 호버 효과와 현대적인 미학을 갖춘 카드 스타일의 레이아웃
- 연결 상태: WebSocket 연결 상태를 시각적으로 표시하는 지표
- 푸터 통합: 다른 DIYables 웹 앱과 일치하는 일관된 스타일
- 빈 상태 처리: 데이터가 없을 때의 사용자 친화적인 메시지
- 플랫폼 확장성: 현재 Arduino Uno R4 WiFi에 대해 구현되어 있지만 다른 하드웨어 플랫폼으로 확장할 수 있습니다. 자세한 내용은 DIYables_WebApps_ESP32를 참조하십시오.
준비물
| 1 | × | 아두이노 우노 R4 와이파이 | 쿠팡 | 아마존 | |
| 1 | × | (또는) DIYables STEM V4 IoT | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-A to 타입-C (USB-A PC용) | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-C to 타입-C (USB-C PC용) | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 스크루 터미널 블록 쉴드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) Sensors/Servo Expansion Shield for Arduino UNO R4 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 브레드보드 쉴드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 케이스 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 전원 분배기 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노용 프로토타이핑 베이스 플레이트 & 브레드보드 키트 | 아마존 |
공개: 이 포스팅 에 제공된 일부 링크는 아마존 제휴 링크입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
설정 지침
자세한 사용 방법
다음 지침을 단계별로 따라가세요:
- 만약 이것이 Arduino Uno R4 WiFi/DIYables STEM V4 IoT를 처음 사용한다면, Arduino IDE에서 Arduino Uno R4 WiFi/DIYables STEM V4 IoT를 위한 환경 설정 튜토리얼을 참조하십시오 아두이노 우노 R4 - 소프트웨어 설치.
- USB 케이블을 사용하여 컴퓨터에 Arduino Uno R4/DIYables STEM V4 IoT 보드를 연결합니다.
- 컴퓨터에서 Arduino IDE를 실행합니다.
- 적절한 Arduino Uno R4 보드(예: Arduino Uno R4 WiFi)와 COM 포트를 선택합니다.
- Arduino IDE 왼쪽 바에 있는 Libraries 아이콘으로 이동합니다.
- "DIYables WebApps"를 검색한 다음 DIYables에서 만든 DIYables WebApps 라이브러리를 찾으십시오.
- Install 버튼을 클릭하여 라이브러리를 설치합니다.
- 다른 라이브러리 의존성을 설치하라는 메시지가 표시됩니다.
- 모든 라이브러리 의존성을 설치하려면 Install All 버튼을 클릭하세요.
- Arduino IDE에서, File 예제 DIYables WebApps WebTable 예제를 열거나, 코드를 복사해서 Arduino IDE의 편집기에 붙여넣으세요
/*
* DIYables 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: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* 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 <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
UnoR4ServerFactory 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 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", "Arduino Uno R4");
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";
- 아두이노 IDE에서 Upload 버튼을 클릭하여 Arduino UNO R4/DIYables STEM V4 IoT에 코드를 업로드합니다.
- 시리얼 모니터를 엽니다.
- 시리얼 모니터에서 결과를 확인합니다. 아래와 같이 보입니다.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno R4 WiFi' 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
==========================================
- 아무 것도 보이지 않으면 Arduino 보드를 재부팅하십시오.
웹 인터페이스 사용
- 같은 WiFi 네트워크에 연결된 컴퓨터나 모바일 기기에서 웹 브라우저를 열고
- 시리얼 모니터에 표시된 IP 주소를 웹 브라우저에 입력하세요
- 예: http://192.168.1.100
- 아래 이미지와 같은 홈 페이지가 표시됩니다
- Web Table 링크를 클릭하면 아래와 같이 Web Table 앱의 UI가 표시됩니다.
- 또한 IP 주소 뒤에 /web-table를 붙여 페이지에 직접 접속할 수도 있습니다. 예를 들어: http://192.168.1.100/web-table
- 웹 테이블 인터페이스가 표시됩니다:
- 실시간 데이터 표: 속성과 각 속성의 현재 값이 포함된 두 열의 표
- 지능형 하이라이팅: 변화하는 값과 안정적인 값을 자동으로 색상으로 구분
- 연결 상태: WebSocket 연결 상태를 시각적으로 표시하는 시각적 표시기
- 새로고침 버튼: 최신 데이터를 위한 수동 새로고침 기능
- 자동 업데이트: 값이 WebSocket을 통해 실시간으로 업데이트됩니다
지능형 하이라이팅 시스템
작동 원리
WebTable은 Arduino 코드에 아무런 설정도 필요 없이 시간이 지남에 따라 변하는 값을 자동으로 감지하는 고급 하이라이팅 시스템을 제공합니다.
자동 변경 탐지
웹 인터페이스가 사용자의 데이터를 자동으로 추적하고 시각적 피드백을 제공합니다:
- 빨간 하이라이트: 자주 변하는 값에 적용됩니다(예: 센서 판독값, 카운터, 타이머)
- 파란 하이라이트: 변하지 않는 값에 적용됩니다(예: 장치 이름, IP 주소, 구성 설정)
- 설정이 필요하지 않습니다: Arduino가 업데이트를 보낼 때 시스템이 자동으로 학습합니다
보이는 것
- 시간이 지남에 따라 변하는 값들(온도, 가동 시간, 센서 값)은 빨간색으로 강조 표시됩니다
- 정적 정보(장치 이름, WiFi SSID, IP 주소)는 파란색으로 강조 표시됩니다
- 데이터 중 어떤 값이 활성적으로 변하고 있는지와 안정적인 정보인지를 빠르게 식별하는 데 도움이 됩니다
주요 이점
- 구성 필요 없음: 그냥 sendValueUpdate()를 사용하면 하이라이팅이 자동으로 작동합니다
- 시각적 피드백: 시스템의 어느 부분이 활성화되어 있는지 쉽게 확인할 수 있습니다
- 초보자 친화적: 웹 프로그래밍 지식 없이도 작동합니다
- 메모리 효율적: 모든 하이라이팅은 웹 브라우저에서 수행되며, 아두이노에서는 수행되지 않습니다
- 실시간 업데이트: 값이 업데이트되는 즉시 하이라이팅이 변경됩니다
테이블 구조 구성
테이블 구조는 setup() 함수에서 한 번 구성되며, addRow() 메서드를 사용합니다:
void setupTableStructure() {
// Add table rows with attributes and initial values
tablePage.addRow("Device Name", "Arduino Uno R4");
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));
}
직접 업데이트의 이점
- 메모리 사용 최적화: Arduino 메모리 내 값이 저장되지 않음
- 실시간: 웹 인터페이스에 즉시 반영
- 자동 하이라이팅: 웹 인터페이스가 변경을 자동으로 감지합니다
- 코드 간소화: 로컬 값 저장 관리가 필요하지 않음
코드 설명
주요 구성 요소
#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 클래스 메서드
행 추가(속성, 초기값)
- 표 구조에 새로운 행을 추가합니다
- 매개변수:
- attribute: 문자열 - 속성 이름(왼쪽 열)
- initialValue: 문자열 - 초기값(오른쪽 열, 선택 사항)
- 용도: setup()에서 호출되어 테이블 구조를 구성합니다
값갱신(attribute, value)
- 속성 이름으로 값을 업데이트합니다(로컬 스토리지 전용)
- 매개변수:
- attribute: 문자열 - 업데이트할 속성 이름
- value: 문자열 - 설정할 새 값
- 사용법: 로컬 테이블 데이터를 업데이트합니다
updateValue(인덱스, 값)
- 행 인덱스로 값을 업데이트합니다 (로컬 스토리지 전용)
- 매개변수:
- index: int - 행 인덱스(0부터 시작)
- value: 문자열 - 설정할 새 값
- 사용법: 위치에 따라 로컬 테이블 데이터를 업데이트합니다
sendValueUpdate(속성, 값)
- 속성 이름으로 웹 클라이언트에 값을 업데이트합니다
- 매개변수:
- attribute: 문자열 - 업데이트할 속성 이름
- value: String - 전송할 새 값
- 사용법: 웹 인터페이스에 실시간 업데이트
sendValueUpdate(인덱스, 값)
- 행 인덱스로 웹 클라이언트에 값 업데이트를 전송합니다
- 매개변수:
- index: int - 행 인덱스(0부터 시작)
- value: 문자열 - 보낼 새 값
- 사용법: 위치별 웹 인터페이스의 실시간 업데이트
테이블 데이터 보내기()
- 웹 클라이언트들에게 전체 테이블 데이터를 보냅니다
- 사용법: 웹 인터페이스에서 전체 테이블을 새로고침합니다
테이블 지우기()
- 모든 테이블 데이터를 지우고 행 수를 재설정합니다
- 용도: 표 구조를 재설정합니다(거의 필요하지 않음)
행 수 가져오기()
- 표의 행 수를 반환합니다
- 반환값: 정수형 - 현재 행 수
- 용도: 표 크기 정보를 가져옵니다
getAttribute(index)
- 행 인덱스로 속성 이름 가져오기
- 매개변수: index: int - 행 인덱스(0-based)
- 반환값: 문자열 - 속성 이름
- 사용법: 테이블 구조 정보에 접근하기
값 가져오기(인덱스)
- 행 인덱스로 값을 가져옵니다
- 매개변수: index: int - 행 인덱스(0부터 시작)
- 반환값: 문자열 - 현재 값
- 사용법: 현재 테이블 값을 조회합니다
onTableValueRequest(callback)
- 웹 클라이언트의 데이터 요청에 대한 콜백 함수를 설정합니다
- 매개변수: void (*callback)() - 데이터가 요청될 때 호출될 함수
- 용도: 웹 클라이언트의 데이터 요청을 처리합니다
웹소켓 통신
웹에서 아두이노로 보내는 메시지들
- TABLE:GET_DATA - 전체 테이블 데이터를 요청
- TABLE:UPDATE:attribute:value - 특정 속성의 값을 업데이트
아두이노에서 웹으로 보내는 메시지
- TABLE_DATA:attr1:val1|attr2:val2|... - 전체 테이블 데이터를 전송합니다
- VALUE_UPDATE:attribute:value - 단일 값 업데이트를 전송합니다
비디오 튜토리얼
아래 동영상 데모는 아래 코드를 사용합니다:
/*
* 이 아두이노 우노 R4 코드는 newbiely.kr 에서 개발되었습니다
* 이 아두이노 우노 R4 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-uno-r4/diyables-web-apps-web-table
*/
/*
* DIYables 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: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* 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 <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
UnoR4ServerFactory serverFactory;
DIYablesWebAppServer server(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebTablePage tablePage;
#define DHTPIN 3
#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 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", "Arduino Uno R4");
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);
}
문제 해결
일반적인 문제
1. 표에 데이터가 표시되지 않음
- 문제: 빈 표 또는 "데이터가 없습니다" 메시지
- 원인: 표 구조가 구성되지 않았거나 와이파이 연결 문제
- 해결 방법:
- Setup()에서 setupTableStructure()가 호출되는지 확인합니다.
와이파이 연결 상태 확인
- 데이터를 수동으로 요청하려면 새로 고침 버튼을 클릭하세요
- 시리얼 모니터에서 오류 메시지를 확인하십시오.
- 값이 실시간으로 업데이트되지 않음
- 문제: 아두이노 업데이트에도 불구하고 표에 오래된 값이 표시됩니다
- 원인: WebSocket 연결이 끊어지거나 업데이트 함수가 호출되지 않습니다
- 해결책:
- 웹 페이지의 연결 상태 표시기를 확인하세요.
- 웹 페이지를 새로고침
- sendValueUpdate()가 올바르게 호출되는지 확인합니다.
- 네트워크 안정성 확인
3. 하이라이팅이 작동하지 않음
- 문제: 값에 빨간색 또는 파란색 하이라이트가 표시되지 않습니다
- 원인: JavaScript가 값 변화를 제대로 감지하지 못합니다
- 해결 방법:
- 웹 페이지를 새로 고침하여 변경 감지를 재설정하세요.
- 값이 실제로 바뀌고 있는지 확인합니다(시리얼 모니터를 확인)
- 강조 표시가 멈춘 것 같으면 브라우저 캐시를 지웁니다
- 값들은 하이라이팅 시스템을 작동시키려면 여러 차례의 업데이트가 필요합니다.
4. "Arduino에 연결되지 않음" 오류
- 문제: 새로고침 버튼을 클릭할 때 오류가 발생합니다
- 원인: WebSocket 연결에 실패했습니다
- 해결 방법:
- 아두이노의 IP 주소가 올바른지 확인하십시오.
- 아두이노가 같은 와이파이 네트워크에 있는지 확인
- Arduino를 재시작하고 웹 페이지를 새로고침하세요.
- 방화벽 설정을 확인하십시오.
- "아두이노에 연결되지 않음" 오류
- 문제: 새로고침 버튼을 클릭할 때 오류가 발생합니다
- 원인: 웹소켓 연결에 실패했습니다
- 해결책:
- 아두이노의 IP 주소가 올바른지 확인
- 아두이노가 같은 와이파이 네트워크에 연결되어 있는지 확인
- 아두이노를 다시 시작하고 웹 페이지를 새로고침하세요.
- 방화벽 설정 확인
4. 표 구조 변경이 반영되지 않음
- 문제: 추가되거나 제거된 행이 웹 인터페이스에 표시되지 않습니다.
- 원인: 테이블 구조가 setup()에서만 구성됩니다.
- 해결 방법:
- 구조 변경을 적용하려면 아두이노를 다시 시작하십시오.
- 동적 변경이 필요한 경우 clearTable() 및 addRow()를 사용하세요.
- Arduino 재시작 후 웹페이지를 새로고침
디버깅 팁
시리얼 디버깅 활성화:
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");
}
응용 프로그램 및 사용 사례
교육 프로젝트
- 센서 모니터링: 실시간 센서 데이터를 자동으로 변화가 있을 때 강조 표시하여 보여주기
- 시스템 상태 대시보드: 시각적 피드백으로 아두이노 시스템 정보를 표시
- IoT 데이터 시각화: 활성 값과 정적 값을 구분하기 위한 지능형 하이라이트로 실시간 데이터를 제시
- 학습 도구: 데이터 시각화 및 실시간 통신 개념 시연
현실 세계의 응용
- 환경 모니터링: 온도, 습도, 공기질 및 변화 탐지
- 홈 자동화: 시스템 상태, 장치 상태, 및 운전 매개변수
- 산업 모니터링: 장비 상태, 경보 및 성능 지표
- 농업 시스템: 토양 상태, 기상 데이터, 및 관개 상태
STEM 교육의 주요 이점
- 시각적 학습: 데이터가 시간에 따라 어떻게 변하는지 자동 하이라이팅으로 확인하세요
- 실시간 시스템: 웹소켓 통신과 실시간 데이터 업데이트를 체험해 보세요
- 설정 필요 없음: 지능형 하이라이트가 자동으로 작동합니다
- 현대적 웹 인터페이스: 현대적 웹 개발 기법을 배우세요
기술 사양
메모리 사용량 (최적화된 설계)
- 플래시 메모리: WebTable 기능을 위한 약 8KB (지능형 하이라이팅 포함)
- SRAM 사용량: 작동 중 약 1KB (아두이노에 값 저장 없음)
- WebSocket 버퍼: 메시지 처리를 위한 약 1KB
- 최대 행 수: 20 (MAX_TABLE_ROWS를 통해 구성 가능)
- 메모리 효율성: 값은 웹 브라우저에서 추적되며 아두이노 메모리에는 저장되지 않음
성능 특성
- 업데이트 빈도: WebSocket을 통한 실시간(폴링 없음)
- 응답 시간: 값 업데이트 50ms 미만
- 하이라이트 속도: 값 변화에 대한 즉각적인 시각적 피드백
- 네트워크 오버헤드: 값 업데이트당 약 30-50바이트
- 변경 탐지: 시간 경과에 따른 값의 자동 비교
호환성
- 아두이노 보드: Arduino Uno R4 WiFi, DIYables STEM V4 IoT
- 브라우저: WebSocket을 지원하는 모든 최신 브라우저
- 장치: 데스크톱, 태블릿, 및 모바일 기기
- 네트워크: 로컬 액세스가 가능한 WiFi 네트워크
지능형 하이라이팅 기능
- 자동 감지: 설정 없이 시간이 지남에 따라 어떤 값이 변하는지 식별합니다
- 이중 수준 시스템: 변하는 값은 빨간색, 안정적인 값은 파란색
- 구성 필요 없음: 수동 설정이나 Arduino 코딩 없이 작동합니다
- 메모리 효율성: 모든 추적은 웹 브라우저에서 수행되며 Arduino에서는 수행되지 않습니다
- 전문적인 외관: 매끄러운 애니메이션이 명확한 시각적 피드백을 제공합니다
요약
WebTable 예제는 어떻게 하는지 보여줍니다:
- 속성-값 쌍으로 구성된 구조화된 데이터 디스플레이 만들기
- 웹소켓 통신을 이용한 실시간 값 업데이트 구현
- 값 변경을 자동으로 감지하는 지능형 하이라이팅 활용
- Arduino에 값을 저장하지 않고 메모리 효율이 높은 시스템 구축
- Setup()에서 표 구조를 한 번만 구성하여 일관된 구성을 확보
- 웹 클라이언트의 요청을 자동 데이터 새로고침 기능으로 처리
- 스마트 변경 감지 알고리즘을 통한 시각적 피드백 제공
- 현대 데이터 모니터링 애플리케이션을 위한 반응형 웹 인터페이스 구축
핵심 혁신: 지능형 하이라이팅
이 WebTable 구현의 두드러진 특징은 다음과 같은 지능형 하이라이팅 시스템이다:
- 자동으로 학습한다 하드코딩 없이 어떤 값이 바뀌는지
- 동적으로 적응한다 시간이 지남에 따라 데이터 패턴이 변화할 때
- 시각적 피드백을 제공한다 두 단계의 색상 코딩을 통해
- 효율적으로 작동한다 Arduino 메모리를 소모하지 않고
- 모든 유형의 데이터에 대해 보편적으로 작동한다 구성을 없이
이 예제는 체계적인 데이터 디스플레이가 필요한 프로젝트, 시각적 피드백이 포함된 실시간 모니터링 대시보드, 자동 변경 감지가 가능한 시스템 상태 인터페이스, 그리고 IoT 애플리케이션에서의 고급 데이터 시각화 기법을 교육적으로 시연하는 데 이상적입니다.
