(6)までで作成したグラフ画像をWebブラウザで表示させるようにします。これにより、同じネットワーク上であれば手元にあるスマホやタブレットでリアルタイムにセンサー値の状況確認ができます。
WebサーバーとしてFlask（フラスコ）を使用します。
ルート（RaspberryPiのIPアドレス+ポート番号）にアクセスすると、「index.html」ファイルを返してくれます。index.html内に画像ファイルの指定をして表示させるようにしています。ただし、このままだと画像が更新されないので、更新された画像ファイルを表示させるための処理を追加しています。（6〜17行目 @app.context_processor部分）
標準では、index.htmlなどのHTMLファイルは[templates]フォルダに、画像ファイルなどのその他ファイルは[static]フォルダに保存しておきます。今回、画像ファイルを[data]フォルダに保存しているので、4行目の「static_folder="data"」指定で変更しています。
Flaskで使用するindex.htmlです。[templates]フォルダに保存します。
7行目の記述で表示する画像ファイルを指定します。FlaskでRaspberryPi内の画像ファイルを指定する場合、{{url_for('static', filename='ファイル名')}}の形式で指定します。
Pythonプログラムを実行します。Webサーバーとしてアクセスを待っています。
Webブラウザでhttp://（RaspberryPiのIPアドレス）:5000にアクセスすると、index.htmlファイルを送ってくれます。
同じRaspberryPiのWebブラウザからのアクセスです。
同じIPアドレス（自分自身）であれば、0.0.0.0:5000でアクセスできます。
同じネットワーク上の別のコンピュータ（Mac・iPhone）のWebブラウザからのアクセスです。
次回は、index.htmlにボタンを追加し、表示させたい時間を選択できるようにします。
1件のコメント