สร้างแดชบอร์ด 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 ของเครื่องรับ เป็นอักษรตัวพิมพ์เล็ก 12 ตัว และเหมือนกันทุกตัว คัดลอกไว้ครั้งเดียว ทุกที่ที่หน้านี้เขียน 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

เริ่มจากสิ่งที่ง่ายที่สุดบนบอร์ด เพื่อให้แน่ใจว่า Entity 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 ให้จับคู่กับสิ่งที่เครื่องรับรายงาน ไม่ใช่ชื่อสคริปต์

โหมดเซอร์ราวด์ใช้การ์ดเดียวกัน โดยใช้ sound_mode แทน source

ชื่อธรรมดาคือพื้นที่เปล่าที่เสียเปล่า ใส่ค่าสดไว้ใต้ชื่อ แล้วหัวข้อ “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 ที่หัวข้อเซอร์ราวด์ และทำแบบเดียวกันกับส่วนอื่น

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 บันทึกเอนทิตีเครื่องเล่นสื่อของเครื่องรับเหมือนเอนทิตีอื่นทั่วไป คุณจึงได้ประวัติการรับฟังฟรีๆ ทุกอย่างด้านล่างมาจากเอนทิตีเดียวนั้น ไม่ต้องมีเซนเซอร์เพิ่ม ไม่ต้องมี helper และไม่ต้องตั้งค่าอะไรก่อน

ไทม์ไลน์สถานะธรรมดาไม่ต้องใช้การ์ดแบบกำหนดเองเลย และเป็นอันที่ควรมีมากที่สุด:

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 และในอาร์เรย์ตัวจัดรูปแบบทั้งสอง เก็บ index 0 ไว้เป็น “Other”

แกนของกราฟต้องใช้ตัวเลข ดังนั้น transform จึงจับคู่ชื่อแหล่งสัญญาณแต่ละตัวกับตำแหน่ง และตัวจัดรูปแบบจะแปลงกลับเป็นชื่อสำหรับป้ายและทูลทิป ทำให้การจับคู่นั้นครบถ้วน คือ null (เครื่องรับปิดอยู่) ยังคงเป็นช่องว่าง และสิ่งที่ไม่อยู่ในรายการของคุณจะตกไปที่ “Other” สองอย่างนี้จึงไม่มีวันสับสนกัน ใช้การ์ดเดียวกันกับ sound_mode จะได้โหมดเซอร์ราวด์ โดยใช้สตริงตัวพิมพ์ใหญ่ตรงตามที่เครื่องรับรายงาน

วิวสมบูรณ์ ทุกส่วนและทุกการ์ด โดยใช้ตัวแทนแทน Entity ID

1. 1. ดาวน์โหลดไฟล์ YAML ของมุมมอง
2. 2. เปิดในโปรแกรมแก้ไขข้อความใดก็ได้ แล้วแทนที่สองสตริงทุกจุดที่ปรากฏ คือ YOUR_RECEIVER ด้วยชื่อเอนทิตีเครื่องเล่นสื่อของคุณ และ YOURMAC ด้วยอักขระ 12 ตัวของเครื่องรับที่ได้จากขั้นตอนที่ 2
3. 3. ใน Home Assistant เปิดแดชบอร์ดของคุณ แตะไอคอนดินสอ เมนูสามจุด แล้วเลือก Raw configuration editor จากนั้นวางเป็นวิว

ก่อนจะคิดว่าสร้างผิด ต้องรู้ก่อนว่าบางตัวสว่างไม่ได้จริงๆ และควรรู้ด้วยว่าตัวไหน

ไทล์แสดงสถานะได้ก็ต่อเมื่อ Home Assistant อ่านค่านั้นได้ และ 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 จะซ้อนเป็นคอลัมน์เดียวเมื่อหน้าจอแคบ โดยไม่ต้องตั้งค่าอะไรเพิ่ม

เริ่มต้นใช้งาน · หน้าจอหลัก · ฉาก · ไอคอนกำหนดเอง · เสียง · Graphic EQ · ลำโพง · เหตุใดตัวควบคุมจึงถูกล็อก · ผู้ช่วย · ระบบบ้านอัตโนมัติ · โซน · รีโมท · วิทยุ (FM/AM) · การแสดงผลบนหน้าจอ · การตั้งค่า · ภาษา · การควบคุมระดับเสียง · สำรอง & กู้คืนข้อมูล · กำลังเล่น & HEOS