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

スポンサーリンク

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

Webiopiは母艦のラズパイに入れて16連のリレーをつなげて水槽のポンプや充電器などのスイッチをオン・オフするボタンに使います。今回ディスプレイを設置したサブ機のラズパイはIPアドレスで母艦のラズパイに接続してWebIOPiの画面をキオスクモードで表示する。

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

WebIOPi インストール・設定

WebIOPiを使うとブラウザからラズパイを操作できるというのでやってみました。

どうやら開発は終了しているようで・・・残念です。

サイト

本家のサイト

The Raspberry Pi Internet of Things Toolkit - Now in two flavors

インストールで参考にしたページ

WebIOPiを使ってブラウザからRaspberry PiのGPIOを操作してみる | Developers.IO
どうも!大阪オフィスの西村祐二です。 最近、Raspberry Piをよくさわります。 PCやスマホのブラウザからRaspberry Pi を操作してみたいということはよくあると思います。 今回は、WebIOPiというも …

インストール・設定

準備できたらセットアップ実行

自動起動設定

systemctlで自動起動できるように設定するためwebiopi.serviceをダウンロードする。

webiopi.serviceファイル確認

起動・終了・再起動

起動確認

デバッグモードで起動

これで起動すると一応WebページにはアクセスできるがGPIOの状態がうまく表示されずリレーなどのオン・オフ操作もできなかった。これだとカスタマイズのページは404エラーになって表示されない。

[Ctrl]+[c]で終了してもコマンドプロンプトが表示されなかった。(Puttyで操作した時)

 

configをカスタマイズしてページを作った時は以下のようにしてデバッグモードでテストすることができた。

Webiopiページにブラウザでアクセス

WindowsのWebブラウザからアクセスしてみる

WindowsのFirefoxでラズパイのWebiopiのページにアクセスしてみます。

以下のようなBasic認証画面が表示されるのでwebiopi・raspberryを入力

webiopi

  • ID:webiopi
  • Pass:raspberry

ラズパイのGPIOの状況が表示されるページなどGPIOの状況を分かりやすい。

webiopi

このままだと、どのPINを何に使っているのか分からないので、専用ページを作っていきます。

Webiopi リレースイッチ用の専用ページを作る

HTML・Python・CSSでボタン操作できるページを作っていきます。

元のファイルをコピー

ディレクトリwebiopiとbackを作って元のファイルをコピーしておきます。

設定

設定を適用させるために再起動、しかし再起動に時間がかかります。

Grafanaの温度・湿度・水位など表示させる

iframeでWebiopiのページの中にGrafanaのグラフを表示させます。

こんな感じ↓に作ってsrcにGrafanaで取得したURLを入れます。

Grafanaでダッシュボードを作って表示させたいグラフを入れていきます。

右上のほうにあるShareアイコンを押してLinkでURLを取得。Webiopiのページは背景が白なのでThemeをLightを選びました。

Grafana設定

以下のようにCurrent Time RangeやTemplate Variablesもオフにしてみました。

設定後 Grafana

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

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

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

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

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

Configuration
Configuration documentation

対応方法は以下のように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連リレーを接続した様子など記事にしてないので後ほど詳しく説明していきますね。

コメント

タイトルとURLをコピーしました