Adafruit 사 DHT11 온습도 센서가 디지털 핀 D5 에 부착된 NodeMCU Webserver 보드와 스마트 폰을 이용해 LED 제어와 동시에 온습도 측정 데이터를 모니터링 해보자.
NodeMCU 웹서버 코드에서 LED ON/OFF 제어는 loop() 프로그램 중 아래에 설명된 //Match the request 이하의 명령들이 담당하고 있다.
일단 스마트 폰에서 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가 켜져 있는 상태는 시스템 사진에서 확인할 수 있다.
한편 시리얼 모니터에서도 온도와 습도 출력 값을 확인할 수 있다. 아울러 GET 명령에 의해 ON OFF 명령이 오가고 있음을 확인할 수 있다.
ON 버튼을 누른 경우에는 NodeMCU 로부터의 LED ON 상태에 관한 메시지와 함께 온도 및 습도 데이타가 웹 브라우저에 출력된다.
반면에 OFF 버튼을 누르면 NodeMCU 로부터의 LED OFF 상태에 관한 메시지와 함께 온도 및 습도 데이타가 웹 브라우저에서 사라진다.
이번 코딩 작업에서는 HTML 및 CSS3 언어로 프로그래밍을 추가로 보강하여 웹 브라우저 화면을 깔끔하게 다듬어 보았다.
특히 사물인터넷 (IOT) 코딩의 근간이 되는 웹서버 프로그래밍 단계부터는 클라이언트 즉 스마트폰의 웹 브라우저를 아두이노 NodeMCU 프로그램에서 client.print(“웹브라우저 명령”); 방식에 의해 제어해야 하므로 결국 스마트 폰 웹 브라우저를 지원하는 언어(HTML, CSS, Java Script 등)와의 접목이 필수적이다. 각각의 언어를 본격적으로 배울 필요는 없는 듯하다. 조금씩 실행시키다 보면 저절로 다 학습이 가능하다는 점을 지적해 둔다.
아두이노 자체에 한정하여 센서로 센싱만 하는 구조에서는 C/C++ 언어로 충분하지만 스마트폰의 클라이언트와 연결이 되는 상황에서는 스마트폰 자체의 OS인 Android로 작성한 앱을 사용할 수도 있을 것이다. 하지만 Android OS를 배우는 것은 웹 브라우저를 지원하는 언어 즉 HTML, CSS, Java Script 등을 필요에 따라 조금씩 학습하는 것에 비해 부담이 훨씬 더 크다는 점을 생각해 보기 바라며 아마도 앱 인벤터가 해 답이 될 수 있을 것이다.
본 프로그램에서 사용된 부분은 HTML과 CSS 또는 CSS3 영역이 조금 포함되어 있음을 지적한다. 물론 안드로이드 스마트 폰을 대상으로 확인되는 사례를 대상으로 하였다.
HTML 부분은 이미 잘 알려졌기 때문에 더 설명할 필요는 없을 듯하다.
CSS3 프로그램 중에서 웹 브라우저 화면 배경색, 글자 폰트 사이즈 및 색을 조절하였다.
하지만 CSS3 프로그램 중 버튼 부분은 위와 별도로 아래와 같이 색, 글자 폰트 사이즈 및 색을 조절해야 한다. 특히 주의할 점은 .button { 이라고 되어 있는데 점(.)이 이 언어의 문법상 반드시 필요하다.
버튼의 속성 지정을 위해서 아래에 수정된 프로그램을 제시하였다. 종래의 블로그에서 사용했던 부분은 // 처리하였는데 이번에 )(button) 대신에 class='button'을 사용하여 수정된 프로그램과의 차이점을 파악하기 바란다.(HTML 태그 깍지 기호가 스팀잇에 서 사용이 곤란하므로 괄호로 사용하였음)
이와 같은 작업을 통해 프로그램이 다소 길어진 것은 사실이나 LED 제어와 온도 및 습도 값 출력이 핵심인 점을 감안하면 코드 구조 자체는 대단히 간략한 편이라 할 수 있을 것이다.
여기에 사용된 NodeMCU 웹서버 코드는 HTML 태그 기호인 깍지가 많이 포함되어 있어 포그팅에 부적합하므로 필자의 아래 블로그를 방문하여 Webserver_NodeMCU_IOT_01 코드를 그대로 복사해서 가져가 사용하기 바란다.