यह Home Assistant डैशबोर्ड बनाएँ लगभग एक घंटे में

• AVR Maestro, Home Assistant से लिंक हो चुका है और सिंक हो गया है। इसके बारे में सेटअप गाइड में बताया गया है। इसके ऊपर कुछ भी बनाने से पहले आपको अपने कंट्रोल Home Assistant में दिखाई देने चाहिए।
• आपका रिसीवर Home Assistant में जुड़ चुका है। सेटिंग्स › डिवाइस & सेवाएं › इंटीग्रेशन जोड़ें › Denon AVR, फिर उसका लोकल IP। इसी से डैशबोर्ड को लाइव स्थिति मिलती है।
• बनाते समय आपका रिसीवर चालू हो। आप जो लिखने जा रहे हैं उसका आधा हिस्सा लाइव वैल्यू पढ़ता है, और स्टैंडबाय में रिसीवर लगभग कुछ भी प्रकाशित नहीं करता।

इस डैशबोर्ड को दो चीज़ों से जानकारी मिलती है, और नीचे हर चरण में यह फ़र्क मायने रखता है।

चारों डिफ़ॉल्ट HACS स्टोर में उपलब्ध हैं। Home Assistant में: HACS › Frontend › Explore & Download Repositories, नाम खोजें, Download करें, फिर अपना ब्राउज़र रीलोड करें।

इस पेज के हर स्निपेट में दो प्लेसहोल्डर इस्तेमाल हुए हैं। अपनी ID एक बार ढूँढ लें, बाकी सब कॉपी और पेस्ट है।

• media_player.your_receiver → सेटिंग्स › डिवाइस & सेवाएं › आपका रिसीवर › मीडिया प्लेयर एंटिटी। कुछ इस तरह: media_player.marantz_cinema_30।
• script.avr_maestro_MAC_... → डेवलपर टूल्स › स्टेट्स, और एंटिटी फ़िल्टर में avr_maestro लिखें। आपकी पूरी कंट्रोल सूची दिख जाएगी।

हर स्क्रिप्ट ID का बीच का हिस्सा आपके रिसीवर का MAC पता है: बारह छोटे अक्षर, जो सब पर एक जैसे होते हैं। इसे एक बार कॉपी कर लें। इस पेज पर जहाँ भी 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 पर लौटें।

यह वह पैटर्न है जिसे सीखना सार्थक है, और बोर्ड की हर सोर्स और सराउंड टाइल इसी की कॉपी है। कार्ड एक स्क्रिप्ट भेजता है और रिसीवर entity से अपना रंग तय करता है, इसलिए जिस इनपुट पर आप सचमुच हैं वह जलता है और बाकी नहीं।

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 खोलें, अपनी media player entity चुनें और source_list व sound_mode_list एट्रिब्यूट पढ़ें। यही सटीक स्ट्रिंग हैं। ऊपर की तरह छोटे अक्षरों में तुलना करें।
• नाम बदला गया इनपुट नया नाम ही बताता है। रिसीवर पर GAME1 का नाम "Xbox" कर दें तो वह Xbox बताएगा, जबकि AVR Maestro का कंट्रोल अब भी input_game1 कहलाता है। रिसीवर जो बताता है उससे मिलान करें, स्क्रिप्ट के नाम से नहीं।

सराउंड मोड वही कार्ड हैं, बस source की जगह sound_mode आता है।

सादा शीर्षक बेकार जगह घेरता है। उसके नीचे लाइव वैल्यू रखें और "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

दो-पंक्ति वाला ग्रिड ही लेबल को शीर्षक के बगल की जगह उसके नीचे रखता है।

Surround हेडर पर 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 बजे फ़िल्मी-से नामों वाले बटनों की दीवार कुछ नहीं बताती; हर बटन क्या बहाल करता है यह बताने वाली एक पंक्ति बता देती है कि कौन सा दबाना है।

रिसीवर की media player entity को Home Assistant किसी भी दूसरी entity की तरह रिकॉर्ड करता है, इसलिए आपको सुनने का इतिहास मुफ़्त में मिल जाता है। नीचे सब कुछ उसी एक entity से आता है: कोई अतिरिक्त सेंसर नहीं, कोई 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

fill: last के साथ group_by छिटपुट घटनाओं को लगातार रेखा में बदल देता है। 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 ऐरे और दोनों formatter ऐरे में डालें। इंडेक्स 0 को "Other" ही रहने दें।

चार्ट के अक्ष को संख्याएँ चाहिए, इसलिए transform हर सोर्स के नाम को एक स्थिति से जोड़ता है और formatter लेबल व टूलटिप के लिए उसे वापस नाम में बदलते हैं। मैपिंग को पूर्ण रखें: null (रिसीवर बंद) खाली जगह ही रहता है, और आपकी सूची में न आने वाली हर चीज़ "Other" में चली जाती है, ताकि दोनों में कभी गड़बड़ न हो। यही कार्ड sound_mode के साथ सराउंड मोड दे देता है, जिसमें स्ट्रिंग बड़े अक्षरों में वैसी ही हों जैसी आपका रिसीवर बताता है।

पूरा व्यू, हर सेक्शन और हर कार्ड, entity ID की जगह प्लेसहोल्डर के साथ।

1. 1. व्यू YAML डाउनलोड करें।
2. 2. इसे किसी भी टेक्स्ट एडिटर में खोलें और दो स्ट्रिंग जहाँ-जहाँ आएँ वहाँ बदल दें: YOUR_RECEIVER की जगह अपनी media player entity का नाम, और YOURMAC की जगह चरण 2 से अपने रिसीवर के बारह अक्षर।
3. 3. Home Assistant में अपना डैशबोर्ड खोलें, पेंसिल आइकन, तीन-बिंदु मेन्यू, Raw configuration editor, और इसे एक व्यू के रूप में पेस्ट कर दें।

यह मान लेने से पहले कि आपने गलत बनाया है: उनमें से कुछ जल ही नहीं सकतीं, और यह जानना काम का है कि कौन सी।

कोई टाइल अपनी स्थिति तभी दिखा सकती है जब Home Assistant उसे पढ़ सके, और वह आपके रिसीवर को दो जगहों से पढ़ता है। Denon AVR इंटीग्रेशन बुनियादी जानकारी media player entity पर प्रकाशित करता है। बाकी AVR Maestro प्रकाशित करता है: वह एक Status Bridge सेंसर, sensor.avr_maestro_your_receiver, बनाता है और जो रीडिंग उसके पास पहले से हैं उन्हें एट्रिब्यूट के रूप में उस पर लिख देता है।

अब दोनों कॉलम पढ़े जा सकते हैं। media player की वैल्यू states['media_player.your_receiver'].attributes से लें, और Status Bridge की वैल्यू state_attr('sensor.avr_maestro_your_receiver','dirac_slot') से, ताकि टाइल उसी सेटिंग के लिए जले जो सचमुच सक्रिय है, केवल उसे बदलने वाली स्क्रिप्ट चलाकर न रह जाए।

जिस रिसीवर पर यह बना, उस पर मापा गया: media player entity साठ में से लगभग बीस कंट्रोल देती है, और 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 कॉलम में फैले सेक्शन में भीतरी ग्रिड 12 नहीं, 36 कॉलम का होता है। चार टाइल एक पंक्ति में चाहिए तो 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