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