breakout.js를 이용한 웹페이지에서 아두이노 제어

이번에는 웹페이지에서 아두이노를 제어하기 위해서 breakout.js 라는 자바스크립트 라이브러리를 사용해서 쉽게 하드웨어를 제어하는것을 보여주는 포스트이다.

이 글은 이미 아두이노에 대해서 어느정도 기본적인 내용을 알고 있다고 가정하고 쓰여진 것이기 때문에 혹시 아두이노의 기본사항에 대해서 좀 더 궁금한 점이 있으신 분들은

http://www.arduino.cc/ (아두이노 공식 사이트)

http://www.ladyada.net/learn/arduino/index.html

다음의 사이트들을 활용하시면 된다.

 

＠ breakout.js 작동원리

breakout.js 는 PC 상에서 웹앱 또는 모바일에서의 웹앱을 통해 아두이노의 물리적 입출력을 제어하는 방식으로 되어있다.

동작 원리는 breakout.js 서버를 통해서 websocket client가 접속을 하면 아두이노의 정보를 시리얼통신으로 받아서 websocket client에 전달하기도 하고, 반대로 client로부터 온 정보를 시리얼 통신으로 아두이노에 뿌려주는 방식이다.

 

@ 회로 구성

이제 회로를 꾸며보자.

준비물은 다음과 같다.

1. breakout.js 서버 호환 가능한 아두이노 보드 (Arduino UNO, Arduino Duemilanove, 기타 등등)

2. 프로그래밍을 위한 USB 케이블

3. 브레드보드

4. 소자 부품 (LED 1개, SPST switch 1개, 저항 330Ω(LED용), 저항 10KΩ(스위치 풀다운 저항), 점퍼 wire)

위의 회로와 같이 배선한다. 이 때 주의할 점은 LED의 Digital input은 아두이노의 11번 핀을 사용하고 스위치의 출력의 Digital input은 2번 핀을 사용해야 한다.

왜냐하면 아두이노에 올라갈 예제 프로그램이 위와 같은 회로를 기반으로 짜여졌기 때문이다.

 

@ Firmata 프로토콜

breakout.js를 사용하는 목적은 C언어가 아닌 자바스크립트로 아두이노를 제어하는 것이기 때문에 아두이노의 각 핀과 여러 하드웨어적인 기능들을 자바스크립트의 객체에 맵핑시켜야 한다. 이 때 사용되는게 Firmata라는 프로토콜인데, Firmata는 컴퓨터와 아두이노 사이의 통신을 위해 만들어진 프로토콜이라고 보면 된다. 다음의 주소를 참조하면 된다.

http://firmata.org/wiki/Main_Page

이 프로그램을 아두이노 보드에 올리면 비로소 웹소켓을 통해 아두이노 보드를 제어할 준비를 마치게 된다.

 

@ Connect & Control

이제 www.breakoutjs.com 이곳에 들어가서 breakout 파일을 다운로드 받으면 linux, mac, window 등의 운영체제 별로 파일이 구분되어 있고 이 중에 서버로 사용할 PC의 운영체제에 맞는 파일의 압출을 푼 뒤 실행시키면 다음과 같은 창이 뜬다.

 

 

status 탭과 setting 탭이 있는데 status창에는 시리얼 포트를 설정할 수 있고 그 아래에는 접속 상황을 안내하는 콘솔 창이 있다.

아두이노와 PC가 연결되면 시리얼 포트를 설정하는 리스트박스에 자동으로 해당되는 포트가 설정이 된다.

setting 탭에서는 웹서버 루트 디렉토리를 설정할 수 있으며 멀티클라이언트 접속을 허용하는지 체크하는 항목이 있다.

 

 

설정을 마친 뒤에 하단에 connect 버튼을 누르면 PC 이름을 가진 서버가 구동되며 연결되어있던 아두이노 보드가 COM3로 연결된다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이제 모든 준비가 다 끝나고 웹 페이지에서 아두이노를 제어해서 구성했던 회로의 LED를 켜고 끄는 작업을 하는 단계이다.

 

사용하는 브라우저 (크롬, 파이어폭스, 사파리, 오페라) 중 하나를 선택해서 주소창에 http://localhost:8890/examples/getting_started/hello_world.html 라고 입력한다.

참고로 breakout.js 프로젝트를 진행하기 위한 시스템과 브라우저의 요구사항은 다음 페이지를 참고하면 된다. http://breakoutjs.com/requirements/

주소창에 locashost명과 소스코드가 있는 html 파일을 입력하면 위의 그림에서 좌측과 같은 페이지가 나온다. 그와 동시에 breakout server 프로그램의 콘솔창에는

Client 1 connected 라는 메세지가 출력되면서 정상적으로 웹소켓을 통해 서버에 접속이 되었음을 확인할 수 있다.

 

그리고 이제 웹페이지의 버튼을 누르기만 하면 된다.

위에서 구성했던 회로중에 스위치 버튼을 누르면 아두이노에서 서버로 데이터를 전송하는 과정을 거쳐서 웹페이지에 input 박스에는 현재 버튼이 눌렸는지 여부를 디스플레이한다.

 

 다음은 시연 동영상이다.

 

breakout.js 안에는 각종 센서나 필터 등 상당히 많은 예제를 보유하고 있다. 물론 이 예제를 각자 입맛에 맛게 수정하려면 기본적으로 자바스크립트를 이해할 줄 알아야 한다.

그러나 아두이노를 자바스크립트 + HTML로 제어할 수 있다는 점이 굉장히 매력적이라고 생각된다.

 

---

 

이 포스트의 많은 부분은 http://musart.tistory.com/92 에서 참고하였습니다.