Créez ce tableau de bord Home Assistant en environ une heure

• AVR Maestro est lié à Home Assistant et la synchronisation est faite. Le guide de configuration explique comment. Vous devriez voir vos commandes dans Home Assistant avant de construire quoi que ce soit par-dessus.
• Votre récepteur est ajouté à Home Assistant. Paramètres › Appareils et services › Ajouter une intégration › Denon AVR, puis son IP locale. C'est ce qui donne au tableau de bord son état en direct.
• Votre récepteur est allumé pendant que vous construisez. La moitié de ce que vous allez écrire lit des valeurs en direct, et un récepteur en veille ne publie presque rien.

Deux sources alimentent ce tableau de bord, et la différence compte à chaque étape ci-dessous.

Les quatre se trouvent dans la boutique HACS par défaut. Dans Home Assistant : HACS › Interface › Explorer & télécharger des dépôts, cherchez le nom, cliquez sur Télécharger, puis rechargez votre navigateur.

Chaque extrait de cette page utilise deux paramètres fictifs. Trouvez les vôtres une fois, et le reste n'est plus que du copier-coller.

• media_player.your_receiver → Paramètres › Appareils et services › votre récepteur › l'entité lecteur multimédia. Quelque chose comme media_player.marantz_cinema_30.
• script.avr_maestro_MAC_... → Outils de développement › États, puis saisissez avr_maestro dans le filtre d'entités. Toute votre liste de commandes apparaît.

Le milieu de chaque ID de script est l'adresse MAC de votre récepteur, douze caractères en minuscules, identiques partout. Copiez-la une fois. Partout où cette page écrit MAC, mettez la vôtre.

1. 1. Paramètres › Tableaux de bord › Ajouter un tableau de bord › Nouveau tableau de bord à partir de zéro. Donnez-lui le nom que vous voulez.
2. 2. Ouvrez-le, puis cliquez sur l'icône crayon en haut à droite pour modifier.
3. 3. Ajoutez une vue et choisissez la disposition Sections. Pas Masonry. C'est Sections qui permet un réagencement correct sur téléphone.
4. 4. Dans les paramètres de la vue, réglez Colonnes maximales sur 3 et activez Placement dense des sections.

À partir de là, chaque étape consiste à ajouter une section, puis à y coller des cartes. Pour coller du YAML, utilisez le menu à trois points d'une carte et choisissez Modifier en YAML, ou le menu à trois points du tableau de bord pour accéder à l'éditeur de configuration brute et tout coller d'un coup.

# 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

Commencez par l'élément le plus simple du tableau, pour vérifier que vos ID d'entités sont corrects avant de construire quoi que ce soit de compliqué. Ajoutez une section, ajoutez une carte, Modifier en YAML, collez :

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 standard. Pas besoin de HACS.

Appuyez dessus. Si le récepteur réagit, vos ID sont corrects et tout ce qui suit fonctionnera. Si rien ne se passe, retournez à l'étape 2.

C'est le modèle qui vaut la peine d'être appris, et chaque tuile de source et de surround du tableau en est une copie. La carte envoie un script et se colore d'après l'entité du récepteur, de sorte que l'entrée sur laquelle vous êtes vraiment est allumée et les autres ne le sont pas.

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

Modifiez trois choses par entrée : le script, l'icône et la chaîne de comparaison.

Deux points à soigner, sinon une tuile ne s'allumera jamais :

• Comparez avec ce que votre récepteur indique réellement. Outils de développement › États, votre entité lecteur multimédia, lisez les attributs source_list et sound_mode_list. Ce sont les chaînes exactes. Comparez en minuscules, comme ci-dessus.
• Une entrée renommée indique son nouveau nom. Renommez GAME1 en « Xbox » sur le récepteur et il indique Xbox, alors que le contrôle AVR Maestro s'appelle toujours input_game1. Basez-vous sur ce que le récepteur indique, pas sur le nom du script.

Les modes surround utilisent la même carte, avec sound_mode à la place de source.

Un simple titre est de l'espace perdu. Placez la valeur en direct dessous et « Sources » devient « Sources / Actuellement sur 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

C'est la grille à deux lignes qui place l'étiquette sous le titre plutôt qu'à côté.

Remplacez attributes.source par attributes.sound_mode dans l'en-tête Surround, et ainsi de suite.

Home Assistant indique le volume sous forme de fraction. Personne ne règle un récepteur sur « 0.67 ». Une ligne de calcul règle le problème et toute la section se met à ressembler à un vrai récepteur.

# 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

Lisez le nom depuis le script au lieu de le saisir, et renommer une Scène dans AVR Maestro renomme la tuile sans aucune modification du tableau de bord.

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

Les deux appels replace() retirent le préfixe et le nom du récepteur du nom convivial.

Une deuxième ligne vaut la minute supplémentaire. Un mur de boutons aux noms évocateurs ne vous dit rien à 11 heures du soir ; une ligne indiquant ce que chacun restaure vous dit lequel presser.

