ESP8266 - 웹을 통한 릴레이 제어 | ESP8266 - Control Relay via Web

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

ESP8266 NodeMCU relay web browser

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

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

준비물

1×ESP8266 NodeMCU Amazon
1×Micro USB Cable 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×(Optional) Screw Terminal Expansion Board for ESP8266 쿠팡 | Amazon
공개: 이 섹션에서 제공된 링크 중 일부는 제휴 링크입니다. 이 링크를 통해 구매한 경우 추가 비용없이 수수료를 받을 수 있습니다. 지원해 주셔서 감사합니다.

릴레이 및 ESP8266에 대하여

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

선연결

ESP8266 NodeMCU relay Wiring Diagram

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

ESP8266의 핀 배치ESP8266 및 다른 구성 요소에 전원을 공급하는 방법에 대해 더 많이 보십시오.

ESP8266 코드 - HTML 내용이 ESP8266 코드에 포함되어 있습니다.

/* * 이 ESP8266 NodeMCU 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP8266 NodeMCU 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp8266/esp8266-controls-relay-via-web */ #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #define RELAY_PIN D8 // ESP8266 핀이 릴레이에 연결되어 있음 const char *ssid = "YOUR_WIFI_SSID"; // 이 부분을 변경하세요 const char *password = "YOUR_WIFI_PASSWORD"; // 이 부분을 변경하세요 ESP8266WebServer server(80); // 포트 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에 연결됨"); // ESP8266의 IP 주소 출력 Serial.print("ESP8266 웹 서버의 IP 주소: "); Serial.println(WiFi.localIP()); // 홈 페이지 server.on("/", HTTP_GET, []() { Serial.println("ESP8266 웹 서버: 새 요청이 수신되었습니다:"); Serial.println("GET /"); server.send(200, "text/html", getHTML()); }); // 릴레이 제어를 위한 루트 server.on("/relay1/on", HTTP_GET, []() { Serial.println("ESP8266 웹 서버: 새 요청이 수신되었습니다:"); Serial.println("GET /relay1/on"); relay_state = HIGH; digitalWrite(RELAY_PIN, relay_state); server.send(200, "text/html", getHTML()); }); server.on("/relay1/off", HTTP_GET, []() { Serial.println("ESP8266 웹 서버: 새 요청이 수신되었습니다:"); Serial.println("GET /relay1/off"); relay_state = LOW; digitalWrite(RELAY_PIN, relay_state); server.send(200, "text/html", getHTML()); }); // 서버 시작 server.begin(); } void loop() { // 클라이언트 요청 처리 server.handleClient(); // 여기에 코드를 작성하세요 }

사용 방법

아두이노 IDE에서 ESP8266을 시작하는 방법은 다음 단계를 따르세요:

  • ESP8266을 처음 사용하는 경우 Arduino IDE에서 ESP8266 환경 설정 방법 튜토리얼을 확인하세요.
  • 다이어그램에 표시된 대로 구성 요소를 연결하세요.
  • USB 케이블을 사용하여 ESP8266 보드를 컴퓨터에 연결하세요.
  • 컴퓨터에서 Arduino IDE를 엽니다.
  • 올바른 ESP8266 보드(예: NodeMCU 1.0 (ESP-12E Module))와 해당 COM 포트를 선택하세요.
  • 위의 코드를 복사하고 Arduino IDE로 엽니다.
  • 코드에서 wifi 정보(SSID 및 비밀번호)를 귀하의 것으로 변경하세요.
  • Arduino IDE에서 Upload 버튼을 클릭하여 ESP8266에 코드를 업로드하세요.
  • 시리얼 모니터를 엽니다.
  • 시리얼 모니터에서 결과를 확인하세요.
COM6
Send
Connecting to WiFi... Connected to WiFi ESP8266 Web Server's IP address: 192.168.0.3
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  
  • IP 주소를 보게 될 것입니다. 예를 들어: 192.168.0.3. 이것은 ESP8266 웹 서버의 IP 주소입니다.
  • 웹 브라우저를 열고 주소 창에 아래 세 가지 형식 중 하나를 입력하세요:
192.168.0.3
192.168.0.3/relay1/on
192.168.0.3/relay1/off
  • IP 주소가 변경될 수 있으므로 유의하시기 바랍니다. 시리얼 모니터에서 현재 값을 확인하십시오.
  • 시리얼 모니터에서 아래 출력도 볼 수 있습니다.
COM6
Send
Connecting to WiFi... Connected to WiFi ESP8266 Web Server's IP address: 192.168.0.3 ESP8266 Web Server: New request recieved: GET / ESP8266 Web Server: New request recieved: GET /relay1/on ESP8266 Web Server: New request recieved: GET /relay1/off
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  
  • 릴레이 상태 확인
  • 아래와 같이 웹 브라우저에서 ESP8266 보드의 웹 페이지를 볼 수 있습니다.
