아두이노의 출력 장치로는 시리얼 모니터가 있으나 별도의 입력 장치 즉 키보드가 없다. 따라서 아두이노에 데이터 입력을 위해서는 하드웨어적으로 많은 수의 스위치를 덤불처럼 배선하여 어렵게 입력을 시도할 수 있겠지만 와이파이에 의해 사물인터넷 제어가 가능한 NodeMCU/WeMos 모듈에서 는 소프트웨어적으로 HTML 버튼 그래픽 프로그램에 의해 버튼 키보드를 쉽게 생성할 수 있다.
이번 코딩을 해보기 위해서는 별도의 부품 배선 없이 NodeMCU/WeMos 보드를 PC의 USB 포트에 연결한 상태에서 Webserver_nodemcu_IOT_keybd_01 코드를 컴파일 업로딩하고 스마트 폰 핫스팟을 ON 한 상태에서 시리얼 모니터에서 확인 가능한 NodeMCU/WeMos 보드의 가상ip를 스마트 폰 웹 화면에 입력하면 된다.
앞에서 지정한 아두이노 웹서버 코드는 HTML 태그 명령을 많이 포함하고 있으므로 아래에 적어둔 필자의 사이트를 방문하여 복사해 사용하도록 하자.
http://blog.daum.net/ejleep1/345
//Webserver_nodemcu_IOT_keybd_01
물론 버튼을 누르면 거꾸로 아두이노 NodeMCU/WeMos 보드로 와이파이 GET 명령에 의해 데이터가 전송되며 이 데이터를 인식하여 시리얼 모니터에 출력이 가능하다.
물론 HTML 버튼 코드에 의해 버튼 키보드 그래픽을 제공하고 해당하는 숫자를 터치하면
스마트폰 인터넷 주소창에 가상 ip에 연이어 /KEY=숫자 형식으로 나타남과 동시에 웹 브라우저가 아두이노 NodeMCU/WeMos 보드로 GET 명령에 의해 request를 보내게 된다. GET이란 통신의 방법론 측면에서 보안이 되지 않는 상태에서 문자를 송신하는 과정을 의미한다.
아두이노 코드에서는 키보드에서 터치 입력했던 숫자를 if 문에서 request. indexOf (“/KEY=숫자”)의 값을 찾아 숫자를 인식하게 된다. 우선적으로 하드웨어 스위치에 의해서 하나의 정보를 입력하듯이 스마트 폰에서 입력된 1개의 문자를 아두이노 NodeMCU/WeMos 보드에 송신하기로 하자. 한편 일련의 문자열을 입력하여 송신하려면 코드를 좀 더 수정해야 할 필요가 있다.
윈도우즈 워드프로세서 수준의 키보드 입력을 위해서는 상당히 복잡한 코딩이 필요하겠으나 아쉬운 데로 자신이 원하는 숫자나 캐릭터를 입력해서 인터액티브하게 아두이노 프로그램을 실행하는 데에 약간의 도움이 되리라 본다. 문자 데이터 1개씩만 입력이 가능한 유치해 보일 수도 있는 코드를 작성하자는 것이다.
무선 와이파이 설정과정은 앞서의 예제들에서 보았던 것처럼 그 틀이 Template처럼 거의 동일하므로 계산기 입력을 위한 코딩과 관련된 부분만 설명하기로 한다.
무선 공유기가 설치된 PC에서 작업도 가능하나 터치 입력이 가능한 스마트 폰이나 타블렛을 사용하도록 하자.
계산기에서 제공하는 키의 종류는 숫자 0,1,2,⦁⦁⦁9 이다. 스마트폰 웹브라우저에서 터치되어 NodeMCU/WeMos 보드에 전달되는 숫자 입력 정보는 if 문에서 request.indexOf() 명령에 의해 확인 후 시리얼 모니터에 출력한다.
스마트폰 웹브라우저에서 실행되는 웹서버 HTML 코딩을 살펴본다.
HTTP 프로토콜 요청 이후 배경색, 문자색 버튼 규격을 HTML CSS로 설정한다.
이어서 앵커 태그와 함께 버튼 태그를 사용하여 계산기 화면 즉 웹에 나타날 버튼 키를 코딩한다.
스마트 폰 웹 화면에서 키보드 입력 후 url 주소창에서 확인이 가능하다. 이 데이터는 와이파이를 통해 아두이노 NodeMCU/WeMos 보드로 전달이 되고 아래에서처럼 시리얼 모니터에서 request 내용 출력과 연이은 숫자 출력에 의해 확인이 가능하다.
시리얼 모니터에서 자주 목격되는 favicon 은 별도로 포스팅할 예정이다.