이 예제가 어려워서 못하겠다! 라고 겁먹지 말자. “코끼리 냉장고에 접어 넣기”로 생각하면 된다. 그렇다면 어떻게? 일단 아두이노 NodeMCU 에서 붙박이 LED 2번을 와이파이로 ON OFF 하는 사물인터넷 코드를 해보았다면 아주 쉽다. 첨부된 코드를 복사하여 컴파일 업로딩하여 그냥 실행시키면 코드가 돌아감을 확인할 수 있다. 다음 단계는 짜고치는 고스톱이다. 즉 회원가입하지도 않았지만 미리 웹서버 코드에 username은 arduino를 password 는 nodemcu로 정해놓은 상태에서 정확하게 username과 password를 입력 후 클릭하면 LED Control 버튼 키 화면이 나타나는 것을 볼 수 있다. 이렇게 실행이 된 후 블로그의 코드 내용 설명을 읽어 보면 좋을 듯하다. 아두이노 와이어링 및 와이파이 코딩은 이렇게 하는 것이 정답이 아닐까.!!!!!!
IOT(사물인터넷) 시스템도 홈페이지로 만드는 것이 가능하다. 사용자 ID 와 비밀번호 PW를 설정하고 Login 하여 들어가서 필요한 작업 후 다시 Login 화면으로 돌아올 수 있다. 사물인터넷 홈페이지 시스템의 특징은 아두이노 보드에 설치된 센서에서 측정한 값을 모니터링 하든지 또는 아두이노에 설치된 LED를 ON OFF BLINK 할 수 있는 특징을 제공한다.
LED가 설치된 아두이노 NodeMCU 보드에서 LED를 ON OFF BLINK 할 수 있는 와이파이 사물인터넷(IOT) 시스템을 대상으로 Login 이 가능한 홈페이지를 코딩해 보자.
Login은 Administrator 가 단독으로 하나의 ID 와 password를 가지고 운영하도록 한다. ID는 arduino 로 설정하고password 는 nodemcu 로 둔다.
아두이노 NodeMCU 보드에서 LED는 별도 와이어링 없이 사진처럼 붙박이 LED를 사용하기로 하자. 붙박이 LED는 핀 번호가 즉 GPIO 2번으로 D4를 나타낸다. 즉 NodeMCU 보드만 준비하면 된다.
홈페이지는 Login 화면과 LED Control 버튼 화면 2개로 구성하기로 한다.
아두이노 NodeMCU에서 와이파이 사용을 위해 라이브러리 ESP8266WiFi.h을 설치하고 스마트 폰 핫스팟이나 PC에 설치된 무선 공유기의 ID 와 비밀번호를 입력해 둔다.
붙박이 LED 번호는 2번으로 설정하며 클라스 명령 WiFiServer를 선언함과 아울러 포트 번호를 통상 80번으로 지정한다.
불리언 변수 Login을 도입하여 참(true) 으로 두자. Login 의 불리언 값이 참이면 웹서버가 실행되었을 때 웹 브라우저에Login 화면이 나타난다. Login 해서 홈페에지 내부로 들어가게 되면 Login 의 값이 거짓(false) 으로 설정해 두어야 한다.
setup() 문에서 아두이노 NodeMCU 의 통신속도를 115200 으로 설정한다.
WiFi 연결을 위한 루틴 구성은 본 블로그의 많은 예제에서 설정된 바와 동일하다. setup() 문 나머자 부분 및 loop()문에서 favicon 처리하는 부분까지는 거의 변동이 없다. favicon 에 대해서는 “초보자를 위한 아두이노 와이파이 코딩” 이나 “아두이노 와이어링 & 와이파이 코딩” 에 이미 상세한 설명 및 예제가 있으므로 참조하기 바란다.
Login 화면에서 IOT(사물인터넷) 페이지로 넘어가기 위한 전제 조건은 Login 화면에서 입력된 ID 와 password 정보를 확인할 필요가 있다.
if 문에서 request.indexOf(⚫⚫⚫) != -1 이 참이면 즉 –1이 아니라면 아두이노 NodeMCU 의 입력 버퍼에 클라이언트인 PC 나 스마트 폰 웹브라우저로부터 ⚫⚫⚫ 에 해당 하는 정보가 들어 왔다는 의미이다. 그렇다면 ID 인 arduino 와 password 인 nodemcu 가 함께 들어왔는지 확인해야 한다. 만일 그렇다면 Login 의 값을 거짓(false) 으로 바꾸어 둔다. 이 값은 이어지는 loop 문에서 Login 화면이 아닌 IOT 버튼 화면을 불러내기 위하여 사용된다.
만약 ID 인 arduino 와 password 인 nodemcu 가 동시에 참으로 확인되지 않을 경우는 Login 이 거짓 값인 상태 즉 IOT LED Control 상태이므로 ON OFF BLINK를 따져서 붙박이 LED를 동작 시켜야 한다. 아울러 LED Control 상태 화면에서는 언제든지 Login 화면으로 넘어 갈 수 있도록 Logout 버튼 키도 함께 디스플레이 되어 있어야 한다. 즉 Logout 버튼을 누르면 이 단계에서 확인 후 Login 의 값을 참(true) 로 설정해야 loop 과정에서 Login 화면으로 전환된다.
홈페이지는 2개의 웹브라우저 화면으로 구성된다. 즉 Login 화면과 LED Control 버튼 키 화면이며 각각 배경색을 달리하도록 한다. Login 화면은 연한 하늘색 LED Control 버튼 키 화면은 하얀색으로 설정하는데 현재 웹브라우저가 Login 화면 상태인지 LED Control 버튼 키 화면 상태인지 여부는 불리언인 Login 의 값을 if 문에 의해 체크해 보면 된다.
홈페이지 장식을 위한 style 태그 코드가 상당히 긴 편인데 대부분 Login 화면 설정을 위한 것이다. 하지만 하나의 HTML 코드에 2가지의 배경 색을 동시에 정의할 수는 없으므로 LED Control 버튼 키 화면에서 Login 화면과 다른 배경 색을 사용하기 위해서 if 문에서 불리언 Login 값을 체크하여 바꾸어 줄 필요가 있다.
LED Control 버튼 키 CSS 코드는 Login 화면 CSS 보다는 간략하지만 별도로 설정하고 style 태그를 종료한다. 이와 같이 별도의 CSS 로 코딩하더라도 CSS 자체가 실행 명령의 성격이 아니므로 굳이 if 문을 사용하여 Login 화면인지 LED Control 키 버튼 화면인지 체크 할 필요는 없다.
그 다음 단계는 불리언 Login 값을 체크하여 참이면 Login 화면에서 form 태그에 의해 ID 와 PW를 입력해야 할 것이며 입력 후 클릭하면 2개의 데이터를 GET 방식에 의해서 전송(Submit)하게 되는데 앞서 거론했던 if 문에서 request.indexOf(⚫⚫⚫) != -1 여부를 체크하게 된다. 그림의 코드 화면에서는 client.println(“...에서 client.prin 부분이 생략되고 ⚫⚫⚫로 표시하였음에 유의하자.
Login 화면 form 태그가 끝나는 부분에서 일단 head 태그를 일단락 하도록 하며 그 다음에 이어서 LED Control 버튼 키 화면부터 body 태그를 열도록 한다.
불리언 Login 값이 참이면 그냥 skip 해서 다시 loop 문 초반으로 돌아가 무한 루프를 돌게 된다. 반면에 Login 값이 거짓이라면 버튼 키 화면에서 하얀색 배경 색 바탕에 앵커 태그에 의한 4개의 버튼 키 즉 ON OFF BLINK Logout를 볼 수 있다. 이 중에서 ON OFF BLINK 중의 하나를 클릭하면 Login 값이 거짓인 상태를 유지하면서 GET 방식에 의해 아두이노에 request를 보내고 request.indexOf(⚫⚫⚫) != -1 체크하여 LED를 제어할 수 있다. 반면에 Logout 버튼을 클릭할 경우에는 Login 의 값을 참으로 설정하게 되므로 Login 화면으로 전환하게 된다.
현재의 IOT(사물인터넷 ) 홈페이지 Login 시스템은 2개의 홈페이지 화면으로 구성되었으므로 불리언 Login 값의 참 거짓으로 처리가 가능하지만 홈페이지의 페이지 수 가 증가하게 되면 페이지 번호를 하이퍼링크가 가능한 변수로 설정하여 화면을 이동하여야 할 것이다.
이번 코딩에서 한발짝 더 내딛게되면 HTML 웹디자인 영역과 연결이 된다. 멋있는 웹 화면 디자인이라든지 또는 입력 박스 기능의 세부적인 처리 등 Java Script 와도 연관성이 높아진다.
코딩 내용에 스팀잇에서 금지된 HTML 태그 기호인 깍지가 많이 나타나므로 아래의 사이트로 이동해 코드를 다운받아 가기 바란다.
http://blog.daum.net/ejleep1/460
//Webserver_nodemcu_login_01