ESP8266 NodeMCU relay web browser

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

ESP8266 코드 - HTML 내용이 ESP8266 코드로부터 분리되었습니다

그래픽 웹 페이지에는 대량의 HTML 콘텐츠가 포함되어 있어, 이전처럼 ESP8266 코드에 내장하는 것이 불편해집니다. 이를 해결하기 위해서, ESP8266 코드와 HTML 코드를 서로 다른 파일로 분리할 필요가 있습니다:

  • ESP8266 코드는 .ino 파일에 배치될 것입니다.
  • HTML 코드(HTML, CSS 및 Javascript 포함)는 .h 파일에 배치될 것입니다.

사용 방법

  • 아두이노 IDE를 열고 새 스케치를 만듭니다. 이름을 지정하세요. 예를 들어, newbiely.kr.ino라고 합니다.
  • 아래 코드를 복사하고 아두이노 IDE로 엽니다.
/* * 이 ESP8266 NodeMCU 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP8266 NodeMCU 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp8266/esp8266-controls-relay-via-web */ #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include "index.h" // index.h 파일 포함 #define RELAY_PIN D8 // 릴레이가 연결된 ESP8266 핀 const char *ssid = "YOUR_WIFI_SSID"; // 변경하세요 const char *password = "YOUR_WIFI_PASSWORD"; // 변경하세요 ESP8266WebServer server(80); // 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에 연결됨"); // ESP8266의 IP 주소 출력 Serial.print("ESP8266 웹 서버의 IP 주소: "); Serial.println(WiFi.localIP()); // 홈 페이지 server.on("/", HTTP_GET, []() { Serial.println("ESP8266 웹 서버: 새 요청이 수신되었습니다:"); Serial.println("GET /"); server.send(200, "text/html", getHTML()); }); // 릴레이를 제어하기 위한 경로 server.on("/relay1/on", HTTP_GET, []() { Serial.println("ESP8266 웹 서버: 새 요청이 수신되었습니다:"); Serial.println("GET /relay1/on"); relay_state = HIGH; digitalWrite(RELAY_PIN, relay_state); server.send(200, "text/html", getHTML()); }); server.on("/relay1/off", HTTP_GET, []() { Serial.println("ESP8266 웹 서버: 새 요청이 수신되었습니다:"); Serial.println("GET /relay1/off"); relay_state = LOW; digitalWrite(RELAY_PIN, relay_state); server.send(200, "text/html", getHTML()); }); // 서버 시작 server.begin(); } void loop() { // 클라이언트 요청 처리 server.handleClient(); // 여기에 코드 작성 }

코드에서 WiFi 정보(SSID와 비밀번호)를 본인 것으로 변경하세요

Arduino IDE에서 다음과 같이 index.h 파일을 생성하세요:

  • 시리얼 모니터 아이콘 바로 아래 있는 버튼을 클릭하고 새 탭을 선택하거나 Ctrl+Shift+N 키를 사용하세요.
Arduino IDE 2 adds file

파일 이름을 index.h로 지정하고 OK 버튼을 클릭하세요.

Arduino IDE 2 adds file index.h

아래 코드를 복사하여 index.h에 붙여넣으세요.

/* * 이 ESP8266 NodeMCU 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP8266 NodeMCU 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp8266/esp8266-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.inoindex.h
  • Arduino IDE에서 Upload 버튼을 클릭하여 ESP8266에 코드를 업로드하세요.
  • 이전과 같이 PC 또는 스마트폰의 웹 브라우저를 통해 ESP8266 보드의 웹 페이지에 접속하세요. 이전 코드와 유사한 것을 보게 될 것입니다:
ESP8266 NodeMCU relay web browser

※ NOTE THAT:

  • index.h에서 HTML 콘텐츠를 수정하고 newbiely.kr.ino 파일은 건드리지 않는다면, 코드를 컴파일하고 ESP8266에 업로드할 때 Arduino IDE는 HTML 콘텐츠를 업데이트하지 않습니다.
  • 이 경우에 Arduino IDE가 HTML 콘텐츠를 업데이트하게 하려면, newbiely.kr.ino 파일을 수정하세요 (예: 빈 줄 추가하기, 주석 추가하기 등).

위의 코드를 쉽고 혁신적으로 커스터마이즈하여 다음을 달성할 수 있습니다:

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

※ OUR MESSAGES

  • Please feel free to share the link of this tutorial. However, Please do not use our content on any other websites. We invested a lot of effort and time to create the content, please respect our work!