앱인벤터로 나만의 리모컨을 만들어 본다

(쓰는 중간에 쭉 이 글을 보니 좀 어렵게 보인다. 사실 내용은 어렵지 않은건데.. 미안하지만 인내심을 가지고 읽어 주길 바란다.)

이전 글에 이미 이클립스 환경에서 리모컨을 만드는걸 소개 했었다. 사실 처음부터 코딩한거는 아니고 인터넷에 공개된 소스를 살짝 바꾼 정도 였다. 이번에는 같은 기능을 하는 리모컨을 앱인벤터를 이용해 만들어 보기로 한다. 우선 들어가기 전에, 앱인벤터의 한계가 있다.

• 버튼 이벤트는 click 과 longclick 두개 밖에 없다. 계속 누르고 있는 상태라든가 더블클릭이라던가 등등 이런걸 구현 못한다. 무엇보다 버튼을 누르고 있는상태에서 계속 신호를 전달을 할 이벤트가 없다는게 아쉽다.
• 그외 여러가지 고급 기능인데.....

그래도 어딘가 공짜에 쉽다는데 이 정도는 감수하고 그런 범위에서 만들어 본다. 우선 

앱인벤터를 열고 새로운 프로젝트를 만든다. 이름은 알아서 주고.. 위와 같이 

• ListPicker 1개 (블루투스 연결)
• 버튼 컴포넌트 3개 (블루투스 끊기, 전진, 후진)
• 예비용 Label 1개
• 블루투스 클라이언트 컴포넌트: BluetoothClient
• 기울기(자이로) 센서: OrientationSensor  
• 그리고 Screen 1의 속성을로 가서 "ScreenOrientation" 을 꼭 Portrait 로 해준다. 나중에 폰을 마구 기울일 때 화면이 세로-가로  자동 전환을 방지 하기 위해서..

를 추가한다. 그리고 버튼은 전번 편에 했던것 처럼 적당한 크기로 늘려준다. "블루투스 연결"은 버튼이 아니고 "리스트피커" 임을 다시한번 상기하라..

블럭에디터를 열기 전에 우선 작전을 짜자. 앞에서 말한 버튼은 클릭 이벤트만 있으니 잘하면 옜날 오락실에 있는 올림픽 게임처럼 버튼을 번개같은 속도로 눌러주어야만 차가 전진하는 상황이 올 수도 있다. 메인신호 생성은 버튼은 안되겠다. 그렇담 남은건 기울기센서인데.. 다행히

센서 값이 변하면 발생하는 이벤트가 있다. 여기서 roll 값이 좌우 변화 값이다. (참고로 pitch는 전후, azimuth는 동서남북 방위각). 기울이기만 하면 실행된다는 얘기다. 여기에 전진/후진 정보를 더하면 되겠다. 아무래도 클릭 이벤트 보다는

GotFocus, LostFocus 이벤트를 이용하는게 낳아 보인다. 그리고 무엇보다 중요한 "지금 가진것과 앞으로 얻어야하는 것" 사이의 관계 설정

앗.. 얻어야 할게 더 많다. 이 말은 먼가 더 필요하다는 말인데.. 이게 다 버튼이 눌러진 상태에 대한 이벤트가 없어서다. 할수 없다. 얻을것 중에 3개를 포기하던지.. 가진것을 늘리던지 해야지... 이왕이면 가진걸 늘리도록 한다. 이전 이클립스 버전에는 없는 "pitch" 정보를 이용하면 간단하게 9개 조합의 신호가 만들어 지겠다. (좌우 기울임은 Roll, 전후 기울임은 Pitch 라고 한다). 그럼 전/후 버튼은 필요 없는데?? 그렇다 과감히 지우자. 그래도 허전히니 하나정도 남겨서 긴급버튼으로 쓰자.. 어떠한 상황에서도 누르면 자동차가 서는 것으로... 

일단 블록에디터를 닫자. 그리고 후진 버튼은 지우고 전진 버튼은 이름을 바꿔준다. 

비상정지 버튼은 나중에 블록에디터에서 비장정지해제 와 토글 버튼으로 쓰기로 하다. 블록에디터를 다시 열고 

• 기울기 센서의 중앙값 (평평한 것으로 인정 하는 범위)를 정하자. 일단 15도 이내면 평평한 것으로 하자. 나중에 테스트 해보고 이 값은 조절하면 된다.

