(SDK)カスタム表示機能

SDK用の高度な機能となります。
SDKを利用して開発する時に便利な画面レイアウトなどを簡易的に確認する事ができます。
GUIDE01 SDKはこちら

テキストを最大5個配置（テキストは改行コード(/n)による複数行表示可能）
GIF画像/GIFアニメ画像を最大10個まで登録/読み込みして表示できます。(1画像max100kb程度)
JPEG画像を5個まで登録/読み込みして表示できます。(1画像max100kb程度)
同時に画像やテキストを表示できますが、表示数が増えると表示速度は遅くなります。
画面左上が(x0,y0)となります。
テキストの使用可能なフォントサイズ (16/20/24/28/32/36/48/56)

カスタム表示

ステータスバー
- 表示非表示切り替え
表示プレビュー画面
- テキストやGIF画像など、選択して位置を変更する事ができます。
サムネイル（on/off）
- GUIDE01に登録したGIF/画像をプレビュー表示に反映します。
登録ボタン
- GUIDE01にGIF/JPG画像を登録する画面を表示します
GIFアイコン
- タップすることでプレビュー画面に追加できます。
画像アイコン
- タップすることでプレビュー画面に追加できます。

レイヤ追加ボタン
テキスト追加ボタン
編集ボタン；選択したコンテンツを編集します
- 編集画面では変更したい数値だけを入力します。
複製ボタン：選択したコンテンツを複製します
削除ボタン：選択したコンテンツを削除します
送信ボタン：GUIDE01に現在のプレビュー画面を送信します。

プロトコル設定

OSC/HTTP/MQTT　に対応しており、
受信を開始する事で、各プロトコルでの文字表示や画像表示などを行う事ができます。

自分のスマホ端末のIPアドレス（ローカル、グローバル、ipsec4）
受信
- OSC/HTTP/MQTT　での受信アドレス(ポート)を設定します。
- 開始ボタンを押すと指定したポートでの受信を行います。
送信
- OSC/HTTP/MQTT　での送信先アドレス(ポート)を設定します。
- 入力設定
  「タッチイベント(GUIDE01)」「HID入力」「カスタム(高度)」
  選択状態にした入力情報を送信アドレスに対して送信します。
- 受信echo
  ONにするとOSC/HTTP/MQTTの全てに入力情報を送信します。
入出力ログ
- タッチ情報のログを表示します。
- テスト送信（テストメッセージを送信します）
受信ログ(OSC/HTTP/MQTT)
それぞれのプロトコルで受信したメッセージログを表示します。
送信ログ(BLE)

OSC

受信アドレス

/guide01/scene/load (JSON)

/guide01/image/send (画像JSON)

/guide01/show (全表示)

/guide01/hide (全非表示)

/guide01/clear (全クリア)

/guide01/ping (接続確認)

トランスポート

UDP

送信イベント (Outbound)

/guide01/event/touch [value, name]

/guide01/event/device [patternId, name]

/guide01/event/hid [label, kind]

/guide01/event/test ["ping"]

例: /guide01/event/touch 2 "DoubleClick"

HTTP

エンドポイント

POST /api/scene/load (JSON)

POST /api/image/send (画像JSON)

POST /api/show (全表示)

POST /api/hide (全非表示)

POST /api/clear (全クリア)

GET /api/ping (接続確認)

送信例 (curl)

curl -X POST http://<IP>:<PORT>

/api/scene/load \

-H "Content-Type: application/json"

-d @scene.json

送信イベント (Outbound)

POST /guide01/event/touch

POST /guide01/event/device

POST /guide01/event/hid

POST /guide01/event/test

body: {"address":"...","args":[...]}

例: {"address":"/guide01/event/touch",

"args":[2,"DoubleClick"]}

MQTT

購読トピック

guide01/scene/load (JSON)

guide01/image/send (画像JSON)

guide01/control/show (全表示)

guide01/control/hide (全非表示)

guide01/control/clear (全クリア)

guide01/control/ping (接続確認)

必要なもの

MQTTブローカー (mosquitto等)

送信例

mosquitto_pub -h <BROKER> \

-t guide01/scene/load \

-f scene.json

送信イベント (Outbound)

guide01/event/touch

guide01/event/device

guide01/event/hid

guide01/event/test

payload: {"address":"...","args":[...]}

共通項目

画像送信 (/image/send)

{"image": "<Base64エンコードJPEG>",

"width": 624, // リサイズ幅 (省略: 624)

"height": 405, // リサイズ高さ (省略: 405)

"quality": 80, // JPEG品質 (省略: 80)

"keepAspect": true // アスペクト比維持 (省略: true)

}

画像送信の注意

OSC (UDP): ~45KB以下の画像のみ

HTTP/MQTT: サイズ制限なし

受信 -> リサイズ -> BLE送信

例1: テキストのみ (必須フィールドのみ)

{"layers":[{"layerId":0,"elements":[

{"type":"text","text":"Hello",

"x":220,"y":10,"fontSize":36,

"colorR":255,"colorG":255,"colorB":255}

]}]}

例2: GIF + テキスト

{"showStatusBar":false,

"layers":[{"layerId":0,"elements":[

{"type":"gif","id":0,

"x":0,"y":0,"width":624,"height":405},

{"type":"text","text":"Overlay",

"x":220,"y":180,"fontSize":48,

"colorR":255,"colorG":255,"colorB":0}

]}]}

例3: 複数レイヤー (全フィールド)

{"version":"1.0.0",

"showStatusBar":true,

"metadata":{"name":"Demo"},

"layers":[

{"layerId":0,"name":"背景",

"isVisible":true,"elements":[

{"type":"image","id":0,

"x":0,"y":0,"width":624,"height":405}

]},

{"layerId":1,"name":"GIF",

"elements":[

{"type":"gif","id":0,

"x":10,"y":10,"width":100,"height":100}

]},

{"layerId":2,"name":"テキスト",

"elements":[

{"type":"text","text":"Title",

"x":220,"y":10,"fontSize":36,

"colorR":255,"colorG":255,"colorB":255}

]}

フィールド (※=オプション)

--- トップレベル ---

layers 必須レイヤー配列

showStatusBar ※ def: true

version ※ def: "1.0.0"

metadata ※ {name, description, ...}

--- レイヤー ---

layerId 必須 0-255

elements 必須要素配列

name ※ def: "レイヤー"

isVisible ※ def: true

--- text 要素 ---

type 必須 "text"

text 必須 UTF-8 (max 80byte)

x, y 必須座標 (0-624, 0-405)

fontSize 必須 16/20/24/28/32/36/48/56

colorR/G/B 必須 0-255

--- gif / image 要素 ---

type 必須 "gif" or "image"

id 必須 GIF:0-9, Image:0-4

x, y 必須座標

width,height 必須 0(元) or 20-624/405