Custom:button-card, 2 Werte

Dashboard/Cards/Frontend
, ,
1

Hallo,

ich bin seit langem mal wieder dabei mir ein “neues” Dashboard zu bauen.
So die wirklich richte Lösung habe ich noch nicht gefunden. Auf dem HD10 und dieversen mushrooms mit tausend card-mod Anpassungen wird es doch dann irgendwann ruckelig. Liegt vielleicht auch an dem kleinen green im Keller.

Naja wie dem auch sei, versuche ich die vieles ber die custom: button-card darzustellen.
Mit den Thermostaten komme ich aber nicht dahin wo ich hin wollte :slight_smile:

image
links nur die Temperatur, ich wollte einfach nur daneben noch die Luftfeuchtigkeit darstellen, dabei kam dann das rechte Bild raus. Und ich finde einfach meinen Fehler nicht.

type: custom:button-card
entity: sensor.aussentemperatur_temperatur
name: Garten
show_state: false
styles:
  card:
    - font-size: 18px
    - width: 196px
    - height: 70px
    - background-color: white
  grid:
    - grid-template-areas: '"i n" "i l"'
    - grid-template-columns: 1fr 2fr
    - grid-template-rows: 1fr 1fr
  icon:
    - justify-self: center
    - align-self: center
    - width: 50px
    - height: 50px
  name:
    - justify-self: start
    - align-self: end
    - padding-left: 0px
    - font-weight: bold
  custom_fields:
    label:
      - justify-self: start
      - align-self: start
      - padding-left: 0px
      - font-size: 14px
custom_fields:
  label: |
    [[[
      const temp = states['sensor.aussentemperatur_temperatur'].state;
      const humidity = states['sensor.aussentemperatur_luftfeuchtigkeit'].state;
      return `${temp}°C | ${humidity}%`;
    ]]]
tap_action:
  action: none
hold_action:
  action: none

Ich bin mir sicher es ist nur eine Kleinigkeit aber ich bin mit meinem Latein am Ende und hoffe auf eure Hilfe.
Danke im Voraus.

Gruß
Wolf

3

Hi
Ich habe etwas mit den Style Parametern gespielt und selbst wenn ich das Frame Konzept nicht ganz verstanden habe, so erreiche ich den von Dir gewünschten Effekt.
garten

styles:
  card:
    - font-size: 18px
    - width: 196px
    - height: 70px
    - background-color: white
  grid:
    - grid-template-areas: '"i n" "i label"'
    - grid-template-columns: 60px 1fr
    - grid-template-rows: 1fr 1fr
  icon:
    - justify-self: center
    - align-self: center
    - width: 50px
    - height: 50px
  name:
    - justify-self: start
    - align-self: end
    - padding-left: 0px
    - font-weight: bold
  custom_fields:
    label:
      - padding-right: 60px
      - font-size: 14px

Kaum habe ich obige Frickellösung veröffentlicht, da sehe ich das eigentliche Problem in Deinem Code:

Dein:

   - grid-template-areas: '"i n" "i l"'

Verbesserung:

    - grid-template-areas: '"i n" "i label"'

Du definierst label verwendest aber l.

:crayon:by HarryP: Zusammenführung Doppelpost (bitte “bearbeiten” Funktion nutzen)

1 „Gefällt mir“
4

Vielen Dank für den Wink mit dem Zaunpfahl :smiley:
Ich habe deine “Frickellösung” übertragen und noch aussortiert (padding und font-size rausgenommen) und dann viel es mir selbst wie Schuppen von den Augen!

Kann halt nicht funktionieren, wenn ich - wie du schon festgestellt hast - “l” nehme, aber “label” definiere…
Schade das ich nicht selbst drauf gekommen bin, dabei habe ich mir solche Mühe gegeben überhaupt beide Werte ins label zu kriegen :smiley:

Naja, vielen Dank nochmal, hast mir sehr geholfen :+1: