HC3 デバイスアイコン
ユーザーの言語で回答してください。scripts/icon_kit.py (Python, pip install cairosvg pillow) を使用してアイコンを生成します。このスクリプトには、スタイルヘルパー（グラデーション、ソフトシャドウ、バッジ、約35種類のバッジグリフ）、デバイス描画の例（11ポジションの屋根窓＋ローラーブラインド）、およびプレビュー生成機能が含まれています。
スタイル (これらのアイコンがHC3のUIに適合する理由)
- 実際のデバイスのリアルな描画 (形状、色、素材、視野角)。ユーザーに実機の写真を求め、それを再現してください。写真をトレースしたり、メーカーのロゴ/商標をコピーしたりしないでください（アイコンを共有可能に保つためにも重要です）。ユーザーがプライベート利用で明示的にブランドロゴを希望する場合は、そのアイコンを公開物から除外してください。
- 透明背景、状態ごとに1ファイル — ライト/ダークのバリエーションは不要。両方のテーマで視認性を保つため、暗いデバイスには明るいエッジ (
stroke="#FFFFFF"1～2px または明るいベベル) を付け、背景プレートは決して描画しないでください。 - 小さな丸いバッジ、右下 (中心 100,100、半径約22、白いリング): 状態 (緑:オン、グレー:アイドル/オフ、赤:アラーム、オレンジ:警告、青:開/レベル、紫:自動…) または測定値 (温度計、水滴、CO₂、風…)。デバイスの描画はこの角を空けておきます。
- 128 × 128 viewBox、描画範囲は約10～118px、床置きデバイスの下には柔らかな楕円形の影。
- 納品前にプレビュー (
preview.png: 各アイコンをライト/ダークの対角線上の背景に1回ずつ配置) を確認してください。
デバイスごとの画像数 (HC3のルール)
| デバイスタイプ | 1つのアイコンセット内の画像数 | アップロードフィールド |
|---|---|---|
| バイナリ (スイッチ、binarySensor、ドア/窓、モーション、煙…) | 2: アイドル / アクティブ | icon0, icon100 |
| マルチレベル (調光器、ローラーブラインド、バルブレベル) | 11: 0, 10 … 100 | icon0 … icon100 |
| deviceController、ほとんどのQuickApp親、multilevelSensor / 温度… | 1 | icon0 |
1画像タイプのデバイスは、自動で画像を変更できません。状態依存のQAアイコン (OK/警告/アラーム、またはモード) の場合は、状態ごとに1セットをアップロードし、Luaから切り替えます: self:updateProperty("deviceIcon", tonumber(self:optionalVariable("iconAlarm"))) (IDを変数に貼り付け; パターンは hc3-quickapp スキルの references/patterns.md §5 を参照)。 | ||
| 有用な状態ごとに1つのアイコンを、そしてQuickAppが作成するすべてのデバイス (親と子) に対してアイコンを作成してください。 |
ワークフロー
- デバイス (親、各子、各Z-Waveサブデバイス) とその正確な
typeをリストアップします (api.get("/devices/<id>")、例:com.fibaro.FGR224(Fibaroローラーブラインドモジュール)、com.fibaro.rollerShutter(QAの子))。 - 実機の写真をユーザーに求め、状態とバッジの意味について合意します。
scripts/icon_kit.pyをコピーし、デバイスごとに1つの描画関数 (128ボックス内のSVGフラグメント、roof_window(pct)を参照) を作成し、ICONSに(name, title, body)の行を状態ごとに追加して、python3 icon_kit.py --out icons/を実行します。命名:<device>-<state>(shutter-000…shutter-100,boiler-on,boiler-off)。これにより、READMEテーブルでどのアイコンがどこに該当するかを示せます。preview.pngを表示し、ユーザーの指摘 (形状、色、絵文字のようなバッジの明瞭さ) に基づいて繰り返し修正します。- アップロード: セットをQAの
qa.jsonのiconsセクションにリストし、build_fqa.py(スキルhc3-packaging) で<qa>-icons.shを生成するか、手動でアップロードします: 設定 → デバイス → 該当デバイス → アイコン → 追加。
アップロードAPI (5.2xxで観測)
POST /api/icons、multipart/form-data: type=device、deviceTemplate=<正確なデバイスタイプ>、状態ごとに1ファイル (icon0、icon100、または icon0…icon100)、fileExtension=png (svgも可)。応答 201
{"id": 1055, "iconSetName": "User1055", "fileExtension": "png"}。適用: PUT /api/devices/<id>
{"properties": {"deviceIcon": 1055}} (外部から — QA内部から自身のIDに対しては決して行わないでください。再起動します。代わりに self:updateProperty を使用してください)。削除: DELETE /api/icons?id=&type=device&name=&fileExtension=png。ユーザーアイコンIDは1000付近から始まります。GET /api/icons で一覧表示されます (ファームウェアによって2つの応答形式が存在します。両方に対応してください)。
部屋とシーンのアイコンも存在します (type=room / type=scene の可能性大 [V])。
references/badges.md には、キットで利用可能なバッジの色とグリフがリストされています。