웹브라우즈에서 데이터 수신 하기 위한 가장 간단한 방법은 페이지 요청시에 변경된 데이터를 전송하면 된다.
#include <WiFi.h>
#include <WebServer.h>
// SSID & Password
const char* ssid = "SSSID";
const char* password = "PASS";
WebServer server(80); // Object of WebServer(HTTP port, 80 is defult)
void handle_root();
// HTML 페이지
#if 1
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<head>
<title> Simple Web Server </title>
</head>
<html>
<style>
</style>
<body>
<center>
<div class="card">
<p>ADC Value</p>
<h1><span id="ADCValue">$VAL</span></h1>
</div>
</center>
</body>
</html>
)rawliteral";
#endif
//페이지 요청이 들어 오면 처리 하는 함수
void handle_root()
{
String str_new_page(index_html);
char str_val[32];
int index = 0;
index = str_new_page.indexOf("$VAL");
sprintf(str_val, "%d", analogRead(A0));
str_new_page.setCharAt(index, str_val[0]);
str_new_page.setCharAt(index+1, str_val[1]);
str_new_page.setCharAt(index+2, str_val[2]);
str_new_page.setCharAt(index+3, str_val[3]);
Serial.println(str_new_page);
server.send(200, "text/html", str_new_page);
}
void InitWebServer()
{
//페이지 요청 처리 함수 등록
server.on("/", handle_root);
server.on("/readVal", handleReadVal);
server.begin();
}
void setup() {
Serial.begin(115200);
Serial.println("ESP32 Simple web Start");
Serial.println(ssid);
//WiFi 접속
WiFi.begin(ssid, password);
//접속 완료 하면
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.print("Wifi IP: ");
Serial.println(WiFi.localIP()); //Show ESP32 IP on serial
InitWebServer();
Serial.println("HTTP server started");
delay(100);
}
void loop() {
server.handleClient();
}
페이지 갱신 방법은 페이지 전체를 송신해야 하기 때문에 부하도 많이 걸리고 갱신주기가 길어서 실시간 데이터 표시에는 적합하지 않다.
실시간 데이터를 전송하기 위해서는 Ajax 라는 자바 스크립트를 이용하면 쉽고 간단하게 구현 할 수 있다.
HTML 코드에서 변경할 데이터의 ID를 설정하고 자바스크립트에서 id의 value 값을 변경하면 된다.
<!----------------------------HTML--------------------------->
<body>
<div class="card">
<p>ADC Value</p>
<h1><span id="ADCValue">0</span></h1>
</div>
자바스크립트에서 sentInterval 함수로 일정 시간 주기로 요청해서 데이터를 수신 할 수 있다.
<!-------------------------JavaScrip------------------------->
<script>
setInterval(function()
{
getReadval();
}, 30);
function getReadval()
{
var POTvalRequest = new XMLHttpRequest();
POTvalRequest.onreadystatechange = function()
{
if(this.readyState == 4 && this.status == 200)
{
document.getElementById("ADCValue").innerHTML = this.responseText;
}
};
POTvalRequest.open("GET", "readVal", true);
POTvalRequest.send();
}
//-------------------------------------------------------
</script>
이렇게 하면 실시간으로 ESP32-S2의 ADC 값을 웹페이지에 표시할 수 있다.
최종 소스코드
#include <WiFi.h>
#include <WebServer.h>
// SSID & Password
const char* ssid = "SSID";
const char* password = "PASS";
WebServer server(80); // Object of WebServer(HTTP port, 80 is defult)
void handle_root();
// HTML 페이지
#if 1
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<head>
<title> ESP32 Web Server </title>
</head>
<html>
<!----------------------------CSS---------------------------->
<style>
body {
margin: 1em;
background: #333;
color: #ccc;
font: normal 3vw/1 "Montserrat", sans-serif;
text-align: center;
text-transform: uppercase;
}
h1 {
font-size: 25vw;
}
</style>
<!----------------------------HTML--------------------------->
<body>
<div class="card">
<p>ADC Value</p>
<h1><span id="ADCValue">120</span></h1>
</div>
<!-------------------------JavaScrip------------------------->
<script>
setInterval(function()
{
getReadval();
}, 50);
//-------------------------------------------------------
function getReadval()
{
var POTvalRequest = new XMLHttpRequest();
POTvalRequest.onreadystatechange = function()
{
if(this.readyState == 4 && this.status == 200)
{
document.getElementById("ADCValue").innerHTML = this.responseText;
}
};
POTvalRequest.open("GET", "readVal", true);
POTvalRequest.send();
}
//-------------------------------------------------------
</script>
</body>
</html>
)rawliteral";
#endif
//페이지 요청이 들어 오면 처리 하는 함수
void handle_root()
{
server.send(200, "text/html", index_html);
}
void handleReadVal()
{
String POTval = String(analogRead(A0));
server.send(200, "text/plane", POTval);
}
void InitWebServer()
{
//페이지 요청 처리 함수 등록
server.on("/", handle_root);
server.on("/readVal", handleReadVal);
server.begin();
}
void setup() {
Serial.begin(115200);
Serial.println("ESP32 Simple web Start");
Serial.println(ssid);
//WiFi 접속
WiFi.begin(ssid, password);
//접속 완료 하면
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.print("Wifi IP: ");
Serial.println(WiFi.localIP()); //Show ESP32 IP on serial
InitWebServer();
Serial.println("HTTP server started");
delay(100);
}
void loop() {
server.handleClient();
}
반응형
