Grafanaでデータに応じて画像を表示する

備忘録 Grafana スマートホーム

前回の記事 ではGrafanaのStatでテキストを表示しました。
でも、ホントはこんな感じで画像で表示したいですよねえ。

実際のところプラグインを使うだけでできちゃうのですが需要がないのか、はたまたプラグインの説明見ればわかるからなのか（それはそう）、日本語での解説がヒットしないのでメモしておきます。

Dynamic image panel

データに対応した画像を表示するには、プラグインDynamic image panelを利用します。

grafana.com

説明を見ると、

URLとメトリックとサフィックスを連結して画像を表示する。
ベースURL + アイコンフィールド + サフィックス を表示する。

とあります。

前回のDBを例にしてもうちょっと噛み砕いて説明すると、

使用中を示す画像のURLを http://ほげほげ.com/image/toilet1.png、空きを示す画像のURLをhttp://ほげほげ.com/image/toilet0.pngで準備します。

この場合は

  • ベースURL http://ほげほげ.com/image/toilet
  • アイコンフィールド test.exist (1=在室, 0=不在)
  • サフィックス .png

とすることで existの値に応じて所望のURLが生成されるわけです。

pythonで書くとこんな感じですね。

f'http://ほげほげ.com/image/toilet{test.exist}.png'

インストール

環境に応じてInstallationタブの通りインストールすればOKです。

私はRaspberry pi上にインストールしたので Installing on a local Grafanaに従ってgrafana-cliを使いました。

$ sudo grafana-cli plugins install dalvany-image-panel

インストールが終わったらGrafanaをリスタートします。

$ sudo systemctl restart grafana-server.service

設定

画像の準備は後回しにして、パネルの設定をしていきましょう。

まずは先ほどインストールしたパネルを選択します。右上のVisualizationのコンボボックスっぽいコントロールをクリックすると利用可能なVisualizationの中にDynamic image panelがあるので選択します。

URLの項目を埋めます。Base URLとSuffixはとりあえず先ほどの例で適当に埋めます。
また、Icon fieldは具体的なフィールドを指定してもいいですが、フィールドがひとつしかない場合はデフォルト値のFirst non time fieldでもOKです。

また、今回は画像を一つだけ表示したいので、Image optionsにある Single fillのチェックを入れます。

続いてクエリを設定します。
下記のように設定しても最後のレコードから１つだけ拾ってくれますが、ダッシュボードの表示区間内にデータがない場合表示をしてくれません。

それを避けるために 鉛筆のアイコンをクリックしてクエリを直接記述します。

上記の状態から直接記述モードに変更した場合、

SELECT "exist" FROM "test" WHERE $timeFilter ORDER BY time DESC LIMIT 1

こんなクエリ式が入ってます。WHERE $timeFilterが邪魔なので消してしまいましょう。

URLが存在しないので画像は表示されませんが、代替文字がパネル左肩に出ているので設定はうまくいったと思います。

画像の準備

希望に沿った画像をホストしているサービスがあって直リンクしてよければそちらを使えば良いですが、都合よく見つからないので自前で用意します。

GrafanaはRaspberry piで運用しているので nginx を導入しちゃえばいいです。

特にこだわりがなければ apt でインストールします。

$ sudo apt install nginx

上手いことインストールできたらサービスを有効にします

$ sudo systemctl start nginx.service
$ sudo systemctl enable nginx.service

起動したら http://ラズパイのアドレスでウエルカムページが表示されるはずです。

デフォルトだと /var/www/html がルートになっているので そこにディレクトリimageを掘って必要な画像ファイルをおきます。(occupied.pngとvacant.pngを置いてシンボリックリンクしました)

念の為ブラウザで表示できるか確認しておくと良いです。

ベースURL修正

早速 Grafana の設定に戻って URL を変更します。

サンプルで運用しているRaspberry piは iot.localで名前解決できるように設定していますので、先程設定した画像のURLはhttp://iot.local/image/toilet0.pngとなります。

ですので、ベースURLはhttp://iot.local/image/toiletになります。

正しく設定できたら画像が表示されて、晴れて冒頭のイメージ通りのダッシュボードが出来上がりました。

まとめ

時系列なグラフじゃなくて画像を表示したい事がそこそこあるのでこのパネルは重宝しています。

アイコンフィールドがデータベース即値なので、Statみたいにマッピングができるとより便利になる気がしています。

ちょっと自分で試すには学ぶボリュームが多いのでいつになるかわからないけどチャレンジしてみたいですね（やらないフラグ）