2022年8月 – Blowing in the wind

2022年8月30日2022年9月2日

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

2022年8月22日2022年8月25日

スプレッド演算子の挙動（なんだこれは？）=> 解決済み

スプレッド演算子の数値が、展開されると勝手に二倍の値になる。以下のJavascriptの切り出しコードで、最初の展開で二倍、さらに二回目の展開でも二倍されてます。

以下のソースは切り出した部分。

let num = [108, 210, 398];

let marge = [...num, 300, 400, 500];

console.log(marge);     // [216, 420, 796, 300, 400, 500] ??

console.log(Math.max(...marge));        // 1592 ?? = 796*2

ChromeでもSafariでも同じだし、不思議な現象。まあ、そのうち解決（原因判明）するんだろうと思うけど。

P.S. (2022/8/22)

同じソース内で、配列iteratorを配列の値を二倍するiteratorでオーバーライドしていたから、つまりスプレッド演算子は実は内部的な処理はiteratorで展開されるということですね。

Array.prototype[ Symbol.iterator ] = function (){
    let index = 0;
    let set = this;

    return{
        next(){
            if (index <set.length){
                return{
                    done: false,
                    value: set[ index++ ]*2
                }
            }
            else{
                return{
                    done: true
                }
            }
        }
    }
}

admin

2022年8月19日2022年8月20日