# (SDK)カスタム表示機能 :::warning * SDK用の高度な機能となります。 * SDKを利用して開発する時に便利な画面レイアウトなどを簡易的に確認する事ができます。 GUIDE01 SDKは[こちら](https://git.happylifecreators.com/guide-series-sdk/guide01) ::: :::info * テキストを最大5個配置（テキストは改行コード(/n)による複数行表示可能） * GIF画像/GIFアニメ画像を最大10個まで登録/読み込みして表示できます。(1画像max100kb程度) * JPEG画像を5個まで登録/読み込みして表示できます。(1画像max100kb程度) * 同時に画像やテキストを表示できますが、表示数が増えると表示速度は遅くなります。 * 画面左上が(x0,y0)となります。 * テキストの使用可能なフォントサイズ (16/20/24/28/32/36/48/56) ::: # カスタム表示 ![](https://minio.note.hlc.biz/outline/uploads/f657fcb4-7209-43fc-ac88-798013bccc94/3e53161c-f909-49b1-8248-eada74bffc4d/PfjRYAAAAGSURBVAMAb9DRis3gJ2sAAAAASUVORK5CYII= " =400x866") * ステータスバー * 表示非表示切り替え * 表示プレビュー画面 * テキストやGIF画像など、選択して位置を変更する事ができます。 * サムネイル（on/off） * GUIDE01に登録したGIF/画像をプレビュー表示に反映します。 * 登録ボタン * GUIDE01にGIF/JPG画像を登録する画面を表示します * GIFアイコン * タップすることでプレビュー画面に追加できます。 * 画像アイコン * タップすることでプレビュー画面に追加できます。 　 * ![](https://minio.note.hlc.biz/outline/uploads/f657fcb4-7209-43fc-ac88-798013bccc94/66fa9647-54b0-4a2a-a4c8-3f23bc537a73/HBRxHQAAAAZJREFUAwD+clcmoFn4qgAAAABJRU5ErkJggg== " =400x866")レイヤ追加ボタン * テキスト追加ボタン * 編集ボタン；選択したコンテンツを編集します * 編集画面では変更したい数値だけを入力します。 * 複製ボタン：選択したコンテンツを複製します * 削除ボタン：選択したコンテンツを削除します * 送信ボタン：GUIDE01に現在のプレビュー画面を送信します。 # プロトコル設定 OSC/HTTP/MQTT　に対応しており、 受信を開始する事で、各プロトコルでの文字表示や画像表示などを行う事ができます。 ![](https://minio.note.hlc.biz/outline/uploads/0d4b1ee7-f39c-4c30-9eec-d6789d17fd9b/aef3706b-a04b-41df-bd76-dda6ba3e57df/IMG_3287.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=SR3Mo6QkC3viJHEAaW6H%2F20261030%2Flocal%2Fs3%2Faws4_request&X-Amz-Date=20261030T073000Z&X-Amz-Expires=86400&X-Amz-Signature=adb4bbeaf8e0a16cd96a5b98a1fc81de8f7e724a811d989bcecf70fc9601194f&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =400x1026") ![](https://minio.note.hlc.biz/outline/uploads/0d4b1ee7-f39c-4c30-9eec-d6789d17fd9b/087b7355-3af6-4fae-b02b-da42064775a5/IMG_3288.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=SR3Mo6QkC3viJHEAaW6H%2F20261030%2Flocal%2Fs3%2Faws4_request&X-Amz-Date=20261030T073000Z&X-Amz-Expires=86400&X-Amz-Signature=eb6007b1d4c2db45711c868351d400801dd5e60e4aefc935db123825cebd0aa2&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =400x309") * 自分のスマホ端末の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://:` `  /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 \` `  -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": "",` ` "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`