Створіть цей дашборд для Home Assistant приблизно за годину

• AVR Maestro підключено до Home Assistant, і синхронізацію виконано. Посібник із налаштування розповідає, як це зробити. Перш ніж будувати щось на їхній основі, переконайтеся, що ваші елементи керування видно в Home Assistant.
• Ваш ресивер додано до Home Assistant. Налаштування › Пристрої & служби › Додати інтеграцію › Denon AVR, потім його локальна IP-адреса. Саме це дає панелі актуальний стан у реальному часі.
• Ваш ресивер увімкнено, поки ви будуєте. Половина того, що ви збираєтеся написати, читає поточні значення, а ресивер у режимі очікування майже нічого не публікує.

Цей дашборд живлять дві речі, і різниця між ними важлива на кожному кроці нижче.

Усі чотири є в стандартному магазині HACS. У Home Assistant: HACS › Frontend › Explore & Download Repositories, знайдіть назву, натисніть Download, потім перезавантажте браузер.

Кожен фрагмент на цій сторінці використовує два заповнювачі. Знайдіть свої один раз - і решта зводиться до копіювання та вставлення.

• media_player.your_receiver → Налаштування › Пристрої & служби › ваш ресивер › сутність медіаплеєра. Щось на кшталт media_player.marantz_cinema_30.
• script.avr_maestro_MAC_... → Інструменти розробника › Стани, і введіть avr_maestro у фільтр сутностей. Відобразиться весь список ваших елементів керування.

Середня частина кожного ID скрипта - це MAC-адреса вашого ресивера: дванадцять символів нижнього регістру, однакові в усіх. Скопіюйте її один раз. Скрізь, де ця сторінка пише MAC, підставте свою.

1. 1. Settings › Dashboards › Add Dashboard › New dashboard from scratch. Назвіть його як завгодно.
2. 2. Відкрийте його, потім натисніть значок олівця вгорі праворуч, щоб редагувати.
3. 3. Додайте подання й виберіть макет Sections. Не Masonry. Саме Sections забезпечує правильне перекомпонування на телефоні.
4. 4. У налаштуваннях подання встановіть Max columns на 3 і ввімкніть Dense section placement.

Відтепер кожен крок такий: додайте розділ, потім вставте в нього картки. Щоб вставити YAML, скористайтеся меню з трьома крапками на картці й виберіть Edit in YAML або меню з трьома крапками на дашборді, щоб відкрити Raw configuration editor і вставити все одразу.

# 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 сутностей правильні, перш ніж будувати щось складне. Додайте розділ, додайте картку, Edit in 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 %}
    }

Для кожного входу змініть три речі: скрипт, значок і рядок, з яким порівнюється значення.

Дві речі потрібно зробити правильно, інакше плитка ніколи не засвітиться:

• Порівнюйте з тим, що ваш ресивер справді повідомляє. Developer Tools › States, ваша сутність медіаплеєра, прочитайте атрибути source_list і sound_mode_list. Це точні рядки. Порівнюйте в нижньому регістрі, як вище.
• Перейменований вхід повідомляє нову назву. Перейменуйте GAME1 на «Xbox» на ресивері - і він повідомлятиме Xbox, тоді як елемент керування AVR Maestro, як і раніше, називається input_game1. Орієнтуйтеся на те, що повідомляє ресивер, а не на назву скрипта.

Режими об'ємного звуку - та сама картка, де замість source стоїть sound_mode.

Простий заголовок - це марний простір. Додайте під ним живе значення, і «Sources» перетвориться на «Sources / Now on 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

Саме дволінійна сітка розміщує підпис під заголовком, а не поруч із ним.

Замініть attributes.source на attributes.sound_mode у заголовку Surround і так далі.

Home Assistant повідомляє гучність як дріб. Ніхто не виставляє ресивер на «0.67». Один рядок математики це виправляє, і весь розділ починає виглядати як справжній ресивер.

# 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

Два виклики replace() обрізають префікс і назву ресивера з зручної назви.

Другий рядок вартий зайвої хвилини. Стіна ефектно названих кнопок об 11 вечора нічого не підкаже, а рядок із описом того, що відновлює кожна, підкаже, яку натиснути.

