라즈베리파이 스트림 웹으로 출력하기

라즈베리파이 ssh로 연결하기

node 설치하기

onoff 모듈 활용

라즈베리파이 스트림 이해하기

 

이번엔 버튼의 값을 웹브라우져로 보내 보도록 하겠습니다.

결국 어떤 값들을 스트림 개념으로 이해하고 파이프로 연결해서 내보낼 수 있음으로 그게 웹이든 센서든 개념적으로 같습니다.

 

새로운 파일을 하나 만들고

nano stream_browser.js 라고 합니다.

 

var GpioStream = require(‘gpio-stream’),
http = require(‘http’),
button = GpioStream.readable(18),
led = GpioStream.writable(17);

var stream = button.pipe(led);

http.createServer(function (req, res) {
res.setHeader(‘Content-Type’, ‘text/html’);
res.write(‘<pre>logging button presses:\n’);
stream.pipe(res);
}).listen(8080);

console.log(‘starting HTTP server on http://localhost:8080&#8217;);

 

소스는 위에있고 이렇게 입력해줍니다.

결국 http 모듈을 사용하여 웹 서버를 하나 만들고 포트는 8080을 사용합니다.

버튼을 읽어 led로 보내고 다시 웹서버의 respose로 보내줍니다.

 

결국 브라우져에서 스트림이 출력됩니다.

 

 

크롬브라우져에서 라즈베리파이 ip로 접속합니다. 이때 포트는 소스에서 처럼 8080을 입력해줍니다.

이제 버튼을 누르면 그 결과값이 브라우져로 스트림됩니다.

 

원문 참조 :

https://learn.adafruit.com/node-embedded-development/streams

라즈베리파이 node의 강점 스트림(stream) 들이대기

라즈베리파이 ssh로 연결하기

node 설치하기

onoff 모듈 활용

 

이제, node의 강점중의 하나인 스트림 파이프을 활용해 보겠습니다.

라즈베리파이의 라즈베리언은 리눅스 계열이고 결국 유닉스 계열의 스트림 기능을 제공합니다.

 

따라서 GPIO의 값을 표준출력으로 보낼 수(파이프로 연결하듯이) 있습니다.

gpio-stream 이라는 모듈을 활용하면 17번 핀에 연결된 버튼의 결과값을 표준 출력(콘솔)로 보낼 수 있습니다.

 

테스트 하기위해서 연결을 합니다.

 

위에 그림에서 처럼 GPIO핀들중에서 5V(보라색) 과, GND(회색), 17번(검은색)은 LED에 , 18번(빨강색)은 버튼에 연결합니다.

그리고 npm install gpio-stream 를 입력하여 모듈을 설치합니다.

그리고  nano stream_stdout.js 로 새로운 파일을 하나 만들고

아래 소스를 입력합니다.

 

var GpioStream = require(‘gpio-stream’),
button = GpioStream.readable(18);

// pipe the button presses to stdout
button.pipe(process.stdout);

소스는 18번핀에 버튼을 연결하여 스트림으로 읽어들입니다.

그리고 읽어진 스트림 데이타는 프로세스의 표준 출력(즉, 콘솔)로 보내어집니다.

 

따라서 node stream_stdout.js 를 실행한 후 버튼을 누르면 아래와 같이 콘솔에 값이 써집니다.

 

 

이번에는 버튼을 누르면 LED가 켜지는 프로그램을 작성해 보겠습니다.

nano stream_led.js 를 입력하여 새로운 파일을 하나 만듭니다.

아래의 소스를 입력한 후 저장해줍니다.

/**
* stream button presses to a LED
*
* circuit:
* https://learn.adafruit.com/assets/21908
*
*/
var GpioStream = require(‘gpio-stream’),
button = GpioStream.readable(18),
led = GpioStream.writable(17);

// pipe the button presses to the LED
button.pipe(led);

 

소스는 18번핀에 연결된 버튼의 입력값을 스트림으로 받아서 led의 스트림으로 다시 써주는 코드입니다.

즉, 버튼이 1이면 led도 1이, 0이면 0이 파이프를 통해서 전달되는 구조입니다.

결국 , 누르면 켜지고 떨어지면 꺼지게 됩니다.

 

동작 영상

 

 

원문 참조 :

https://learn.adafruit.com/node-embedded-development/streams

 

자바스크립트로 들이대는 하드웨어 해킹 ( Hardware hacking with JavaScript…)

원문 :

https://www.smashingmagazine.com/2016/02/hardware-hacking-with-javascript-internet-of-things/?utm_content=buffera1e46&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer

 

참조한 원문은 위에 링크가 있습니다.

간단하게 개념을 정리해보면 standard firmata 를 올린 아두이노를 node 기반의 johnny-five 모듈을 활용하여 자바스크립트로 아두이노를 갖고 놀 수 있습니다.

 

아두이노 개발환경 만들기

노드 설치하기 참조

 

아두이노를 실행하고 아두이노를 연결한 후  예제에서 standard firmata 를 올려줍니다.

 

스케치가 업로드 되었으면 아두이노는 준비된 상태입니다.

아래의 깃헙 소스를 원하는 곳에 다운로드 받습니다.

https://github.com/jimhunty/Hardware-Hacking-with-JavaScript

 

다운 받은 소스 폴더로 이동 후 콘솔에서 npm install 을 실행합니다.

필요한 모듈이 다운로드되고 준비가 완료됩니다.

node-module 이라는 폴더가 생기고 필요한 몇가지 모듈이 설치됩니다.

여기에서는 johnny-five, express, socket.io 가 설치됩니다.

 

 

blink-led.js 를 열고 led = new jfive.Led(13) 이 부분의 핀번호를 13으로 바꿔 줍니다.

콘솔에서 아래와 같이 입력하여 실행하면 아두이노의 13번 LED가 깜빡 거립니다.

node blink-led.js  

node 와 johnny-five, javascript 로 만든 blink 완성입니다.

 

우리가 node 를 사용하면 엄청난 혜택(?)을 누릴 수 있습니다.

이제 tmp36 온도 센서를 준비하고  아래와 같이 연결합니다.

그리고 콘솔에서 node server.js 를 실행합니다.

이제 브라우져를 열고 localhost:3000 으로 접속합니다.

브라우져에 온도가 표시됩니다. 와우~~

아이폰에서 접근해 볼까요?

 

아이폰에서 사파리로 접근할 수 있습니다.

당근 로컬에서 동작하고 있음으로 아이피를 알면 접근가능하겠습니다.

노드가 돌고 있는 컴의 아이피는 23번 입니다. 포트는 3000을 사용합니다.

따라서 아이폰에서 브라우져에 주소를 입력하면 똑 같은 화면이 나옵니다.

야호~~

 

 

 

 

너무 쉬워서 미안한 하이브리드 앱 만들기 : Ionic framework

요세미티와 Xcode가 설치되었다면 하이브리드 앱을 만들어 보면 어떨까 합니다.

Ionic 프레임워크는 JavaScript와 HTML5를 사용하여 모바일 앱을 만드는 방법으로 아이폰이나 안드로이드 앱을 네이티브 언어가 아닌 자바스크립트와 HTML을 활용하여 하이브리드앱을 쉽게 만들수 있게 해주는 프레임워크입니다.

일단 맛을 보도록 하겠습니다.

homebrew 가 설치되어 있는지 확인합니다. 콘솔에서 brew -v를 입력하여 버젼을 확인합니다.
decsers:~ $ brew -v
Homebrew 0.9.5>
decsers:~ $
만약 설치가 되어 있지 않다면 설치합니다. 콘솔에서 아래처럼 입력해서 설치합니다.

ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

또는 아래 링크중에 Homebrew 설치부분을 참조합니다.

아파치 설치하기

node.js 설치

node.js 가 설치되어 있어야 합니다.
콘솔에서 node -v 를 입력해서 설치를 확인합니다. 역시 설치가 되어 있지 않다면 설치합니다.

homebrew가 설치된 후 콘솔에서 아래와 같이 입력하여 설치합니다.
brew install node
decsers:~ $ brew install node
==> Downloading https://homebrew.bintray.com/bottles/node-0.12.2_1.yosemite.bott
######################################################################## 100.0%
==> Pouring node-0.12.2_1.yosemite.bottle.1.tar.gz
==> Caveats
Bash completion has been installed to:
  /usr/local/etc/bash_completion.d
==> Summary
🍺  /usr/local/Cellar/node/0.12.2_1: 2582 files, 28M
decsers:~ $ node -v
v0.12.2
decsers:~ $

Iconic  설치

이제 본격적으로 ionic을 설치해 보겠습니다. 역시 콘솔에서 아래와 같이 입력합니다.
npm install -g cordova ionic

설치가 완료되었다면 준비는 끝났습니다. 이제 작업 폴더를 정하고 그곳으로 이동합니다.
필자의 경우엔 새로 폴더를 만들고 그 폴더로 이동했습니다. 어디라도 상관은 없습니다.

cd /Volumes/JunoiMac/DevSources/Ionic

그 폴더에서 다시 아래와 같이 입력해 줍니다.

ionic start myApp tabs

위의 명령은 여러가지 템프리트 중에서 탭 스타일 앱 템플리트를 사용하여 기본 앱의 틀을 만들어 주는 명령입니다.

프로젝트에 필요한 파일들이 다운로드되고 템프리트 준비가 완료되면 그 폴더로 이동합니다.
cd myApp

이번엔 만들고자 하는 플랫폼, 즉 iOS 혹은 Android 플랫폼 골격을 추가해 준다. 여기에선 iOS 플랫폼을 추가합니다.
ionic platform add ios

이제 마지막 단계로 빌드해봅니다.
ionic build ios

빌드가 끝나면 아래와 같이 입력하여 시뮬레이터를 설치해 줍니다.
npm install -g ios-sim

이제 모든 준비가 끝났다. 실행해 보겠습니다.
ionic emulate ios

아래와 같이 시뮬레이터가 실행되고 앱이 기동됩니다.

야호~~ 시스템에 모든 필요한 요소들이 설치되었고 아이폰 앱을 만들었습니다.
다음엔 전체적인 구조와 구성을 이해하고 필요한 부분을 수정해보도록 하겠습니다.

참조 : http://ionicframework.com/getting-started/