Zbuduj ten dashboard Home Assistant w około godzinę

• AVR Maestro jest połączony z Home Assistant i zsynchronizowany. Przewodnik konfiguracji opisuje, jak to zrobić. Zanim zaczniesz coś na tym budować, powinieneś zobaczyć swoje elementy sterujące w Home Assistant.
• Twój amplituner jest dodany do Home Assistant. Ustawienia › Urządzenia i usługi › Dodaj integrację › Denon AVR, a następnie jego lokalny adres IP. Dzięki temu panel pokazuje stan na żywo.
• Twój amplituner jest włączony na czas budowania. Połowa tego, co zaraz napiszesz, odczytuje wartości na żywo, a amplituner w trybie gotowości nie publikuje prawie nic.

Ten dashboard zasilają dwa źródła, a różnica między nimi ma znaczenie na każdym z poniższych kroków.

Wszystkie cztery są w domyślnym sklepie HACS. W Home Assistant: HACS › Frontend › Przeglądaj & pobieraj repozytoria, wyszukaj nazwę, kliknij Pobierz, a potem odśwież przeglądarkę.

Każdy fragment kodu na tej stronie używa dwóch symboli zastępczych. Znajdź swoje raz, a resztę po prostu skopiujesz.

• media_player.your_receiver → Ustawienia › Urządzenia i usługi › Twój amplituner › encja odtwarzacza multimediów. Coś w rodzaju media_player.marantz_cinema_30.
• script.avr_maestro_MAC_... → Narzędzia deweloperskie › Stany, a w filtrze encji wpisz avr_maestro. Pojawi się cała lista elementów sterujących.

Środek każdego identyfikatora skryptu to adres MAC Twojego amplitunera, dwanaście małych liter i cyfr, taki sam we wszystkich. Skopiuj go raz. Wszędzie, gdzie ta strona pisze MAC, wstaw swój.

1. 1. Ustawienia › Dashboardy › Dodaj dashboard › Nowy dashboard od zera. Nazwij go, jak chcesz.
2. 2. Otwórz go, a potem kliknij ikonę ołówka w prawym górnym rogu, aby edytować.
3. 3. Dodaj widok i wybierz układ Sekcje. Nie Masonry. To właśnie Sekcje sprawiają, że widok poprawnie układa się na telefonie.
4. 4. W ustawieniach widoku ustaw Maks. liczba kolumn na 3 i włącz Gęste rozmieszczanie sekcji.

Od tej chwili każdy krok wygląda tak samo: dodaj sekcję, a potem wklej do niej karty. Aby wkleić YAML, użyj menu z trzema kropkami na karcie i wybierz Edytuj w YAML, albo menu z trzema kropkami dashboardu i Edytor konfiguracji surowej, aby wkleić wszystko naraz.

# 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

Zacznij od najprostszej rzeczy na tablicy, żeby upewnić się, że identyfikatory encji są poprawne, zanim zbudujesz coś skomplikowanego. Dodaj sekcję, dodaj kartę, Edytuj w YAML i wklej:

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

Standardowy Home Assistant. HACS niepotrzebny.

Dotknij go. Jeśli amplituner zareaguje, Twoje identyfikatory są poprawne i wszystko poniżej zadziała. Jeśli nic się nie stanie, wróć do kroku 2.

To wzorzec, który warto poznać, a każdy kafelek źródła i surround na tablicy jest jego kopią. Karta wysyła skrypt i koloruje się na podstawie encji amplitunera, więc wejście, na którym faktycznie jesteś, jest podświetlone, a pozostałe nie.

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

Zmień trzy rzeczy dla każdego wejścia: skrypt, ikonę i ciąg znaków, z którym porównujesz.

Dwie rzeczy trzeba zrobić dobrze, inaczej kafelek nigdy się nie podświetli:

• Porównuj z tym, co Twój amplituner faktycznie zgłasza. Narzędzia deweloperskie › Stany, Twoja encja odtwarzacza multimedialnego, przeczytaj atrybuty source_list i sound_mode_list. To dokładne ciągi znaków. Porównuj małymi literami, jak powyżej.
• Przemianowane wejście zgłasza nową nazwę. Zmień nazwę GAME1 na „Xbox” w amplitunerze, a zgłosi on Xbox, podczas gdy sterowanie AVR Maestro nadal nazywa się input_game1. Dopasowuj do tego, co zgłasza amplituner, a nie do nazwy skryptu.

Tryby surround to ta sama karta z sound_mode zamiast source.

Zwykły tytuł to zmarnowane miejsce. Umieść pod nim wartość na żywo, a „Sources” zamieni się w „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

Siatka z dwiema liniami sprawia, że etykieta pojawia się pod tytułem, a nie obok niego.

Zamień attributes.source na attributes.sound_mode w nagłówku Surround i tak dalej.

Home Assistant podaje głośność jako ułamek. Nikt nie ustawia amplitunera na „0.67”. Jedna linijka matematyki to naprawia i cała sekcja zaczyna wyglądać jak amplituner.

# 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

Odczytaj nazwę ze skryptu zamiast ją wpisywać, a zmiana nazwy Sceny w AVR Maestro zmieni nazwę kafelka bez edycji dashboardu.

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

Dwa wywołania replace() obcinają z przyjaznej nazwy prefiks i nazwę amplitunera.

Druga linia jest warta dodatkowej minuty. Ściana przycisków o wymyślnych nazwach nic Ci nie powie o 11 wieczorem; linia mówiąca, co każdy z nich przywraca, podpowie, który nacisnąć.

Encja odtwarzacza multimedialnego amplitunera jest rejestrowana przez Home Assistant jak każda inna, więc historię odsłuchu dostajesz za darmo. Wszystko poniżej pochodzi z tej jednej encji: bez dodatkowych sensorów, bez pomocników, bez wcześniejszej konfiguracji.

Zwykła oś czasu stanów w ogóle nie potrzebuje kart niestandardowych i jest tą, którą najbardziej warto mieć:

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

Włączony, wyłączony i co robił, w ciągu tygodnia.

Głośność w dB używa tego samego przeliczenia co w kroku 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 z fill: last zamienia rzadkie zdarzenia w ciągłą linię. Oś y musi trafić do apex_config, aby zadziałała.

Dzienna średnia i wartość szczytowa zamieniają postrzępioną linię w coś, co ma kształt:

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

Dwie serie z tego samego atrybutu, grupowane według dni.

I dwa wykresy, które odpowiadają na pytanie „na czym właściwie oglądam i w jakim trybie”: źródło i tryb surround, narysowane jako oś czasu tego, które było wybrane.

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

Wpisz własne źródła do tablicy transform i do obu tablic formatujących. Zostaw indeks 0 jako „Other”.

Oś wykresu potrzebuje liczb, więc transform mapuje każdą nazwę źródła na pozycję, a formatery mapują ją z powrotem na etykiety i podpowiedź. Zrób mapowanie całkowite: null (amplituner wyłączony) pozostaje przerwą, a wszystko, czego nie ma na Twojej liście, trafia do „Other”, więc nigdy nie da się ich pomylić. Ta sama karta z sound_mode da Ci tryb surround, z nazwami wielkimi literami dokładnie tak, jak zgłasza je Twój amplituner.

Kompletny widok, każda sekcja i każda karta, z symbolami zastępczymi zamiast identyfikatorów encji.

1. 1. Pobierz plik YAML widoku.
2. 2. Otwórz go w dowolnym edytorze tekstu i zamień dwa ciągi znaków, wszędzie gdzie występują: YOUR_RECEIVER na nazwę encji Twojego odtwarzacza multimedialnego oraz YOURMAC na dwanaście znaków Twojego amplitunera z kroku 2.
3. 3. W Home Assistant otwórz swój dashboard, ikonę ołówka, menu z trzema kropkami, Edytor konfiguracji surowej i wklej go jako widok.

Zanim uznasz, że zbudowałeś go źle: niektóre z nich nie mogą się podświetlić i warto wiedzieć które.

Kafelek może pokazać swój stan tylko wtedy, gdy Home Assistant potrafi go odczytać, a Twój amplituner odczytuje z dwóch miejsc. Integracja Denon AVR publikuje podstawy na encji odtwarzacza multimedialnego. Resztę publikuje AVR Maestro: tworzy sensor Status Bridge, sensor.avr_maestro_your_receiver, i zapisuje na nim jako atrybuty odczyty, które już posiada.

Obie kolumny można teraz odczytać. Weź wartość odtwarzacza multimedialnego z states['media_player.your_receiver'].attributes, a wartość Status Bridge za pomocą state_attr('sensor.avr_maestro_your_receiver','dirac_slot'), aby kafelek podświetlał się dla ustawienia, które jest faktycznie aktywne, a nie tylko uruchamiał skrypt, który je zmienia.

Zmierzone na amplitunerze, na którym to zbudowano: encja odtwarzacza multimedialnego zawiera około dwudziestu z sześćdziesięciu elementów sterowania, a sensor Status Bridge publikuje mniej więcej czterdzieści kolejnych. Razem dashboard może odczytać prawie wszystko, co potrafi zmienić - różnica między ścianą przycisków a prawdziwym panelem sterowania.

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

Trzy stany, nie dwa.

• Kafelki wychodzą o jedną trzecią węższe, niż oczekujesz. W sekcji obejmującej 3 kolumny wewnętrzna siatka ma 36 kolumn, a nie 12. Aby mieć cztery kafelki w rzędzie, ustaw grid_options: {columns: 9}. Dla sześciu w rzędzie, 6.
• Suwak głośności pokazuje przycisk zasilania zamiast paska. To media_controls z on_off w środku. Ustaw media_controls: [].
• Etykiety są ucinane. „Volume Down” zamienia się w „Volume Do...”. Skróć do „Vol Down” albo poszerz kafelek.
• Opisy Scen są przycinane. Dodaj multiline_secondary: true.
• Stała linia znika z wykresu apexcharts. To experimental.color_threshold. Rysuje obrys jako pionowy gradient, a idealnie poziomy odcinek ma zerową wysokość, na której można by gradient rozciągnąć, więc staje się niewidoczny. Sesja trwająca 43 godziny przy jednej głośności zniknęła całkowicie. Użyj jednolitego color.
• Sam układa się na telefonie. Widoki Sekcji układają się w jedną kolumnę przy wąskich szerokościach bez żadnej dodatkowej konfiguracji.

Pierwsze kroki · Ekran główny · Sceny · Własne ikony · Dźwięk · Korektor graficzny · Głośniki · Dlaczego element jest zablokowany · Asystent · Automatyka domowa · Strefy · Pilot · Radio (FM/AM) · Wyświetlacz ekranowy · Ustawienia · Języki · Sterowanie głośnością · Kopia zapasowa & przywracanie · Teraz odtwarzane & HEOS