Bauen Sie dieses Home-Assistant-Dashboard in etwa einer Stunde

• AVR Maestro ist mit Home Assistant verknüpft und hat synchronisiert. Die Einrichtungsanleitung behandelt das. Sie sollten Ihre Steuerungen in Home Assistant sehen können, bevor Sie etwas darauf aufbauen.
• Ihr Receiver ist zu Home Assistant hinzugefügt. Einstellungen › Geräte & Dienste › Integration hinzufügen › Denon AVR, dann die lokale IP. Dadurch erhält das Dashboard seinen Live-Status.
• Ihr Receiver ist eingeschaltet, während Sie bauen. Die Hälfte dessen, was Sie gleich schreiben, liest Live-Werte, und ein Receiver im Standby veröffentlicht fast nichts.

Dieses Dashboard speist sich aus zwei Quellen, und der Unterschied zählt bei jedem der folgenden Schritte.

Alle vier sind im Standard-HACS-Store. In Home Assistant: HACS › Frontend › Explore & Download Repositories, den Namen suchen, Download, dann den Browser neu laden.

Jedes Snippet auf dieser Seite verwendet zwei Platzhalter. Finden Sie Ihre einmal, den Rest erledigen Sie per Copy and Paste.

• media_player.your_receiver → Einstellungen › Geräte & Dienste › Ihr Receiver › die Media-Player-Entity. Etwa media_player.marantz_cinema_30.
• script.avr_maestro_MAC_... → Entwicklerwerkzeuge › Zustände, und geben Sie avr_maestro in den Entity-Filter ein. Ihre gesamte Steuerungsliste erscheint.

Der mittlere Teil jeder Skript-ID ist die MAC-Adresse Ihres Receivers, zwölf Kleinbuchstaben bzw. Ziffern, bei allen gleich. Kopieren Sie sie einmal. Überall dort, wo diese Seite MAC schreibt, setzen Sie Ihre ein.

1. 1. Einstellungen › Dashboards › Dashboard hinzufügen › Neues Dashboard von Grund auf. Nennen Sie es, wie Sie möchten.
2. 2. Öffnen Sie es und klicken Sie oben rechts auf das Stiftsymbol, um zu bearbeiten.
3. 3. Fügen Sie eine Ansicht hinzu und wählen Sie das Layout Sections. Nicht Masonry. Sections sorgt dafür, dass sich alles auf dem Handy sauber umbricht.
4. 4. Stellen Sie in den Ansichtseinstellungen Max columns auf 3 und aktivieren Sie Dense section placement.

Ab hier läuft jeder Schritt gleich ab: einen Abschnitt hinzufügen, dann Karten hineinfügen. Zum Einfügen von YAML nutzen Sie das Drei-Punkte-Menü einer Karte und wählen Edit in YAML, oder das Drei-Punkte-Menü des Dashboards für den Raw configuration editor, um alles auf einmal einzufügen.

# 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

Beginnen Sie mit dem Einfachsten auf dem Board, damit Sie wissen, dass Ihre Entity-IDs stimmen, bevor Sie etwas Kompliziertes bauen. Fügen Sie einen Abschnitt und eine Karte hinzu, wählen Sie Edit in YAML und fügen Sie ein:

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

Standard-Home-Assistant. Kein HACS nötig.

Tippen Sie darauf. Reagiert der Receiver, stimmen Ihre IDs, und alles Weitere funktioniert. Passiert nichts, gehen Sie zurück zu Schritt 2.

Dieses Muster lohnt sich, und jede Quellen- und Surround-Kachel auf dem Board ist eine Kopie davon. Die Karte sendet ein Skript und färbt sich anhand der Receiver-Entität ein, sodass der Eingang, auf dem Sie wirklich sind, leuchtet und die anderen nicht.

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

Ändern Sie pro Eingang drei Dinge: das Skript, das Symbol und die Zeichenkette, mit der verglichen wird.

Zwei Dinge müssen stimmen, sonst leuchtet eine Kachel nie:

• Vergleichen Sie mit dem, was Ihr Receiver tatsächlich meldet. Entwicklerwerkzeuge › Zustände, Ihre Media-Player-Entität, lesen Sie die Attribute source_list und sound_mode_list. Das sind die exakten Zeichenketten. Vergleichen Sie in Kleinbuchstaben, wie oben.
• Ein umbenannter Eingang meldet seinen neuen Namen. Benennen Sie GAME1 am Receiver in „Xbox“ um, meldet er Xbox, während das AVR-Maestro-Steuerelement weiterhin input_game1 heißt. Vergleichen Sie mit dem, was der Receiver meldet, nicht mit dem Skriptnamen.

Surround-Modi sind dieselbe Karte, mit sound_mode anstelle von source.

Ein schlichter Titel ist verschenkter Platz. Setzen Sie den Live-Wert darunter, und aus „Quellen“ wird „Quellen / Jetzt auf 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

Das zweizeilige Raster setzt die Beschriftung unter den Titel statt daneben.

Ersetzen Sie bei der Surround-Überschrift attributes.source durch attributes.sound_mode, und so weiter.

Home Assistant meldet die Lautstärke als Bruchteil. Niemand stellt einen Receiver auf „0.67“. Eine Zeile Mathematik behebt das, und der ganze Abschnitt liest sich wie ein Receiver.

# 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

Lesen Sie den Namen aus dem Skript, statt ihn zu tippen, und das Umbenennen einer Szene in AVR Maestro benennt die Kachel um, ohne dass Sie das Dashboard bearbeiten müssen.

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

Die beiden replace()-Aufrufe schneiden das Präfix und den Receiver-Namen aus dem Anzeigenamen.

Eine zweite Zeile ist die zusätzliche Minute wert. Eine Wand aus blumig benannten Buttons sagt Ihnen um 11pm gar nichts; eine Zeile, die sagt, was jeder wiederherstellt, verrät Ihnen, welchen Sie drücken sollten.

Die Media-Player-Entität des Receivers wird von Home Assistant wie jede andere aufgezeichnet, also bekommen Sie einen Hörverlauf gratis. Alles unten stammt aus dieser einen Entität: keine zusätzlichen Sensoren, keine Helfer, nichts, was vorher konfiguriert werden müsste.

Die einfache Zustandszeitleiste braucht überhaupt keine benutzerdefinierten Karten und ist die, die sich am meisten lohnt:

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

Ein, Aus und was der Receiver tat, über eine Woche.

Die Lautstärke in dB nutzt dieselbe Umrechnung wie in Schritt 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 mit fill: last macht aus vereinzelten Ereignissen eine durchgehende Linie. Die y-Achse muss in apex_config stehen, damit sie wirkt.

Ein Tagesdurchschnitt und -spitzenwert macht aus einer zackigen Linie etwas mit Form:

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

Zwei Reihen aus demselben Attribut, nach Tag gruppiert.

Und die zwei, die beantworten: „Worüber schaue ich eigentlich, und in welchem Format?“: Quelle und Surround-Modus, aufgetragen als Zeitleiste dessen, was jeweils gewählt war.

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

Tragen Sie Ihre eigenen Quellen im transform-Array und in beiden Formatter-Arrays ein. Belassen Sie Index 0 als „Other“.

Eine Diagrammachse braucht Zahlen, daher ordnet transform jedem Quellennamen eine Position zu, und die Formatierer ordnen sie für die Beschriftungen und den Tooltip zurück. Machen Sie die Zuordnung total: null (Receiver aus) bleibt eine Lücke, und alles, was nicht in Ihrer Liste steht, fällt auf „Other“, sodass beides nie verwechselt werden kann. Dieselbe Karte mit sound_mode liefert den Surround-Modus, mit den Zeichenketten in Großbuchstaben, genau wie Ihr Receiver sie meldet.

Die komplette Ansicht, jeder Abschnitt und jede Karte, mit Platzhaltern statt Entity-IDs.

1. 1. Die View-YAML herunterladen.
2. 2. Öffnen Sie sie in einem beliebigen Texteditor und ersetzen Sie überall zwei Zeichenketten: YOUR_RECEIVER durch den Namen Ihrer Media-Player-Entität und YOURMAC durch die zwölf Zeichen Ihres Receivers aus Schritt 2.
3. 3. Öffnen Sie in Home Assistant Ihr Dashboard, Stiftsymbol, Drei-Punkte-Menü, Raw configuration editor, und fügen Sie sie als Ansicht ein.

Bevor Sie annehmen, falsch gebaut zu haben: Manche können gar nicht leuchten, und es lohnt sich zu wissen, welche.

Eine Kachel kann ihren Zustand nur zeigen, wenn Home Assistant ihn lesen kann, und Ihren Receiver liest es aus zwei Quellen. Die Denon-AVR-Integration veröffentlicht die Grundlagen auf der Media-Player-Entität. AVR Maestro veröffentlicht den Rest: Es legt einen Status-Bridge-Sensor an, sensor.avr_maestro_your_receiver, und schreibt die Messwerte, die es ohnehin hat, als Attribute darauf.

Beide Spalten sind jetzt lesbar. Holen Sie einen Media-Player-Wert aus states['media_player.your_receiver'].attributes und einen Status-Bridge-Wert mit state_attr('sensor.avr_maestro_your_receiver','dirac_slot'), damit eine Kachel für die tatsächlich aktive Einstellung leuchtet, statt nur das Skript auszulösen, das sie ändert.

Gemessen an dem Receiver, an dem dies gebaut wurde: Die Media-Player-Entität trägt etwa zwanzig der sechzig Steuerelemente, und der Status-Bridge-Sensor veröffentlicht grob vierzig weitere. Zusammen kann ein Dashboard nahezu alles lesen, was es ändern kann - der Unterschied zwischen einer Wand aus Buttons und einer Bedienoberfläche.

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

Drei Zustände, nicht zwei.

• Kacheln sind ein Drittel so breit wie erwartet. In einem Abschnitt über 3 Spalten hat das interne Raster 36 Spalten, nicht 12. Für vier Kacheln nebeneinander setzen Sie grid_options: {columns: 9}. Für sechs nebeneinander 6.
• Der Lautstärkeregler zeigt statt eines Balkens einen Power-Button. Das ist media_controls mit on_off darin. Setzen Sie media_controls: [].
• Beschriftungen werden abgeschnitten. „Volume Down“ wird zu „Volume Do...“. Kürzen Sie auf „Vol Down“ oder machen Sie die Kachel breiter.
• Szenenbeschreibungen werden abgeschnitten. Fügen Sie multiline_secondary: true hinzu.
• Eine gleichmäßige Linie verschwindet aus einem apexcharts-Diagramm. Das ist experimental.color_threshold. Es zeichnet den Strich als vertikalen Verlauf, und ein exakt waagerechtes Segment hat keine Höhe, über die sich ein Verlauf legen ließe, und wird daher unsichtbar. Eine 43-Stunden-Sitzung bei einer Lautstärke verschwand komplett. Nehmen Sie ein durchgehendes color.
• Es passt sich auf dem Handy von selbst an. Sections-Ansichten stapeln sich bei schmaler Breite in eine Spalte, ohne dass etwas Zusätzliches konfiguriert werden muss.

Erste Schritte · Startbildschirm · Szenen · Eigene Symbole · Ton · Graphic EQ · Lautsprecher · Warum ein Regler gesperrt ist · Der Assistent · Hausautomation · Zonen · Fernbedienung · Radio (FM/AM) · Bildschirmanzeige · Einstellungen · Sprachen · Lautstärkeregler · Sichern & Wiederherstellen · Jetzt läuft & HEOS