Construye este panel de Home Assistant en aproximadamente una hora

• AVR Maestro está vinculado a Home Assistant y se ha sincronizado. La guía de configuración lo explica. Deberías poder ver tus controles en Home Assistant antes de crear nada encima de ellos.
• Tu receptor está añadido a Home Assistant. Ajustes › Dispositivos & servicios › Añadir integración › Denon AVR y, a continuación, su IP local. Esto es lo que da al panel su estado en tiempo real.
• Tu receptor está encendido mientras lo construyes. La mitad de lo que vas a escribir lee valores en vivo, y un receptor en espera casi no publica nada.

Este panel se alimenta de dos fuentes, y la diferencia importa en cada paso que sigue.

Las cuatro están en la tienda HACS predeterminada. En Home Assistant: HACS › Frontend › Explorar & descargar repositorios, busca el nombre, pulsa Descargar y recarga el navegador.

Cada fragmento de esta página usa dos marcadores de posición. Búscalos una sola vez y el resto es copiar y pegar.

• media_player.your_receiver → Ajustes › Dispositivos & servicios › tu receptor › la entidad del reproductor multimedia. Algo como media_player.marantz_cinema_30.
• script.avr_maestro_MAC_... → Herramientas para desarrolladores › Estados, y escribe avr_maestro en el filtro de entidades. Aparece toda tu lista de controles.

La parte central de cada ID de script es la dirección MAC de tu receptor, doce caracteres en minúscula, la misma en todos. Cópiala una vez. Donde esta página escribe MAC, pon la tuya.

1. 1. Ajustes › Paneles › Añadir panel › Nuevo panel desde cero. Ponle el nombre que quieras.
2. 2. Ábrelo y pulsa el icono del lápiz, arriba a la derecha, para editar.
3. 3. Añade una vista y elige el diseño Secciones. No Masonry. Secciones es lo que hace que se reorganice correctamente en el teléfono.
4. 4. En los ajustes de la vista, establece Columnas máximas en 3 y activa Colocación densa de secciones.

A partir de aquí, cada paso consiste en añadir una sección y pegar tarjetas en ella. Para pegar YAML, usa el menú de tres puntos de una tarjeta y elige Editar en YAML, o el menú de tres puntos del panel para abrir el Editor de configuración en bruto y pegarlo todo de una vez.

# 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

Empieza por lo más sencillo del tablero, para saber que tus ID de entidad son correctos antes de construir nada complicado. Añade una sección, añade una tarjeta, Editar en YAML y pega:

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 estándar. No hace falta HACS.

Púlsalo. Si el receptor cambia, tus ID son correctos y todo lo que sigue funcionará. Si no pasa nada, vuelve al paso 2.

Este es el patrón que merece la pena aprender, y cada botón de fuente y de surround del tablero es una copia suya. La tarjeta envía un script y se colorea a partir de la entidad del receptor, de modo que la entrada en la que estás se ilumina y las demás no.

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

Cambia tres cosas por entrada: el script, el icono y la cadena con la que se compara.

Dos cosas que debes hacer bien, o un botón nunca se iluminará:

• Compara con lo que tu receptor realmente reporta. Herramientas para desarrolladores › Estados, tu entidad de reproductor de medios, y lee los atributos source_list y sound_mode_list. Esas son las cadenas exactas. Compara en minúsculas, como arriba.
• Una entrada renombrada reporta su nuevo nombre. Renombra GAME1 a «Xbox» en el receptor y reportará Xbox, mientras que el control de AVR Maestro sigue llamándose input_game1. Compara con lo que reporta el receptor, no con el nombre del script.

Los modos surround usan la misma tarjeta con sound_mode en lugar de source.

Un título sin más es espacio desaprovechado. Pon el valor en vivo debajo y «Fuentes» pasa a ser «Fuentes / Ahora en 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

La cuadrícula de dos líneas es lo que coloca la etiqueta debajo del título en lugar de al lado.

Cambia attributes.source por attributes.sound_mode en el encabezado de Surround, y así con el resto.

Home Assistant reporta el volumen como una fracción. Nadie pone un receptor a «0.67». Una línea de matemáticas lo arregla y toda la sección empieza a parecerse a un receptor.

# 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

Lee el nombre del script en lugar de escribirlo, y al renombrar una Escena en AVR Maestro el botón cambia de nombre sin tocar el panel.

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

Las dos llamadas a replace() recortan el prefijo y el nombre del receptor del nombre descriptivo.

Merece la pena dedicar un minuto extra a la segunda línea. Un muro de botones con nombres evocadores no te dice nada a las 11 de la noche; una línea que indique qué restaura cada uno te dice cuál pulsar.