L'entité lecteur multimédia du récepteur est enregistrée par Home Assistant comme n'importe quelle autre, vous obtenez donc un historique d'écoute gratuitement. Tout ce qui suit provient de cette seule entité : aucun capteur supplémentaire, aucun assistant, rien à configurer au préalable.

La simple chronologie d'états n'a besoin d'aucune carte personnalisée, et c'est celle qui vaut le plus la peine d'être installée :

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

Allumé, éteint, et ce qu'il faisait, sur une semaine.

Le volume en dB utilise la même conversion qu'à l'étape 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 avec fill: last transforme des événements espacés en une ligne continue. L'axe des ordonnées doit être placé dans apex_config pour être pris en compte.

Une moyenne et un pic quotidiens donnent une forme à une courbe en dents de scie :

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

Deux séries issues du même attribut, regroupées par jour.

Et les deux qui répondent à « sur quoi est-ce que je regarde vraiment, et dans quel mode » : la source et le mode surround, tracés sous forme de chronologie de celui qui était sélectionné.

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

Mettez vos propres sources dans le tableau transform et dans les deux tableaux de formateurs. Gardez l'indice 0 sur « Other ».

Un axe de graphique a besoin de nombres, donc transform associe chaque nom de source à une position et les formateurs refont la correspondance inverse pour les étiquettes et l'infobulle. Rendez la correspondance totale : null (récepteur éteint) reste un trou, et tout ce qui n'est pas dans votre liste tombe dans « Other », si bien que les deux ne peuvent jamais être confondus. La même carte avec sound_mode vous donne le mode surround, avec les chaînes en majuscules exactement comme votre récepteur les indique.

La vue complète, chaque section et chaque carte, avec des paramètres fictifs à la place des ID d'entités.

1. 1. Téléchargez le YAML de la vue.
2. 2. Ouvrez-le dans n'importe quel éditeur de texte et remplacez deux chaînes, partout où elles apparaissent : YOUR_RECEIVER par le nom de votre entité lecteur multimédia, et YOURMAC par les douze caractères de votre récepteur relevés à l'étape 2.
3. 3. Dans Home Assistant, ouvrez votre tableau de bord, l'icône crayon, le menu à trois points, l'éditeur de configuration brute, et collez-le comme une vue.

Avant de croire que vous vous êtes trompé : certaines ne peuvent pas s'allumer, et mieux vaut savoir lesquelles.

Une tuile ne peut afficher son état que si Home Assistant peut le lire, et il lit votre récepteur à deux endroits. L'intégration Denon AVR publie l'essentiel sur l'entité lecteur multimédia. AVR Maestro publie le reste : il crée un capteur Status Bridge, sensor.avr_maestro_your_receiver, et y écrit sous forme d'attributs les valeurs qu'il connaît déjà.

Les deux colonnes sont désormais lisibles. Prenez une valeur du lecteur multimédia depuis states['media_player.your_receiver'].attributes, et une valeur du Status Bridge avec state_attr('sensor.avr_maestro_your_receiver','dirac_slot'), pour qu'une tuile s'allume pour le réglage réellement actif au lieu de seulement lancer le script qui le modifie.

Mesuré sur le récepteur utilisé pour ce guide : l'entité lecteur multimédia porte environ vingt des soixante contrôles, et le capteur Status Bridge en publie environ quarante de plus. À eux deux, un tableau de bord peut lire presque tout ce qu'il peut modifier - la différence entre un mur de boutons et une vraie surface de contrôle.

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

Trois états, pas deux.

• Les tuiles font un tiers de la largeur attendue. Dans une section couvrant 3 colonnes, la grille interne compte 36 colonnes, et non 12. Pour quatre tuiles en largeur, réglez grid_options: {columns: 9}. Pour six en largeur, 6.
• Le curseur de volume affiche un bouton d'alimentation au lieu d'une barre. C'est media_controls avec on_off dedans. Réglez media_controls: [].
• Les étiquettes sont tronquées. « Volume Down » devient « Volume Do... ». Raccourcissez en « Vol Down », ou élargissez la tuile.
• Les descriptions de scènes sont coupées. Ajoutez multiline_secondary: true.
• Une ligne stable disparaît d'un graphique apexcharts. C'est experimental.color_threshold. Il dessine le trait avec un dégradé vertical, et un segment parfaitement horizontal a une hauteur nulle sur laquelle appliquer le dégradé, donc il devient invisible. Une session de 43 heures à un seul volume a ainsi disparu complètement. Utilisez un color uni.
• Il se réagence tout seul sur téléphone. Les vues Sections s'empilent sur une seule colonne en largeur étroite sans aucune configuration supplémentaire.

Prise en main · Écran d'accueil · Scènes · Icônes personnalisées · Son · Égaliseur graphique · Enceintes · Pourquoi une commande est verrouillée · L'assistant · Domotique · Zones · Télécommande · Radio (FM/AM) · Affichage à l'écran · Paramètres · Langues · Contrôles de volume · Sauvegarde & restauration · Lecture en cours & HEOS