SORACOM Dynamic Image パネル
バージョンに関する注意
- 当ドキュメントは SORACOM Lagoon Classic (旧バージョンの SORACOM Lagoon) に関して記載しています。現バージョンの SORACOM Lagoon に関するドキュメントは こちら を参照してください。
- SORACOM Lagoon Classic を契約しているお客様は、SORACOM Lagoon Classic を 2022 年 5 月 31 日まで利用できます。また、SORACOM Lagoon Classic の新規契約は受け付けておりません。
- 各バージョンに関する情報は SORACOM Lagoon のバージョン を参照してください。
- 現バージョンへの移行方法は 移行ガイド を参照してください。
SORACOM Dynamic Image Panel ではデータに応じて表示する画像を動的に変更できます。
SORACOM Dynamic Image Panel には 3 つのモードがあります。
Dynamic モード
Dynamic モードでは Harvest Data に格納されたデータを変数として URL を生成し、閾値を設定することで表示する画像を動的に変更できます。
Harvest のデータを準備します。SORACOM Air の SIM の挿さったデバイスから以下のコマンドを実行してください。
curl -v POST -H "content-type:application/json" -d "{\"Battry\":50, \"Charging\":0}" http://harvest.soracom.io
まずはメトリックタブに Harvest にデータ通信した IoT SIM の IMSI を入力します。今回は以下のように 2 つのクエリーを利用します。
- A : Battry の値を利用するためのクエリー
- B : Charging の値を利用するためのクエリー
今回表示する画像データは AWS S3 にアップロードして利用します。(ネットワーク経由でアクセスできる場所であればどこでも構いません。)
ファイル名を battery-{残りのバッテリー残量}-{充電しているか}.png としています。充電しているかは 0 であれば充電されておらず、1 であれば充電中という想定です。
次に Settings タブを設定します。「背景画像の URL」には先ほど AWS S3 に保存した画像の URL を指定します。今回はバッテリーの残量と充電しているかの変数に応じて表示する画像を出し分けたいので入力する URL は画像ファイル battery-0-0.png に対して battery- までとなります。今回 png ファイルを指定していますが JPEG 等の拡張子も選択いただけます。
また「+Add Variable」から変数を設定できます。名前には 1 つ目の変数として「A-Battry」を指定します。Minimum Value を 0、Maximum Value を 100 とし、Interval を 50 にしています。
クエリ A の結果 Battry の値が〜24 のとき変数に 0 がセットされ 25~74 の時変数に 50 がセットされ 75~の時に 100 がセットされます。
「+Add Variable」から 2 つ目の変数を設定します。名前には 2 つ目の変数として「B-Charging」を指定します。Minimum Value を 0、Maximum Value を 1 とし、Interval を 1 と設定し ON/OFF を 1 と 0 で表現します。
パネルに戻ると以下のように電池残量と充電されていない状態を表すことができました。
次に値によって画像が変化することを確認します。以下のコマンドを実行しブラウザの再読み込みを実施してください。
curl -v -X POST -H "content-type:application/json" -d "{\"Battry\":90, \"Charging\":1}" http://harvest.soracom.io
以下のように電池残量が増加し充電中の状態を表す画像が表示されました。
Harvest Files モード
Harvest Files モードでは Harvest Files から自動で同期されたファイルパスを URL とし、表示する画像を動的に変更できます。
Harvest Files の設定で Harvest Data 連携を ON にし Harvest Files のデータを格納します。
curl -v -X PUT --data-binary @<file-name>.png -H "content-type:image/png" http://harvest-files.soracom.io/<path>/<file-name>
メトリックタブに Harvest Files にデータ通信した SIM の IMSI を入力します。データフォーマットは URL (文字列) を扱うため Table を選択します。
次に Settings タブを設定します。モードとして Harvest Files を選択し、Name に Harvest Data に連携した URL が格納させているカラムを選択します。
すると以下のように Harvest Files に格納したデータが表示されました。URL は更新間隔に対して最新のデータの URL を参照します。
URL モード
URL モードでは Harvest Data に格納された URL で表示する画像を動的に変更できます。URL モードを選択した場合、Harvest Files の画像を参照することができません。Harvest Files のデータを参照する際には Harvest Files モードを選択してください。
Harvest Data にデータを格納します。
$ curl -v -X POST -H "content-type:application/json" -d "{\"LagoonImageURL\":\"https://dev.soracom.io/img/sis/CL/SISS021CL.png\"}" http://harvest.soracom.io
メトリックタブに Harvest Data にデータ通信した SIM の IMSI を入力します。データフォーマットは URL (文字列) を扱うため Table を選択します。
次に Settings タブを設定します。モードとして URL を選択し、Name に Harvest Data に連携した URL が格納させているカラムを選択します。
すると以下のように Harvest Data に格納した URL の指す画像が表示されました。URL は更新間隔に対して最新のデータの URL を参照します。