이제

• 전후: -1, 0, 1
• 좌우: -1, 0, 1

에서 총 9가지의 신호를 만들어 낼수 있는데.. 이것을 어떤 방식으로 차에 전달하나.. (-1,1) 같이 2개의 신호 조합 그대로?? 아니면 9가지 모두에 대해 각각 구분할 수 있는 1에서 9까지의 숫자를 할당? 당연히 후자.. 근데 그 할당하는 방법을 조금만 신경쓰면 더 쉽다.. 일단 컴퓨터는 (-)값을 별로 안좋아 하니 이렇게 해보자...

• 전후 신호: 평평=0,  전진=1, 후진=2
• 좌우 신호: 평평=0,  좌로=4, 우로=8

윗줄 아랫줄 더해보면 합이 0에서 10 까지 나오고 3,7 만 빠져 있다. 만약에 합이 5라면 (1,4) 경우밖에 없다. 다른 것도 해보면 마찬가지.. 즉 일대일 함수가 나오는 거다.. 이제 각각의 기울기 신호를 더해서 보내기만 하면 받는 쪽에서 쉽게 해독이 가능하다.. 조금더 수고스럽겠지만 이합에 다시 33을 더하자.. ASCII 코드라는게 있는데.. 33번부터가 사람이 알아볼수 있는 문자다. 33번은 ! (느낌표). 이리하면 나중에 프로그래밍 도중에도 쉽게 잘되고 있는지 확인할 수 있다.

일단 앱이 시작되면 스마트폰에 블루투스로 페어링된 장치의 리스트를 준비한다. 앱을 실행시키기 전에 미리 페어링 해 놓아야 한다는 점이 이전 버전과 다르다. 그리고 이 리스트피커 컴포넌트에는 클릭 이벤트가 없다. 대신 AfterPicking 이라는 이벤트가 있는데 "장치를 선택하면..." 이라는 뜻이니 보통 버튼의 클릭 이벤트로 보면 되겠다. 

위와 같이 선택이 된 장치를 연결 시켜 준다. 그리고 바로 끊기 기능를 만든다. 이런 절차는 습관을 들이는게 좋다. 열고-닫고, 연결-해제,....

여기서 재미있는 것 발견.. 지금 까지 하다보면 블록들의 모양이나 색깔에서 어떤 힌트를 얻을 수 있는데.. 블럭 왼쪽 끝이 튀어나오는 건 결과 값이 있으니 그것과 같이 사용하라는 거고, 오목한 부분은 연결해서 입력으로 사용할 값이 있다는 것이다. 그런데 BluetoothClient1.Connect 블록을 보면 왼쪽이 튀어나오고 동시에 오른쪽이 오목하다. 입력이 필요하고 결과 값도 연결해서 사용하라는 거다. 한편 초록색 블럭은 왼쪽에 뛰어나온 블럭들을 사용할 수 없게 되어있다. 제대로 쓰려면 연결에 성공했는지 실패 했는지 구분해서 쓰라는 얘기인데... 그런건 나중에 하기로하고... Built-in 의 Definition 메뉴에 가보면 이름없는 블록이 있다.. 그건 결과 값에 상관없이 실행하라는 얘긴데 우리는 우선 그걸 쓰기로 한다. 그래서 위의 모양이 나왔다..

본격적인 구조를 짜기 전에 변수 2개를 만들자..

• 하나는 비상정지 버튼을 토글키로 활용하기 위해 현재 값을 저장
• 다른 하나는 실제로 블루투스로 전달할 값을 위해

"Built-in" - "Definition" 가면 def Variable 블럭이 보이는데 그걸 끌어다 놓으면된다. 그리고 습관적으로 초기값을 넣어준다. 즉 emstop 에 false 를 rcvalue에 0을 일단 지정한다.

이렇게 하고 "My Blocks" - "My Definition" 에 가보면 방금 생성한 변수 (전역) 및 자동으로 생성된 변수 들이 보이고 그것들에 대한 활용 가능한 블록도 보일 것이다.

비상 정지 버튼 토글키 만들기 

우선 쉬운 비상 정지 버튼 토글키를 만든다. 버튼 클릭을 활용한다. 한번 누르면 비상정지, 다시 누르면 해제..... 반복키다. 

