지난 강좌에 이어서 이번에는 웹페이지에 버튼을 만들고 모듈의 내부에 있는
LED를 ON/OFF 제어를 하겠습니다.
https://jooduino.tistory.com/3
ESP32 웹서버 만들기 'Hello world'
ESP32의 최대 장점인 와이파이를 연결하여 아주 간단한 웹서버를 만들겠습니다. 아래의 소스코드를 ESP32 모듈에 넣고 동작 시킵니다. 시리얼 모니터에 표시되는 IP 주소를 웹브라우저(저는 크롬
jooduino.tistory.com
아래와 같이 코드를 수정 합니다.
'LED ON' 버튼과 'LED OFF' 버튼을 추가 했습니다.
const char index_html[] PROGMEM = R"==(
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ESP32 테스트 페이지</title>
</head>
<body>
<button onclick="location.href='/on'">LED ON</button>
<button onclick="location.href='/off'">LED OFF</button>
</body>
</html>
)==";
ESP32 모듈 마다 안에 내장된 LED의 GPIO번호가 다를 수 있고 'LED_BUILTIN'이
정의 되어 있는 경우 없는 경우가 있습니다. 자신이 사용하는 모듈에 맞추어 설정 합니다.
int LED_BUILTIN = 2;
ESP32 모듈 안에 내장된 LED를 출력으로 설정 합니다.
pinMode(LED_BUILTIN, OUTPUT);
서버 주소창에 LED를 ON/OFF 할 수 있는 경로를 추가 합니다.
// Receive an HTTP GET request
server.on("/on", HTTP_GET, [] (AsyncWebServerRequest *request) {
digitalWrite(LED_BUILTIN, HIGH);
request->send(200, "text/plain", "LED ON");
});
// Receive an HTTP GET request
server.on("/off", HTTP_GET, [] (AsyncWebServerRequest *request) {
digitalWrite(LED_BUILTIN, LOW);
request->send(200, "text/plain", "LED OFF");
});
전체 소스코드
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
AsyncWebServer server(80);
const char* ssid = "YOUR_SSID";
const char* password = "YOUR_PASSWOARD";
const char index_html[] PROGMEM = R"==(
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ESP32 테스트 페이지</title>
</head>
<body>
<button onclick="location.href='/on'">LED ON</button>
<button onclick="location.href='/off'">LED OFF</button>
</body>
</html>
)==";
// 빌트인 LED가 정의 되지 않은 경우 자신이 사용하는 모듈의
// 내부 LED의 GPIO 번호
int LED_BUILTIN = 2;
// 페이지를 찾을 수 없을 때
void notFound(AsyncWebServerRequest *request) {
request->send(404, "text/plain", "Not found");
}
void setup() {
Serial.begin(115200);
pinMode(LED_BUILTIN, OUTPUT);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
// 와이파이가 연결될 때까지 기다린다.
if (WiFi.waitForConnectResult() != WL_CONNECTED) {
Serial.printf("WiFi Failed!\n");
return;
}
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
// 루트
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(200, "text/html", index_html);
});
// Receive an HTTP GET request
server.on("/on", HTTP_GET, [] (AsyncWebServerRequest *request) {
digitalWrite(LED_BUILTIN, HIGH);
request->send(200, "text/plain", "LED ON");
});
// Receive an HTTP GET request
server.on("/off", HTTP_GET, [] (AsyncWebServerRequest *request) {
digitalWrite(LED_BUILTIN, LOW);
request->send(200, "text/plain", "LED OFF");
});
server.onNotFound(notFound);
server.begin(); // 서버 시작
}
void loop() {
}
실행된 웹브라우저 화면
'LED ON' 버튼 클릭시
'LED OFF' 버튼 클릭시
웹브라우저 주소창에 직접 'ip주소/on' 이라고 입력하면 버튼을 누른 효과와 같습니다.
이 예제는 단순히 웹브라우저 주소창에 특정 경로를 만들었을때 서버 프로그램을
이렇게 만들 수 있다는 것을 보여줍니다.
현재는 버튼을 누르고 나면 웹브라우저에서 뒤로가기 버튼을 눌러야 됩니다.
다음 강좌에서는 CSS 와 '자바스크립트'를 이용하여 좀더 예쁘고 편리하게 만들어 보겠습니다.
'ESP32 > 펌웨어' 카테고리의 다른 글
| ESP32 OTA를 이용한 펌웨어 업데이트 (2) | 2023.10.03 |
|---|---|
| ESP32 웹서버 만들기 - 입력 받기 (0) | 2023.10.03 |
| 아두이노 버튼 라이브러리 (0) | 2023.10.03 |
| ESP32 웹서버 만들기 - CSS를 이용하여 버튼 예쁘게 (0) | 2023.09.26 |
| ESP32 웹서버 만들기 'Hello world' (0) | 2023.09.20 |
