Breakout.js를 이용한 Arduino 시작하기

Breakout.js와 Arduino를 연동하는 Webapp구성을 해본다.

 * 웹기반으로 다양한 방법으로 접근이 가능함.

[Arduino 구성]

  Arduino는 온도센서(TM)를 사용하고 프로그램은 스케치예제에서 제공되는 Firmata 의   StandardFirmata를 보드에 다운로드하였다.

 서버로 구성될 Breakout.js에서는 Firmata를 기본으로하여 예제가 구성되어있다.

• Firmata 공식 사이트 링크 : http://firmata.org

  참고로, Firmata에서 제공되는 도구를 이용하여 Arduino의 기본 모니터링 및 제어를 할 수 있다.

  a. Arduino 펌웨어 준비하기

    본 예제를 실행하기 위해서 아래와 같이 예제로 제공되는 StandardFirmata 펌웨어를 보드에 다운로드하였다.

  b. Firmata 도구 참조하기

   Arduino와 펌웨어가 바르게 준비되었는지 확인을 해본다. 먼저 Arduino 보더와 연결된 USB 케이블을 PC에 연결하고, Firmata 공식사이트에서 Mac용으로 프로그램을 다운로드하여 실행하면 Firmata test프로그램이 실행되고, Arduino Serial포트를 설정하면 아래와 같이 실행 결과를 확인할 수 있다.

Arduino에서 Breakout.js에 대한 준비는 완료되었다.

[Breakout.js 구성]

  Breakout.js는 I/O보드를 웹환경으로 인터페이스하는 Javascript기반의 오픈 웹서버환경이다. Breakout.js의 기본 예제는 Arduino 보드와 인터페이스를 위해서 Firmata 프로토콜을 사용하였다.

• Breakout.js 공식 사이트 링크 : http://breakoutjs.com

  a. Breakout.js 준비하기

    Breakout.js 공식 사이트에서 다운로드할 수 있다. 다운로드 후 폴더를 열면 아래와 같은 폴더들로 구성되어있다.

 

 b. 웹서버 파일 준비하기

    다운로드 한 폴더에서 예제 실행을 위해서는 dist, examples폴더의 파일이 필요하다.

    다른 위치에 폴더를 만들어 위 두 폴더를 복사하여 준비한다.

   * 웹서버 Root 폴더 : /Users/shinhyeongab/Developer Data/Breakout

 c. Breakout Server 시작하기

    다운로드 폴더의 server 폴더에 보면 OS별로 사용 가능한 서버 프로그램이 준비되어 있다. Mac에서 사용하려면 breakout_server-mac.zip의 압축을 풀고 Breakout Server.app를 실행하면 된다.

  - status 설정

   Arduino와 Serial 통신을 위한 포트를 설정과 서버 포트를 설정한다.

   * 설정하기전에 Arduino와 연결된 USB 케이블을 PC에 연결하여야 함. 

   현재, /dev/cu.usbmodem1431, 8887로 설정됨

 - settings 설정

   웹서버의 Root디렉토리를 설정합니다. 앞에서 준비한 웹서버 파일의 경로를 선택하고, 다중 접속이 필요하면 아래의 Enable Multi-Client Connections를 체크합니다.

  준비가 완료되면 아래의 Connect를 클릭하여 서버를 실행합니다.

[결과확인]

  Arduino의 펌웨어가 다운로드된 상태에서 PC에 연결되고, Breakout.js서버 설정을 완료하여 서버를 실행하면 보드의 정보를 Breakout.js에서 가져올수 있다.

결과를 확인하려면 PC에서는 http://localhost:8887/examples로 주소를 입력하면 기본 사이트가 열려진다. 기본 화면에서 Sensors 항목의 Temperature를 선택하면 아래와 같이 Arduino 보드의 온도센스 결과를 웹페이지에서 볼 수 있다.

Wifi 환경에서는 모바일 장치(iPad, Android 장치 등)으로 해당 PC주소의 페이지 경로로 가면 동일한 결과를 확인할 수 있다.

아래와 같이 맥북과 iPad에서 결과를 확인 할 수 있다.