Rapiroの機能を一画面にまとめたインターフェイスを作成して、ブラウザから操作できるようにした。
「Rapiroをブラウザで動かしてみた 【準備編】」の記事はこちら
Rapiroをブラウザで動かしてみた 【準備編】
WebIOPiを使ってRapiroをブラウザから操作するためのWebサーバーを立てる方法を解説。
www.panda-lab.jp
「Rapiroをブラウザで動かしてみた 【全体構成】」の記事はこちら
Rapiroをブラウザで動かしてみた 【全体構成】
Rapiroをブラウザから操作するための全体構成を解説したまとめ記事。ソースコード一式と各機能の実装解説記事リンクも掲載。
www.panda-lab.jp
インターフェイスの作成
プリセット動作用のボタンを用意する。
<button type="button" class="preset_btn" id="stop">停止</button>
<button type="button" class="preset_btn" id="wave_both">両手を振る</button>
<button type="button" class="preset_btn" id="wave_right">右手を振る</button>
<button type="button" class="preset_btn" id="wave_left">左手を振る</button>
<button type="button" class="preset_btn" id="grip_both">両手を握る</button>
<button type="button" class="preset_btn" id="extend_right">右手を伸ばす</button>制御処理の実装
JavaScript側の実装
ボタンのイベントハンドラで、マクロ名と値（動作）を取得して処理を呼び出す。
pointerupは、マウスを離したタイミングやタッチを離したタイミングで発火する。
document.querySelectorAll('.cmd_btn').forEach(button => {
button.addEventListener('pointerup', function () {
change_rapiro('cmd_input', this.id);
status = 'stop';
});
});Python側の実装
プリセット動作はあらかじめMコマンドに登録された動きなので、それをそのままシリアル通信で送信する。
# -------------------------------
# プリセット動作
# -------------------------------
@webiopi.macro
def preset(value):
actions = {
"stop": "M0", # 停止
"wave_both": "M5", # 両手を振る
"wave_right": "M6", # 右手を振る
"wave_left": "M8", # 左手を振る
"grip_both": "M7", # 両手を握る
"extend_right": "M9", # extend_right
}
if value in actions:
cmd_input(actions[value])
# -------------------------------
# コマンド実行
# -------------------------------
@webiopi.macro
def cmd_input(value):
cmd = "#" + value
ser.write(cmd.encode("utf-8"))
