The story of computer language

Arduino에 디스플레이를 달아보자!

Arduino에서 간단하게 데이터를 디스플레이 할 수 있는 LCD를 달아 보려고 합니다.

LCD는 현대에서 제작된 것으로 HC16202입니다.

   - 5V 전원 공급

   - 화면 밝기 조정

   - 2 * 16 LCD

Arduino의 예제를 사용하려면 아래와 같이 배선되어야 합니다.

Arduino와 LCD 모듈의 배선이 끝나면, Arduino IDE에서 LCD용 Example소스를
Arduino에 다운로드하며 됩니다.

예제 : File > Example > LiquidCrystal > HelloWorld

코드는 아래와 같습니다.

// include the library code:
#include <LiquidCrystal.h>

// initialize the library with the numbers of the interface pins
LiquidCrystal lcd(12, 11, 5, 4, 3, 2);

void setup() {
  // set up the LCD's number of columns and rows: 
  lcd.begin(16, 2);
  // Print a message to the LCD.
  lcd.print("hello, world!");
}

void loop() {
  // set the cursor to column 0, line 1
  // (note: line 1 is the second row, since counting begins with 0):
  lcd.setCursor(0, 1);
  // print the number of seconds since reset:
  lcd.print(millis()/1000);
}

배선과 펌웨어 다운로드가 완료되면 아래와 같이 Arduino가 실행되어 LCD에 HelloWorld예제가 실행됩니다.

Fritzing file : 

arduino_lcd.fzz

Arduino에 디스플레이를 달아보자!

Arduino에서 간단하게 데이터를 디스플레이 할 수 있는 VFD(Vacuum Fluorescent Display)를 달아 보려고 합니다.

VFD는 삼성에서 제작된 것으로 16T202DA1E입니다.

   - HD44780 대체품 사용 가능.

   - 5V 전원 공급

   - 2 * 16 LCD

VFD 모듈의 Pinout은 아래와 같습니다.

Arduino의 예제를 사용하려면 아래와 같이 배선되어야 합니다.

Arduino와 VFD 모듈의 배선이 끝나면, Arduino IDE에서 VFD용 Example소스를
Arduino에 다운로드하며 됩니다.

예제 : File > Example > LiquidCrystal > HelloWorld

코드는 아래와 같습니다.

// include the library code:
#include <LiquidCrystal.h>

// initialize the library with the numbers of the interface pins
LiquidCrystal lcd(12, 11, 5, 4, 3, 2);

void setup() {
  // set up the LCD's number of columns and rows:
  lcd.begin(16, 2);
  // Print a message to the LCD.
  lcd.print("hello, world!");
}

void loop() {
  // set the cursor to column 0, line 1
  // (note: line 1 is the second row, since counting begins with 0):
  lcd.setCursor(0, 1);
  // print the number of seconds since reset:
  lcd.print(millis()/1000);
}

배선과 펌웨어 다운로드가 완료되면 아래와 같이 Arduino가 실행되어 VFD에 HelloWorld예제가 실행됩니다.

참조 사이트 : http://www.scienceprog.com/test-run-of-vfd-display-using-arduino/#more-5095

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

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

[Arduino 구성]

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

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

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

  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에서 결과를 확인 할 수 있다.