この Home Assistant ダッシュボードを約1時間で作ろう

• AVR MaestroとHome Assistantがリンクされ、同期が完了しました。 セットアップガイドで手順を確認できます。この上に何かを構築する前に、Home Assistantでコントロールが表示されていることを確認してください。
• お使いのレシーバーがHome Assistantに追加されました。 設定 › デバイス&サービス › 統合を追加 › Denon AVR の順に進み、レシーバーのローカルIPを入力します。これがダッシュボードにリアルタイムの状態を届けます。
• 構築中はレシーバーの電源を入れておいてください。これから書く内容の半分はライブ値を読み取るもので、スタンバイ中のレシーバーはほとんど何も公開しません。

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

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

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

• media_player.your_receiver → 設定 › デバイス&サービス › お使いのレシーバー › メディアプレーヤーエンティティ。media_player.marantz_cinema_30 のような名前です。
• script.avr_maestro_MAC_... → 開発者ツール › 状態 を開き、エンティティのフィルターに avr_maestro と入力します。コントロールの一覧がすべて表示されます。

すべてのスクリプトIDの中間部分は、レシーバーのMACアドレスを小文字12文字で表したもので、どのスクリプトでも共通です。一度コピーしておいてください。このページでMACと書かれている箇所には、すべてあなたの値を入れます。

1. 1. 設定 › ダッシュボード › ダッシュボードを追加 › 最初から新しいダッシュボード。名前は自由に付けてください。
2. 2. ダッシュボードを開き、右上の鉛筆アイコンで編集モードにします。
3. 3. ビューを追加し、レイアウトはセクションを選びます。メイソンリーではありません。スマートフォンできちんと折り返されるのはセクションです。
4. 4. ビューの設定で最大列数を3にし、高密度セクション配置をオンにします。

ここから先は、セクションを追加してカードを貼り付ける、の繰り返しです。YAMLを貼り付けるには、カードの3点メニューからYAMLで編集を選ぶか、ダッシュボードの3点メニューからRawコンフィグレーションエディターを開いて全体を一度に貼り付けます。

# The view's own settings, if you prefer to type them
type: sections
title: AVR Maestro
icon: mdi:audio-video
max_columns: 3
dense_section_placement: true

複雑なものを作る前に、まず最もシンプルなものから始めて、エンティティIDが正しいことを確認しましょう。セクションを追加し、カードを追加して、YAMLで編集を開き、次を貼り付けます：

type: button
name: Pure Direct
icon: mdi:speaker
tap_action:
  action: perform-action
  perform_action: script.turn_on
  target:
    entity_id: script.avr_maestro_MAC_mode_pure_direct

標準の Home Assistant のみ。HACS は不要です。

タップしてみてください。レシーバーが反応すれば、IDは正しく、以降のすべてが動作します。何も起きなければ、ステップ 2 に戻ってください。

これは覚える価値のあるパターンで、ボード上のすべてのソースタイルとサラウンドタイルはこのコピーです。カードはスクリプトを送信し、レシーバーのエンティティから自分の色を決めるので、実際に選択中の入力だけが点灯し、ほかは消えたままになります。

type: custom:mushroom-template-card
entity: script.avr_maestro_MAC_input_cd
icon: mdi:disc
primary: CD
icon_color: >-
  {{ 'orange' if (state_attr('media_player.your_receiver','source') or '')|lower
     == 'cd' else 'grey' }}
layout: vertical
fill_container: true
tap_action:
  action: perform-action
  perform_action: script.turn_on
  target:
    entity_id: script.avr_maestro_MAC_input_cd
card_mod:
  style: |
    ha-card {
      border-radius: 14px;
    {% if (state_attr('media_player.your_receiver','source') or '')|lower == 'cd' %}
      background: linear-gradient(160deg, rgba(226,86,10,0.34), rgba(15,15,17,0.88));
      border: 1px solid rgba(255,122,24,0.80);
    {% else %}
      background: rgba(15,15,17,0.72);
      border: 1px solid rgba(255,122,24,0.14);
    {% endif %}
    }

