지난 강좌에 이어서 이번에는 웹페이지에 버튼을 만들고 모듈의 내부에 있는
LED를 ON/OFF 제어를 하겠습니다.
https://jooduino.tistory.com/3
아래와 같이 코드를 수정 합니다.
'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 |