プログラミング素人のはてなブログ

プログラミングも電気回路も専門外の技術屋の末端が勉強したことや作品をアウトプットするブログ。コードに間違いなど見つけられたら、気軽にコメントください。 C#、Python3、ラズパイなど。

ラズパイで計測した環境値をWebで見られるようにする

ラズパイで温湿度・気圧を測定していました

s51517765.hatenadiary.jp
s51517765.hatenadiary.jp
s51517765.hatenadiary.jp

昨年、やりかけたのですが放置していたのでグラフ表示を完成させました。

ちなみに、エアコン制御は妻がSwitchBotを導入したようで、今年は活用されない見込み…

昨年、ラズパイゼロでFirebaseへのアクセスを試みていたのですが、結局解決しなかったので今年はラズパイ3B+で見える化をすることにしました。

Google chartsを使ってグラフ化

Google chartsというものを使ってグラフ化します。
Line Chart  |  Charts  |  Google Developers

温湿度、気圧なので、横軸を時刻(日付)としたLine Chartを選択します。
drawChart()がグラフの中身を設定する部分なので、ここにFirebaseからデータを引き出してグラフを作ります。

まず、FirebaseのデータベースであるFirestore Databaseからデータを引き出します。
Firestore Databaseの基本的な使い方は、先に示した過去記事を参照ください。

let dateList = [];
let tempList = [];
let humList = [];
let presList = [];
var db = firebase.firestore();
function ListLoad()
{
    var List1 = document.getElementById("List1");

    //データを取得
    db.collection("Database").get().then((querySnapshot) =>
    {
        querySnapshot.forEach((doc) =>
        {
            console.log(`${doc.id} : ${doc.data().Temp} ℃, ${doc.data().Hum} %RH, ${doc.data().Pres} hPa`);
            var element = document.createElement("li");
            element.innerHTML = doc.id + " : " + doc.data().Temp + "℃, " + doc.data().Hum + "%RH, " + doc.data().Pres + "hPa";
            dateList.push(doc.id);
            tempList.push(doc.data().Temp);
            humList.push(doc.data().Hum);
            presList.push(doc.data().Pres);
            List1.append(element);
        });
    });
}

これをchartのdataにpushします。
ここで、Firestoreのデータは文字列になっているので、浮動小数点数に変換します。
また、日付も文字列ですのでData型に変換します。
温度・湿度と気圧の二つのグラフを作成します。

for (let i = 0; i < dateList.length; i++)
{
    data.addRows([
        [new Date(dateList[i]), parseFloat(tempList[i]), parseFloat(humList[i])] //文字列はparseする
    ]);
    data1.addRows([
        [new Date(dateList[i]), parseFloat(presList[i])] //文字列はparseする
    ]);
}

また、日付のカラムはdatetime型にしておきます。

data.addColumn('datetime', 'Day'); //横軸は日付形式

読み込みに時間差をつける

どうやらGoogle Chartsは非同期で実行されるらしく、「Firestoreからデータの読み込み→グラフの作成」としてもデータの読み込みより先にグラフの作成がされて、表示されるデータがない、ということが起きます。
これを回避するため、グラフの作成を待たせます。
データ量にも依存するとは思いますが、私が試した範囲では500ms以上遅延させればうまくいきました。
ここでは余裕を持たせて1000msの遅延を入れています。
同期処理にするのが本当はいいのでしょうが、知見がないので簡易的に済ませました。

window.onload = function ()
{
    ListLoad();
    setTimeout(function ()
    { // 処理の実行に遅延を入れる
        google.charts.load('current', { 'packages': ['line'] });
        google.charts.setOnLoadCallback(drawChart);
    }, 1000); //500ms以上
};

まとめ

Google Chartsを使って環境値をグラフ化し、Webで見れるようにしました。
Google Chartsはほかにもおしゃれな見た目のグラフが色々使えるようです。
f:id:s51517765:20210711172550j:plain
f:id:s51517765:20210711172610j:plain

github.com