HTML5 によるロボット制御

6,359 views

Published on

HTML5 Conference 講演

Published in: Technology

HTML5 によるロボット制御

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

×