入力ごとに変更するのは3点：スクリプト、アイコン、比較する文字列です。

次の2点を正しく設定しないと、タイルは決して点灯しません：

• レシーバーが実際に報告する値と比較してください。開発者ツール › 状態でメディアプレーヤーエンティティを開き、source_listとsound_mode_listの属性を確認します。これらが正確な文字列です。上記のとおり、小文字で比較してください。
• 名前を変更した入力は、新しい名前で報告されます。レシーバーで GAME1 を「Xbox」に変更すると、レシーバーはXboxと報告しますが、AVR Maestro のコントロールは引き続きinput_game1という名前のままです。スクリプト名ではなく、レシーバーが報告する値で照合してください。

サラウンドモードも同じカードで、sourceの代わりにsound_modeを使います。

ただのタイトルは無駄なスペースです。その下にライブの値を表示すれば、「ソース」が「ソース / 現在 Nvidia Shield」になります。

type: custom:button-card
name: Sources
icon: mdi:video-input-hdmi
color_type: label-card
entity: media_player.your_receiver
show_label: true
label: >-
  [[[ var v = states["media_player.your_receiver"].attributes.source;
      return v ? ("Now on " + v) : "Receiver in standby"; ]]]
tap_action:
  action: none
styles:
  grid:
    - grid-template-areas: '"i n" "i l"'
    - grid-template-columns: min-content auto
  name:
    - font-size: 13px
    - letter-spacing: 3px
    - text-transform: uppercase
    - justify-self: start
  label:
    - font-size: 11px
    - justify-self: start

ラベルをタイトルの横ではなく下に置くのは、2行のグリッドの役割です。

サラウンドの見出しなどでは、attributes.sourceをattributes.sound_modeに置き換えます。

Home Assistant は音量を小数で報告します。レシーバーを「0.67」に設定する人はいません。1行の計算で解決し、セクション全体が本物のレシーバーらしい表示になります。

# The readout
type: custom:mushroom-template-card
entity: media_player.your_receiver
icon: mdi:volume-high
primary: >-
  {% set v = state_attr('media_player.your_receiver','volume_level') %}
  {% if v is not none %}{{ (v * 100 - 80) | round(1) }} dB{% else %}Standby{% endif %}
secondary: Master volume
layout: vertical

# The slider. media_controls must be empty or the bar becomes a power button
type: custom:mushroom-media-player-card
entity: media_player.your_receiver
volume_controls:
  - volume_set
media_controls: []
show_volume_level: true

# A preset. 0.50 is master volume 50, which is -30 dB
type: custom:mushroom-template-card
entity: media_player.your_receiver
icon: mdi:weather-night
primary: Night
secondary: "-30 dB"
tap_action:
  action: perform-action
  perform_action: media_player.volume_set
  target:
    entity_id: media_player.your_receiver
  data:
    volume_level: 0.50

名前は手入力せず、スクリプトから読み取りましょう。AVR Maestro でシーン名を変更すると、ダッシュボードを編集しなくてもタイルの名前が変わります。

type: custom:mushroom-template-card
entity: script.avr_maestro_MAC_scene_1234567890123
icon: mdi:theater
primary: >-
  {{ state_attr('script.avr_maestro_MAC_scene_1234567890123','friendly_name')
     | replace('AVR Maestro - ', '') | replace(' (Your Receiver)', '') }}
secondary: >-
  {% set t = states.script['avr_maestro_MAC_scene_1234567890123'].attributes.last_triggered %}
  {{ 'recalled ' ~ relative_time(t) ~ ' ago' if t else 'not run yet' }}
multiline_secondary: true
tap_action:
  action: perform-action
  perform_action: script.turn_on
  target:
    entity_id: script.avr_maestro_MAC_scene_1234567890123

2つの replace() 呼び出しが、フレンドリー名からプレフィックスとレシーバー名を取り除きます。

