ESP Easy のダッシュボード機能でカスタムページを作る

公開 | 更新 
図6.カスタムページをブラウザ表示

ESP Easy のWebUIでは、センサの計測値や GPIO の状態をデバイス一覧で確認することは出来ますが、その GPIO の状態を操作させるようなボタンスイッチUIは備えておらず、操作の際にはコマンドを直接打ち込む必要がありました。 ESP Easy がひっそり実装している ダッシュボード機能 をカスタマイズし、 GPIO を操作出来るWebUIを作ります。

ESP EasyにGPIO出力向けプラグインは無い

ESP Easy公式でもリレーはプラグインが提供されるような類のデバイスではなく、DomoticzHome AssistantESP HomeなどからhttpのGetリクエストにより制御されるものと解説されています。

実際、デバイスを追加する際に出て来るプルダウンメニューでもリレーは収録されていないので、使いたいGPIOピンをSwitch Inputデバイスとして登録し、その状態だけは可視化することしか出来ません。

 

Mini Dashboard機能

自分でプラグイン開発したとしても、ESP Easyの更新の度にコンパイルするのも手間なので、他の方法を調べていたところ、ESP EasyにはMini Dashboard機能なる隠しページがあり、そこではユーザが自分でカスタマイズ出来ることが、具体例と共に謳われていました。

特に設定などはないこの隠しページは、次の要領で開くだけ。

前回、3つめのGPIOを利用可能にしたESP-01Sに、I2CバスでINA219直流電圧電流センサ、更にリレーを繋いだ構成では次のように表示されました。

図1.ESP Easy Mini Dashboard Page

図1.ESP Easy Mini Dashboard Page

Devices頁に登録された項目がここに表示されます。一番上のプルダウンは本来、Controllers頁に登録し連携中の他のESP Easyがあれば選択出来るのですが、Standaloneでは選択不能です。また、Devicesページに備わっているような、非同期処理による数値の定期自動更新機能は無いので注意が必要です。その辺りが「Experimental」と赤字で注意書きされている所以なのでしょう。

この機能では、予め用意されたページではなく、ユーザがhtmlベースで描いたページのファイル名に拡張子.espを付与し、SPIFFSへアップロードすることで、自由にカスタマイズすることが可能です。但し、RAMに展開する都合上、ファイルサイズは2kb以内に収めることが推奨されている他、フラッシュメモリの小さいESP-01Sでは、SPIFFSの容量にも留意する必要があるでしょう。尚、後者の懸念に対しては、以前記事にしたフラッシュメモリ載せ替え改造がお勧めです。

図2.ESP-01S 純正1MB vs 改造4MB ストレージ比較

図2.ESP-01S 純正1MB vs 改造4MB ストレージ比較

カスタムページを作成

