Node.js(5) three.js

前回作ったNode.jsベースのWebアプリで、Raspberry PiをWebサーバにしてデバイスの情報をブラウザに表示する目的はほぼ実現できた。
JavaScriptにはブラウザで各種データをビジュアルに表示するライブラリが豊富にあり、手軽に使えることもわかったので仕上げとしてそのあたりを試してみる。

使用したのは3Dライブラリのthree.js。WebGLをJavaScriptで手軽に使うことができる。

とりあえずテクスチャを貼った立方体を表示させて、Raspberry Piから送られてくる加速度センサの値でそれを動かすようにしてみた。
スクリーンショット 2015-05-30 14.23.50
ブラウザ側でマウスによってカメラを動かせるようにしたので、複数のクライアントから接続した場合、立方体の動きは全く同一になるが、表示される角度や大きさはクライアント側で個別のものとなる。

ソースコード一式はこちら

gitでソースをクローンしたら、以下のようにnpmでモジュールをインストールして動かすことができる。

$ git clone https://github.com/tokoya/node_three.git  
$ cd node_three  
$ npm install  
$ npm start  

ブラウザからは前回と同じように「Raspberry PiのIPアドレス:3000/users」へアクセス。

three.jsは実行時にサイトからダウンロードする事も可能なようだが、ローカルなネットワーク環境下でも動かせるように/public/javascripts/にthree.min.jsとTrackballControls.jsを予め置いてある。

データの3D処理は完全にブラウザ側で行われるので、Raspberry Piの処理能力とは無関係にリッチな表現ができるのは面白い。かなり高度な表現ができるライブラリも各種存在しているので、Raspberry Piとの組み合わせは表現の幅が広がるのではないかと思う。

Node.js(4) I2C

Webサーバとクライアント(ブラウザ)間でコネクションを維持したまま通信を行うsocket.ioライブラリを、Node.jsで使用してWebアプリを作成するのは思ったよりも簡単に出来た。socket.ioを使用するとブラウザ側からリクエストを送出する事無く、サーバ側から自動的に配信を行うPUSH型のアプリを作成できるので、今回はそれを試してみる。

Raspberry PiのGPIOポートにスイッチを付けてその状態を配信するだけでも良いのだが、シンプル過ぎて面白く無いので以前Pythonで使ってみた加速度センサモジュールを今回も使用した。加速度センサモジュールについてはここを参照。

前回と同じようにexpressフレームワークが生成したコードのpackage.jsonに、必要なライブラリの定義を追加。Raspberry Pi用のI2Cパッケージはいくつか存在するようだが、今回はこれを使用した。

{
  "name": "i2c_acc",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.12.0",
    "cookie-parser": "~1.3.4",
    "debug": "~2.1.1",
    "ejs": "~2.3.1",
    "express": "~4.12.2",
    "morgan": "~1.5.1",
    "serve-favicon": "~2.2.0",
    "socket.io": "^1.3.5",
    "i2c": "~0.2.1"
  }
}

加速度センサからのデータ読み出しと、socket.ioによる通信はアプリケーションのエントリポイント”/bin/www”で、サーバオブジェクト生成後に呼び出されるapp_i2c.jsに記述。

var express = require('express');
var router = express.Router();
var i2c = require('i2c');
var addr = 0x1d;
var wire = new i2c(addr, {device: '/dev/i2c-1'});

function signed(n) {
  return (n < 128) ? n : n - 256; 
}

function app_i2c(server) {
  var io = require('socket.io')(server);
  wire.writeBytes(0x16, [0x05], function(err, res){});
  wire.writeBytes(0x10, [0,0,0,0,0,0], function(err, res){});
  setInterval(function() {
    wire.readBytes(0x06, 3, function(err, res){
      io.sockets.emit('event', {
        x: signed(res[0]),
        y: signed(res[1]),
        z: signed(res[2]),
      });
    });
  }, 100);
}

module.exports = app_i2c;

加速度センサを初期化した後、100msec周期でx,y,z値を読み出し、接続されているすべてのクライアントに対してその値を送信している。
続きを読む »

Node.js(3) socket.io

前回作ったNode.jsのWebアプリは、クライアント(ブラウザ)からのリクエストを受けて結果を返す昔ながらの静的なWebスタイルなので、Raspberry Piをサーバとしてリアルタイムにセンサの値を表示させたいといった用途にはあまり向いていない。
JavaScriptを使ってブラウザから定期的にhttpリクエストを送信する事で、リアルタイム性のあるWebアプリを実現する方法は既に広く使われているが、最近ではWebサーバとブラウザ間で直接コネクションして通信を行うWebSocketの規格が登場し、Node.jsでも簡単に使えるようなので試してみた。

Webアプリの機能としては前回と同じくブラウザからの操作でRaspberry PiのLEDをOn/Offするだけだが、リクエストはsocket.ioで送信してレスポンスもsocket.ioのイベントとして受け取る。これによって複数のブラウザから同時にRaspberry Piに接続した場合、どれかがLEDの状態を変えた時に全てのクライアントがその変化をリアルタイムに知ることができる。

プロジェクトの全コードは前回と同じくGitHubに置いた

順番に見ていこう。まずexpressフレームワークで自動生成したプロジェクトのpackage.jsonに、GPIO操作とscoket.ioのパッケージ定義を追加した。

{
  "name": "led_io",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.12.0",
    "cookie-parser": "~1.3.4",
    "debug": "~2.1.1",
    "ejs": "~2.3.1",
    "express": "~4.12.2",
    "morgan": "~1.5.1",
    "serve-favicon": "~2.2.0",
    "onoff": "~1.0.2",
    "socket.io": "^1.3.5"
  }
}

アプリケーションのエントリポイント”/bin/www”で、サーバオブジェクト生成後にsocket.io用のオブジェクト作成と呼び出しを追加。ここは分けずにwwwに直接コードを追加しても良かったのだが、見通しを良くするためにこうした。

var server = http.createServer(app);
var sock = require('../sock'); // 追加
sock(server); // 追加

socket.io用オブジェクトの処理は、クライアントから接続されてイベントを受信した時、パラメータに従ってLEDをOn/Offしてから、その状態を全てのクライアントに対して送信する。

var io = require('socket.io');  
var gpio = require('onoff').Gpio;
var led = new gpio(17, 'out');

function sock(server) {
  var sock = io.listen(server);
  sock.sockets.on('connection', function(socket) {
    socket.on('event', function(data) {   // クライアントからのイベント受信
      console.log('socket id: [' + socket.id + '] data: ' + data.onoff);
      if (data.onoff == 'on') {
        led.writeSync(1);
        sock.sockets.emit('event', { onoff: 'on' });  // 全てのクライアントへ送信
        // 送信元にだけ送信する場合は
        // socket.emit を使う
        // 送信元以外の全てに送信する場合は
        // socket.broadcast.emit を使う
      }
      if (data.onoff == 'off') {
        led.writeSync(0);
        sock.sockets.emit('event', { onoff: 'off' }); // 全てのクライアントへ送信
      }
    });
    socket.on('disconnect', function() {  // 切断
      console.log('disconnect id: [' + socket.id + ']');
    });
  });
}

module.exports = sock;

コメントにもあるように、サーバからクライアントへの送信は、全てのクライアント、イベントを送信したクライアント、イベントを送信したクライアントを除く全て。に対して行うことができる。
今回は使用しなかったが、クライアントをルームに分けて、同じルームに入っているクライアントにだけ送信する事もできる。
サーバ側のコードとしてはこれで終わり。次はクライアント側を見ていこう。
続きを読む »