2行目を付ける手間は、かける価値があります。凝った名前のボタンがずらりと並んでいても、夜11時にはどれを押せばいいかわかりません。何を復元するかが書いてあれば、すぐに選べます。

レシーバーのメディアプレーヤーエンティティは、ほかのエンティティと同様に Home Assistant に記録されるので、視聴履歴が無料で手に入ります。以下はすべてこの1つのエンティティから作られます。追加のセンサーもヘルパーも不要で、事前の設定も要りません。

シンプルな状態タイムラインはカスタムカードがまったく不要で、最も入れる価値があります：

type: history-graph
hours_to_show: 168
entities:
  - entity: media_player.your_receiver
    name: Receiver

1週間にわたる、オン、オフ、そして何をしていたか。

dB表示の音量には、ステップ 7 と同じ変換を使います：

type: custom:apexcharts-card
graph_span: 7d
header:
  show: true
  title: Master volume, last 7 days
series:
  - entity: media_player.your_receiver
    attribute: volume_level
    name: Master volume
    type: line
    curve: smooth
    unit: dB
    float_precision: 1
    transform: "return x == null ? null : Number(x) * 100 - 80;"
    extend_to: now
    group_by:
      duration: 1h
      func: last
      fill: last
apex_config:
  chart:
    height: 240
  yaxis:
    min: -60
    max: 0

group_by に fill: last を指定すると、まばらなイベントが連続した線になります。y軸の設定は apex_config に書かないと反映されません。

日別の平均とピークにすると、ギザギザの線が意味のある形になります：

type: custom:apexcharts-card
graph_span: 7d
span:
  end: day
header:
  show: true
  title: Master volume by day in dB, average and peak
series:
  - entity: media_player.your_receiver
    attribute: volume_level
    name: Day average
    type: column
    float_precision: 1
    transform: "return x == null ? null : Number(x) * 100;"
    group_by: {duration: 1d, func: avg, fill: 'null'}
  - entity: media_player.your_receiver
    attribute: volume_level
    name: Day peak
    type: line
    curve: smooth
    float_precision: 1
    transform: "return x == null ? null : Number(x) * 100;"
    group_by: {duration: 1d, func: max, fill: 'null'}
apex_config:
  yaxis:
    min: 0
    max: 80
    labels:
      formatter: "EVAL:function (v) { return (v - 80).toFixed(0); }"
  tooltip:
    y:
      formatter: "EVAL:function (v) { return v == null ? '' : (v - 80).toFixed(1) + ' dB'; }"

同じ属性から2つの系列を作り、日ごとにグループ化します。

そして「実際に何で、どの方式で観ているのか」に答える2つのグラフ：ソースとサラウンドモードを、どれが選択されていたかのタイムラインとして描画します。

type: custom:apexcharts-card
graph_span: 7d
span:
  end: day
header:
  show: true
  title: Source in use, last 7 days
series:
  - entity: media_player.your_receiver
    attribute: source
    name: Source
    type: line
    curve: stepline
    stroke_width: 3
    extend_to: now
    float_precision: 0
    transform: |
      if (x == null) return null;
      var m = ["Phono", "NET", "Xbox", "Nvidia Shield"];
      var i = m.indexOf(x);
      return i < 0 ? 0 : i + 1;
apex_config:
  yaxis:
    min: 0
    max: 4
    tickAmount: 4
    labels:
      formatter: >-
        EVAL:function (v) { return ["Other", "Phono", "HEOS Net", "Xbox",
        "Shield"][Math.round(v)] || ''; }
  tooltip:
    y:
      formatter: >-
        EVAL:function (v) { return v == null ? 'off' : ["Other", "Phono",
        "HEOS Net", "Xbox", "Shield"][Math.round(v)] || 'Other'; }

ご自身のソースを transform 配列と2つのフォーマッター配列に入れてください。インデックス 0 は「Other」のままにします。