• 버튼이 눌리면 우선 현재 상태를 바꾼다.
• 바꾼 현재 상태에 대한 버튼 글자를 바꾼다
• 즉 바뀐 값(현재 값) 이 비상사태 (emstop = true) 이면 다음 입력은 비상 해제가 되어야 하므로 "Release..." 를 화면에 뿌리고.. 현재가 false라면 다음 입력은 비상이 되어야 하므로 "EM STOP" 를 뿌린다. 한글이 제대로 지원이 안되서 영어로
• 그리고 not 블록이 보이는데 생각한대로 현재값을 true-false 사이에서 바꾸는 역할을 하는 블록이다.

기울기 센서값을 읽어들여 블루투스로 송신하기

이것도 사전 작전을 짜자

• (+)(-) 15도 이내는 평평, 그 외 값은 전/후, 좌/우 에 할당한다.
• 전/후: Pitch 값이다. 폰을 세로로 놓고 정상적으로 볼때 폰의 상단을 아래로 내리는 방향이 (+) 값이다
• 좌/우: Roll 값이다. 왼쪽을 내리는게 (+) 값이다.
• 센서값 변화 이벤트가 발생하면 우선 전/후 값으로 rcvalue를  으로 만들고 , 좌우 값은 그것에 더하기로 한다. 마지막으로 33을 더해준다.
• 그 값을 emstop 이 false 때 블루투스로 보내준다 (비상이 아닐 경우)

위와 같은 메인 블록이 완성됬다. 사실 보기엔 좀 어지러운 느낌이 든다. 이직 if-elseif 중첩 블록이 한가지 경우 밖에 지원을 못해서 보기에도 한눈에 들어오지 않는다. 이런건 언어 문제와 함께 우선 개선 되었으면 한다.

이제 완성이 되었으니 스마트폰으로 옮겨보자.  DropBox를 이용해 보기로한다. 우선 앱인벤터가 실행되고 있는 웹브라우저로 와서 "Package to Phone" - "Download to this Computer"를 선택하면 apk 파일로 다운이 될것이다. 그것을 Dropbox 로 옮기고, 이제 스마트폰에 가서 Dropbox의 그 파일을 터치하면 앱이 설치되고 실행이 될것이다.

이제 본격적으로 테스트 해보자. 아 뿔사 자동차가 분해되고 없다. 아두이노를 다른곳에 쓴다고 분해 해 놓고 !! 그래도 다른 방법이 있다. 그냥 PC 나 노트북의 블루투스를 이용해서 들어오는 신호만 보면 되는거지 머... 시리얼 포트를 통해 들어오는 신호를 화면에 뿌려주는 프로그램 찾아 보면 많다. 윈도우용으로 "SerialPort Listner" 를 추천. 소스도 있으니 구경도 한번 하시고.. (개인적으론 이런 소스까지 공개된걸 좋아한다. 바이러스로 부터 많이 안심이 되기도 하고..)

http://www.codeproject.com/Articles/75770/Basic-serial-port-listening-application

블루투스 페어링 하고 테스트 해보니 대충 작동은 하는것으로 보인다. 느낌표 (!) 부터 시작되는 문자들이 화면에 찍히는걸 보니..

여기까지 따라해 보았다면 프로그램에 작동은 하되 고쳐야 할 것 많이 있는걸 화면에서 스스로 보게 될 것이다. 앱 시작하자 뜨는 경고창 등 .... 그것들은 숙제다. 각자 스스로 고쳐보길 바란다. (참고로 블루투스가 연결도 안되었는데.. 기울기 센서에서 신호를 보내니 경고가 뜨는 것이다..)

따라하기 좋은 지침서가 있는데, 저작권이 어찌되는지 불문명하지만 어쨌든 저자의 홈페이지에 있는 링크 소개하면서 마친다.

http://cs.usfca.edu/~wolber/appinventor/appinv_0331.pdf

ps: 숙제에 대한 정답은 다음 편에 올릴려다가.. 너무 짜증나는 에러라.. 일단 이것부터 고치자.. 아래 그림을 참고하여 고쳐보길 바란다. 나머지 소소한 사항은 진짜 숙제다..

ps2: 전체 프로그램