html5 によるロボット制御
TRANSCRIPT
![Page 1: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/1.jpg)
HTML5 Conference 2015
HTML5 によるロボット制御
![Page 2: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/2.jpg)
自己紹介
Twitter: @masap 職業: 組み込みプログラマ(主に Wi-Fi)
![Page 3: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/3.jpg)
3/28
HTML5 でロボット制御とは
![Page 4: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/4.jpg)
ネイティブから HTML5 へ
ロボット制御はネイティブが主流 C/C++ を書く必要がある
HTML5 での開発へ Web 開発者もロボット制御が可能になる
ロボットに限らずハードウェア制御も可能なので IoT 等への応用もできる
このスライドでは以下の二通りを紹介 WebSocket 経由で制御 Web API を新設する
![Page 5: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/5.jpg)
5/28
WebSocket 経由でルンバを動かす
![Page 6: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/6.jpg)
6/28
ハードウェア構成図
PC ルンバスマホ
WebSocket USB Serial
![Page 7: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/7.jpg)
7/28
ソフトウェア構成図
PC ルンバスマホ
WebSocket USB SerialROS
Rosbridge(WebSocket Server)
roslib.js
Webアプリ
![Page 8: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/8.jpg)
ROSとは
ロボット制御のためのライブラリ、ツール Robot Operating Systemの略だがOSではない ロボットを制御するための統一的なAPIを提供する 制御プログラムは、ユーザーが C++ で記述する
![Page 9: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/9.jpg)
ROS の仕組み
ROS の基本用語 ノード、publish、subscribe
ROSアプリ
cmd_vel ノード(移動指示を受ける)
publish(前進、回転等の指示を送る)
odom ノード(位置情報を発信する)
subscribe(情報を取得する)
![Page 10: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/10.jpg)
Rosbridge とは
ROS を JavaScript から使用できるようにするパッケージ
WebSocket サーバー機能を持つ ユーザーは JavaScript で WebSocket サーバに接続
し、ロボットにコマンドを送る ROS を使うには C++ を書く必要があったが JavaScript
で書けるので Web 開発者にやさしい
![Page 11: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/11.jpg)
Rosbridge の使い方
ライブラリのインストール eventemitter2.jsとroslib.jsをダウンロードする
WebScoket サーバへ接続
var ros = new ROSLIB.Ros();
ros.connect('ws://localhost:9090');
![Page 12: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/12.jpg)
ルンバに指示を送る (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(前進、回転等の
指示を送る)
![Page 13: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/13.jpg)
ルンバに指示を送る (2/2)
指示の詳細 進行方向と回転方向を指定
linear: 進行方向と速度 (meter/sec) angular: 回転方向と速度 (radian/sec)
平面で考えると簡単 linear の x 座標が + なら前進、 - なら後退 angular の z 座標が + なら反時計回り、 - なら時計回り
![Page 14: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/14.jpg)
ルンバの情報を受け取る
ルンバの情報を受け取る 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(情報を取得する)
![Page 15: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/15.jpg)
15/28
WebAPI でルンバを動かす
![Page 16: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/16.jpg)
Web API とは
二種類のWeb API Web 上のサービスとして提供
Twitter API、Youtube API、... ブラウザ上のJavaScript API (今日扱うのはこちら)
navigator.getUserMedia, navigator.geolocation, ...
![Page 17: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/17.jpg)
ロボットを制御するWeb API
ロボットを制御するWeb APIはあるのか 今の所は無い。なので新しく作る
何を作るのか navigator.getusermedia のように
navigator.robotxxx のような API を作る
どうやって新しい Web API を作るのか Firefox を修正する Foxberry Pi を使用する
![Page 18: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/18.jpg)
作る意義
そうまでして自分向けに作る意味はあるのか W3C Browsers and Robotics Community Groupにて
標準化検討中
http://www.w3.org/community/browserobo/ 未来の標準を作る
![Page 19: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/19.jpg)
Firefox を修正する
なぜ Firefox か Chrome、Safari、IE と比較してハードウェアにアクセスする
Web API が最も充実しているため
Firefox では Gecko が Web API を実装している なので Gecko にコードを追加することで新しい Web API を作
ることができる gecko/dom/geolocation 等
Gecko
Web アプリ
Web API
![Page 20: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/20.jpg)
Foxberry Pi を使用する
Gecko の修正は敷居が高い JavaScript と C++ の両方を書かなければならない
Foxberry Pi で Web API を実装 JavaScript を使って擬似的に Web API を実装できる
Firefox OS
JavaScript WebIOPi
ハードウェア
HTTP
Raspberry Pi
Web API
![Page 21: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/21.jpg)
WebIOPi
WebIOPi とは Raspberry Pi 上で動く IoT フレームワーク HTTP で WebIOPi に接続してコマンドを送ることでハー
ドウェア制御ができる
![Page 22: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/22.jpg)
必要な Web API は
ロボットを動かす API ロボットを動かす = モーターを動かす
ロボットの情報を受け取る API ロボットの関節の状態 ロボットに搭載したセンサーの情報 カメラの情報 (これは既存の WebRTC で取得)
必要なのは GPIO と I2C
![Page 23: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/23.jpg)
GPIO とは
GPIOとは General Purpose Input/Output(汎用入出力)の略。 コンピュータと周辺機器を接続するためのピン。 ピン番号を指定して、 on/off を設定したり、 on/off を
読み取ったりできる。 ロボット制御においてはモーターの on/off を制御でき
る。
![Page 24: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/24.jpg)
I2C とは
I2Cバスとは シリアル通信のためのバス GPIO ではモーターの on/off しか制御できないのに対
し、モーターの回転数等を細かく制御できる
![Page 25: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/25.jpg)
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(ピン番号, 値)
![Page 26: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/26.jpg)
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);
![Page 27: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/27.jpg)
まとめ
HTML5 でもロボットを このように HTML5 でもロボットを動かせるようになって
きています 他にも Tessel や Espruino 等、 JavaScript で動かせる
ハードウェアがあります 楽しいのでぜひ!
![Page 28: HTML5 によるロボット制御](https://reader031.vdocuments.net/reader031/viewer/2022012314/55a9ad291a28ab77738b462c/html5/thumbnails/28.jpg)
28/28
以上