グラフの軸には数値が必要なので、transformが各ソース名を位置に対応付け、フォーマッターがそれをラベルとツールチップ用に名前へ戻します。この対応付けは全域にしてください。null(レシーバーがオフ)は空白のままになり、リストにないものは「Other」に振り分けられるので、両者が混同されることはありません。同じカードでsound_modeを使えばサラウンドモードになります。文字列は、レシーバーが報告するとおりの大文字で記述してください。

すべてのセクションとカードを含む完成ビュー。エンティティIDの代わりにプレースホルダーが入っています。

1. 1. ビューのYAMLをダウンロード
2. 2. 任意のテキストエディターで開き、出現する箇所すべてで2つの文字列を置き換えます：YOUR_RECEIVERはお使いのメディアプレーヤーエンティティの名前に、YOURMACはステップ 2 で調べたレシーバーの12文字に置き換えます。
3. 3. Home Assistant でダッシュボードを開き、鉛筆アイコン、3点メニュー、Rawコンフィグレーションエディターの順に進んで、ビューとして貼り付けます。

構築を間違えたと考える前に：点灯できないタイルもあります。どれがそうなのかを知っておくと役立ちます。

タイルが状態を表示できるのは、Home Assistant がその状態を読み取れる場合だけで、レシーバーの情報は2か所から取得されます。Denon AVR 統合は、基本的な情報をメディアプレーヤーエンティティに公開します。残りは AVR Maestro が公開します。ステータスブリッジセンサーsensor.avr_maestro_your_receiverを作成し、アプリがすでに保持している読み取り値を属性として書き込みます。

現在は両方の列を読み取れます。メディアプレーヤーの値はstates['media_player.your_receiver'].attributesから、ステータスブリッジの値はstate_attr('sensor.avr_maestro_your_receiver','dirac_slot')で取得してください。これで、設定を変更するスクリプトを実行するだけでなく、実際に有効な設定のタイルが点灯します。

この構築に使ったレシーバーでの実測：メディアプレーヤーエンティティが持つのは60個のコントロールのうち約20個で、ステータスブリッジセンサーが約40個を追加で公開します。この2つで、ダッシュボードは変更できるもののほぼすべてを読み取れます。ボタンの壁と、本物の操作パネルとの違いはここにあります。

icon_color: >-
  {% set d = state_attr('media_player.your_receiver','dynamic_eq') %}
  {{ 'orange' if d is true else 'grey' }}
secondary: >-
  {% set d = state_attr('media_player.your_receiver','dynamic_eq') %}
  {% if d is none %}state not published{% elif d %}on{% else %}off{% endif %}

2つではなく、3つの状態。

• タイルの幅が想定の3分の1になる。3列にまたがるセクションでは、内部グリッドは12列ではなく36列です。4つ並べるにはgrid_options: {columns: 9}を設定します。6つ並べるなら 6 です。
• 音量スライダーがバーではなく電源ボタンになる。これは、on_offを含むmedia_controlsが原因です。media_controls: []を設定してください。
• ラベルが途切れる。「Volume Down」が「Volume Do...」になります。「Vol Down」に短縮するか、タイルを広げてください。
• シーンの説明が切れる。multiline_secondary: trueを追加してください。
• apexcharts のグラフから一定の線が消える。原因はexperimental.color_thresholdです。線を縦方向のグラデーションで描画しますが、完全に水平な線分は高さがゼロでグラデーションをかけられず、見えなくなります。同じ音量での43時間のセッションが、まるごと消えたこともあります。単色のcolorを使ってください。
• スマートフォンでは自動で折り返される。セクションビューは、狭い幅では追加設定なしで1列に積み重なります。

はじめに · ホーム画面 · シーン · カスタムアイコン · サウンド · グラフィックEQ · スピーカー · コントロールがロックされる理由 · アシスタント · ホームオートメーション · ゾーン · リモコン · ラジオ(FM/AM) · オンスクリーンディスプレイ · 設定 · 言語 · 音量コントロール · バックアップ&復元 · 再生中&HEOS