본문 바로가기
IOT 로봇 아두이노/아두이노 기본센서 연결하기

NodeMCU Led 원격제어 (웹 서버) [아두이노]

by Jango_infoinno 2023. 5. 1.

오늘은 NodeMCU를 이용하여 간단한 웹 서버를 만드는 방법에 대해 다뤄보겠습니다!
클라이언트 모드와 AP 모드를 중심으로 다루는 내용에 대해 알려드리겠습니다.

NodeMCU를 사용하여 실제로 동작하는 예제 코드 제공!

 

우선 NodeMCU의 클라이언트 모드란 무엇인지 설명하고, 클라이언트 모드에서 웹 서버를 만드는 방법에 대해 다룰 것입니다. 필요한 하드웨어와 소프트웨어 요구 사항을 소개하고, 예제 코드를 통해 클라이언트 모드에서의 웹 서버 구현 방법을 자세히 설명합니다.

그리고 두번째로 NodeMCU의 AP 모드란 무엇인지 설명하고, AP 모드에서 웹 서버를 만드는 방법에 대해 다룰 것입니다.
필요한 하드웨어와 소프트웨어 요구 사항을 소개하고, 예제 코드를 통해 AP 모드에서의 웹 서버 구현 방법을 자세히 설명합니다.

 

1. 클라이언트 모드

NodeMCU는 ESP8266 WiFi 모듈을 기반으로 하여 만들어진 개방형 소스 소프트웨어와 개발보드입니다. NodeMCU를 이용하면 마이크로컨트롤러 기반의 작은 장치에 웹 서버를 구현할 수 있으며, 이를 통해 IoT 제어 및 모니터링 애플리케이션을 만들 수 있습니다. 이번에는 NodeMCU의 클라이언트 모드에서 웹 서버를 만드는 방법에 대해 알아보겠습니다.

필요한 하드웨어:

NodeMCU 개발 보드
USB 케이블
컴퓨터
인터넷 연결 가능한 WiFi 라우터

 

필요한 소프트웨어:

Arduino IDE
ESP8266 라이브러리
WiFiClient 라이브러리

 

Arduino IDE를 엽니다.
"File" 메뉴에서 "Examples" -> "ESP8266" -> "WiFiClient"를 선택합니다.
코드를 다음과 같이 수정합니다.

 

아래 코드를 NodeMCU에 업로드하여 실행하면 시리얼모니터에서 NodeMCU ip 주소를 알 수 있다.

ip주소는 웹브라우저 또는 모바일에서 NodeMCU 웹서버에 접속할 수 있는 접전이 된다.

#include <ESP8266WiFi.h>

const char* ssid = "your_SSID";
const char* password = "your_PASSWORD";

void setup() {
  Serial.begin(115200);
  delay(10);

  // Connect to WiFi network
  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi connected");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
}

void loop() {
  delay(5000);
}

코드에서 "your_SSID"와 "your_PASSWORD"를 자신의 WiFi 라우터의 SSID와 비밀번호로 바꿉니다.
NodeMCU 개발 보드를 USB 케이블을 이용하여 컴퓨터에 연결합니다.
"Tools" -> "Board"에서 "NodeMCU 1.0 (ESP-12E Module)"을 선택합니다.
"Tools" -> "Port"에서 연결된 포트를 선택합니다.
"Upload" 버튼을 클릭하여 코드를 업로드합니다.
시리얼 모니터를 열고, NodeMCU 개발 보드를 재부팅합니다.
NodeMCU가 WiFi 라우터에 연결되면, NodeMCU의 IP 주소가 표시됩니다.

저는 192.168.0.3 으로 나왔네요

 

NodeMCU의 IP를 확인했으면, html 화면에 버튼을 추가하여 버튼 클릭 시 LED가 켜지는 코드를 업로드하고 실행한다. 

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

const char* ssid = "####################"; // 여기에 WiFi SSID를 입력하세요.
const char* password = "####################"; // 여기에 WiFi 비밀번호를 입력하세요.

ESP8266WebServer server(80);

const int ledPin = D1; // LED가 연결된 핀 번호
bool ledOn = false;

