HTML5 Conference 2015

HTML5 によるロボット制御

自己紹介

Twitter: @masap 職業: 組み込みプログラマ（主に Wi-Fi）

3/28

HTML5 でロボット制御とは

ネイティブから HTML5 へ

ロボット制御はネイティブが主流 C/C++ を書く必要がある

HTML5 での開発へ Web 開発者もロボット制御が可能になる

ロボットに限らずハードウェア制御も可能なので IoT 等への応用もできる

このスライドでは以下の二通りを紹介 WebSocket 経由で制御 Web API を新設する

5/28

WebSocket 経由でルンバを動かす

6/28

ハードウェア構成図

PC ルンバスマホ

WebSocket USB Serial

7/28

ソフトウェア構成図

PC ルンバスマホ

WebSocket USB SerialROS

Rosbridge(WebSocket Server)

roslib.js

Webアプリ

ROSとは

ロボット制御のためのライブラリ、ツール Robot Operating Systemの略だがOSではない ロボットを制御するための統一的なAPIを提供する 制御プログラムは、ユーザーが C++ で記述する

ROS の仕組み

ROS の基本用語 ノード、publish、subscribe

ROSアプリ

cmd_vel ノード（移動指示を受ける）

publish(前進、回転等の指示を送る)

odom ノード（位置情報を発信する）

subscribe(情報を取得する)

Rosbridge とは

ROS を JavaScript から使用できるようにするパッケージ

WebSocket サーバー機能を持つ ユーザーは JavaScript で WebSocket サーバに接続

し、ロボットにコマンドを送る ROS を使うには C++ を書く必要があったが JavaScript

で書けるので Web 開発者にやさしい

Rosbridge の使い方

ライブラリのインストール eventemitter2.jsとroslib.jsをダウンロードする

WebScoket サーバへ接続

var ros = new ROSLIB.Ros();

ros.connect('ws://localhost:9090');

ルンバに指示を送る (1/2)

ルンバに移動コマンドを送る cmd_vel というノードに前進コマンドを送る

var cmdVel = new ROSLIB.Topic({

ros : ros,

name : '/cmd_vel',

messageType : 'geometry_msgs/Twist'

});

var forward = new ROSLIB.Message({

linear : { x : 0.1, y : 0.0, z : 0.0 },

angular : { x : 0.0, y : 0.0, z : 0.0 }

});

cmdVel.publish(forward); ROS

アプリ

cmd_vel ノード（移動指示を受ける）

publish(前進、回転等の

指示を送る)

ルンバに指示を送る (2/2)

指示の詳細 進行方向と回転方向を指定

linear: 進行方向と速度 (meter/sec) angular: 回転方向と速度 (radian/sec)

平面で考えると簡単 linear の x 座標が + なら前進、 - なら後退 angular の z 座標が + なら反時計回り、 - なら時計回り

ルンバの情報を受け取る

ルンバの情報を受け取る odom というノードを subscribe する

var listener = new ROSLIB.Topic({

ros : ros,

name : '/odom',

messageType : 'nav_msgs/Odometry'

});

listener.subscribe(function(message) {

console.log('Received message: ' +

message.header.seq);

listener.unsubscribe();

}); ROS

アプリ

odom ノード（位置情報を発信する）

subscribe(情報を取得する)

15/28

WebAPI でルンバを動かす

Web API とは

二種類のWeb API Web 上のサービスとして提供

Twitter API、Youtube API、... ブラウザ上のJavaScript API （今日扱うのはこちら）

navigator.getUserMedia, navigator.geolocation, ...

ロボットを制御するWeb API

ロボットを制御するWeb APIはあるのか 今の所は無い。なので新しく作る

何を作るのか navigator.getusermedia のように

navigator.robotxxx のような API を作る

どうやって新しい Web API を作るのか Firefox を修正する Foxberry Pi を使用する

作る意義

そうまでして自分向けに作る意味はあるのか W3C Browsers and Robotics Community Groupにて

標準化検討中

http://www.w3.org/community/browserobo/ 未来の標準を作る

Firefox を修正する

なぜ Firefox か Chrome、Safari、IE と比較してハードウェアにアクセスする

Web API が最も充実しているため

Firefox では Gecko が Web API を実装している なので Gecko にコードを追加することで新しい Web API を作

ることができる gecko/dom/geolocation 等

Gecko

Web アプリ

Web API

Foxberry Pi を使用する

Gecko の修正は敷居が高い JavaScript と C++ の両方を書かなければならない

Foxberry Pi で Web API を実装 JavaScript を使って擬似的に Web API を実装できる

Firefox OS

JavaScript WebIOPi

ハードウェア

HTTP

Raspberry Pi

Web API

WebIOPi

WebIOPi とは Raspberry Pi 上で動く IoT フレームワーク HTTP で WebIOPi に接続してコマンドを送ることでハー

ドウェア制御ができる

必要な Web API は

ロボットを動かす API ロボットを動かす = モーターを動かす

ロボットの情報を受け取る API ロボットの関節の状態 ロボットに搭載したセンサーの情報 カメラの情報 （これは既存の WebRTC で取得）

必要なのは GPIO と I2C

GPIO とは

GPIOとは General Purpose Input/Output（汎用入出力）の略。 コンピュータと周辺機器を接続するためのピン。 ピン番号を指定して、 on/off を設定したり、 on/off を

読み取ったりできる。 ロボット制御においてはモーターの on/off を制御でき

る。

I2C とは

I2Cバスとは シリアル通信のためのバス GPIO ではモーターの on/off しか制御できないのに対

し、モーターの回転数等を細かく制御できる

Web GPIO API

Web GPIO API navigator.mozGpio.write(ピン番号, 値)

例えば 10 番ピンにモーターがつながっている場合、以下のよ うに on/off できる

navigator.mozGpio.write(10, 1) で on

navigator.mozGpio.write(10, 0) で off navigator.mozGpio.read(ピン番号, 値)

Web I2C API

Web I2C API navigator.mozI2c.getI2cDevice(デバイス名,アドレス)

I2c デバイスの取得

i2c_device.write/read(レジスタアドレス, 値); レジスタへの書き込み、レジスタの読み取り

例 DRV8830 を用いたモーター制御

var i2c_device =

navigator.mozI2c.getI2cDevice("/dev/i2c-1", 0x64);

i2c_device.write(0x00, 0xfd);

まとめ

HTML5 でもロボットを このように HTML5 でもロボットを動かせるようになって

きています 他にも Tessel や Espruino 等、 JavaScript で動かせる

ハードウェアがあります 楽しいのでぜひ！

28/28

以上