Gravio製品紹介

特長

2026-10-01

Gravio LED Matrix Gen.2で現場の情報を、もっと分かりやすく。｜実践編1 HTTP接続でセンサーデータを表示

この記事では、Gravio LED Matrix Gen.2をWi-Fi経由のHTTPで接続して、センサーデータをLEDパネルに表示させるまでの手順をご紹介します。
こちらから、Gravio LED Matrix Gen.2の製品概要を先にご覧いただくと、スムーズに設定していただけます。

HTTP接続は設定がシンプルなので、まず1台で試してみたい方や、簡易的なデモを行いたい方におすすめです。

Gravio LED Matrix Gen.2 記事シリーズ

特長・活用シーン・接続方法の選び方
まず1台から試してみたい方
実践編1｜HTTP接続でセンサーデータを表示する（本記事）
複数台での運用・本番利用を想定する方
実践編2｜MQTT接続でセンサーデータを表示する

設定に必要なもの

今回の設定では、以下を使用します。

Gravio Business以上のライセンス
Gravio LED Matrix Gen.2本体
Gravio HubKit 6.3.0以降
本体を接続するWi-Fi環境
ペアリング済みのセンサー
※本記事では温度センサーを使用します

使用するアクションコンポーネント

LED Matrix Gen.2のアクションとして用意されているコンポーネントは次の3つです。

Gravio Matrix Gen2 Display：テキストや画像（GIF/BMP）の表示
Gravio Matrix Gen2 Control：画面クリア、明るさ設定、再起動
Gravio Matrix Gen2 Template：温度・湿度・気圧・CO2・開閉のテンプレート表示

‍

‍

今回は、センサーデータを単位やアイコン付きで表示できる「Gravio Matrix Gen2 Template」を使用します。
温度・湿度・気圧・CO2濃度・開閉など、用途に合わせた表示テンプレートが用意されているため、画面を一から作り込む必要はありません。

‍

設定の手順

LED Matrix Gen.2の初期セットアップ
HTTP接続のアクションを設定
トリガーの設定

難しい手順はないので、ぜひ最後までご覧ください。

‍

1. LED Matrix Gen.2の初期セットアップ

Wi-Fi経由でHTTP接続をする前に、まずはデバイス本体の初期設定を済ませておきましょう。

本体をUSB Type-Cケーブルで給電すると、Gravioロゴ、続いてデバイス名がパネルに表示されます。

Wi-Fiが未設定の状態では、本デバイスはAP（アクセスポイント）モードで起動し、”Gravio-MTX-XXXXXXXX”というSSIDがパネルに表示されますので、PCやスマホからそのSSIDに接続してください。
Wi-Fi接続時の初期パスワードは「graviohub」です。

接続できたら、ブラウザでhttp://192.168.6.1:8080を開き、以下の初期認証情報でログインします。

Username「gravio」 / Password「gravio」

‍

続いて、Configure WiFiから、ご利用のWi-FiのSSIDとパスワードを設定しましょう。

保存すると自動で再起動し、取得したIPアドレスがLEDパネルに表示されます。
これ以降は、http://<デバイスのIPアドレス>:8080で設定ページにアクセスできます。

2. HTTP接続のアクションを設定

ではここからは、本記事のメインパートであるHTTPでの接続方法について解説していきます。

まずはGravio Studioから、アクション設定を行いましょう。

新規アクションの追加から「LED Matrix 温度表示」など分かりやすい名前でアクションを追加しましょう。

アクション画面内に移動したら、ステップの追加から「Gravio Matrix Gen2 Template」のコンポーネントを追加します。

「Gravio Matrix Gen2 Template」で入力する情報は以下の通りです。

接続方法：HTTP
IPアドレス：手順1で確認したデバイスのIPアドレス
入力：表示したい種別（今回は「温度℃」）
コンテンツ：表示する値
フォントカラー / 明るさ：ご自由に設定してください

‍

実際のセンサーデータをパネルに流し込むには、アクション画面右上の「Pre Mappings」欄に以下の式を1行入力します。

cp.Content = tv.Data

tv.はトリガー変数を表すもので、tv.Dataにトリガーから渡されたセンサーの値が入ります。この1行だけで、センサーの値がコンテンツとして反映されるようになります。

いかがでしょうか。これで、HTTP経由でのアクション設定は完了です。
HTTP接続の場合、必要なのは実質IPアドレスだけで、ポート番号も証明書も要らない手軽な設定になります。

今回使用するTemplateコンポーネントは、センサーデータに合わせてレイアウトを自動描画する仕組みなので、自由な文字列を表示したい場合は、TemplateではなくDisplayコンポーネントの活用もオススメです。

3. トリガーの設定

次に、アクション設定が完了したら、そのアクションを任意のタイミングで起動させるトリガーも作成します。

こちらもアクションと同じように、新規トリガーの追加から「LED Matrix 温度表示」など分かりやすいトリガー名で追加しましょう。

今回はリアルタイムの温度データを表示させたいので、イベントトリガーを使用します。
トリガーの設定は以下のように行います。

時間タブ：設定は不要です
条件タブ：キーレイヤーと、あらかじめペアリングしておいた温度センサーの物理デバイスIDを選択します。
アクションタブ：作成したアクションを選択

‍

‍

最後にトリガーを保存して、有効化するためにスイッチをONにしたら設定は完了です。

では、さっそくテストしてみましょう。
センサーが温度データを取得すると、LEDパネルに温度データが表示されました！

‍

今回は温度センサーでの検証をしていますが、各センサーに合わせた「入力」プロパティを設定すればそのまま動くようになっています。
温度の場合、フォントカラーを「自動」に設定しておくと、10℃以下は青、30℃以下は緑、30℃を超えると赤、と自動で色分けされるので、現場に合わせた見やすい形でご活用ください。