Home Assistant registra la entidad de reproductor de medios del receptor como cualquier otra, así que obtienes un historial de escucha gratis. Todo lo que sigue sale de esa única entidad: sin sensores adicionales, sin ayudantes, sin nada que configurar antes.

La línea de tiempo de estados simple no necesita ninguna tarjeta personalizada y es la que más merece la pena tener:

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

Encendido, apagado y qué estaba haciendo, a lo largo de una semana.

El volumen en dB usa la misma conversión que el paso 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 con fill: last convierte eventos dispersos en una línea continua. El eje y tiene que ir en apex_config para que surta efecto.

Un promedio diario y un pico convierten una línea con picos en algo con forma:

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'; }"

Dos series del mismo atributo, agrupadas por día.

Y los dos que responden a «qué veo realmente y con qué»: la fuente y el modo surround, trazados como una línea de tiempo de cuál estaba seleccionado.

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'; }

Pon tus propias fuentes en el array transform y en los dos arrays de formateadores. Mantén el índice 0 como «Other».

Un eje de gráfico necesita números, así que transform asigna una posición a cada nombre de fuente y los formateadores la traducen de vuelta para las etiquetas y la información emergente. Haz que la asignación sea total: null (receptor apagado) sigue siendo un hueco, y todo lo que no esté en tu lista cae en «Other», de modo que nunca se puedan confundir. La misma tarjeta con sound_mode te da el modo surround, con las cadenas en mayúsculas exactamente como las reporta tu receptor.

La vista completa, con cada sección y cada tarjeta, con marcadores de posición en lugar de ID de entidad.

1. 1. Descarga el YAML de la vista.
2. 2. Ábrelo en cualquier editor de texto y sustituye dos cadenas, en todos los lugares donde aparezcan: YOUR_RECEIVER por el nombre de tu entidad de reproductor de medios, y YOURMAC por los doce caracteres de tu receptor del paso 2.
3. 3. En Home Assistant, abre tu panel, el icono del lápiz, el menú de tres puntos, el Editor de configuración en bruto, y pégalo como una vista.

Antes de pensar que lo has construido mal: algunos no pueden iluminarse, y conviene saber cuáles.

Un botón solo puede mostrar su estado si Home Assistant puede leerlo, y lee tu receptor desde dos lugares. La integración Denon AVR publica lo básico en la entidad de reproductor de medios. AVR Maestro publica el resto: crea un sensor Status Bridge, sensor.avr_maestro_your_receiver, y escribe en él como atributos las lecturas que ya tiene.

Ahora se pueden leer ambas columnas. Toma un valor del reproductor de medios de states['media_player.your_receiver'].attributes y un valor de Status Bridge con state_attr('sensor.avr_maestro_your_receiver','dirac_slot'), para que un botón se ilumine por el ajuste que realmente está activo en lugar de limitarse a lanzar el script que lo cambia.

Medido en el receptor con el que se construyó esto: la entidad de reproductor de medios incluye unos veinte de los sesenta controles, y el sensor Status Bridge publica unos cuarenta más. Entre los dos, un panel puede leer casi todo lo que puede cambiar - la diferencia entre un muro de botones y una superficie de control.

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

Tres estados, no dos.

• Los botones salen con un tercio del ancho esperado. En una sección que ocupa 3 columnas, la cuadrícula interna es de 36 columnas, no de 12. Para cuatro botones en fila, establece grid_options: {columns: 9}. Para seis en fila, 6.
• El control deslizante de volumen muestra un botón de encendido en lugar de una barra. Eso es media_controls con on_off dentro. Establece media_controls: [].
• Las etiquetas se cortan. «Volume Down» se convierte en «Volume Do...». Acórtalo a «Vol Down», o ensancha el botón.
• Las descripciones de las escenas se recortan. Añade multiline_secondary: true.
• Una línea constante desaparece de un gráfico de apexcharts. Eso es experimental.color_threshold. Dibuja el trazo como un degradado vertical, y un segmento perfectamente horizontal tiene altura cero para degradar, así que se muestra invisible. Una sesión de 43 horas a un solo volumen desapareció por completo. Usa un color sólido.
• Se reorganiza solo en el teléfono. Las vistas de Secciones se apilan en una columna en anchos estrechos sin configurar nada adicional.

Primeros pasos · Pantalla de inicio · Escenas · Iconos personalizados · Sonido · Ecualizador gráfico · Altavoces · Por qué un control está bloqueado · El Asistente · Domótica · Zonas · Mando · Radio (FM/AM) · Visualización en pantalla · Ajustes · Idiomas · Controles de volumen · Copia de seguridad & restauración · Reproduciendo ahora & HEOS