上述の公式ページの例を参考に、次の項目で構成される簡単なhtmlページを描いてみました。尚、変数名はDevicesページに登録されている名前を引用します。この辺りの記述法は、ESP EasyのマクロのようなRules機能の記述法に準じているようです(Rulesについて詳細はこちらの公式ドキュメントを参照)。

  • ESP8266のVcc電圧 [SysInfo#Vcc]
  • INA219の計測電圧 [INA219#Voltage]
  • リレーNC接点の状態 [RelayNC#State]

リレーNC接点の状態は、その制御に使っているGPIO3の状態を表す0,1をアイコン画像のファイル名に組み入れることで、表示させるようにしました。NC接点なのでGPIOに対しその論理が以下のように逆になっています。

  • GPIO3=0 : NC接点閉→通電
  • GPIO3=1 : NC接点開→断電
図3.リレーNC状態アイコン

図3.リレーNC状態アイコン

作ったファイルをアップロード

作成したファイルは拡張子を.espとしなければならない以外には、任意に命名することが出来ますが、ESP Easyの各ページで既に使われている名前は避けた方が良いでしょう。リレーのNC接点の状態を表す2つのアイコン画像と共に、ESP-01SのSPIFFS領域へアップロードします。SPIFFS内のファイル操作は、ESP EasyのToolsページ下端にあるFile Browserから。SPIFFSには既にESP Easyのシステム設定や、ルール定義が保存されています。

図4.SPIFFS File Browser

図4.SPIFFS File Browser

UPLOADボタンを押すとファイル選択画面に移るので、ファイルを選択、アップロードします。アップロードが完了すると「Upload OK!」のメッセージと共に再起動を促されますが、このまま再びFile Browserページに戻り、残るファイルも一つずつアップロードしてしまいます。

図5.SPIFFS領域へアップロード

図5.SPIFFS領域へアップロード

全てのファイルをアップロードし終わって再起動の後、以下の要領でアップロードしたカスタムページへアクセスします。

図6.カスタムページをブラウザ表示

図6.カスタムページをブラウザ表示

GPIOのHi/Lo操作にhttpのGetリクエストのリンクを使うことは、コーディングは楽なのですが実際に使ってみると、ブラウザは「異なるページ遷移」と認識、履歴されるため、例えばブラウザの戻るボタン押したらリレースイッチが動いてしまった、と言う思わぬ振る舞いの恐れが有ります。

図7.ブラウザ履歴に残るGetリクエスト

図7.ブラウザ履歴に残るGetリクエスト

URIを汚さずGPIO操作

httpのGetリクエストへのリンクを用いるのではなく、JavaScriptのonClickイベントと非同期処理を使い、GPIO操作のクエリ文字列を呼び出すことで、ページ遷移することなくリレーの操作が可能になります。早速espファイルにJavaScriptを組んでみますが、ページをロードさせるとハングします。デバッグを重ねてようやくたどり着いた結論は、

『JavaScriptの「function」はカスタムespページ内に記述してはならないダメ文字』

と言う微笑ましい仕様でした。「function」以外のJavaScriptは問題無く動作する他、「function」を外部JSファイルに記述し、<script>タグでespページ内で呼び込むのも問題有りません。espファイルは<head>セクション内に外部JSファイルを呼び出す記述と、GPIOのボタン押下に関数名を貼りました。

外部JSファイルはGetリクエストを送出するだけの関数を組み、他のファイルと同じようにSPIFFSへアップロードします。

 

数値の非同期更新

ここまで組んで来たカスタムページは静的なページに過ぎず、ESP EasyのDevicesページのような、数値の自動更新されることはありません。GPIOのボタン操作でURL遷移が発生することもなくなった為、このページを再読込させてしまっても良いのですが、ESP Easyへ余計な負荷を掛けることになります。そこで、こちらのフォーラムスレッドを参考に、数値の自動更新の仕組みをJavaScriptで組み込みたいと思います。

ESP EasyのDevicesページをブラウザの開発コンソールでモニタリングすると、次のリクエスト先より定期的にJSON形式でデータを受け取っている様子が伺えます。

図8.ESP Easy Devicesページを開発コンソールで解析

図8.ESP Easy Devicesページを開発コンソールで解析

実際にブラウザで直接リクエストしてみると、次のように各センサ項目が収められたJSONデータを受け取ることが出来ました。データの末尾の TTL は更新頻度に使うインターバルで、これは各センサに設定されているインターバルの最小値が採用されているようです(単位はミリ秒)。

JSON生データから欲しいデータの番号を確認し、コーディングを進めます。jQueryを使ってスマートにコーディングしたいところですが、コンパクトにまとめることが最優先なので、全てNativeなJavaScriptとしました。また、これもespファイル内に「function」を記述すると動かなくなるので、外部JSファイルに書き出し、<body>タグの最後に呼び出すための<script>タグを配置しました。

出来上がったカスタムページをブラウザからアクセスし、ブラウザの開発ツールを使って定期的にデータ更新していることが確認出来ました。

図9.カスタムページを開発コンソールで確認

図9.カスタムページを開発コンソールで確認

ここまできて、ESP Easyを使ったGPIO操作性が格段に向上しました。次回はいよいよ、ESP-01SとINA219電圧電流センサ、リレーから成る、USBスマートコンセントの製作に進みます。

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA