Zigbee2 MQTT Geräte automatisch Anzeigen

Hallo zusammen und ein frohes neues Jahr!

Wie vermutlich niemanden überrascht, sitze ich schon wieder vor meinem Home Assistant :wink:
Aktuell bastle ich an meinem System-Monitoring-Dashboard und würde es gern um eine Tabelle erweitern, in der auf einen Blick sichtbar ist, welche Zigbee2MQTT-Geräte online sind und mit welcher Signalstärke sie funken.

Ideal wäre es außerdem, wenn man filtern könnte – zum Beispiel:
„Zeig mir nur die Lampen“ oder „nur Heizungen“ – und dann automatisch eine passende Liste erhält.

Genau hier hänge ich im Moment fest:
Ich bekomme es noch nicht sauber hin, die Geräte dynamisch und automatisch anzeigen zu lassen, ohne jedes einzelne explizit benennen zu müssen. Kurz gesagt: Home Assistant weiß alles – ich nur noch nicht, wie ich ihn dazu bringe, es mir übersichtlich zu zeigen :grinning_face_with_smiling_eyes:

Über Ideen, Lösungsansätze oder bewährte Best Practices würde ich mich sehr freuen.
Ein Screenshot meines bisherigen System-Monitoring-Dashboards habe ich zur Orientierung beigefügt.

Vielen Dank euch und beste Grüße
Kirsten

Moin, na das sieht nach einer schönen Übersicht aus. Die Liste könntest du mit auto-entities realisieren. Dort kannst einfach entsprechend filtern und bekommst eine Liste ausgeworfen. Reverse: true noch setzen, dass dann die größten Werte oben in der Liste stehen.

Müsste so wie im Beispiel funktionieren

type: custom:auto-entities
card:
  type: entities
  title: Z2M – Geräte
filter:
  include:
    - integration: mqtt
      attributes:
        linkquality: "*"
sort:
  method: attribute
  attribute: linkquality
  numeric: true
  reverse: true
1 „Gefällt mir“
type: custom:auto-entities
card:
  type: entities
  title: Zigbee Geräte (Signalstärke)
filter:
  include:
    - entity_id: sensor.*_linkquality
  exclude:
    - state: unavailable
    - entity_id: sensor.zigbee2mqtt_bridge*
sort:
  method: state
  numeric: true
  reverse: true

Dazu muss aber “Linkquality” bei den Geräten aktiv! Gibt eine Liste mit den stärksten zu erst!

Filtern dann eventuell auch über “Label etc.”!
:wink:
Unser Jan war mal wieder schneller!

1 „Gefällt mir“

Hallo @Kirsten Das Monitoring ist auch eines meiner nächsten Projekte. Mit welchen Karten hast du es bei dir realisiert und würdest du deinen Code teilen?

VG Matthias

Danke euch für die Hilfe und die Code-Schnipsel – die sind grundsätzlich super :+1:
Mein Problem sitzt allerdings offenbar noch eine Etage tiefer.

Wenn ich euren Code verwende, wird bei mir schlicht nichts angezeigt. Oder anders gefragt:
Was ist bei mir anders als bei euch?

Zum Beispiel: Wenn ich mir eine Hue-Lampe im Entwicklerwerkzeug → Zustände anschaue, gibt es dort keinen Hinweis darauf, dass es sich um ein Zigbee-Gerät handelt. Entsprechend fehlt mir auch die Grundlage, um automatisch auszuwerten,
welche Zigbee-Geräte online sind und mit welcher Signalstärke sie funken.

Was mache ich hier falsch?
Anbei ein Beispiel, wie das bei mir aktuell aussieht.

Vielen Dank euch schon mal für eure Geduld und Unterstützung!

in den Geräten „Linkquality“ versteckt oder aktiv?

Muss aktiv sein!

Gerne könnt ihr auch den Code zu meinem Dashboard haben. Es ist tatsächlich etwas speziell. Die Grundlage ist ein Grid Layout.
Und hier setze ich diesen Code ein, um auf die entsprechenden Auflösung und Darstellungen Desktop Tablet Handy zu reagieren.

grid-template-columns: 0.5% 16.5% 16.5% 16.5% 16.5% 16.5% 16.5% 0.5%
grid-template-rows: auto
grid-template-areas: |
  "hlr01 header01 header01 header01 header04 header05 header06 hrr01"
  "lr01 tab101 tab101 tab103 tab103 tab105 tab105 rr01"
  "lr02 tab111 tab111 tab113 tab113 tab115 tab116 rr02"
  "lr03 tab121 tab122 tab123 tab124 tab125 tab126 rr03"
  "lr04 tab131 tab132 tab133 tab134 tab135 tab136 rr04"
  "lr05 tab141 tab141 tab143 tab143 tab145 tab145 rr05"
  "lr06 tab151 tab152 tab153 tab154 tab155 tab156 rr06"
  "lr07 tab161 tab162 tab163 tab164 tab165 tab166 rr07"
mediaquery:
  "(max-width: 1400px) and (min-width: 601px)":
    grid-template-columns: 0.5% 33% 33% 33% 0.5%
    grid-template-areas: |
      "lr01 header01 header01 header01 rr01"
      "lr02 header04 header05 header06 rr02"
      "lr03 tab101 tab102 tab103 rr03"
      "lr04 tab104 tab105 tab106 rr04"
      "lr05 tab111 tab112 tab113 rr05"
      "lr06 tab114 tab115 tab116 rr06"
      "lr07 tab121 tab122 tab123 rr07"
      "lr08 tab124 tab125 tab126 rr08"
      "lr09 tab131 tab132 tab133 rr09"
      "lr10 tab134 tab135 tab136 rr10"
      "lr11 tab141 tab141 tab143 rr11"
      "lr12 tab144 tab145 tab146 rr12"
      "lr13 tab151 tab152 tab153 rr13"
      "lr14 tab154 tab155 tab156 rr14"
      "lr15 tab161 tab162 tab163 rr15"
      "lr16 tab164 tab165 tab166 rr16"
  "(max-width: 600px)":
    grid-template-columns: 2.5% 95% 2.5%
    grid-template-areas: |
      "hlr1 header01 hrr1"
      "hlr2 header02 hrr2"
      "hlr3 header03 hrr3"
      "hlr4 header04 hrr4"
      "hlr5 header05 hrr5"      
      "hlr6 header06 hrr6"
      "lr01 tab101 rr01"
      "lr02 tab102 rr02"
      "lr03 tab103 rr03"
      "lr04 tab104 rr04"
      "lr05 tab105 rr05"
      "lr06 tab106 rr06"
      "lr07 tab111 rr07"
      "lr08 tab112 rr08"
      "lr09 tab113 rr09"
      "lr10 tab114 rr10"
      "lr11 tab115 rr11"
      "lr12 tab116 rr12"
      "lr13 tab121 rr13"
      "lr14 tab122 rr14"
      "lr15 tab123 rr15"
      "lr16 tab124 rr16"
      "lr17 tab125 rr17"
      "lr18 tab126 rr18"
      "lr19 tab131 rr19"
      "lr20 tab132 rr20"
      "lr21 tab133 rr21"
      "lr22 tab134 rr22"
      "lr23 tab135 rr23"
      "lr24 tab136 rr24"
      "lr25 tab141 rr25"
      "lr26 tab142 rr26"
      "lr27 tab143 rr27"
      "lr28 tab144 rr28"
      "lr29 tab145 rr29"
      "lr30 tab146 rr30"
      "lr31 tab151 rr31"
      "lr32 tab152 rr32"
      "lr33 tab153 rr33"
      "lr34 tab154 rr34"
      "lr35 tab155 rr35"
      "lr36 tab156 rr36"
      "lr37 tab161 rr37"
      "lr38 tab162 rr38"
      "lr39 tab163 rr39"
      "lr40 tab164 rr40"
      "lr41 tab165 rr41"
      "lr42 tab166 rr42"

Dann kann ich mit diesen Code der unten eingefügt wird die Karte plazieren:

view_layout:
  grid-area: tab101

Und hier der Code für die NUC-Karte:

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        name: Intel NUC
        entity: sensor.192_168_178_20_core_0_temperatur
        tap_action:
          action: navigate
          navigation_path: /kirsten-home/zimmer/#wohnzimmer
        styles:
          card:
            - font: Montserrat
            - background-color: transparent
            - border-radius: 20px
            - padding: 25px
            - border: transparent
            - width: 100%
            - height: 1px
            - box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2)
          name:
            - font-weight: blod
            - font-size: 1em
            - align-self: middle
            - justify-self: start
            - padding-left: 45px
            - padding-top: 5px
            - padding-bottom: 00px
            - letter-spacing: 0.0px
          grid:
            - grid-template-areas: "\"n i1\" \"i i2\" \"i i3\""
            - grid-template-columns: 85% 15%
            - grid-template-rows: 1fr 1fr 1fr
          custom_fields:
            logo:
              - position: absolute
              - left: 1%
              - top: 1%
        custom_fields:
          logo:
            card:
              type: custom:button-card
              color: transparent
              show_name: false
              icon: phu:intel-nuc
              show_entity_picture: true
              card_mod:
                style: |
                  ha-card {
                    box-shadow: none !important;
                    background: none !important;
                    border-style: hidden !important;
                    }  
              styles:
                card:
                  - background-color: transparent
                  - border-style: none
                icon:
                  - width: 3.5em
                  - height: 3.5em
                  - color: orange
                  - padding: 0px
                  - background-color: transparent
                  - border-radius: 95px
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.software_version_home_assistant
            name: Version
            card_mod:
              style: |
                ha-card {
                  box-shadow: none !important;
                  background: none !important;
                  border-style: hidden !important;
                  } 
          - type: entity
            entity: sensor.home_assistant_letzter_start
            card_mod:
              style: |
                ha-card {
                  box-shadow: none !important;
                  background: none !important;
                  border-style: hidden !important;
                  } 
        card_mod:
          style: |
            ha-card {
              padding-bottom: 12px !important;
              padding-top: 18px !important;
              padding-left: 3% !important;
              padding-right: 3% !important;
              #background: #d3bc99 !important;
              border-radius: 12px !important;

              }  
        alignment: end
  - type: horizontal-stack
    cards:
      - type: custom:flex-horseshoe-card
        entities:
          - entity: sensor.system_monitor_festplattennutzung
            attribute: Gib
            decimals: 1
            tap_action:
              action: navigate
              navigation_path: /kirsten-home/raster-test/#prozess-charts
            name: Harddisk
            unit: Gib
            icon: mdi:harddisk
          - entity: number.freier_festplattenspeicher
            attribute: prozent
            decimals: 0
            name: Freier Speicher
            unit: "%"
            icon: null
          - entity: sensor.system_monitor_festplatte_frei
            attribute: Gib
            decimals: 1
            name: Belegter Speicher
            unit: GiB
            icon: null
        show:
          horseshoe_style: lineargradient
        layout:
          hlines:
            - id: 0
              xpos: 50
              ypos: 52
              length: 60
              styles:
                - stroke: var(--primary-text-color);
                - stroke-width: 5;
                - stroke-linecap: round;
                - opacity: 0.7;
          states:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 40
              styles:
                - font-size: 3em;
            - id: 1
              entity_index: 1
              xpos: 25
              ypos: 65
              styles:
                - text-anchor: start;
                - font-size: 1.5em;
            - id: 2
              entity_index: 2
              xpos: 50
              ypos: 65
              styles:
                - text-anchor: start;
                - font-size: 1.8em;
          icons:
            - id: 0
              entity_index: 0
              xpos: 55
              ypos: 20
              align: end
              size: 1.3
            - id: 1
              entity_index: 2
              xpos: 37
              ypos: 72
              align: end
              size: 1.3
          names:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 95
              styles:
                - font-size: 1.8em;
            - id: 1
              entity_index: 1
              xpos: 53
              ypos: 71
              styles:
                - font-size: 0.6em;
            - id: 2
              entity_index: 2
              xpos: 51
              ypos: 46
              styles:
                - font-size: 0.6em;
        horseshoe_scale:
          min: 0
          max: 40
        color_stops:
          "16": "#FFF6E3"
          "17": "#FFE9B9"
          "18": "#FFDA8A"
          "19": "#FFCB5B"
          "20": "#FFBF37"
          "21": "#ffb414"
          "22": "#FFAD12"
          "23": "#FFA40E"
          "24": "#FF9C0B"
          "25": "#FF8C06"
        card_mod:
          style: |
            ha-card {
              box-shadow: none !important;
              background: none !important;
              border-style: hidden !important;
              }  
      - type: custom:flex-horseshoe-card
        entities:
          - entity: sensor.system_monitor_speicherauslastung
            attribute: temperature
            decimals: 1
            name: Memory
            unit: Mib
            icon: mdi:memory
          - entity: number.freier_arbeitsspeicher
            attribute: humidity
            decimals: 0
            unit: "%"
            icon: null
          - entity: sensor.system_monitor_freier_speicher
            attribute: pressure
            name: Belegteer Arbeitsspeicher
            decimals: 1
            unit: Mib
            icon: null
        show:
          horseshoe_style: lineargradient
        layout:
          hlines:
            - id: 0
              xpos: 50
              ypos: 52
              length: 58
              styles:
                - stroke: var(--primary-text-color);
                - stroke-width: 5;
                - stroke-linecap: round;
                - opacity: 0.7;
          states:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 40
              styles:
                - font-size: 2.0em;
            - id: 1
              entity_index: 1
              xpos: 25
              ypos: 65
              styles:
                - text-anchor: start;
                - font-size: 1.2em;
            - id: 2
              entity_index: 2
              xpos: 44
              ypos: 65
              styles:
                - text-anchor: start;
                - font-size: 1.2em;
          icons:
            - id: 0
              entity_index: 0
              xpos: 55
              ypos: 20
              align: end
              icon-size: 1.3
            - id: 1
              entity_index: 2
              xpos: 37
              ypos: 72
              align: end
              size: 1.3
          names:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 95
              styles:
                - font-size: 1.8em;
            - id: 1
              entity_index: 1
              xpos: 53
              ypos: 71
              styles:
                - font-size: 0.6em;
            - id: 2
              entity_index: 2
              xpos: 51
              ypos: 46
              styles:
                - font-size: 0.6em;
        horseshoe_scale:
          min: 0
          max: 4000
        color_stops:
          "400": "#FFF6E3"
          "800": "#FFE9B9"
          "1200": "#FFDA8A"
          "1600": "#FFCB5B"
          "2000": "#FFBF37"
          "2400": "#ffb414"
          "2800": "#FFAD12"
          "3200": "#FFA40E"
          "3600": "#FF9C0B"
          "4000": "#FF8C06"
        card_mod:
          style: |
            ha-card {
              box-shadow: none !important;
              background: none !important;
              border-style: hidden !important;
              }  
  - type: custom:apexcharts-card
    experimental:
      color_threshold: true
      brush: true
    graph_span: 1w
    yaxis:
      - id: first
        decimals: 0
        min: 25
        max: 80
        apex_config:
          tickAmount: 4
      - id: second
        opposite: true
        decimals: 0
        min: 0
        max: 40
        apex_config:
          tickAmount: 4
    show:
      last_updated: true
    header:
      standard_format: false
      show: true
      show_states: true
      colorize_states: true
      title: Core Temperatur
    brush:
      selection_span: 12h
    apex_config:
      chart:
        height: 100%
        widht: 100%
    series:
      - entity: sensor.192_168_178_20_core_0_temperatur
        yaxis_id: first
        name: Core 0
        color: Orange
        type: area
        stroke_width: 2
        group_by:
          func: avg
          duration: 10min
        color_threshold:
          - value: 35
            color: green
          - value: 45
            color: yellow
          - value: 55
            color: FAD691
          - value: 65
            color: F08787
          - value: 75
            color: DA6C6C
          - value: 90
            color: red
          - value: 100
            color: B22222
      - entity: sensor.192_168_178_20_core_0_temperatur
        yaxis_id: first
        name: " "
        color: orange
        stroke_width: 1
        float_precision: 0
        show:
          in_brush: true
          in_chart: false
        group_by:
          func: avg
      - entity: sensor.192_168_178_20_core_1_temperatur
        yaxis_id: first
        name: Core 1
        color: green
        type: area
        stroke_width: 2
        group_by:
          func: avg
          duration: 10min
        color_threshold:
          - value: 35
            color: green
          - value: 45
            color: yellow
          - value: 55
            color: FAD691
          - value: 65
            color: F08787
          - value: 75
            color: DA6C6C
          - value: 90
            color: red
          - value: 100
            color: B22222
      - entity: sensor.192_168_178_20_core_1_temperatur
        yaxis_id: first
        name: " "
        color: green
        stroke_width: 1
        float_precision: 0
        show:
          in_brush: true
          in_chart: false
        group_by:
          func: avg
      - entity: sensor.localhost_cpu_auslastung
        yaxis_id: second
        name: CPU
        color: rgba(41, 225, 253, 1)
        type: area
        stroke_width: 2
        group_by:
          func: avg
          duration: 30sec
        color_threshold:
          - value: 5
            color: green
          - value: 10
            color: yellow
          - value: 15
            color: FAD691
          - value: 20
            color: F08787
          - value: 30
            color: DA6C6C
          - value: 40
            color: red
          - value: 50
            color: B22222
      - entity: sensor.localhost_cpu_auslastung
        yaxis_id: second
        name: " "
        color: rgba(41, 225, 253, 1)
        stroke_width: 1
        float_precision: 0
        show:
          in_brush: true
          in_chart: false
        group_by:
          func: avg
    card_mod:
      style: |
        ha-card {
          box-shadow: none !important;
          background: none !important;
          border-style: hidden !important;
          } 
card_mod:
  style: |
    ha-card {
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5) !important;
      padding-bottom: 5px !important;
      padding-top: 5px !important;
      padding-left: 5px !important;
      padding-right: 5px !important;
      background: none  !important;
      border-radius: 20px !important;

      } 
view_layout:
  grid-area: tab101

Ich hoffe Ihr könnt damit was Anfangen

Kirsten

bei mir schaut das dann so aus:

und halt noch 86 weitere Zeilen! :wink:

@Kirsten

Vielen Dank das du deinen Code mit uns teilst. Ich werde mich mal damit auseinandersetzen und schauen wie ich es mit meinen Geräten und Sensoren umsetzen kann.

Vielen Dank!

VG

Matthias

Danke für die Info.

War noch nicht Aktiviert! Jetzt kann ich mich an die Umsetzung machen.

:slight_smile:

@Dr.Big
Dein Filter sucht alle Link Quality Sensoren, nicht nur die von Z2M. Was in den meisten Smart Homes kein Problem sein sollte…
@jayjojayson geht auf die Integration - doch der Filter liefert bei mir leider nur viel Wartezeit.

und wenn wir gerade bei Schwarm-Intelligenz sind: es gibt doch bestimmt einen modifier (regex?), der die „Linkquality“ aus dem Namen entfernt :wink:

1 „Gefällt mir“

Dann setzt mal noch einen identifier ein, dann müsste das eigentlich funktionieren und er sucht nicht alle mqtt daten durch, sondern nur die wo geräte auch ein zigbee2mqtt enthalten.

filter:
  include:
    - integration: mqtt
      device:
        identifiers: zigbee2mqtt
1 „Gefällt mir“

Aktuell läufst du in Gefahr auf meiner Klugscheißerliste der erste Eintrag im neuen Jahr zu werden! :wink::innocent:

Aber du hast latürnich Recht!
Für mich hat es so immer gereicht, schaue da eh nur drauf wenn es irgend welche Probleme gibt. Selbstverständlich geht das sicher auch in „Schön“!
Mir reicht es so, sollte ja auch nur ein Schubs und nicht die fertige Lösung sein!

:smiley: :innocent: nee, auf die Liste will ich nicht. :slight_smile:

1 „Gefällt mir“

Moin moin zusammen :waving_hand:

ich wollte euch mal meine finale Zigbee-Anzeige zeigen – quasi die große Familienaufstellung aller angebundenen Zigbee-Geräte, inklusive ihrer jeweiligen Signalstärke :antenna_bars::wink:

Oben habe ich zwei Filter eingebaut:

  • einmal die Suche nach Name

  • und einmal die Filterung nach Signalstärke

Standardmäßig werden maximal zehn Geräte angezeigt (man will ja nicht gleich erschlagen werden). Wer es sportlich mag, kann per Schalter aber auch alle Geräte anzeigen lassen. Die Überschrift passt sich natürlich brav an, je nachdem ob gerade die Top Ten oder die komplette Zigbee-Verwandtschaft gezeigt wird.

Damit die Signalstärke nicht nur Zahlen sind, sondern auch fürs Auge was hermachen, steckt das Ganze in einer Bar Card. Die Farbe ändert sich je nach Signalqualität – Grün glücklich, Gelb naja, Rot… reden wir nicht drüber :grinning_face_with_smiling_eyes:

Für mein Dashboard läuft die Anzeige in einem Popup. Die Schrift in den Balken habe ich bewusst sehr klein gewählt, damit sie – je nach Bildschirmauflösung – auch mal zwei- oder dreizeilig dargestellt werden kann.

Das Bildschirmfoto ist aktuell noch nicht im Popup, sondern direkt auf dem Dashboard. das Popup fand ich für mich besser, da die Größe je nach Anzahl doch ziemlich variieren kann.

So, genug geredet :blush:
Wie findet ihr die Darstellung der Zigbee-Signalstärken?
Ich bin gespannt auf eure Meinungen und Anregungen!

Viele Grüße
Kirsten :waving_hand:

2 „Gefällt mir“

Schaut gut sehr gut aus, wo ist der Code zum nachbauen? :slightly_smiling_face: Die bar Card wird aber nicht mehr offziell unterstützt, ich nutze sie allerdings auch noch.

Ja, ich weiß – aber mit der Bar-Card sieht’s einfach am besten aus :grinning_face_with_smiling_eyes:
Ich habe anfangs auch mit der Farbe der Icons herumgespielt, aber ganz ehrlich: Die Balken sind auf einen Blick deutlich übersichtlicher. In Kombination mit der Farbe sagt das mehr als tausend Zahlen – und etwas Besseres ist mir bislang nicht untergekommen.

Nebenbei: Ich habe mir auch dein Detailed Charts Panel installiert und ausgiebig getestet. Respekt! Da stecken viele Ideen drin, nach denen ich schon lange gesucht habe :+1:
Einen kleinen Kritikpunkt hätte ich allerdings: Beim Scrollen stört es mich etwas, dass sich der Chart bewegt, sobald man mit der Maus darüber fährt – er wird dann hin und her gezoomt. Das ist aber wirklich nur ein kleiner Punkt und vermutlich leicht abstellbar.

Unterm Strich: Großartige Arbeit, sieht wirklich klasse aus!
Anbei dann noch der Code meiner Zigbee-Liste – vielleicht ist ja auch für dich etwas Interessantes dabei :wink:

type: custom:config-template-card
entities:
  - sensor.zigbee_anzahl_angezeigte_gerate
  - input_text.zigbee_filter
  - input_text.zigbee_lqi_filter
  - input_boolean.zigbee_liste_erweitern
card:
  type: custom:mod-card
  card_mod:
    style: |
      ha-card {
        background: #FFE9C4 !important;
        border-radius: 12px !important;
        padding: 8px;
        --primary-text-color: #2c2c2c;
        --secondary-text-color: #5a5a5a;
      }
  card:
    type: vertical-stack
    cards:
      - type: custom:button-card
        icon: mdi:zigbee
        name: ZigBee
        label: >
          <ha-icon icon="mdi:signal" style="width:
          var(--card-mod-label-font-size); height:
          var(--card-mod-label-font-size); vertical-align: middle; margin-right:
          4px;"></ha-icon>Signalstärke
        show_label: true
        styles:
          card:
            - height: auto
            - padding: 5%
            - background: "#d3bc99"
            - border-radius: 12px
            - border: 2px solid
            - box-shadow: none
          grid:
            - grid-template-areas: "\"i n\" \"i l\""
            - grid-template-columns: 35% 1fr
            - grid-template-rows: 2.1fr 1.1fr
            - align-items: center
          container:
            - width: 80%
            - margin: 0 auto
          icon:
            - width: var(--card-mod-icon-width, 8vw)
            - color: "#2c2c2c"
          name:
            - font-size: var(--card-mod-name-font-size, 3.9vw)
            - justify-self: start
            - font-weight: bold
            - color: "#2c2c2c"
            - line-height: 1.1
            - white-space: normal
          label:
            - font-size: var(--card-mod-label-font-size, 2vw)
            - justify-self: start
            - color: "#5a5a5a"
            - line-height: 1.1
            - display: flex
            - align-items: center
        card_mod:
          style: |
            :host {
              --card-mod-icon-width: 8vw;
              --card-mod-name-font-size: 3.9vw;
              --card-mod-label-font-size: 2vw;
            }
            @media (max-width: 670px) {
              :host {
                --card-mod-icon-width: 15vw !important;
                --card-mod-name-font-size: 7vw !important;
                --card-mod-label-font-size: 4.5vw !important;
              }
            }
            @media (min-width: 1500px) {
              :host {
                --card-mod-icon-width: 80px !important;
                --card-mod-name-font-size: 40px !important;
                --card-mod-label-font-size: 24px !important;
              }
            }
      - type: entities
        entities:
          - entity: input_text.zigbee_filter
            name: Gerätename suchen
          - entity: input_text.zigbee_lqi_filter
            name: LQI Filter (z.B. >150)
            icon: mdi:signal
          - entity: input_boolean.zigbee_liste_erweitern
            name: Alle Geräte anzeigen
        card_mod:
          style: |
            ha-card { 
              background: transparent !important; 
              border: none !important;
              --card-mod-icon-color: #2c2c2c !important;
            }
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            name: ● Sehr gut (>150)
            styles:
              card:
                - background: transparent
                - border: none
                - box-shadow: none
                - padding: 2px
              name:
                - color: "#2e7d32"
                - font-weight: bold
                - white-space: normal
          - type: custom:button-card
            name: ● Gut (50-150)
            styles:
              card:
                - background: transparent
                - border: none
                - box-shadow: none
                - padding: 2px
              name:
                - color: "#f9a825"
                - font-weight: bold
                - white-space: normal
          - type: custom:button-card
            name: ● Schlecht (<50)
            styles:
              card:
                - background: transparent
                - border: none
                - box-shadow: none
                - padding: 2px
              name:
                - color: "#c62828"
                - font-weight: bold
                - white-space: normal
        card_mod:
          style: |
            ha-card { --card-mod-card-font-size: 16px; }
            @media (max-width: 500px) {
              :host { --card-mod-card-font-size: 11px; }
              .name { line-height: 1.1; display: block; }
            }
      - type: custom:mod-card
        card_mod:
          style:
            bar-card:
              $: >
                ha-card {
                  padding-bottom: 1px !important;
                  padding-top: 1px !important;
                  padding-left: 1px !important;
                  padding-right: 1px !important;
                  background: none !important;
                  border-radius: 12px !important;
                  border-style: hidden !important; 
                  }  
                card-header {
                  white-space: pre !important; /* Erlaubt das \n als Umbruch */
                  line-height: 1.2 !important;
                  display: block !important;
                }  bar-card-name, .bar-card-value {
                  font-size: 12px !important;
                  line-height: 0.9 !important;
                  margin: 3 !important;
                  padding: 0 !important;
                  color: white !important;
                  text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
                  font-weight: bold !important;
                }


                ha-state-icon {
                  color: var(--bar-fill-color) !important;
                }
        card:
          type: custom:auto-entities
          card:
            type: custom:bar-card
            title: |-
              ${
                var count = states['sensor.zigbee_anzahl_angezeigte_gerate'].state;
                var isExpanded = states['input_boolean.zigbee_liste_erweitern'].state === 'on';
                var suffix = isExpanded ? 'ZigBee Geräte gefunden.' : 'Geräte von max. 10 gefunden.';
                count + '\n' + suffix
              }
            unit_of_measurement: lqi
            min: 0
            max: 255
            height: 43px
            positions:
              icon: outside
              name: inside
              value: inside
            severity:
              - color: "#c62828"
                from: 0
                to: 50
              - color: "#f9a825"
                from: 51
                to: 150
              - color: "#2e7d32"
                from: 151
                to: 255
          filter:
            template: >
              {% set name_search = states('input_text.zigbee_filter') | lower %}
              {% set lqi_search = states('input_text.zigbee_lqi_filter') |
              replace(' ', '') %} {% set show_all =
              is_state('input_boolean.zigbee_liste_erweitern', 'on') %}

              {% set devices = states.sensor 
                | selectattr('entity_id', 'search', 'linkquality')
                | rejectattr('state', 'in', ['unavailable', 'unknown', 'none'])
                | selectattr('entity_id', 'search', name_search)
                | list %}

              {% set ns = namespace(filtered=[]) %}

              {% for d in devices %}
                {% set val = d.state | int %}
                {% set keep = false %}
                {% if lqi_search == '' %} {% set keep = true %}
                {% elif lqi_search.startswith('>') %} 
                  {% if val > (lqi_search | replace('>', '') | int) %} {% set keep = true %} {% endif %}
                {% elif lqi_search.startswith('<') %} 
                  {% if val < (lqi_search | replace('<', '') | int) %} {% set keep = true %} {% endif %}
                {% elif '-' in lqi_search %}
                  {% set parts = lqi_search.split('-') %}
                  {% if val >= (parts[0] | int) and val <= (parts[1] | int) %} {% set keep = true %} {% endif %}
                {% endif %}
                
                {% if keep %}
                  {% set clean_name = d.attributes.friendly_name | replace(' Linkquality', '') | replace(' linkquality', '') %}
                  {% set ns.filtered = ns.filtered + [{
                    'entity': d.entity_id,
                    'name': clean_name,
                    'lqi': val
                  }] %}
                {% endif %}
              {% endfor %}

              {# WICHTIG: Hier sortieren ich nach LQI (val), damit die Top 10
              auch die 10 stärksten sind #} {% set sorted_list = ns.filtered |
              sort(attribute='lqi', reverse=true) %}

              {{ sorted_list if show_all else sorted_list[:10] }}
          sort:
            method: state
            reverse: true
            numeric: true

1 „Gefällt mir“

Danke für dein Feedback und freut mich wenn es gefällt. :slight_smile: Das sollte nicht sein mit dem Chart zoom, beim darüberfahren mit der Maus, nur mit dem Mausrad sollte eigentlich gescrollt werden können. Schreibe ich ebenfalls mit auf die Liste.