Home Assistantのプロジェクターダッシュボードを約1時間で作る

• Projector PilotがHome Assistantにリンクされている。セットアップガイドでは、サインインとプロジェクターの状態を送信のオンについて説明しています。この上に何かを構築する前に、Home Assistantにプロジェクターがセンサーとして表示されていることを確認してください。
• 少なくとも一度は同期済みである。アプリのブロックをコピーをconfiguration.yamlに貼り付けてHome Assistantを再起動した後、設定 › ホームオートメーション › Home Assistant › HAと同期を実行します。これにより、以下のコントロールボタンがすべて呼び出すスクリプトが作成されます。
• 作業中はプロジェクターの電源が入っている。以下のピクチャー属性は、スタンバイ中のプロジェクターではほとんど空欄になります。

このダッシュボードには2つの情報源があり、以降のすべてのステップでその違いが重要になります。

4つとも HACS の標準ストアにあります。Home Assistant でHACS › フロントエンド › リポジトリを探す&ダウンロードを開き、名前を検索してダウンロードしたら、ブラウザを再読み込みしてください。

このページのすべてのスニペットは2つのプレースホルダーを使います。一度だけ自分のものを調べれば、あとはコピー＆ペーストで済みます。

• sensor.YOUR_PROJECTOR → Home Assistantの開発者ツール › 状態で、projector_pilotで絞り込みます。たとえばsensor.projector_pilot_epson_qb1000b_qb1000wのような名前が見つかります。
• YOURSERIAL → アプリを開き、設定 › ホームオートメーション › Home Assistantへ進みます。シリアル番号由来のIDがそこに表示され、同期されたすべてのスクリプト名の中央部分になります。script.projpilot_YOURSERIAL_power_on、script.projpilot_YOURSERIAL_input_hdmi1などです。

ステップ1の「ブロックをコピー」と同期を済ませたら、開発者ツール › 状態をprojpilotで絞り込んで、同期されたコントロールの一覧をまとめて確認することもできます。

1. 設定 › ダッシュボード › ダッシュボードを追加 › 最初から新しいダッシュボード。名前は「Projector Pilot」にします。
2. 開いて、右上の鉛筆アイコンで編集モードにします。
3. ビューを追加します。どちらのレイアウトでも動作しますが、実際のボードはカードを縦に重ねる既定のスタックを使っており、貼り付けも最も簡単です。
4. YAMLを貼り付けるには、カードの3点メニューからYAMLで編集を選ぶか、ダッシュボードの3点メニューから設定の直接編集を選んでビュー全体を一度に貼り付けます。

ビュー自体の設定を手入力したい場合は次のとおりです。

title: Projector Pilot
views:
- title: Projector Pilot
  path: projector-pilot
  icon: mdi:projector
  cards: []

まずは値を読み取るだけのものから始め、コマンドを送るものに触れる前に、エンティティIDが正しいことを確認します。これはプロジェクターセンサーが存在すれば、ブロックのコピーも同期も不要で、すぐにライブ表示されます。カードを追加し、YAMLで編集を開いて貼り付けます。

type: custom:mushroom-template-card
primary: Brightness
secondary: '{{ state_attr(''sensor.YOUR_PROJECTOR'',''brightness'') }}'
icon: mdi:brightness-6
icon_color: green
layout: vertical
fill_container: true
card_mod:
  style: 'ha-card { background: rgba(18,26,20,0.60); border: 1px solid rgba(61,220,107,0.20);
    border-radius: 16px; box-shadow: 0 6px 22px rgba(0,0,0,0.32); backdrop-filter: blur(8px);
    min-height: 104px; }'

同じ形で、センサーが持つ約80個の属性のどれでも読み取れます。brightnessをcontrast、gamma、color_temp、hdr_pq、lamp_hoursなど、タイルに表示したいものに入れ替えてください。

保存します。実際の数値や言葉が表示されれば、エンティティIDは正しく、以下の手順もすべて動作します。空欄になる場合は、ステップ2に戻ってください。

ただのタイトルでは味気ありません。これはcard-modのグラデーション背景を付けたmarkdownカードで、タイルの山を名前付きのセクションに変える役割を果たします。ボード上のすべてのセクションは、ラベルと絵文字だけを変えたこのカードで始まります。

type: markdown
content: '🔌    **POWER & SOURCE**'
card_mod:
  style: 'ha-card { background: linear-gradient(135deg, rgba(61,220,107,0.30), rgba(16,120,60,0.30));
    border: 1px solid rgba(61,220,107,0.45); border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
    ha-markdown { padding: 12px 20px !important; } ha-markdown p { margin: 0 !important;
    letter-spacing: 3px; color: #eafff0; font-size: 14px; font-weight: 700; }'

絵文字コードとラベルのテキストを変更してください。card-modのブロックはどのセクションでも同一です。

これは値を読むだけでなくコマンドを送るため、先にスクリプトが存在している必要があります。呼び出すscript.projpilot_YOURSERIAL_power_onは、アプリが「ブロックをコピー」の内容をconfiguration.yamlに貼り付け、Home Assistantを再起動し、HAと同期をタップした後に初めて書き込まれます。

type: custom:mushroom-template-card
primary: Power On
icon: mdi:power
icon_color: green
layout: vertical
fill_container: true
tap_action:
  action: call-service
  service: script.projpilot_YOURSERIAL_power_on
card_mod:
  style: 'ha-card { background: linear-gradient(135deg, rgba(61,220,107,0.16), rgba(16,90,46,0.20));
    border: 1px solid rgba(61,220,107,0.34); border-radius: 16px; box-shadow: 0 6px 22px rgba(0,0,0,0.32);
    min-height: 92px; }'

