Ajaxでco2センサーのデータ表示

ほぼ一年前に作ったco2測定データロガー、webでも結果が見れるようにしているのですがリフレッシュを自動でしないので、ブラウザで更新しないといけないから多少不便。リロード指定でもできるけれどもスマートさが無い、実行時間などで実際にはこの程度のページならなんら問題ないにしても。

と言うことでAjax使って自動更新するようにしてみた。

実行は、jqueryを使うのがコード量が少なくて良いだろう。

・全体の構成は、DBから計測値取得のphpファイルは複数箇所から呼び出すから別ファイル(data_read.php)にする。

・Apache document rootは/var/www/html/だから、

$ cp index.php /var/www/html/

のようにユーザエリア内のコード修正後はユーザディレクトリからコピーする。

やったことは以下の二点

① DBから定期的に最新の測定値を読み出して、測定値タグのclassに書き込み

② スタイルシートを同時にjsで変更してやる

の二点です。

 

過去のブログはこの辺り、

https://isehara-3lv.sakura.ne.jp/blog/2021/09/20/co2-センサー(ndirとは、non-dispersive-infrared(非分散型赤外))mh-z19bを/

現状のソースコードは、

https://github.com/chateight/co2_sensor/tree/main/co2_sensor

 

P.S. (2022/8/31)

jsのコードがスマートさに欠ける(特にスタイルシート変更部分)ので修正。

 

admin