Web標準技術だけでロボ
•
4 likes•5,117 views
Webの標準技術だけを使ったロボットの説明です。 主に制御で使っている物はWeb MIDI APIでArduinoとUSBケーブルを介して通信しています。 ブラウザのChromeが入っているものであれば、QRコードなどでこの制御ページを読み込むだけで何もインストールをせずにすぐにロボットを制御することが可能です。
![var outputs = [];
navigator.requestMIDIAccess().then(function(midi){
var ot = midi.outputs.values();
for(var o = ot.next(); !o.done; o = ot.next()){
outputs.push(o.value);
}
}
function sendMIDINoteOn(note,velocity){
for(var i=0;i<outputs.length;i++){
outputs[i].send([0x90, note, velocity]);
}
}](https://image.slidesharecdn.com/web-150907153248-lva1-app6892/75/Web-8-2048.jpg)
Web標準技術だけでロボ
- 1. Web標準技術だけでロボ
- 3. まずは見てください
- 4. 何を使ったの？
- 5. 何を使ったの？ • Android ( Xperia Z3 Tablet Compact ) • OTG USBケーブル • 仮想MIDI機器 ( Arduino UNO ) • モータードライバ ( SN754410NE ) • 車 (タミヤ アームクローラー工作セット) • サーボモーター ( SG92 ) • ミニ2軸カメラマウント ( 製品名不明・・ ) • その他、車内用タブレット台、 100円ショップのクリップ(のケース)
- 6. 何を使ったの？ Web MIDI API getUserMedia headtrackr.js Moco For LUFA Webカメラ Chrome 44 Arduio モータードライバモーター × 2 サーボ × 4
- 7. #include <MIDI.h> #include <Servo.h> Servo servoR1; void setup(){ MIDI.begin(1); MIDI.setHandleNoteOn(HandleNoteOn); servoR1.attach(8); } void HandleNoteOn (byte ch, byte note, byte velo){ if(note==60){ servoR1.write(velo*1.4173228); } }
- 8. var outputs = []; navigator.requestMIDIAccess().then(function(midi){ var ot = midi.outputs.values(); for(var o = ot.next(); !o.done; o = ot.next()){ outputs.push(o.value); } } function sendMIDINoteOn(note,velocity){ for(var i=0;i<outputs.length;i++){ outputs[i].send([0x90, note, velocity]); } }
- 9. これが動く環境は？ Chromeが動いてUSB端子があるもの – iOSは対象外 • 対応してるブラウザアプリはあるけどUSBが… • Bluetooth MIDIはiOS最強説 – AndroidはOTG対応の端末 • トイザらスが4998円で投げ売りしてたことも… Operaが対応してるらしい 試してない… Firefoxが対応しそう
- 10. MIDIとロボット制御 キーボードのイベントと違い、段階がある – 音階の Note の他に127段階の Velocity がある → 単なるキーイベントとは違う レイテンシが非常に少ない – 音楽に遅延は命取りだからこそ → でもJavaScriptが(ry 物理的なコントローラが大量に存在してる – 大きなボタンとか頑丈なやつなどなど → あの鉄人28号コントローラーも！？
- 11. ブラウザでロボットを制御する • P2Pなどネットワークに関して強い！ • カメラが使えて顔認識とか簡単に組める • 音声認識や合成音などが手軽に使える • どんなOSでもだいたい動く • スマホに全部入ってる OS標準のメモ帳で ロボット開発の世界ができる。 環境も開発環境もインストール無し
- 12. Web MIDI 以外のブラウザで制御 疑似Keyboardでkeyイベントで送信 – 出力がないのでロボの制御には向かないがセン サーデータの入力なら使える タッチパネルにマルチタッチパターンで送信 – 認識が5〜10本しかなく、出力装置と同期処理と かいろいろ大変 Web Audio APIで波形作りアナログ通信 – 左右の２チャンネルとマイクの入力で、あのiOS でさえも対応済み – ノイズ処理やチップ側で強い出力が制限など辛い
- 14. マルチタッチパターン・・？ ExtensionSticker (明治大学 宮下研究室) PlusZone for Stamp (NECネッツエスアイ)
- 15. Web Audio API・・？
- 16. ブラウザでロボの真の価値 ロボットのプロトタイプをお手軽に作る！ – すぐに壁にあたって詰まるので、きっと 「ROS.jsやろう！」って事になる。 Webエンジニアがロボットの世界へ！ – すぐに壁にあたって詰まるので、きっと 「ROS.jsやろう！」って事になる。 教育としてロボプログラムの世界を気軽に！ – すぐに壁にあたって詰まるので、きっと 「ROS.jsやろう！」って事になる。