とりあえず、作ったweb画面を以下に示します。
何のひねりもありませんが、前進、後退、右旋回、左旋回と停止を指示できるようにします。Rapiroを制御するPythonプログラムではRapiroの運動制御を行っているArudinoに、制御用コンピュータとして搭載してあるRaspberry Piからシリアルで各コマンドを送るだけです。そのコマンドを、上記ページのボタンを押したら、送ってやるようにしてやればいいだけです。
Raspberry Piに以下の様なファイル（ディレクトリ構成）を作ります。
rapiro_study/
- bottle.py
- index.py
views/
- title.tpl
bottle.pyは、フレームワーク本体です。本来ならpythonのパッケージライブラリに入れるべきなんでしょうが、1ファイルと簡単な構成なのでわかりやすいようにここに一緒に置いています。index.pyがwebを制御する本体のプログラムです。（といっても、これだけです）views/以下に、htmlを置いておきます。（このディレクトリ名は固定のようです）今回は一つしか画面を用意していないので、一つしかありません。（title.tpl）これは拡張子が"tpl"ですが、内容は全く"html"です。
title.tpl
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>RAPIRO</title> </head> <body> <h1>RAPIRO Control page</h1> <form name="frm" method="get" action="stop"> <input type="button" onclick="document.frm.submit();" value="停止" style="font-size: 400%; width:200px; "> </form> <form name="frmF" method="post" action="forward"> <input type="button" onclick="document.frmF.submit();" value="前進" style="font-size: 100%; width:100px; height:100px; position: absolute; left: 50%; top: 40%;"> </form> <form name="frmB" method="post" action="back"> <input type="button" onclick="document.frmB.submit();" value="後退" style="font-size: 100%; width:100px; height:100px; position: absolute; left: 50%; top: 60%"> </form> <form name="frmR" method="post" action="right"> <input type="button" onclick="document.frmR.submit();" value="右旋回" style="font-size: 100%; width:100px; height:100px; position: absolute; left: 70%; top: 50%"> </form> <form name="frmL" method="post" action="left"> <input type="button" onclick="document.frmL.submit();" value="左旋回" style="font-size: 100%; width:100px; height:100px; position: absolute; left: 30%; top: 50%"> </form> </body> </html>
index.py
#!/usr/bin/python
# -*- coding: utf-8 -*-
from bottle import route, run, template, request
'''
__debug__を追加。（通常実行時は、__debug__ = 1）
Macでデバッグしたい時は、$ python -O rapiro3.pyで最適化をかけて実行する。
'''
if __debug__:
import serial
com = serial.Serial('/dev/ttyAMA0', 57600, timeout=10)
# 出力を一カ所にまとめる。（デバッグ時には標準出力にだすようにする）
def out(comStr):
if __debug__:
com.write(comStr)
else:
print comStr
# localhost:8000
@route('/')
def title():
# views/title.tplを呼ぶ
return template('title')
# localhost:8000/show
@route('/stop', method='GET')
def stop():
# GETパラメータの取得(username, men)
command = request.forms.submit
print("in stop", command)
out('#M0') # 停止（初期姿勢）
# views/title.tplを呼ぶ
return template('title')
# localhost:8000/forward
@route('/forward', method='POST')
def forward():
print("in forward")
out('#M1') # 前進
# views/title.tplを呼ぶ
return template('title')
# localhost:8000/back
@route('/back', method='POST')
def back():
print("in back")
out('#M2') # 後退
# views/title.tplを呼ぶ
return template('title')
# localhost:8000/right
@route('/right', method='POST')
def right():
print("in right")
out('#M4') # 右回り
# views/title.tplを呼ぶ
return template('title')
# localhost:8000/left
@route('/left', method='POST')
def left():
print("in left")
out('#M3') # 左回り
# views/title.tplを呼ぶ
return template('title')
# ビルドインサーバの実行
run(host='rapiropi.local', port=8000, debug=True, reloader=True)
これだけです。実行するときは、Rapiroのコンピュータ（rapiropiです）にログインし、以下のコマンドを実行します。$ python index.py
その後、PCで以下のURLをブラウザで表示します。
http://rapiropi.local:8000/
URL名の最後が".local"とちょっと普通と違いますが、家庭内のPCを特にDNSを作らなくてもURLでアクセスできるようにパッケージを入れてあるからです。Webのボタンを押したら、本来なら別のページに飛ぶためのhtmlファイルを指定するところなんですが、今回は単にpythonに制御用の指示を出したいだけなので、単純に文字列を送信して、index.pyではそれを受けとって対応するシリアルコマンドを送ったら、また一つだけのホームページを表示するようにしています。ホームページの方は文字の大きさや何かを指定するために、CSSを使わず個別に指定しています。大したページでもなかったので、CSSを作るのが面倒くさかっただけです。
実際に動かしてみたところ、「ちょっと反応が鈍いかな？」という感じですがちゃんと動いてくれました。
制御用にGETとPOSTの両方を使っていますが、単に勉強用に両方を使ってみただけです。コマンドと関係はありません。（特に送信時に個別のデータはつけてませんし）JavaScriptの練習の時にはよくPOSTで送信していましたが、いざhtmlの定義だけでやるとき、最初は"submit"ボタンしか送信する方法が思いつかず悩みました。調べていたら、ボタンにformをつけて、そこで一つだけJavaScriptを使う方法（onclick="document.frm.submit();"）が簡単なので、それを多用しています。実は、中々この方法がわからず、最後はJavaScriptを各ボタン毎に書かないといけないだろうかと思いながら、でもこれはhtmlじゃなくtplのbottle用のファイルだから動くんだろうかと悩んでいました。
結局、bottleを使いながらJavaScriptも使えるようですがちょっと特別なお作法があるようです。今回は処理的なところはPythonでやりたかったので、色々調べてみました。
