복잡하게 들릴 수 있지만 걱정하지 마세요! 이 튜토리얼은 단계별 안내를 제공하며, 코드는 초보자도 쉽게 이해하고 자신만의 ESP32 웹 서버를 만들 수 있도록 초보자 친화적으로 설계되었습니다.
1 | × | ESP-WROOM-32 Dev Module | 쿠팡 | Amazon | |
1 | × | USB Cable Type-C | 쿠팡 | Amazon | |
1 | × | (Recommended) Screw Terminal Expansion Board for ESP32 | 쿠팡 | Amazon | |
공개: 이 섹션에서 제공된 링크 중 일부는 제휴 링크입니다. 이 링크를 통해 구매한 경우 추가 비용없이 수수료를 받을 수 있습니다. 지원해 주셔서 감사합니다.
ESP32와 웹 서버(핀 배열, 작동 방식, 프로그래밍 포함)에 익숙하지 않다면, 다음 튜토리얼을 통해 배울 수 있습니다:
ESP32 - 웹 서버(BASE_URL/tutorials/esp32/esp32-web-server)
아래는 여러 페이지를 가진 웹 서버를 생성하는 ESP32 코드의 전체입니다. 간단하게 유지하기 위해 각 페이지의 HTML 내용은 매우 단순하며 ESP32 코드에 바로 내장되어 있습니다. 다른 부분에서는 각 페이지의 HTML 내용을 별도의 파일로 분리하는 방법을 배우게 되어 코드를 더 정돈되고 관리하기 쉽게 만듭니다.
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#define LED_PIN 18
const char *ssid = "YOUR_WIFI_SSID";
const char *password = "YOUR_WIFI_PASSWORD";
AsyncWebServer server(80);
int LED_state = LOW;
float getTemperature() {
float temp_x100 = random(0, 10000);
return temp_x100 / 100;
}
void setup() {
Serial.begin(9600);
pinMode(LED_PIN, OUTPUT);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("Web Server: home page");
request->send(200, "text/html", "This is the ESP32 home page");
});
server.on("/temperature.html", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("Web Server: temperature page");
float temperature = getTemperature();
request->send(200, "text/html", "Temperature: " + String(temperature));
});
server.on("/led.html", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.print("Web Server: LED page");
if (request->hasArg("state")) {
String state = request->arg("state");
if (state == "on") {
LED_state = HIGH;
} else if (state == "off") {
LED_state = LOW;
}
digitalWrite(LED_PIN, LED_state);
Serial.print(" => turning LED to ");
Serial.print(state);
}
Serial.println();
request->send(200, "text/html", "LED state: " + String(LED_state));
});
server.onNotFound([](AsyncWebServerRequest *request) {
if (request->method() == HTTP_GET) {
Serial.println("Web Server: Not Found");
request->send(404, "text/html", "Not Found");
} else {
Serial.println("Web Server: Method Not Allowed");
request->send(405, "text/html", "Method Not Allowed");
}
});
server.begin();
Serial.println("ESP32 Web server started");
}
void loop() {
}
위 이미지와 같이 배선하세요.
마이크로 USB 케이블을 사용하여 ESP32 보드를 PC에 연결하세요.
PC에서 Arduino IDE를 엽니다.
올바른 ESP32 보드(예: ESP32 Dev Module)와 COM 포트를 선택하세요.
Arduino IDE의 왼쪽 내비게이션 바에 있는 Library Manager 아이콘을 클릭하여 라이브러리 관리자를 엽니다.
“ESPAsyncWebServer”을 검색한 다음, lacamera가 만든 ESPAsyncWebServer를 찾으세요.
Install 버튼을 클릭하여 ESPAsyncWebServer 라이브러리를 설치하세요.
의존성을 설치하라는 메시지가 표시됩니다. Install All 버튼을 클릭하세요.
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
ESP32 Web server started
192.168.0.2
192.168.0.2/index.html
192.168.0.2/led.html
192.168.0.2/temperature.html
192.168.0.2/blabla.html
시리얼 모니터에서 받은 IP 주소로 192.168.0.2를 변경해야 한다는 점을 유의하시기 바랍니다.
다음 페이지들을 볼 수 있습니다: 홈 페이지, led 페이지, 온도 페이지 및 찾을 수 없는 페이지
시리얼 모니터에서 출력도 확인할 수 있습니다.
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
ESP32 Web server started
Web Server: home page
Web Server: LED page
Web Server: LED page => turning LED to on
Web Server: LED page => turning LED to off
Web Server: temperature page
Web Server: Not Found
이전 코드에는 각 페이지마다 매우 간단한 HTML 콘텐츠가 있습니다. 하지만 많은 HTML로 멋진 인터페이스를 만들고 싶다면, 코드가 커지고 지저분해질 수 있습니다. 이를 간단하게 하기 위해, HTML을 ESP32 코드로부터 분리하는 방법을 배우게 될 것입니다. 이를 통해 HTML을 별도의 파일에 유지하여 관리하고 작업하기가 더 쉬워집니다.
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include "index.h"
#include "temperature.h"
#include "led.h"
#include "error_404.h"
#include "error_405.h"
#define LED_PIN 18
const char *ssid = "YOUR_WIFI_SSID";
const char *password = "YOUR_WIFI_PASSWORD";
AsyncWebServer server(80);
int LED_state = LOW;
float getTemperature() {
float temp_x100 = random(0, 10000);
return temp_x100 / 100;
}
void setup() {
Serial.begin(9600);
pinMode(LED_PIN, OUTPUT);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("Web Server: home page");
String html = HTML_CONTENT_HOME;
request->send(200, "text/html", html);
});
server.on("/temperature.html", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("Web Server: temperature page");
String html = HTML_CONTENT_TEMPERATURE;
float temperature = getTemperature();
html.replace("%TEMPERATURE_VALUE%", String(temperature));
request->send(200, "text/html", html);
});
server.on("/led.html", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.print("Web Server: LED page");
if (request->hasArg("state")) {
String state = request->arg("state");
if (state == "on") {
LED_state = HIGH;
} else if (state == "off") {
LED_state = LOW;
}
digitalWrite(LED_PIN, LED_state);
Serial.print(" => turning LED to ");
Serial.print(state);
}
Serial.println();
String html = HTML_CONTENT_LED;
html.replace("%LED_STATE%", LED_state ? "ON" : "OFF");
request->send(200, "text/html", html);
});
server.onNotFound([](AsyncWebServerRequest *request) {
if (request->method() == HTTP_GET) {
Serial.println("Web Server: Not Found");
String html = HTML_CONTENT_404;
request->send(404, "text/html", html);
} else {
Serial.println("Web Server: Method Not Allowed");
String html = HTML_CONTENT_405;
request->send(405, "text/html", html);
}
});
server.begin();
Serial.println("ESP32 Web server started");
}
void loop() {
}
코드에서 WiFi 정보(SSID와 비밀번호)를 여러분 것으로 바꾸세요.
Arduino IDE에서 index.h 파일을 다음과 같이 생성하세요:
파일 이름에 index.h를 입력하고 OK 버튼을 클릭하세요.
아래 코드를 복사하여 index.h 파일에 붙여넣으세요.
const char *HTML_CONTENT_HOME = R"=====(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:,">
<title>Home Page</title>
</head>
<body>
<h1>Welcome to the Home Page</h1>
<ul>
<li><a href="/led.html">LED Page</a></li>
<li><a href="/temperature.html">Temperature Page</a></li>
</ul>
</body>
</html>
)=====";
마찬가지로, 다음 내용으로 Arduino IDE에서 led.h 파일을 생성하세요.
const char *HTML_CONTENT_LED = R"=====(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:,">
<title>LED Page</title>
</head>
<body>
<h1>LED Page</h1>
<p>LED State: <span style="color: red;">%LED_STATE%</span></p>
<a href='/led.html?state=on'>Turn ON</a>
<br><br>
<a href='/led.html?state=off'>Turn OFF</a>
</body>
</html>
)=====";
마찬가지로, 다음 내용을 포함하여 temperature.h 파일을 Arduino IDE에서 생성하세요.
const char *HTML_CONTENT_TEMPERATURE = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 - Web Temperature</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<meta charset="utf-8">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
body { font-family: "Georgia"; text-align: center; font-size: width/2pt;}
h1 { font-weight: bold; font-size: width/2pt;}
h2 { font-weight: bold; font-size: width/2pt;}
button { font-weight: bold; font-size: width/2pt;}
</style>
<script>
var cvs_width = 200, cvs_height = 450;
function init() {
var canvas = document.getElementById("cvs");
canvas.width = cvs_width;
canvas.height = cvs_height + 50;
var ctx = canvas.getContext("2d");
ctx.translate(cvs_width/2, cvs_height - 80);
update_view(%TEMPERATURE_VALUE%);
}
function update_view(temp) {
var canvas = document.getElementById("cvs");
var ctx = canvas.getContext("2d");
var radius = 70;
var offset = 5;
var width = 45;
var height = 330;
ctx.clearRect(-cvs_width/2, -350, cvs_width, cvs_height);
ctx.strokeStyle="blue";
ctx.fillStyle="blue";
var x = -width/2;
ctx.lineWidth=2;
for (var i = 0; i <= 100; i+=5) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 20, y);
ctx.stroke();
}
ctx.lineWidth=5;
for (var i = 0; i <= 100; i+=20) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 25, y);
ctx.stroke();
ctx.font="20px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="right";
ctx.fillText(i.toString(), x - 35, y);
}
ctx.lineWidth=16;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.stroke();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle="#e6e6ff";
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.fill();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle="#ff1a1a";
ctx.beginPath();
ctx.arc(0, 0, radius - offset, 0, 2 * Math.PI);
ctx.fill();
temp = Math.round(temp * 100) / 100;
var y = (height - radius)*temp/100.0 + radius + 5;
ctx.beginPath();
ctx.rect(-width/2 + offset, -y, width - 2*offset, y);
ctx.fill();
ctx.fillStyle="red";
ctx.font="bold 34px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillText(temp.toString() + "°C", 0, 100);
}
window.onload = init;
</script>
</head>
<body>
<h1>ESP32 - Web Temperature</h1>
<canvas id="cvs"></canvas>
</body>
</html>
)=====";
마찬가지로, error_404.h 파일을 다음 내용으로 Arduino IDE에 생성하십시오.
const char *HTML_CONTENT_404 = R"=====(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:,">
<title>404 - Page Not Found</title>
<style>
h1 {color: #ff4040;}
</style>
</head>
<body>
<h1>404</h1>
<p>Oops! The page you are looking for could not be found on Esp32 Web Server.</p>
<p>Please check the URL or go back to the <a href="/">homepage</a>.</p>
<p>Or check <a href="https://esp32io.com/tutorials/esp32-web-server-multiple-pages"> Esp32 Web Server</a> tutorial.</p>
</body>
</html>
)=====";
마찬가지로, 다음 내용으로 Arduino IDE에서 error_405.h 파일을 작성하세요.
const char *HTML_CONTENT_405 = R"=====(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:,">
<title>405 - Method Not Allowed</title>
<style>
h1 {color: #ff4040;}
</style>
</head>
<body>
<h1>405 - Method Not Allowed</h1>
<p>Oops! The requested method is not allowed for this resource.</p>
<p>Please check your request or go back to the <a href="/">homepage</a>.</p>
<p>Or check <a href="https://esp32io.com/tutorials/esp32-web-server-multiple-pages"> Esp32 Web Server</a> tutorial.</p>
</body>
</html>
)=====";
아두이노 IDE에 다음과 같이 여러 파일이 있습니다: