NodeMCU 1.0(ESP8266 12-E module) WiFi Webserver LED ON OFF 스마트폰 제어 및 온습도 모니터링+HTML CSS3프로그래밍: IV

DHT11 센서가 디지털 핀 D5 에 부착된 NodeMCU Webserver 보드와 스마트 폰을 이용해 LED 제어와 동시에 온습도 측정 데이터를 모니터링 해보자.

Webserver에서 LED on OFF 제어는 loop() 프로그램 중 아래에 설명된 //Match the request 이하의 명령들이 담당하고 있다.

 // Match the request

   int value = LOW;
   if (request.indexOf("/LED=ON") != -1)  {
     digitalWrite(ledPin, LOW);
     value = HIGH;
   }
   if (request.indexOf("/LED=OFF") != -1)  {
     digitalWrite(ledPin, HIGH);
     value = LOW;
   }

일단 스마트 폰에서 NodeMCU 보드의 가상(사설) ip를 웹브라우저 url 창에 입력하여 엔터 키를 누르면 request 신호가 NodeMCU 웹서버로 보내지게 되며 스마트 폰에서는 버튼이 있는 웹 서버 화면을 볼 수 있다.

 

웹서버 화면에서 ON 버튼을 누르면 GET 명령에 의해 ON 이 ASCII 문자 형태로 웹서버에 전달이 된다. 그런데

request.indexOf ("/LED =ON") 의 값이 –1 이면 웹서버 입력 버퍼에 입력된 내용을 찾아 볼 수 없다는 의미이다.

 

반면에 request.indexOf ("/LED =ON") != -1 이란 즉 –1 이 아니라면 이는 입력 버퍼에 "/LED =ON" 이 전달되었다는 의미이므로 ledPin 번호에 설치된 LED 에 LOW 값의 전압을 가해주게 된다. 그런데 ledPin 의 값이 2 일 경우는 NodeMCU 의 붙박이 LED를 의미하면 이 LED는 digital Write() 명령에서 LOW 로 설정되면 ON 이 되게끔 배선이 되어 있다. 일단 붙박이 LED가 ON 된 후 아울러 value 값을 High로 두어 다음 제어를 준비하게 된다.

 

그 다음 명령도 비슷한 개념으로 NodeMCU Webserver가 /LED=OFF를 전송받았다면 즉 digitalWrite(ledPin, High) 명령을 수행하여 LED를 OFF 시키고 동시에 value 값을 Low로 두어 다음 제어를 준비하게 된다.

이번 블로그에서는 이미 앞에서 설치하였던 DHT11 온습도 센서 측정 프로그램을 중간에 삽입하고 스마트 폰에서 on 버튼을 눌렀을 경우에 NodeMCU 보드에서 인쇄된 와이파이 안테나 문양 옆에 위치한 Built-in LED 2번을 on 시킴과 동시에 DHT11 센서가 측정한 온도 값과 습도 값을 전송해서 디스플레이 하도록 수정한다. 2번 LED가 켜져 있는 상태는 시스템 사진에서 확인할 수 있다.

일단 시스템 상의 2번 LED가 Off된 상태로 스마트 폰 화면에 뜬다.

반면에 on 버튼을 누르게 되면 온도와 습도 데이터가 출력되며 다시 OFF 버튼을 누룰 때 Refresh되어  온도 값과 습도 값이 사라진다.

이번 프로그래밍 작업에서는 HTML 및 CSS3 언어로 프로그래밍을 추가로 보강하여 웹 브라우저 화면을 깔끔하게 다듬어 보았다.
특히 웹서버 프로그래밍 단계에서 부터는 클라이언트 즉 스마트 폰의 웹 브라우저를 아두이노 NodeMCU 프로그램에서 client.print(“웹브라우저 명령”); 방식에 의해 제어해야 하므로 결국 스마트 폰 웹 브라우저를 지원하는 언어(HTML, CSS, CSS3, Java Script 등)와의 접목이 필수적이다.
아두이노 자체에 한정하여 센서로 센싱만 하는 구조에서는 C/C++ 언로로 충분하지만 스마트폰의 클라이언트와 연결이 되는 상황에서는 스마트폰 자체의 OS인 Android로 작성한 앱을 사용할 수도 있을 것이다. 하지만 Android OS를 배우는 것은 웹 브라우저를 지원하는 언어 즉 HTML, CSS, CSS3, Java Script 등을 필요에 따라 조금씩 학습하는 것에 비해 부담이 훨씬 더 크다는 점을 생각해 보기 바란다.

본 프로그램에서 사용된 부분은 HTML과 CSS 또는 CSS3 영역이 조금 포함되어 있음을 지적한다. 물론 안드로이드 스마트 폰을 대상으로 확인되는 경우를 대상으로 하였다.
HTML 부분은 이미 잘 알려졌기 때문에 더 설명할 필요는 없을 듯하다.

CSS3 프로그램 중에서 웹 브라우저 화면 배경색, 글자 폰트 사이즈 및 색을 조절하였다.

//배경 색 문자 색 사이즈 HTML CSS 설정
   client.println("<style>");
   client.println("body {");
   client.println("background-color: lightblue;");
   client.println("}");
   client.println("p {");
   client.println("color:red;");
   client.println("font-size:250%;");
   client.println("}");

하지만 CSS3 프로그램 중 버튼 부분은 위와 별도로 아래와 같이 색, 글자 폰트 사이즈 및 색을 조절해야 한다. 특히 주의할 점은  .button { 이라고 되어 있는데 점(.)이 이 언어의 문법상  반드시 필요하다.
//버튼 HTML CSS 설정  
client.println(".button {");
    client.println("background-color: #4CAF50;");
    client.println("border: none;");
    client.println("color: white;");
    client.println("padding: 15px 32px;");
    client.println("text-align: center;");
    client.println("text-decoration: none;");
    client.println("display: inline-block;");
    client.println("font-size: 20px;");
    client.println("margin: 14px 20px;");
    client.println("cursor: pointer;");
client.println("}");

버튼의 속성 지정을 위해서 아래에 수정된 프로그램을 제시하였다. 종래의 블로그에서 사용했던 부분은 // 처리하였는데 이번에 ><button> 대신에 class='button'을 사용하여 수정된 프로그램과의 차이점을 파악하기 바란다.
//   client.println("<a href=\"/LED=ON\"\"><button>Turn on </button></a>");
//   client.println("<a href=\"/LED=OFF\"\"><button>Turn Off </button></a><br />"); 
   client.println("<a href=\"/LED=ON\"\" class='button'>Turn on </button></a>");
   client.println("<a href=\"/LED=OFF\"\" class='button'>Turn Off </button></a>");

이와 같은 작업을 통해 프로그램이 다소 길어진 것은 사실이나 LED 제어와 온도 및 습도 값 출력이 핵심인 점을 감안하면 프로그램 구조 자체는 대단히 간략한 편이라 할 수 있을 것이다.

Webserver_NodeMCU_IOT_01

 #include <ESP8266WiFi.h>
 #include <DHT11.h> //라이브러리 불러오기
 
 const char* ssid = "AndroidHotspot1234";// 본인 스마트 폰 핫스팟 ID 입력

 const char* password = "00000000";//본인 스마트 폰 핫스팟 비밀번호 입력
 int pin = D5;            //온습도 센서 data signal 이 연결 아두이노 핀번호
 int ledPin = 2; //
 
 WiFiServer server(80);
 DHT11 dht11(pin);
 
 void setup() {
   Serial.begin(115200);
   delay(10);

   pinMode(ledPin, OUTPUT);
   digitalWrite(ledPin, HIGH);

   // Set WiFi to station mode and disconnect from an AP if it was previously connected
   WiFi.mode(WIFI_STA);
   WiFi.disconnect();
   delay(100);

   Serial.println("Setup done");

   // 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");

   // Start the server
   server.begin();
   Serial.println("Server started");

   // Print the IP address
   Serial.print("Use this URL to connect: ");
   Serial.print("http://");
   Serial.print(WiFi.localIP());
   Serial.println("/");

 }

 void loop() {
   // Check if a client has connected
   WiFiClient client = server.available();
   if (!client) {
     return;
   }

   // Wait until the client sends some data
   Serial.println("new client");
   while(!client.available()){
     delay(1);
   }

   // Temperature & Humidity Sensing
  int err;
  float temp, humi;
  if((err=dht11.read(humi, temp))==0) //온도, 습도 읽어오기 및 에러 체크
  {
    Serial.print("temperature:");
    Serial.print(temp);
    Serial.print(" humidity:");
    Serial.print(humi);
    Serial.println();
  }
  else                                //에러 처리 과정
  {
    Serial.println();
    Serial.print("Error No :");
    Serial.print(err);
    Serial.println();   
  }
  delay(2000);                        //2초마다 측정

   // Read the first line of the request
   String request = client.readStringUntil('\r');
   Serial.println(request);
   client.flush();

   // Match the request

   int value = LOW;
   if (request.indexOf("/LED=ON") != -1)  {
     digitalWrite(ledPin, LOW);
     value = HIGH;
   }
   if (request.indexOf("/LED=OFF") != -1)  {
     digitalWrite(ledPin, HIGH);
     value = LOW;
   }

 // Set ledPin according to the request
 //digitalWrite(ledPin, value);

   // Return the response
   client.println("HTTP/1.1 200 OK");
   client.println("Content-Type: text/html");
   client.println(""); //  do not forget this one
   client.println("<!DOCTYPE HTML>");
   client.println("<html>");
   client.println("<head>");
//배경 색 문자 색 사이즈 HTML CSS 설정  
   client.println("<style>");
   client.println("body {");
   client.println("background-color: lightblue;");
   client.println("}");
   client.println("p {");
   client.println("color:red;");
   client.println("font-size:250%;");
   client.println("}");
  
//버튼 HTML CSS 설정  
client.println(".button {");
    client.println("background-color: #4CAF50;");
    client.println("border: none;");
    client.println("color: white;");
    client.println("padding: 15px 32px;");
    client.println("text-align: center;");
    client.println("text-decoration: none;");
    client.println("display: inline-block;");
    client.println("font-size: 20px;");
    client.println("margin: 14px 20px;");
    client.println("cursor: pointer;");
client.println("}");
   
   client.println("</style>");
   client.println("</head>");
   client.println("<body>");
   client.println("<p>");
   client.print("Led pin is now: ");

   if(value == HIGH) {
     client.print(on");
     client.println("<br><br>");
     client.print(" Temperature = ");
     client.print(temp);
     client.print(" Humidity = ");
     client.print(humi);
   } else {
     client.print("Off");
   }
   client.println("<br><br>");
//   client.println("<a href=\"/LED=ON\"\"><button>Turn on </button></a>");
//   client.println("<a href=\"/LED=OFF\"\"><button>Turn Off </button></a><br />"); 
   client.println("<a href=\"/LED=ON\"\" class='button'>Turn on </button></a>");
   client.println("<a href=\"/LED=OFF\"\" class='button'>Turn Off </button></a>");

   client.println("</p>");
   client.println("</body>");
   client.println("</html>");

   delay(1);
   Serial.println("Client disonnected");
   Serial.println("");

 }//프로그램 끝