void handleRoot() {
  String ptr = "<html><body>";

  ptr +="<head><meta name=\"viewport\" charset=\"utf-8\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>LED Control</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
  ptr +=".button {display: block;width: 160px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr +=".button-on {background-color: #2874A6;}\n";
  ptr +=".button-on:active {background-color: #16a085;}\n";
  ptr +=".button-off {background-color: #34495e;}\n";
  ptr +=".button-off:active {background-color: #2c3e50;}\n";
  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  
  ptr += "<h1>NodeMCU WebServer</h1>\n";
  ptr += "<h3>Client 모드</h3>\n";
  ptr += "<p>Click the button to turn the LED on or off.</p>";
  if (ledOn) {
//    ptr += "<form method='get' action='/off'><button>LED OFF</button></form>";
//    ptr += "<p>LED: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";
    ptr += "<form method='get' action='/off'><button class=\"button button-off\">LED OFF</button></form>";
  } else {
//    ptr += "<form method='get' action='/on'><button>LED ON</button></form>";
//    ptr +="<p>LED: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";
    ptr += "<form method='get' action='/on'><button class=\"button button-on\">LED ON</button></form>";
  }
  ptr += "</body></html>";

  server.send(200, "text/html", ptr);
}

void handleOn() {
  digitalWrite(ledPin, HIGH);
  ledOn = true;
  handleRoot();
}

void handleOff() {
  digitalWrite(ledPin, LOW);
  ledOn = false;
  handleRoot();
}

void setup() {
  pinMode(ledPin, OUTPUT); // LED 핀을 출력 모드로 설정
  
  Serial.begin(115200);
  
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }

  Serial.println("Connected to WiFi");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.on("/on", handleOn);
  server.on("/off", handleOff);

  server.begin();
}

void loop() {
  server.handleClient();
}

 

실행

위 코드를 Node MCU에 업로드 한 다음!

스마트폰에서 아까 serial출력으로 알아낸 ip를 웹브라우저 주소창에 입력합니다

(192.168.0.3) 

검색을 하면! 밑에 화면처럼 나옵니다.

그리고 nodeMCU연결이 잘 되어 있는지 확인한 뒤에

웹페이지 버튼을 눌려보면 LED가 켜졌다 꺼졌다 하는 것을 알 수 있습니다

 

결론:
이제 클라이언트 모드에서 NodeMCU로 간단한 웹 서버를 만들 수 있습니다. 다음 단계로는 AP 모드에서의 웹 서버 구현 방법을 알아보겠습니다.

 

2. AP 모드

이전에는 NodeMCU의 클라이언트 모드에서 웹 서버를 만드는 방법을 알아보았습니다. 이번에는 AP 모드에서 웹 서버를 구현하는 방법에 대해 알아보겠습니다. AP 모드는 NodeMCU 자체적으로 WiFi 액세스 포인트를 만들어서 클라이언트들이 연결하여 통신할 수 있는 모드입니다.

 

필요한 하드웨어:

NodeMCU 개발 보드
USB 케이블
컴퓨터

 

필요한 소프트웨어:

Arduino IDE
ESP8266WiFi 라이브러리
ESP8266WebServer 라이브러리

 

Arduino IDE를 엽니다.
"File" 메뉴에서 "Examples" -> "ESP8266WebServer" -> "AccessPoint"를 선택합니다.
코드를 다음과 같이 수정합니다.

 

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

/* Put your SSID & Password */
const char* ssid = "NodeMCU";  // Enter SSID here
const char* password = "12345678%";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

ESP8266WebServer server(80);

uint8_t LED1pin = D1;
bool LED1status = LOW;

uint8_t LED2pin = D6;
bool LED2status = LOW;

