ラズパイ3Bに7インチディスプレイ追加 + キオスクモードでボタン操作&グラフ表示用にする

スポンサーリンク

Webiopiをディスプレイに表示させてボタン操作をするのと、そのWebiopiの表示の中にGrafanaで作った水位や気温・湿度などを表示させる設定をしていきます。

この記事は複数のページに別れています

Grafana ログインしないで表示させる

キオスクモードで表示させたいので、Grafanaも再起動のたびにキーボードを使ってログインするのも面倒なのでログインしないでもGrafanaのグラフが表示されるようにする。

これでログインしないでも表示されるようになりました。

Grafana V6.2から表示されなくなった

V6.2からX-Frame-Options:denyになったので<iframe>の中にGrafanaのリンクを入れても表示されなくなった。

Configuration Docs

対応方法は以下のようにallow_embedding = trueを追加する。

これでアクセスを拒否されずに表示するようになった。

Webiopi ページの中にGrafana入れる

WebiopiのHTMLの中にこんな感じでiframeで入れてみた。

以下は、メインのラズパイ3B+のWebiopiで、ディスプレイを表示させるサブのラズパイ3B+にchromiumでWebiopiのページをキオスクモードで表示させています。(ちょっとややこしくなってきた)

WebiopiのHTML/py/cssの全文も載せておきます。

ディスプレイ表示用のWebiopi HTML

HTMLはこんな感じ↓でWebiopiでボタンを作って16連リレーをラズパイにつなげてオン・オフしてます。ついでにGrafanaのグラフを表示させるページもiframeで挿入します。

script.py

script.pyは最低限の設定

style.css

CSSも載せておきます。

メインで使っているラズパイと16連リレーを接続した様子など記事にしてないので後ほど詳しく説明していきますね。