아두이노 무선 와이파이 코딩의 확장: 웹브라저 버튼 입력에서 문자 입력 방식으로

지금까지 다루어 왔던 아두이노 웹서버 프로그램은 웹브라우저에  예를 들면 on OFF와 같은 명령 버튼을 출력 시킨 후 사용자가 버튼을 누르게 되면 아두이노 NodeMCU 웹서버 프로그램이 request.indexOf() 명령을 사용하여 웹서버 request 데이터 수신 여부를 체크하는 대단히 간단한 시스템에 머물렀다.
이와 같이 OX 문제를 푸는 스타일에서 진일보하여 사용자가 문자열을 입력 창을 통해 보낼 수 있는 방안을 모색해 보자. 보내진 문자열은 아두이노에서 substring() 명령을 사용하여 추려 낸 후 다시 웹브라우저에 출력 확인 하도록 한다.
과거에 한컴 타자 연습 시에 위에서 졸지에 떨어지는 문자를 읽어 타이핑 성공하면 점수가 올라가는 류의 코딩과 약간의 유사점이 있다.

웹서버 클라이언트 창 디자인은 CSS에서 background color를 lightblue로 설정하였다. 헤더 태그 <h2>를 사용하여 Type⚫⚫⚫를 출력하였다.

입력을 위한 input 박스 디자인 CSS는 다음과 같다. 박스 사이즈가 충분히 크며 커서를 박스 앞에 갖다 두면 박스가 순간 포커스되어 색이 진해진다.

click me 버튼은 자바스크립트 코드이다. 클릭하면 입력 창에 대한 안내 메서지가 뜬다.

웹서버 HTML 코드 작성에 있어서 form 태그 기법을 새로이 개발하여 사용하기로 한다. 아두이노는 윈도우즈나 라즈베리파이와 같은 제대로된 컴퓨터와는 달리 단지 마이크로콘트롤러이기 때문에 OS 및 루트 디렉토리 자체가 아예 없다.

따라서 HTML form 태그 사용법에 있어서 흔히 사용하는 속성인 action=⚫⚫⚫ 설정이 불가능하다. 이에 대한 대안이 method = ‘get’ 용법이다.  즉 인터넷 주소창 너머로 데이터 전송하는 것을  없는 루트 디렉토리를 대신하기 위한 방편으로 코딩해본 결과 생각대로 움직였다.

input 박스에 on OFF BLINK 셋 중에 한 명령을 입력하고 엔터키를 치면 request.indexOf(“⚫⚫⚫”)가 판단하게 되며 명령에 따라 digitalWrite() 명령을 실행하게 된다.
만약 이 세 명령이 아닌 다른 명령이나 오타가 입력되면 그냥 지나치게 된다.

이로서 아두이노 IOT 제어에서 반드시 버튼 키를 사용하지 않더라도 보다 소프트한 말로 하는 명령이 가능하게 되었다.

코드의 핵심 부분을 자세히 설명하였으니 블로그 독자들께서 기존의 코드를 가지고 수정 작업해 보시기 바란다.

첨부된 동영상을 참조하기 바란다.