아두이노 무선 와이파이 코딩의 확장: 웹브라저 버튼 입력과 문자 입력 방식 혼용

문자 입력 방식에 의한 아두이노 웹서버 프로그램에 LED on OFF BLINK 제어는 form 태그
에서 method=’get’을 사용하는 반면에 버튼 방식에서는 앵커 태그 <a>에 링크할 정보를 부여하는 href 속성을 사용한다. 결국 이 두 방법은 url을 통해 클라이언트로부터 아두이노로 원하는 정보를 보내지만 url에 기록하게 되는 정보에 큰 차이점이 있다.

이러한 차이점을 분석하기 위해서는 웹서버 프로그램 배에서 클라이언트로부터 전송되어 오는 정보를 포함하고 있는 문자열 변수 request를 시리얼 창에 출력해 보기로 한다.

처음 LED on OFF 무선 와이파이 제어 코드를 실행하면 무선 공유기로부터 가상 ip를 할당 받게 된다.

위의 웹브라우저 클라이언트 제어 보드로부터 아무런 명령 이 없을 때에 request는 GET/ HTTP/1.1 이란 내용을 출력한다.

연 이은 3개의 출력 내용들은 anchor 태그 사용 제어 버튼을 각각 눌렀을 때의 request 출력 내용들이다.
버튼 내용인 on OFF BLINK 가 내용물로 들어가 있음을 확인할 수 있다.

반면에 처음 시작하자마자 입력 창에 명령을 타이핑하여 전송했을 때의 결과를 보도록 한다.

?command= 뒤에 on OFF BLINK 란 제어 명령이 따르고 있다.

이 두 가지 방식에 대해서 웹서버 코딩 중에request.indexOf(“⚫⚫⚫”) 명령을 사용하여 request 문자열 중에 “⚫⚫⚫”에 해당 하는 내용이 있는지 여부를 판단하여 LED를 on OFF BLINK 하게 되넌 것이다.

그런데 문제는 이 방법들을 각각 사용하면 아무런 문제가 없으나 혼용할 경우 기존의 알고리듬으로는 정확하게 제어를 할 수 없는 상황이 발생한다.

예를 찾아보면 form 태그 방식으로 LED를 제어하다가 anchor 태그 방식으로 넘어 갈대는 아무런 문제가 없다. 하지만 anchor 태그 방식에서 form 태그 방식으로 넘어 올 때에 REQUEST를 출력해 보면 GET 과정을 기억하고 있다는 점이다.
왼쪽 시리얼 창에서 연한 청색으로 박스 친 예를 들어 보자.
  GET /on?command=BLINK HTTP/1.1
  GET /OFF?command=ON HTTP/1.1
  GET /BLINK?command=ON HTTP/1.1

이 세가지 경우는 버튼 키를 사용하다가 form 태그를 사용하는 입력 창 방식으로 넘어갈 때에 버튼 키 명령 부분이 지워지지 않고 남은 채 새로운 명령 즉 ?command=BLINK 부분과 합쳐지게 된다.
코드가 수행해야 할 명령은 마지막에 입력된 BLINK 이나 앞 부분에 on 이 남아 있어  if 문에서 맨 처음 체크하는 request.indexOf(“ON”) 명령으로 인해 잘못된 on 명령을 수행하게 되는 것이다.

버튼 키 명령에서 입력 창 명령으로 전환됨에 따라 발생할 수도 있는 오류를 제거하기 위해서는 request.indexOf(“⚫⚫⚫”) 명령 부분을 다음과 같이 개선해야 할 필요가 있다.

즉 위의 예제 사례에서 최종적으로 아두이노가 수행해야 할 부분은 ?command= 후반에 따르는 부분을 실행해야 할 것이다.

 

따라서 request.indexOf(“⚫⚫⚫”) 명령에서 분별해 내야 할 정보는 on H, OFF H, BLINK H를 request가 포함하고 있는지 여부 일 것이다. 아울러 각 방식에서 단순하게 on OFF BLINK 명령을 내리더라도 마찬가지로 on H, OFF H, BLINK H는 포함하게끔 되어 있어 제어에 아무런 문제가 없다.

form 태그 방식과 anchor 태그 방식의 특성 차이에 기인하여  request 정보의 형식이 변동되어 2개의 명령이 포함되더라도 상기의 코드로 아두이노가 최종 수행해야 할 명령을 쉽게 알아 낼 수 있다.

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