Rapiroをブラウザで動かしてみた　【顔の向き操作編】

Rapiroの機能を一画面にまとめたインターフェイスを作成して、ブラウザから操作できるようにした。

「Rapiroをブラウザで動かしてみた　【準備編】」の記事はこちら

Rapiroをブラウザで動かしてみた　【準備編】
WebIOPiを使ってRapiroをブラウザから操作するためのWebサーバーを立てる方法を解説。
www.panda-lab.jp

「Rapiroをブラウザで動かしてみた　【全体構成】」の記事はこちら

Rapiroをブラウザで動かしてみた　【全体構成】
Rapiroをブラウザから操作するための全体構成を解説したまとめ記事。ソースコード一式と各機能の実装解説記事リンクも掲載。
www.panda-lab.jp

インターフェイスの作成

HTMLで顔の向きを変えるためのスライダーを用意する。

サーボモーターの可動範囲は 0〜180。
0 で左向き、180 で右向き、90 で正面になる。

  • min（スライダーの最小値）：0
  • max（スライダーの最大値）：180
  • step（操作の刻み幅）：任意（デフォルトは1）

stepを指定しない場合は、細かく向きを調整できる。
90が正面になるため、stepを設定する場合は90の約数にしておかないと正面を選べなくなるので注意。
操作性と扱いやすさのバランスを考え、丸パンダ研究所では10を採用。

<input type="range" class="face_direction" id="face_direction" min="0" max="180" step="10">

制御処理の実装

JavaScript側の実装

スライダーのイベントハンドラで、マクロ名と値（角度）を取得して処理を呼び出す。
changeは、値が変化したタイミングで発火する。

document.getElementById('face_direction').addEventListener('change', function() {
	change_rapiro('face_direction', this.value);
	status = 'stop';
});

Python側の実装

顔の向きの変更にはPコマンドを使用。
渡された値（サーボモーターの角度）を0埋めの3桁にしてから、シリアル通信で送信する。

サーボモーターの角度を細かく制御するには、次の形式のPコマンドを使用。

PS[サーボ番号]A[角度]T[動作にかける時間]

  • サーボ番号：00〜11
  • 角度：000〜180（サーボによって範囲が異なる）
  • 動作にかける時間：001〜999（0.1秒単位）
    例：「T005」は0.5秒、「T050」は5秒

サーボ00番（頭部）を90度に、0.5秒かけて動かしたい場合は「#PS00A090T005」を送信する。

サーボ番号サーボ位置可動範囲初期位置
00頭左 0 – 右 180（90 正面）90
01腰左 0 – 右 180（90 正面）90
02右肩（下から上）下 0 – 上 180（90：前）0
03右肩（下から横）横 40 – 下 130130
04右手握る 60 – 開く 11090
05左肩（下から上）上 0 – 下 180（90 前）180
06左肩（下から横）下 50 – 横 14050
07左手開く 60 – 握る 11090
08右脚（左右）内股 70 – 外股 13090
09右足首（左右の傾き）内側 70 – 外側 13090
10左脚（左右）外股 50 – 内股 11090
11左足首（左右の傾き）外側 50 – 内側 11090

Rapiroの姿勢調整用参考画像：https://wiki.rapiro.com/page/rapiro_trim/

# -------------------------------
# 顔の向き
# -------------------------------
@webiopi.macro
def face_direction(value):
    cmd = "PS00A" + value.zfill(3) + "T005"
    cmd_input(cmd)

# -------------------------------
# コマンド実行
# -------------------------------
@webiopi.macro
def cmd_input(value):
    cmd = "#" + value
    ser.write(cmd.encode("utf-8"))