SENSORS/ACTUATORS

INTERNET OF THING (IoT)

ESP32 - 이더넷

ESP32 - GPIO 인터럽트

ESP32 웹을 통한 릴레이 제어

이 튜토리얼에서는 PC나 스마트폰의 브라우저를 사용하여 웹 인터페이스를 통해 릴레이를 제어하는 방법을 배울 것입니다. 이를 위해 ESP32를 이용할 것입니다. 구체적으로, ESP32는 웹 서버로 작동하도록 프로그래밍될 것입니다. ESP32의 IP 주소가 192.168.0.2라고 가정해 봅시다. 작동 방식의 자세한 내용은 다음과 같습니다:

웹 브라우저에 192.168.0.2를 입력하면, 브라우저는 ESP32에 요청을 보내고, ESP32는 릴레이를 제어할 수 있는 켜기/끄기 버튼이 포함된 웹 페이지로 응답합니다.
마찬가지로, 웹 페이지에서 "켜기" 버튼을 클릭하거나 웹 브라우저에 192.168.0.2/relay1/on을 입력하면, ESP32는 릴레이를 켜고 제어 웹 페이지로 응답합니다.
마찬가지로, 웹 페이지에서 "끄기" 버튼을 클릭하거나 웹 브라우저에 192.168.0.2/relay1/off를 입력하면, ESP32는 릴레이를 끄고 제어 웹 페이지로 응답합니다.

두 개의 예제 코드를 통해 배울 것입니다:

HTML 콘텐츠가 ESP32 코드에 임베딩됩니다.
HTML 콘텐츠가 ESP32 코드에서 분리되어 .h 파일에 들어갑니다.

이 튜토리얼은 다음을 달성하기 위해 쉽고 창의적으로 맞춤화할 수 있는 기본 사항을 제공합니다:

웹을 통한 여러 릴레이 제어
웹 사용자 인터페이스(UI) 재설계

준비물

1	×	38-pin ESP32 ESP-WROOM-32 Dev Module - Narrow	쿠팡 \| 아마존
1	×	(또는) 38-pin ESP32 ESP-WROOM-32 Dev Module - Wide	쿠팡 \| 아마존
1	×	(또는) 30-pin ESP32 ESP-WROOM-32 Dev Module - Wide	아마존
1	×	(또는) ESP32 Uno-form board	아마존
1	×	(또는) ESP32 S3 Uno-form board	아마존
1	×	USB 케이블 타입-A to 타입-C (USB-A PC용)	쿠팡 \| 아마존
1	×	USB 케이블 타입-C to 타입-C (USB-C PC용)	아마존
1	×	릴레이	아마존
1	×	점퍼케이블	쿠팡 \| 아마존
1	×	브레드보드	쿠팡 \| 아마존
1	×	(옵션) 솔레노이드 잠금장치	쿠팡 \| 아마존
1	×	(옵션) 12V 전원 어댑터	아마존
1	×	(옵션) DC 커넥터 전원 연결 잭 플러그 소켓	쿠팡 \| 아마존
1	×	(추천) ESP32용 스크루 터미널 확장 보드	쿠팡 \| 아마존
1	×	(추천) Breakout Expansion Board for ESP32	쿠팡 \| 아마존
1	×	(추천) ESP32용 전원 분배기	쿠팡 \| 아마존

공개: 이 포스팅 에 제공된 일부 링크는 아마존 제휴 링크입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

릴레이 및 ESP32에 관하여

만약 여러분이 릴레이와 ESP32(핀 배치, 작동 방식, 프로그래밍 방법 등)에 대해 잘 모른다면, 다음 튜토리얼에서 그것들에 대해 배워보세요:

선연결

이 이미지는 Fritzing을 사용하여 만들어졌습니다. 이미지를 확대하려면 클릭하세요.

ESP32 및 다른 구성 요소에 전원을 공급하는 방법에 대해 잘 알지 못하는 경우, 다음 튜토리얼에서 안내를 찾을 수 있습니다: ESP32 전원 공급 방법.

ESP32 코드 - HTML 콘텐츠가 ESP32 코드에 포함되어 있습니다.

/* * 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp32/esp32-controls-relay-via-web */ #include <DIYables_ESP32_WebServer.h> #define RELAY_PIN 16 // ESP32 pin GPIO16 connected to Relay int relay_state = LOW; // WiFi credentials const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // Create web server instance DIYables_ESP32_WebServer server; String getHTML() { String html = "<!DOCTYPE HTML>"; html += "<html>"; html += "<head>"; html += "<link rel='icon' href='data:,'>"; html += "</head>"; html += "Relay state: "; if (relay_state == LOW) html += "OFF"; else html += "ON"; html += ""; html += "<a href='/relay1/on'>Turn ON</a>"; html += " "; html += "<a href='/relay1/off'>Turn OFF</a>"; html += "</html>"; return html; } // home page void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); server.sendResponse(client, getHTML().c_str()); } // Route to control the Relay void handleRelayOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); relay_state = HIGH; digitalWrite(RELAY_PIN, relay_state); server.sendResponse(client, getHTML().c_str()); } void handleRelayOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); relay_state = LOW; digitalWrite(RELAY_PIN, relay_state); server.sendResponse(client, getHTML().c_str()); } void setup() { Serial.begin(9600); delay(1000); Serial.println("ESP32 Web Server"); // Configure routes server.addRoute("/", handleHome); server.addRoute("/relay1/on", handleRelayOn); server.addRoute("/relay1/off", handleRelayOff); // Start web server with WiFi connection server.begin(WIFI_SSID, WIFI_PASSWORD); } void loop() { server.handleClient(); }

사용 방법

ESP32를 처음 사용하는 경우, ESP32 - 소프트웨어 설치을 참조하세요.
위 이미지와 같이 배선하세요.
ESP32 보드를 마이크로 USB 케이블을 통해 PC에 연결하세요.
PC에서 Arduino IDE를 엽니다.
올바른 ESP32 보드(예: ESP32 Dev Module)와 COM 포트를 선택하세요.
Arduino IDE의 왼쪽 탐색 바에 있는 Library Manager 아이콘을 클릭하여 라이브러리 매니저를 엽니다.
"DIYables ESP32 WebServer"을 검색한 다음, DIYables가 만든 DIYables ESP32 WebServer를 찾습니다.
DIYables ESP32 WebServer 라이브러리를 설치하려면 Install 버튼을 클릭하세요.

위의 코드를 복사한 다음 Arduino IDE로 열기
코드 내의 와이파이 정보(SSID 및 비밀번호)를 본인 것으로 변경하기
Arduino IDE에서 Upload 버튼을 클릭하여 ESP32에 코드 업로드하기
시리얼 모니터 열기
시리얼 모니터에서 결과 보기

Newbiely | Arduino IDE 2.3.8

──

☐

Newbiely.ino

···

8 Serial.println("Hello World!");

Output

Serial Monitor

Message (Enter to send message to 'ESP32 Dev Module' on 'COM15')

New Line

9600 baud

Connecting to WiFi... Connected to WiFi ESP32 Web Server's IP address: 192.168.0.2

Ln 11, Col 1

ESP32 Dev Module on COM15

IP 주소를 볼 수 있습니다. 예를 들어: 192.168.0.2. 이것은 ESP32 웹 서버의 IP 주소입니다.
웹 브라우저를 열고 아래의 세 가지 형식 중 하나를 주소 창에 입력하세요:

192.168.0.2

192.168.0.2/relay1/on

192.168.0.2/relay1/off

IP 주소가 달라질 수 있으니 양해 바랍니다. 시리얼 모니터에서 현재 값을 확인해 주세요.
시리얼 모니터에서 아래 출력물도 확인하실 수 있습니다.

Newbiely | Arduino IDE 2.3.8

──

☐

Newbiely.ino

···

8 Serial.println("Hello World!");

Output

Serial Monitor

Message (Enter to send message to 'ESP32 Dev Module' on 'COM15')

New Line

9600 baud

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 /relay1/on ESP32 Web Server: New request recieved: GET /relay1/off

Ln 11, Col 1

ESP32 Dev Module on COM15

릴레이 상태 확인
아래와 같이 웹 브라우저에서 ESP32 보드의 웹 페이지를 볼 수 있습니다.

이제 웹 인터페이스를 통해 릴레이의 켜기/끄기를 제어할 수 있습니다.

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-relay-via-web */ #include <DIYables_ESP32_WebServer.h> #include "index.h" // Include the index.h file #define RELAY_PIN 16 // ESP32 pin GPIO16 connected to Relay int relay_state = LOW; // WiFi credentials const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // Create web server instance DIYables_ESP32_WebServer server; String getHTML() { String html = webpage; // Use the HTML content from the index.h file html.replace("%RELAY_STATE%", relay_state ? "ON" : "OFF"); // update the relay state return html; } // home page void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); server.sendResponse(client, getHTML().c_str()); } // Route to control the Relay void handleRelayOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); relay_state = HIGH; digitalWrite(RELAY_PIN, relay_state); server.sendResponse(client, getHTML().c_str()); } void handleRelayOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); relay_state = LOW; digitalWrite(RELAY_PIN, relay_state); server.sendResponse(client, getHTML().c_str()); } void setup() { Serial.begin(9600); delay(1000); Serial.println("ESP32 Web Server"); // Configure routes server.addRoute("/", handleHome); server.addRoute("/relay1/on", handleRelayOn); server.addRoute("/relay1/off", handleRelayOff); // Start web server with WiFi connection server.begin(WIFI_SSID, WIFI_PASSWORD); } void loop() { server.handleClient(); }

코드에서 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-relay-via-web */ #ifndef WEBPAGE_H #define WEBPAGE_H const char* webpage = R"=====( <!DOCTYPE HTML> <html> <head> <link rel='icon' href='data:,'> </head> Relay state: %RELAY_STATE% <a href='/relay1/on'>Turn ON</a> <a href='/relay1/off'>Turn OFF</a> </html> )====="; #endif

이제 코드가 두 개의 파일에 있습니다: newbiely.kr.ino 와 index.h
Arduino IDE에서 Upload 버튼을 클릭하여 ESP32에 코드를 업로드하세요.
이전과 같이 PC 또는 스마트폰의 웹 브라우저를 통해 ESP32 보드의 웹 페이지에 접속하세요. 이전 코드와 유사하게 보일 것입니다:

※ 주의:

index.h에서 HTML 내용을 수정하고 newbiely.kr.ino 파일은 건드리지 않으면, ESP32에 코드를 컴파일하고 업로드할 때 Arduino IDE는 HTML 내용을 업데이트하지 않습니다.
이 경우에 Arduino IDE가 HTML 내용을 업데이트하게 하려면, newbiely.kr.ino 파일에 변경을 가해야 합니다(예: 빈 줄 추가, 주석 추가 등).

위의 코드를 자유롭고 창의적으로 커스터마이징하여 다음을 달성할 수 있습니다:

웹을 통해 여러 릴레이 제어하기
웹 사용자 인터페이스(UI) 재설계하기

ESP32 웹을 통한 릴레이 제어

준비물

릴레이 및 ESP32에 관하여

선연결

ESP32 코드 - HTML 콘텐츠가 ESP32 코드에 포함되어 있습니다.

사용 방법

ESP32 코드 - HTML 콘텐츠는 ESP32 코드에서 분리되었습니다

사용 방법

관련 튜토리얼