MENU

Soracom

Users

SORACOM Dynamic Image パネル

SORACOM Dynamic Image Panel ではデータに応じて表示する画像を動的に変更できます。

lagoon-soracomdynamicimage_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 の値を利用するためのクエリー

lagoon-soracomdynamicimage_panel

今回表示する画像データは AWS S3 にアップロードして利用します。 (ネットワーク経由でアクセスできる場所であればどこでも構いません。)

ファイル名を battery-{残りのバッテリー残量}-{充電しているか}.png としています。 充電しているかは 0 であれば充電されておらず、1 であれば充電中という想定です。

lagoon-soracomdynamicimage_panel

次に 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 がセットされます。

lagoon-soracomdynamicimage_panel

「+Add Variable」から 2 つ目の変数を設定します。 名前には 2 つ目の変数として「B-Charging」を指定します。 Minimum Value を 0、Maximum Value を 1 とし、Interval を 1 と設定し ON/OFF を 1 と 0 で表現します。

lagoon-soracomdynamicimage_panel

パネルに戻ると以下のように電池残量と充電されていない状態を表すことができました。

lagoon-soracomdynamicimage_panel

次に値によって画像が変化することを確認します。 以下のコマンドを実行しブラウザの再読み込みを実施してください。

curl -v -X POST -H "content-type:application/json" -d "{\"Battry\":90, \"Charging\":1}" http://harvest.soracom.io

以下のように電池残量が増加し充電中の状態を表す画像が表示されました。

lagoon-soracomdynamicimage_panel

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 を選択します。

lagoon-soracomdynamicimage_panel

次に Settings タブを設定します。 モードとして Harvest Files を選択し、Name に Harvest Data に連携した URL が格納させているカラムを選択します。

lagoon-soracomdynamicimage_panel

すると以下のように Harvest Files に格納したデータが表示されました。 URL は更新間隔に対して最新のデータの URL を参照します。

lagoon-soracomdynamicimage_panel

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 を選択します。

lagoon-soracomdynamicimage_panel

次に Settings タブを設定します。 モードとして URL を選択し、Name に Harvest Data に連携した URL が格納させているカラムを選択します。

lagoon-soracomdynamicimage_panel

すると以下のように Harvest Data に格納した URL の指す画像が表示されました。 URL は更新間隔に対して最新のデータの URL を参照します。

lagoon-soracomdynamicimage_panel