Darstellung von Hinweisen/Updates im Footer

Dashboard/Cards/Frontend
1

Moin Community,

ich bin noch relativ frisch in Home Assistant und bin gerade dabei mein Dashboard und alles einzurichten, was bis dato sehr gut funktioniert :slight_smile:.

Jetzt habe ich doch zwei Fragen an die Community und hoffe das der ein oder andere vielleicht mir einen Denkanstoß zur Lösung geben kann bzw. in die richtige Richtung.

In meinem Footer habe ich z.B. mein “NAS” als auch Einstellungen untergebracht, dort würde ich mir gerne direkt anzeigen lassen sofern es ein Update gibt oder sich der Zustand eines meiner Volumes verändert. Gibt es keine Updates oder ähnliches soll nur die Card angezeigt werden, erst wenn sich eine Veränderung >0 ergibt soll diese dann mit der entsprechenden Ziffer angezeigt werden.

Hier mal ein Beispiel was ich meine:

footer
footer2314×214 47.5 KB

Bei mir ist das ganze etwa so aufgebaut
footer2

Wie würdet ihr das ganze Thema angeben und habt ihr vielleicht ein paar Tipps/Hinweise in welche Richtung ich mich da einlesen sollte. Leider habe ich aktuelle keine Idee unter welcher Config ich da suchen sollte :frowning:

Vielen Grüße aus dem Norden
Danny

2

Benutzt du das auf custom:button-card basierende Dashboard von Mattias Persson oder hast du das selbst gebaut? Ohne Code oder Angabe der Karte schwierig.

3

die custom:button-card nutze ich ja, ich habe mich an das Dashboard angelehnt, jedoch nicht in Verwendung.

Ich habe allerdings gerade noch einen Beitrag gefunden: https://github.com/custom-cards/button-card

Damit bin ich dem ganzen ein Stück näher gekommen:
footer3
footer4

folgenden Code habe ich dafür verwendet:

styles:
  card:
    - border-radius: 10px
  name:
    - margin-left: "-26%"
  styles: null
  grid:
    - position: relative
  custom_fields:
    notification:
      - background-color: |
          [[[
            if (states['sensor.counter_on_light'].state > 0)
              return "#8b3333";
            return "";
          ]]]
      - color: "#d6d6d6"
      - text-align: center
      - text-overflow: unset
      - z-index: 1
      - border-radius: 50%
      - position: absolute
      - left: 80%
      - top: "-5%"
      - height: 15px
      - width: 15px
      - font-size: 12px
      - line-height: 15px
custom_fields:
  notification: |
    [[[ return Math.floor(states['sensor.counter_on_light'].state / 1) ]]]

der Sensor dient dabei gerade nur als Platzhalter zu Testzwecken der Darstellung. Soweit so gut. Das einzige was jetzt noch fehlt ist, das ich wenn eben der Wert “0” ist nichts angezeigt wird :confused:

EDIT: das wäre auch gelöst… ich werde das in ruhe nochmal testen und dann gerne den neuen Code einstellen.

4

Arbeite doch mit display:

styles:
  custom_fields:
    notification:
      - bla
      - display: |
          [[[
            return states['sensor.counter_on_light']?.state > 0
              ? 'block'
              : 'none';
          ]]]
5

danke :+1: ich hatte es zunächst einfach so versucht die Farbe auf “transparent” zu stellen. Da ist deine Lösung besser.