Rapiroの機能を一画面にまとめたインターフェイスを作成して、ブラウザから操作できるようにした。
「Rapiroをブラウザで動かしてみた 【準備編】」の記事はこちら
Rapiroをブラウザで動かしてみた 【準備編】
WebIOPiを使ってRapiroをブラウザから操作するためのWebサーバーを立てる方法を解説。
www.panda-lab.jp
「Rapiroをブラウザで動かしてみた 【全体構成】」の記事はこちら
Rapiroをブラウザで動かしてみた 【全体構成】
Rapiroをブラウザから操作するための全体構成を解説したまとめ記事。ソースコード一式と各機能の実装解説記事リンクも掲載。
www.panda-lab.jp
インターフェイスの作成
前進・後退・右に曲がる・左に曲がる、それぞれのボタンを用意する。
<button type="button" class="move_btn upper_triangle" id="forward"></button>
<button type="button" class="move_btn left_triangle" id="left"></button>
<button type="button" class="move_btn right_triangle" id="right"></button>
<button type="button" class="move_btn lower_triangle" id="backward"></button>制御処理の実装
JavaScript側の実装
ボタンのイベントハンドラで、マクロ名と値（向き）を取得して処理を呼び出す。
pointerdownはマウスを押したタイミングやタッチしたタイミングで発火、pointerupはマウスを離したタイミングやタッチを離したタイミングに発火する。
pointerdownに動作、pointerupに停止の処理をいれることにより、ボタンを押し続けている間は動作し、離したタイミングで停止するようになる。
document.querySelectorAll('.move_btn').forEach(button => {
button.addEventListener('pointerdown', function () {
if (status === 'stop') {
change_rapiro('move', this.id);
}
});
button.addEventListener('pointerup', function () {
change_rapiro('move', 'stop');
status = 'stop';
});
});Python側の実装
歩行動作には対応するMコマンドがあるため、それをそのままシリアル通信で送信する。
# -------------------------------
# 歩行
# -------------------------------
@webiopi.macro
def move(value):
direction = {
"stop": "M0", # 停止
"forward": "M1", # 前進
"backward": "M2", # 後退
"left": "M3", # 左に曲がる
"right": "M4", # 右に曲がる
}
if value in direction:
cmd_input(direction[value])
# -------------------------------
# コマンド実行
# -------------------------------
@webiopi.macro
def cmd_input(value):
cmd = "#" + value
ser.write(cmd.encode("utf-8"))