void setup() {
  Serial.begin(115200);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);

  WiFi.softAP(ssid, password);
  WiFi.softAPConfig(local_ip, gateway, subnet);
  delay(100);
  
  server.on("/", handle_OnConnect);
  server.on("/led1on", handle_led1on);
  server.on("/led1off", handle_led1off);
  server.on("/led2on", handle_led2on);
  server.on("/led2off", handle_led2off);
  server.onNotFound(handle_NotFound);
  
  server.begin();
  Serial.println("HTTP server started");
}
void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}
  
  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
}

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO7 Status: OFF | GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO7 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status)); 
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO7 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status)); 
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO6 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,true)); 
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,false)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(uint8_t led1stat,uint8_t led2stat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" charset=\"utf-8\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>LED Control</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
  ptr +=".button {display: block;width: 80px; background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr +=".button-on {background-color: #2874A6;}\n";
  ptr +=".button-on:active {background-color: #16a085;}\n";
  ptr +=".button-off {background-color: #34495e;}\n";
  ptr +=".button-off:active {background-color: #2c3e50;}\n";
  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<h1>NodeMCU WebServer</h1>\n";
  ptr +="<h3>AP 모드</h3>\n";
  
   if(led1stat)
  {ptr +="<p>LED: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
  else
  {ptr +="<p>LED: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

//  if(led2stat)
//  {ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
//  else
//  {ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

 

설명

코드에서 "ssid"와 "password"를 원하는 WiFi 액세스 포인트의 SSID와 비밀번호로 바꿉니다.
NodeMCU 개발 보드를 USB 케이블을 이용하여 컴퓨터에 연결합니다.
"Tools" -> "Board"에서 "NodeMCU 1.0 (ESP-12E Module)"을 선택합니다.
"Tools" -> "Port"에서 연결된 포트를 선택합니다.
"Upload" 버튼을 클릭하여 코드를 업로드합니다.
시리얼 모니터를 열고, NodeMCU 개발 보드를 재부팅합니다.
NodeMCU가 WiFi 액세스 포인트로 동작하면, AP IP 주소가 표시됩니다.
웹 브라우저를 열고, AP IP 주소로 이동하여 확인합니다.
결론:
이제 AP 모드에서 NodeMCU로 간단한 웹 서버를 만들 수 있습니다. NodeMCU는 클라이언트 모드와 AP 모드에서 모두 웹 서버를 구현할 수 있으며, 이를 이용하여 IoT 제어 및 모니터링 애플리케이션을 만들 수 있습니다.

실행 

연결을 하게되면 이러한 경고메시지가 뜹니다.

걱정 마시고 연결하셔도 괜찮습니다 ㅎㅎ

이번에는 client 모드와 다르게 wifi 가능한 공유기에 연결하는 것이 아니라

NodeMCU를 공유기로 만들어서 웹서버를 실행하는 방법이기 때문에 

위의 코드에 넣어놓은 ip를 검색해야 합니다.

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

이 부분에 저는 192.168.1.1로 ip를 입력했기 때문에 

 192.168.1.1를 웹브라우저에 검색합니다.



원리 설명 영상

 

AP모드!

 

0. NodeMCU에 코드업로드

1.NodeMCU에 led연결

2. 스맡폰 브라우저 192.168.1.1 검색

3.만든 웹서버로 스마트폰에서 led 제어 가능 

4.요점은 NodeMCU에 직접 연결한다는것

client 모드

 

0. NodeMCU에 코드업로드

1. NodeMCU와 공유기 ssid와 pw를 이용해 NodeMCU에 할당된 ip 찾기

2. led제어할 코드 업로드 

3. NodeMCU에 led연결

4. 웹서버에 알아낸 ip번호 검색

5. 만든 웹서버로 스마트폰에서 led 제어 가능 

6. 요점은 NodeMCU를 공유기를 통해 연결한다는 것

 

 

반응형

'IOT 로봇 아두이노 > 아두이노 기본센서 연결하기' 카테고리의 다른 글

아예 '초보운전'이라고 광고를 하지그래? 그래서 만들어 봤습니다!! 아두이노로 초보운전 전광판 달기! LED Matrix WS2812 8x32 아두이노로 켜기 아두이노LED  (1) 2023.05.09
ESP32 와이파이 가능한 IoT 만들기 LED 연결 [아두이노]  (0) 2023.04.27
라인프렌즈 브라운 눈에 LED 광선 만들기 [아두이노 LED 사용]  (0) 2023.04.19
[아두이노 응용] 온습도 센서 + ESP-01 연결하여 Blynk에 표시하기  (1) 2021.08.18
[아두이노 응용] 온도 습도 LCD로 출력하기  (2) 2021.08.18

관련글

댓글

티스토리툴바