Сутність медіаплеєра ресивера Home Assistant записує, як і будь-яку іншу, тож історію прослуховування ви отримуєте безкоштовно. Усе нижче походить із цієї однієї сутності: жодних додаткових сенсорів, жодних помічників, нічого не потрібно налаштовувати заздалегідь.

Проста часова шкала станів узагалі не потребує користувацьких карток і є найкориснішою:

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

Увімкнено, вимкнено й що відбувалося, протягом тижня.

Гучність у 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'; }"

Дві серії з одного атрибута, згруповані за днями.

І два, що відповідають на питання «на чому і в чому я насправді дивлюся»: джерело та режим об'ємного звуку, побудовані як часова шкала того, що було вибрано.

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 і в обидва масиви форматерів. Залиште індекс 0 як «Other».

Вісь графіка потребує чисел, тому transform зіставляє кожну назву джерела з позицією, а форматери повертають її назад для підписів і підказки. Зробіть зіставлення повним: null (ресивер вимкнено) залишається проміжком, а все, чого немає у вашому списку, потрапляє в «Other», тож їх ніколи не сплутати. Така сама картка з sound_mode дає режим об'ємного звуку, з рядками у верхньому регістрі саме так, як їх повідомляє ваш ресивер.

Повне подання, кожен розділ і кожна картка, із заповнювачами замість ID сутностей.

1. 1. Завантажте YAML-файл подання.
2. 2. Відкрийте його в будь-якому текстовому редакторі й замініть два рядки скрізь, де вони трапляються: YOUR_RECEIVER - на назву сутності вашого медіаплеєра, а YOURMAC - на дванадцять символів вашого ресивера з кроку 2.
3. 3. У Home Assistant відкрийте свій дашборд, значок олівця, меню з трьома крапками, Raw configuration editor, і вставте його як подання.

Перш ніж вирішити, що ви зробили щось не так: деякі плитки не можуть засвітитися, і варто знати, які саме.

Плитка може показати свій стан, лише якщо Home Assistant може його прочитати, а ваш ресивер він читає з двох місць. Інтеграція Denon AVR публікує основні дані на сутності медіаплеєра. AVR Maestro публікує решту: він створює сенсор Status Bridge, sensor.avr_maestro_your_receiver, і записує на нього як атрибути показання, які вже має.

Тепер обидва стовпці доступні для читання. Беріть значення медіаплеєра з states['media_player.your_receiver'].attributes, а значення Status Bridge - з state_attr('sensor.avr_maestro_your_receiver','dirac_slot'), тож плитка підсвічується для налаштування, яке справді активне, а не лише запускає скрипт, що його змінює.

Виміряно на ресивері, на якому це створювалося: сутність медіаплеєра містить приблизно двадцять із шістдесяти елементів керування, а сенсор Status Bridge публікує ще близько сорока. Разом дашборд може прочитати майже все, що вміє змінювати, - різниця між стіною кнопок і справжньою панеллю керування.

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 %}

Три стани, а не два.

• Плитки виходять втричі вужчими, ніж ви очікуєте. У розділі на 3 колонки внутрішня сітка має 36 колонок, а не 12. Для чотирьох плиток у ряд встановіть grid_options: {columns: 9}. Для шести у ряд - 6.
• Повзунок гучності показує кнопку живлення замість смуги. Це media_controls з on_off всередині. Встановіть media_controls: [].
• Підписи обрізаються. «Volume Down» стає «Volume Do...». Скоротіть до «Vol Down» або розширте плитку.
• Описи сцен обрізаються. Додайте multiline_secondary: true.
• Рівна лінія зникає з графіка apexcharts. Це experimental.color_threshold. Він малює штрих вертикальним градієнтом, а ідеально горизонтальний сегмент має нульову висоту для градієнта, тому стає невидимим. 43-годинний сеанс на одній гучності зник повністю. Використайте суцільний color.
• Він сам перекомпоновується на телефоні. Подання Sections складаються в одну колонку на вузьких екранах без жодного додаткового налаштування.

Початок роботи · Головний екран · Сцени · Власні піктограми · Звук · Графічний EQ · Акустика · Чому елемент керування заблоковано · Асистент · Домашня автоматизація · Зони · Пульт · Радіо (FM/AM) · Екранне меню · Налаштування · Мови · Керування гучністю · Резервне копіювання & відновлення · Зараз відтворюється & HEOS