クラスとFlask

  • flask の例ではポート番号5000 番が使われることが多いのですが、5000番は Mac では別のプログラムに利用される場合がありますので、以下の例では 5001 番を使うようにしています。

Car クラス

前回はシリアル通信を使って，Mac の Python からシリアル通信で Arduino にモーターの命令を送りました．今回はそれをクラスにまとめてみます．

以下の内容のファイルを "car.py" として保存してください．

import serial
import time


class Car:

    def __init__(self, port):
        self.s = serial.Serial(port, 115200, timeout=0.1)
        time.sleep(2) #2秒待つ

    def go(self):
        self.s.write( bytes('1', 'utf-8') )

    def stop(self):
        self.s.write( bytes('0', 'utf-8') )

    def close(self):
        self.s.close()

そして，'0' を受信したら前に進む，'1' を受信したら止まる Arduino のプログラムを作成し，以下のプログラムが動くようにしてください．


from car import Car

car = Car("/dev/tty.usbmodemXXXXX")

car.go()
time.sleep(3)
car.stop()
time.sleep(3)
car.go()
time.sleep(3)

car.close()
print("bye")

課題

  • 上記の Car クラスに "後退"の go_back(), "右回り"の rotate_R, "左回り" の rotate_L のメソッドを追加してください．

Flask

Flask は python の Webアプリケーションフレームワークです． まずは pip でインストールします．

pip install flask

そして，最初のプログラムとして，以下のプログラム hello.py を作成してください．

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<p>Hello world!</p>"

if __name__ == "__main__":
    app.run(host="127.0.0.1", port=5001, debug=False)

実行は，このプログラムのあるディレクトリで

python hello.py

とします．すると，

$ python hello.py 
 * Serving Flask app "hello" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://127.0.0.1:5001/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 220-515-480

のようにメッセージが出ますので，http://127.0.0.1:5001 にブラウザでアクセスすると，Hello world! と書かれたページが確認できると思います．(Ctl-c でプログラムは終了します）

このように，関数で web ページにアクセスされた時の振る舞いを記述していくのが flask のプログラミングとなります．

課題

上の hello.py を改変して http://127.0.0.1:5001/bye にアクセスしたら，さようなら と出るプログラムを書いてください．

Flask でリモコンを作る

次に flask でボタンを作ってみます． 以下のサンプルプログラムをダウンロードしてください．

まず，webapp.py を実行します．

python webapp.py

このプログラムでは，ボタンが押されると Car クラスの go 関数が実行されます．

よくみると，このボタンを押すたびに画面が遷移していることがわかります． 画面遷移がおこると，それだけ時間がかかりますので，画面遷移をしないように ajaxを使います．

ajax とは「JavaScriptとXMLを使って非同期にサーバとの間の通信を行うこと。」です．google map などは画面遷移をせずに，ユーザーからの操作に応じて新しいデータを読み込み，画面を更新していますが，その仕組みに使われています．

これを使ったプログラムが webapp2.py に実行されていますので，これを実行してください．

python webapp2.py

スマホからの接続

"127.0.0.1" の IPアドレスは自分自身のコンピュータを指す特別なIPアドレスです． 実は，ここで作成した flask プログラムは同じ LAN 内であれば他のコンピュータからも接続可能です．

まず、TC306 の無線環境である tc-room に接続してください。 次に、自分のコンピュータのアドレスを確認してみてください．

ifconfig

さまざまに表示される情報のうち，en1 に相当するのが，無線LANになります．

ifconfig -l | xargs -n1 ipconfig getifaddr

のコマンドではIPアドレスだけを取り出すことができます．

ここで得られたアドレスを 172.19.193.xxx とすると，ブラウザで

http://172.19.193.xxx:5001/

のアドレスを開けることで，flask に接続することができます．

課題

  1. 別のコンピュータ，あるいはスマホからflask プログラムに接続できることを確認してください．
  2. "car.py", "webapp2.py" を編集して，ブラウザからロボットが前進，後退，左右回転，停止ができるようにしてください．
  3. スマホからリモコンで操作できるようにしてください．
    • 注意：コンピュータは台の上に載せてください．
  4. ボタンを十字に配置して、リモコンっぽくなるようにインタフェースを工夫してみてください。
    • ChatGPT などを使うと簡単にコードを生成してくれます。