電源オフ、スクリーンブランク、HDMI 1、HDMI 2、A/Vミュート、カラーモード、レンズメモリーも同じカードで構いません。変更するのはラベル、アイコン、serviceだけです。

ボード上部のヒーローはbutton-cardです。大きな電源状態、複数の属性から組み立てた1行サマリー、そして枠線だけでなくカード全体に施したグリーングラスの演出で構成されます。

type: custom:button-card
entity: sensor.YOUR_PROJECTOR
name: Epson QB1000
show_state: true
show_label: true
size: 48px
state_display: '[[[ return entity.state==''on'' ? ''Powered on'' : ''Standby''; ]]]'
label: '[[[ var a=entity.attributes; return (a.input||''-'')+''  •  ''+(a.color_mode||''-'')+
  ''  •  ''+(a.video_range||''-'')+''  •  ''+(a.lamp_hours||0)+''  h''; ]]]'
styles:
  card:
  - height: 176px
  - background: linear-gradient(135deg, rgba(61,220,107,0.32), rgba(11,64,34,0.6))
  - border: 1px solid rgba(61,220,107,0.5)
  - border-radius: 22px
  - box-shadow: 0 12px 36px rgba(0,0,0,0.42)
  - padding: 20px
  state:
  - color: '[[[ return entity.state==''on'' ? ''#3ddc6b'' : ''#8a9'' ]]]'

インストールごとに変わる部分だけに絞っています。完全なカードにはアイコン、名前、ラベルのグリッド位置の設定も含まれます。すべてはステップ10のダウンロードをご覧ください。

もっとスリムなストリップがよいですか? mushroom-chips-cardなら、電源状態、入力、カラーモード、ビデオレンジ、ランプ使用時間という小さなチップ1行で同じ役割を果たします。それぞれstate_attr('sensor.YOUR_PROJECTOR', ...)を読み取るテンプレートです。ボードの上部には、どちらか一方だけを使ってください。

アプリで保存したシーンは、同期するとそれぞれscript.projpilot_YOURSERIAL_scene_<id>という名前のスクリプトになります。そのタイルは、ステップ6のコントロールボタンカードと同じもので、シーン名とアイコンを付けたものです。

type: custom:mushroom-template-card
primary: Movie Night
icon: mdi:movie-open
icon_color: green
layout: vertical
fill_container: true
tap_action:
  action: call-service
  service: script.projpilot_YOURSERIAL_scene_YOURSCENE1
card_mod:
  style: 'ha-card { background: linear-gradient(135deg, rgba(61,220,107,0.16), rgba(16,90,46,0.20));
    border: 1px solid rgba(61,220,107,0.34); border-radius: 16px; box-shadow: 0 6px 22px rgba(0,0,0,0.32);
    min-height: 92px; }'

YOURSCENE1は、アプリの同期済みコントロール一覧でそのシーンに表示されているIDに置き換えてください。シーン1つにつきタイル1つを、horizontal-stackの中に置きます。

プロジェクターセンサーは他のセンサーと同様にHome Assistantが記録するため、lamp_hoursには履歴が最初から備わっています。追加のセンサーもヘルパーも事前設定も不要です。メンテナンスセクションに配置します。

type: custom:mini-graph-card
entities:
- entity: sensor.YOUR_PROJECTOR
  attribute: lamp_hours
  name: Laser hours
name: Laser hours
icon: mdi:lightbulb-on-outline
line_color: '#3ddc6b'
line_width: 4
hours_to_show: 336
points_per_hour: 0.5
height: 96
animate: true
card_mod:
  style: 'ha-card { background: rgba(18,26,20,0.60); border: 1px solid rgba(61,220,107,0.20);
    border-radius: 16px; box-shadow: 0 6px 22px rgba(0,0,0,0.32); backdrop-filter: blur(8px); }'

336時間は2週間です。レーザーやランプの使用時間は急に飛ばず着実に増えていくので、通常は2週間の期間があれば、グラフが平坦に見えずに傾向を把握できます。

完成ビューです。このページの冒頭のスクリーンショットにあるすべてのセクションとカードを含み、エンティティIDの代わりにプレースホルダーを入れています。

1. ビューのYAMLをダウンロード。
2. 任意のテキストエディターで開き、出現するすべての箇所で、YOUR_PROJECTORをステップ2で調べたプロジェクターセンサーのエンティティIDに、YOURSERIALをステップ2で調べたシリアル番号由来のIDに置き換えます。
3. 下部近くのシーンセクションで、YOURSCENE1、YOURSCENE2、YOURSCENE3をご自身の3つのシーンIDに置き換えるか、実際のシーン数に合わせてタイルを追加・削除します。
4. Home Assistantでダッシュボードを開き、鉛筆アイコン、3点メニュー、設定の直接編集の順に進み、ビューとして貼り付けます。