Pythonプログラムの結果をウェブブラウザで表示する方法について

Question

前提・実現したいこと

バイタルセンサーをPythonプログラムで動かすシステムを作っています。
開発環境はAnacondaのjupyter notebookを使用しています。
jupyter notebook上ではプログラムが正常に動くようになりました。

今後の使い道などを考え、ウェブブラウザ上に、その時の瞬時心拍と呼吸数を表示できるシステムを作成したいと思っています。
できたらスタート、ストップボタンを押して制御できるようにしたいのですがうまくいきません。

出力結果は画像のように表示されます。
5秒おきに結果が表示され、停止ボタンまたはキーボードで入力するとプログラムが停止する仕組みになっています。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

Webアプリを使用して、作成できないかと考えflaskを使ってプログラムを作成したのですが、動的に動かず最初の値しか表示することができませんでした。（ずっとウェブブラウザが表示されなかったりしました）

以下がとりあえずjupyternotebook上で成功したプログラムです。

補足情報（FW/ツールのバージョンなど）

import time
import serial
import glob
import openpyxl
import ambient

try:
    while True:
        
        #シリアル通信（センサーを動かす部分）
        comport = serial.Serial("COM3",baudrate=57600,parity=serial.PARITY_NONE)
        comport.write(b"4")
        recv_data4 = comport.read(31)
        comport.close()
        
        #取得したデータを数値に変換
        hr = int(recv_data4[1:4].decode("shift_jis")) 
        rr = int(recv_data4[4:7].decode("shift_jis"))

        vs=[hr,rr]
        #エクセルファイルを起動→シートに値を追加→保存
        wb = openpyxl.load_workbook('/Users/sishi/Downloads/Vital sensor/hr_rr_data.xlsx')
        sheet=wb.worksheets[0]

        sheet.append(vs)

        wb.save('/Users/sishi/Downloads/Vital sensor/hr_rr_data.xlsx')

        #Ambientを使ってクラウド上に結果のグラフを作成（保存）
        ambi = ambient.Ambient(22251, "ed5ac6fcda8b4f62") 
        r = ambi.send({"d3": hr, "d4": rr})
        
        #結果の表示
        print(hr,rr,vs)
        
        #5秒間隔でプログラムを実行
        time.sleep(5)
        
except KeyboardInterrupt:
    print("FINISH")
    

Answer 1

常時動いているセンサーの動作結果を逐次、WEBブラウザーで表示させたいような場合は、WEBサーバー側で動くセンサープログラムと閲覧の為のプログラムを分けて考え、そう作らないと要望どおりには動作しません。WEBシステムで一般的な方法を理解する必要があります。（Python以外では非同期にするなど工夫すればひとつにまとめることはできますが、難しいです）

簡単に考えられるのは例えば以下、です。

1. 常時センシングを行う常駐型のプログラムをWEBサーバー上で稼働する。取得したセンターデータはデータベースやファイルに逐次、保存する。
2. WEBブラウザーから「開始」「停止」などの操作をしたいのであれば、「開始」、「停止」を行う別のプログラムを用意する。そのプログラムを用いて、常時センシングを行っているプログラムを開始、停止する。
3. センサーデータの一覧を要求するようなHTMLのフォームを作り、GETやPOSTでHTTPリクエストする。（要はフォームのサブミットです）

　WEBサーバー側では、そのHTTPリクエストを受信したときに、あらかじめセンサーデータが保存されたデータべースやファイルからデータを取り出し、見目好いHTMLに整形して、WEBブラウザーに返す。

1. 「開始」「停止」などの操作もHTMLのフォーム経由でHTTPリクエストし、WEBサーバー側で担当するプログラムが動くようにする。

Pythonのサーバー用フレームワークとしてFlaskもいいでしょうが、Python3標準で使えるcgiモジュールを用いてCGIとして実装するのもあるいは簡単になります。その他にもjQuery（Ajax）を使うなどすれば、よりリアルタイムなデータ更新表示ができるようになるでしょう。

Comments

[mamecoro]

回答ありがとうございます。
cgiやGETやPOSTでHTTPリクエストについてよくわかっていなかったので、そのあたりをしっかりと調べて考えてみます！

Answer 2

#シリアル通信（センサーを動かす部分）

    comport = serial.Serial("COM3",baudrate=57600,parity=serial.PARITY_NONE)
    comport.write(b"4")
    recv_data4 = comport.read(31)
    comport.close()

これではシリアル通信の受信ができてません
Webブラウザどーこーの前に、コンソールに受信結果を出すなりして、きっちり受信できているのを確認しよう

Comments

[mamecoro]

解答ありがとうございます。
シリアル通信の可否自体は確認できているはずです…。
この前にcomport.write(b"0")というコマンドを打ち、1（センサーの通信可能）は確認できています。
受信できているので、画像のような結果が表示されるというわけではないのでしょうか？

プログラミングやシリアル通信自体も初心者なのでよくわからず申し訳ありません…

[y_waiwai]

print(recv_data4)
いれてまわしてみようよ。

[mamecoro]

それについては回してみました。
ちゃんと必要な情報が返ってきています。