Rapiroの機能を一画面にまとめたインターフェイスを作成して、ブラウザから操作できるようにした。
「Rapiroをブラウザで動かしてみた 【準備編】」の記事はこちら
Rapiroをブラウザで動かしてみた 【準備編】
WebIOPiを使ってRapiroをブラウザから操作するためのWebサーバーを立てる方法を解説。
www.panda-lab.jp
「Rapiroをブラウザで動かしてみた 【全体構成】」の記事はこちら
Rapiroをブラウザで動かしてみた 【全体構成】
Rapiroをブラウザから操作するための全体構成を解説したまとめ記事。ソースコード一式と各機能の実装解説記事リンクも掲載。
www.panda-lab.jp
インターフェイスの作成
目の色変更用に各色のボタンを用意する。
<button type="button" class="led_btn led_red" id="led_red"></button>
<button type="button" class="led_btn led_green" id="led_green"></button>
<button type="button" class="led_btn led_blue" id="led_blue"></button>
<button type="button" class="led_btn led_yellow" id="led_yellow"></button>
<button type="button" class="led_btn" id="led_white"></button>
<button type="button" class="led_btn led_black" id="led_black"></button>制御処理の実装
JavaScript側の実装
ボタンのイベントハンドラで、マクロ名と値（色）を取得して処理を呼び出す。
pointerupは、マウスを離したタイミングやタッチを離したタイミングで発火する。
document.querySelectorAll('.led_btn').forEach(button => {
button.addEventListener('pointerup', function () {
change_rapiro('led', this.id);
status = 'stop';
});
});Python側の実装
目の色を変更するにはPコマンドを使用。
渡された色の値に応じて、R（赤）、G（緑）、B（青）の値を組み合わせてシリアル通信で送信する。
色はRGBの値で指定されるため、スライダーなどを使って細かく設定することも可能だが、丸パンダ研究所では手軽に使えるボタン操作を採用。
白色については、本来RGBすべてを255にすると白くなるはずだが、実際にはピンクっぽく見えたため調整している。
型式の違いだけでなく個体差もあるため、違和感を感じたら実際の色を見ながら調整するとよい。
# -------------------------------
# 目の色
# -------------------------------
@webiopi.macro
def led(value):
color = {
"led_red": "PR255G000B000T002", # 赤
"led_green": "PR000G255B000T002", # 緑
"led_blue": "PR000G000B255T002", # 青
"led_yellow": "PR200G255B000T002", # 黄
"led_white": "PR100G255B100T002", # 白
"led_black": "PR000G000B000T002", # 黒
}
if value in color:
cmd_input(color[value])
# -------------------------------
# コマンド実行
# -------------------------------
@webiopi.macro
def cmd_input(value):
cmd = "#" + value
ser.write(cmd.encode("utf-8"))
