스마트 폰에서 HTML 언어로 4X4 버튼 키보드를 생성해 보자. HTML 언어로 작성되는 키보드 코드는 ESP8266WiFi 칩으로 구동되는 아두이노 호환 NodeMCU/WeMos 와이파이 보드의 입력 디바이스로 활용이 가능하다. 이울러 웹 화면의 남는 공간은 시리얼 모니터와 대비되는 와이파이 출력 모니터 공간으로 활용할 수도 있을 것이다.
이 과제를 수행하는데 필요한 준비물은 NodeMCU 또는 WeMos 보드 하나만 필요하며 LED를 비롯한 여타 부품을 준비할 필요가 없다.
4X4 플러스 알파에 포함되어야 할 최소한의 문자는 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, *, ., #, “, ”, @, Space Bar 및 ENTER키 들이다.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E 까지는 아두이노에서 16진법(HEX)까지 사용되므로 수학계산에 필수적인 문자들이다. *과 #는 통신에서 비밀번호 확인 작업 후 흔히 누르는 문자이다. “.”는 소수점 이하 숫자 표현에 필수적이다. @는 이메일 주소 형성에, Space Bar는 말할 필요도 없다.
그밖에 이 키보드를 사용하여 계산기 코드를 작성한다면 (, ), ln, sin, cos, tan, Pi, =과 같은 키들이 필요할 것이다.
위의 엔터키를 제외한 키보드 그래픽 결과를 참조해 보면, 스페이스 바는 이상하게도 버튼 모양이 작으면서 납작하게, 골뱅이는 남다르게 폰트 사이즈가 큰 듯, 소숫점 버튼은 홀쭉하게 나타났다. 특수문자 #는 와이파이 통신이 제대로 되는지 안되는지 체크해 보기 위해 인위적으로 삽입하였다.
우선 웹 주소창에 가상 ip를 입력 후 엔터 키를 누른 다음 아두이노 NodeMCU와 통신 연결이 되어 키보드가 나타나면 특수문자 #를 누른 후 “/KEY=문자”가 뜨는지 확인해 보도록 하자. 이 과정은 무선 공유기가 설치된 PC에서도 동일하게 재현이 가능하다. 즉 스마트 폰의 터치에서 PC에서는 클릭으로 대체 된다.
확인 결과 주소창 입력 인식은 되었으나 와이파이 통신이 두절된다. 즉 문자 “#”는 직접 보낼 수 없는 문자이다. Space Bar 또한 와이파이 통신 두절이 되기 때문에 직접 보낼 수 없다. @도 지금의 액면으로 처리하는 GET request 방식에는 문제가 없으나 POST를 위시한 url 통신에서 문제가 될 수 있는 Escape 문자로 분류된다. 이러한 문자를 통칭하여 url Escape 문자라고 하며 ASCII 문자와 대별된다.
아래 그림은 최소한 필요하다고 보이는 숫자와 문자 범위 내에서 개별 키의 크기까지 감안하여 디자인한 키보드이다.
따라서 #, Space Bar 와 @ 에 대해서는 아래와 같이 와이파이 통신에 이상이 없는 다른 문자 즉 Escape 문자로 대체하고 그에 상응하도록 코드를 수정 업데이트하자.
Space Bar : %20
: %23
@ : %40
아래에 에스케이프 문자표와 인터넷 주소를 참조하자. url Escape 문자표를 관찰해 보면 계산기 코딩에 반드시 필요한 문자들임을 쉽게 알 수 있다.
https://www.werockyourweb.com/url-escape-characters/
시리얼 모니터에서 request에 대한 반응을 출력해 보도록 하자. 아울러 아두이노에서 favicon 은 출력할 필요가 없으므로 배제할 수 있도록 코딩하자.
GET / HTTP/1.1 -> 총 14자
GET / favicon.ico HTTP/1.1 -> 총 25자
GET /KEY=1 HTTP/1.1 -> 총 19자 (0, 1, 2, ..., A, B,C,D,E,S)
GET /KEY=%20 HTTP/1.1 ->총 21자(url Escape문자들)
이 키보드를 사용함에 있어서 GET 과정에서 처리되는 총 문자 수는 14자, 19자, 21자 경우만 시리얼 모니터에 출력하도록 하자.
스마트 폰에서 와이파이를 통해 송신된 문자는 아두이노 NodeMCU/WeMos 보드에서 client.readStringUntil(‘\r’) 명령으로 읽어 문자열 변수 request에 저장한 다음 if 문을 통해 처리한다. 한 가지 지적해 두어야 할 사항은 Enter가 따로 없는데 이는 웹 화면 버튼을 터치하는 자체가 Enter에 해당한다는 점이며 바로 ‘\r’에 해당한다.
문자를 하나씩 보내 시리얼 모니터로 출력할 수 도 있으며 이번 블로그에서의 관심 사항은 여러 개의 문자로 이루어진 문자열을 출력해 보는 일이다.
예제 즉 123.45 @678을 시리얼 모니터에서 출력해 보기로 하자.
더 나아가 해당 문자열 입력이 완료되었을 경우에는 프로그램 초반에 설정된 전역 변수 String c를 다시 초기화 하여 재입력할 수 있도록 프로그램을 수정하여야 한다.
상당히 많은 수의 배선 작업을 요하는 키패드에 비해서 배선 걱정이 전혀 없으며 아울러 마땅한 입력 장치가 없는 아두이노의 입력 디바이스를 마련함으로 인해 아두이노 계산기를 비롯 다양한 응용이 가능하리라 본다.
지금까지 설명한 4X4 스마트 폰 키보드를 구현하기 위한 아두이노 NodeMCU/WeMos 웹서버 코드는 스팀잇에서 편집기에서 사용이 금지된 깍지 형태의 HTML 태그 명령을 많이 포함하고 있으므로 아래에 적어둔 필자의 사이트를 방문하여 복사해 사용하도록 하자.
//Webserver_NodeMCu_WeMos_IOT_keybd_02
http://blog.daum.net/ejleep1/346