おうちのいろいろな情報の可視化をChart.js 2.xでしています。
昔はMRTGやRRDtoolなどを使ったこともありますが、実行するホストのストレージが小さいので、chart.jsを使う方法を思いつきました。chart.jsを使うメリットはホストにfontデータを持つ必要がない、またpngファイルも置く必要がないなどがあります。いつも見るものでもないpngを定期的に作っておくのは無駄です。RRDtoolなどのグラフの表示はchart.jsに比べると貧弱に見えます。
CSSでドロップダウンメニューを作り、onclickでJavascriptを実行して表示しています。HTMLやCSSやJavasciptはあまりいじることがないので、結構苦労しました。
ばらばらのHTMLに直書きされていたJavascriptを関数化して、呼び出すようにしました。
ドロップダウンメニューの説明のページはいっぱい検索でみつかるのですが、具体的な使い方や、完全なファイルとしての説明などがほとんどなく、まったくの素人にはとっては不親切なものばかりでした。
Canvasに再描画しているのですが、前のチャートが出てしまう問題はこちらのページに対策が書いてありました。
自前のJavascriptはcatしてYUI Compressorを通すようにしてみました。FreeBSDのパッケージのyuicompressorをインストールするだけで使えました。
Hardoffで324円で購入したRT5350を使ったモジュールにZRouterでビルドしたFreeBSDを焼いて、シェルスクリプトをcronで5分おきに実行してメモリディスクにデータを集めて、定期的にjsonに変換しています。完全におうちクローズドなシステムで、インターネットが無くなっても自立して動作が可能です。
以前はRT3050なモジュールで動かしていたのですが、今年の夏に猛暑のためか壊れてしまったので、これにしました。逆さまに置いてるのはSOCが基板裏に実装されていて、熱対策のためです。Flashは8Mに貼り替えてあります。このモジュールは基板を追ってみたところ二つ目のuartが見つかり、Wi-SUNモジュールを接続するにはもってこいです。
Electric Power
まずスマートメーターからBルートで拾ったメーター値からの日々の電力の使用状況です。
昨日は炊飯したので、ちょっと高めです。このように日々の利用状況を確認するのが節電には一番良い気がします。手違いで再起動してデーター飛ばしちゃったんですが、最大2週間分を表示するようにしています。
電気料金の検針票には昨年同月との比較がありますが、気候が毎年違うので意味がないと思います。現実的には2週間程度の比較ができれば十分と思います。
昨日の時間ごとの電力の利用状況です。
17時代のピークは炊飯によるものです。東京電力のでんき家計簿でも確認できますが、まーあそんなものかといった感じです。スマートメーターのPRなどで、この時間毎のグラフがよく使われますが、私はあまり有用とは思えません。このグラフに注目するのは木を見て森を見ずな感じがします。
上記の二つはサーバ側である程度の集計をしてjsonにしていますが、これ以外はほぼ生データをjsonにしてブラウザのJavaScriptで処理しています。
Time
我が家にはNTP st1がGPSとJJYをソースとするホストで2台づつ計4台あります。
GPSを使ったNTPサーバの状況です。2系統の昨日と今日のグラフが見れます。
横軸の時間はいい感じに表示するように調整していますが、メンテなどでデータが飛ぶと表示が乱れます。
JJYを使ったNTPサーバの状況です。2系統の昨日と今日のグラフが見れます。
GPSの1000分の1位の精度になりますが、以前オープンハウスの時にNICTの担当の方にJitter 2msecくらいと話したら、結構良いのではないかと言っていただけました。冬場はこれくらいの安定度が出ますが、夏場は電力のノイズが多いのか4倍くらい精度が落ちます。
朝6時くらいのスパイクは近隣のノイズによるものだと考えられ、炊飯器などのノイズが影響しているのはないかと推測しています。ただ不思議なのは我が家でも夕方炊飯器を使ったのですが影響が見えません。ノイズも風向きとかあるのでしょうか？
二系統を重ねたグラフも作ってあります。
赤い方はドイツから来たDCF77な電波時計のモジュールを取り外しJJY40に改造したものです。バーアンテナも長いフェライトバーに巻き直してあります。通常は紫の方よりも安定度が高いのですが、ある種のノイズには逆に弱いように見えます。
NTP st2のst1の昨日の参照状況です。
おうちのNTP st1は4台が良いようです。GPS 1は秋月の太陽誘電なのですが、あまり信用されていません。日により結構変わります。
Network
我が家の中央に位置する1Giga Ethernet Switch各ポートの5分ごとの受信バイト数です。仕組みはこちらです。昨日と今日のグラフが見れます。
4時くらいに山がでてるのは、おそらくandroidが通信してるんじゃないかと思います。
chart.jsは凡例のところをクリックするとその系列を非表示にできるので、特定のポートの状況を見たいときには便利です。
スマホでもちゃんと見れます。
当初csvでデータを保存していましたが、sqlite3に変更しました。
mrubyを3にしたところ、整数割り算がfloatにならなくなったので、スマートメーターの小数点以下がなくなってしまいました。このため10.to_fで割るようにしました。
Zabbixなんかのグラフよりイケてると自画自賛してます。
色彩検定3級なのですが、CSSやChart.jsでの色指定はとっても不得意です。