ESP32 - 웹을 통해 LED 제어 | ESP32 - Control LED via Web
이 튜토리얼에서는 PC나 스마트폰의 브라우저를 사용하여 웹 인터페이스를 통해 LED를 제어하는 방법을 배울 예정입니다. 이를 위해 ESP32를 활용할 것입니다. 구체적으로, ESP32는 웹 서버로 작동하도록 프로그래밍될 것입니다. ESP32의 IP 주소가 192.168.0.2라고 가정합시다. 이것이 작동하는 방법의 세부 사항은 다음과 같습니다:
- 웹 브라우저에 192.168.0.2를 입력하면, 브라우저가 ESP32에게 요청을 보내고 ESP32는 LED를 제어하기 위한 켜기/끄기 버튼이 포함된 웹 페이지로 응답합니다.
- 마찬가지로, 웹 페이지에서 "켜기" 버튼을 클릭하거나 192.168.0.2/led1/on을 웹 브라우저에 입력하면, ESP32는 LED를 켜고 제어 웹 페이지로 응답합니다.
- 마찬가지로, 웹 페이지에서 "끄기" 버튼을 클릭하거나 192.168.0.2/led1/off를 웹 브라우저에 입력하면, ESP32는 LED를 끄고 제어 웹 페이지로 응답합니다.
우리는 두 개의 예제 코드를 통해 배울 것입니다:
- HTML 내용이 ESP32 코드에 포함됩니다.
- HTML 내용이 ESP32 코드에서 분리되어 .h 파일에 들어갑니다.
이 튜토리얼은 다음을 달성하기 위해 쉽고 창의적으로 맞춤화할 수 있는 기초를 제공합니다:
- 웹을 통해 여러 개의 LED 제어하기
- 웹 사용자 인터페이스(UI) 재설계하기
준비물
| 1 | × | ESP-WROOM-32 Dev Module | 쿠팡 | Amazon | |
| 1 | × | USB Cable Type-C | 쿠팡 | Amazon | |
| 1 | × | LED | Amazon | |
| 1 | × | 220 ohm resistor | Amazon | |
| 1 | × | Breadboard | 쿠팡 | Amazon | |
| 1 | × | Jumper Wires | Amazon | |
| 1 | × | (Recommended) Screw Terminal Expansion Board for ESP32 | 쿠팡 | Amazon |
공개: 이 섹션에서 제공된 링크 중 일부는 제휴 링크입니다. 이 링크를 통해 구매한 경우 추가 비용없이 수수료를 받을 수 있습니다. 지원해 주셔서 감사합니다.
LED와 ESP32에 관하여
LED와 ESP32(핀아웃, 작동 원리, 프로그래밍 방법 등)에 대해 잘 모르신다면, 다음 튜토리얼에서 이에 대해 배워보세요:
선연결
이 이미지는 Fritzing을 사용하여 만들어졌습니다. 이미지를 확대하려면 클릭하세요.
ESP32 및 다른 구성 요소에 전원을 공급하는 방법에 대해 잘 알지 못하는 경우, 다음 튜토리얼에서 안내를 찾을 수 있습니다: ESP32 전원 공급 방법.
ESP32 코드 - HTML 내용이 ESP32 코드에 내장되어 있습니다.
/*
* 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다
* 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/esp32/esp32-controls-led-via-web
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#define LED_PIN 18 // ESP32 핀 GPIO18이 LED에 연결됨
const char *ssid = "YOUR_WIFI_SSID"; // 변경하세요
const char *password = "YOUR_WIFI_PASSWORD"; // 변경하세요
AsyncWebServer server(80);
int LED_state = LOW;
String getHTML() {
String html = "<!DOCTYPE HTML>";
html += "<html>";
html += "<head>";
html += "<link rel='icon' href='data:,'>";
html += "</head>";
html += "<p>LED 상태: <span style='color: red;'>";
if (LED_state == LOW)
html += "OFF";
else
html += "ON";
html += "</span></p>";
html += "<a href='/led1/on'>켜기</a>";
html += "<br><br>";
html += "<a href='/led1/off'>끄기</a>";
html += "</html>";
return html;
}
void setup() {
Serial.begin(9600);
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, LED_state);
// Wi-Fi에 연결
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Wi-Fi에 연결 중...");
}
Serial.println("Wi-Fi에 연결됨");
// ESP32의 IP 주소 출력
Serial.print("ESP32 웹 서버의 IP 주소: ");
Serial.println(WiFi.localIP());
// 홈 페이지
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("ESP32 웹 서버: 새 요청 받음:");
Serial.println("GET /");
request->send(200, "text/html", getHTML());
});
// LED를 제어하기 위한 경로
server.on("/led1/on", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("ESP32 웹 서버: 새 요청 받음:");
Serial.println("GET /led1/on");
LED_state = HIGH;
digitalWrite(LED_PIN, LED_state);
request->send(200, "text/html", getHTML());
});
server.on("/led1/off", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("ESP32 웹 서버: 새 요청 받음:");
Serial.println("GET /led1/off");
LED_state = LOW;
digitalWrite(LED_PIN, LED_state);
request->send(200, "text/html", getHTML());
});
// 서버 시작
server.begin();
}
void loop() {
// 여기에 코드를 작성하세요
}
사용 방법
- 만약 이것이 처음으로 ESP32를 사용하는 것이라면, Arduino IDE에서 ESP32 환경 설정하는 방법을 확인하세요.
- 위 이미지와 같이 배선하세요.
- ESP32 보드를 마이크로 USB 케이블을 통해 PC에 연결하세요.
- PC에서 Arduino IDE를 엽니다.
- 올바른 ESP32 보드(예: ESP32 Dev Module)와 COM 포트를 선택하세요.
- Arduino IDE의 왼쪽 네비게이션 바에 있는 Library Manager 아이콘을 클릭하여 라이브러리 관리자를 엽니다.
- “ESPAsyncWebServer”를 검색한 다음, lacamera가 만든 ESPAsyncWebServer를 찾습니다.
- Install 버튼을 클릭하여 ESPAsyncWebServer 라이브러리를 설치하세요.
의존성을 설치하라는 요청을 받게 됩니다. Install All 버튼을 클릭하세요.
- 위의 코드를 복사하고 Arduino IDE로 엽니다
- 코드 내의 와이파이 정보(SSID와 비밀번호)를 귀하의 것으로 변경하세요
- Arduino IDE에서 Upload 버튼을 클릭하여 코드를 ESP32에 업로드하세요
- 시리얼 모니터를 엽니다
- 시리얼 모니터에서 결과를 확인하세요
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
- IP 주소를 보게 될 것입니다. 예를 들어: 192.168.0.2. 이것은 ESP32 웹 서버의 IP 주소입니다.
- 웹 브라우저를 열고 아래 세 가지 형식 중 하나를 주소 창에 입력하세요:
192.168.0.2
192.168.0.2/led1/on
192.168.0.2/led1/off
- IP 주소가 변경될 수 있으니 유의하시기 바랍니다. 시리얼 모니터에서 현재 값을 확인해 주십시오.
- 시리얼 모니터에서 아래 출력물도 보실 수 있습니다.
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
ESP32 Web Server: New request recieved:
GET /
ESP32 Web Server: New request recieved:
GET /led1/on
ESP32 Web Server: New request recieved:
GET /led1/off
Autoscroll
Clear output
9600 baud
Newline
- LED 상태 확인
- 아래와 같이 웹 브라우저에서 ESP32 보드의 웹 페이지를 볼 수 있습니다
웹 인터페이스를 통해 LED의 켜기/끄기를 제어할 수 있습니다.
ESP32 코드 - HTML 콘텐츠가 ESP32 코드에서 분리됩니다
그래픽 웹 페이지가 많은 양의 HTML 콘텐츠를 포함하고 있기 때문에, 이전과 같이 ESP32 코드에 포함시키는 것이 불편해집니다. 이를 해결하기 위해, ESP32 코드와 HTML 코드를 서로 다른 파일로 분리해야 합니다:
- ESP32 코드는 .ino 파일에 위치할 것입니다.
- HTML 코드(HTML, CSS, 및 Javascript를 포함하여)는 .h 파일에 위치할 것입니다.
사용 방법
- Arduino IDE를 열고 새 스케치를 만들어주세요. 이름을 지정하세요. 예를 들어, newbiely.kr.ino
- 아래 코드를 복사하고 Arduino IDE로 열어주세요.
/*
* 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다
* 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/esp32/esp32-controls-led-via-web
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include "index.h" // index.h 파일을 포함합니다.
#define LED_PIN 18 // ESP32 핀 GPIO18이 LED에 연결되어 있습니다.
const char *ssid = "YOUR_WIFI_SSID"; // 변경하세요
const char *password = "YOUR_WIFI_PASSWORD"; // 변경하세요
AsyncWebServer server(80);
int LED_state = LOW;
String getHTML() {
String html = webpage; // index.h 파일에서 HTML 내용을 사용합니다.
html.replace("%LED_STATE%", LED_state ? "ON" : "OFF"); // led 상태를 업데이트합니다.
return html;
}
void setup() {
Serial.begin(9600);
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, LED_state);
// Wi-Fi에 연결합니다.
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// ESP32의 IP 주소를 출력합니다.
Serial.print("ESP32 Web Server의 IP 주소: ");
Serial.println(WiFi.localIP());
// 홈 페이지
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("ESP32 Web Server: 새 요청을 받았습니다:");
Serial.println("GET /");
request->send(200, "text/html", getHTML());
});
// LED를 제어하기 위한 경로
server.on("/led1/on", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("ESP32 Web Server: 새 요청을 받았습니다:");
Serial.println("GET /led1/on");
LED_state = HIGH;
digitalWrite(LED_PIN, LED_state);
request->send(200, "text/html", getHTML());
});
server.on("/led1/off", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("ESP32 Web Server: 새 요청을 받았습니다:");
Serial.println("GET /led1/off");
LED_state = LOW;
digitalWrite(LED_PIN, LED_state);
request->send(200, "text/html", getHTML());
});
// 서버를 시작합니다.
server.begin();
}
void loop() {
// 여기에 코드를 작성하세요.
}
코드에서 WiFi 정보(SSID 및 비밀번호)를 귀하의 것으로 변경하십시오.
Arduino IDE에서 index.h 파일을 생성하려면:
- 시리얼 모니터 아이콘 바로 아래에 있는 버튼을 클릭하고 새 탭을 선택하거나, Ctrl+Shift+N 키를 사용하십시오.
파일 이름을 index.h로 지정하고 OK 버튼을 클릭하세요.
아래 코드를 복사하여 index.h에 붙여넣으세요.
/*
* 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다
* 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/esp32/esp32-controls-led-via-web
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE HTML>
<html>
<head>
<link rel='icon' href='data:,'>
</head>
<p>LED state: <span style='color: red;'>%LED_STATE%</span></p>
<a href='/led1/on'>Turn ON</a>
<br><br>
<a href='/led1/off'>Turn OFF</a>
</html>
)=====";
#endif
이제 두 파일에 코드가 들어 있습니다: newbiely.kr.ino와 index.h
- Arduino IDE에서 Upload 버튼을 클릭하여 ESP32에 코드를 업로드합니다
- PC나 스마트폰의 웹 브라우저를 통해 이전처럼 ESP32 보드의 웹 페이지에 접속합니다. 이전 코드와 비슷한 화면을 볼 수 있을 것입니다:
※ NOTE THAT:
- index.h의 HTML 컨텐츠를 수정하고 newbiely.kr.ino 파일은 건드리지 않는다면, 코드를 ESP32에 컴파일하고 업로드할 때 Arduino IDE는 HTML 컨텐츠를 업데이트하지 않을 것입니다.
- 이 경우에 Arduino IDE가 HTML 컨텐츠를 업데이트하게 하려면, newbiely.kr.ino 파일을 변경하세요 (예를 들어, 빈 줄을 추가하거나, 주석을 추가하는 등).
위의 코드를 창의적으로 쉽게 사용자 정의하여 다음을 달성할 수 있습니다:
- 웹을 통해 여러 LED 제어하기
- 웹 사용자 인터페이스(UI) 재설계하기