Button Card mit drittem Inhalt

[thphilipp]

Guten Morgen,

ist es irgendwie machbar, in diese Karte noch einen zusätzlichen Sensorwert einzufügen? Ich würde noch gern die Zimmertemperatur dort drinnen haben:

type: custom:button-card
entity: switch.zitronenbaum_pflanzenlampe
color_type: label-card
name: Zitronenbaum Pflanzenlampe
show_icon: false
show_label: true
tap_action:
  action: more-info
  entity: sensor.zitronenbaum_pflanzenlampe_leistung
double_tap_action:
  action: more-info
  entity: sensor.zitronenbaum_pflanzenlampe_energie
hold_action:
  action: toggle
label: |
  [[[
  var pow = states['sensor.zitronenbaum_pflanzenlampe_leistung'].state;
  if (pow != 0.001)
  return 'Leistung: ' + (pow ? pow : '0') + ' W';
    else
    return "Offline";
  ]]]
state:
  - value: "on"
    color: yellow
  - operator: default
    color: rgb(255, 204, 229)
styles:
  card:
    - height: 90px

[justone]

Doku lesen wäre ein guter Tipp:

Oder du ersetzt mal deinen “styles:” Abschnitt durch

styles:
  card:
    - height: 90px
  custom_fields:
    blahblah:
      - position: absolute
      - left: 50%
      - bottom: 2px
custom_fields:
  blahblah: >
    [[[
      return states['sensor.sensorname'].state
    ]]]

blahblah ersetzen durch einen sinnvollen Begriff (an beiden Stellen)
und den sensornamen von deinem Sensor benutzen

Kurze Erklärung:
Das was du gesucht hast sind die “custom_fields” die die Karte bietet.

Im Styles Abschnitt definierst du WO und WIE etwas angezeigt wird.
Im “custom_fields:” Abschnitt dann WAS angezeigt werden soll.

Das ist jetzt sehr verkürzt, in der Doku sind aber gute Beispiele dazu, z.B. das mit den Bildchen der Raspi CPU … aber manchmal sind zu Beginn weniger Zeilen mehr … es sollte dich dann trotzdem ermutigen dort mal zu lesen was du damit alles ändern kannst. Farbe, Schriftgröße … und so weiter.

[thphilipp]

@justone

custom_fields:

Und wie mache ich ein weiteres Custom Field dazu? Würde gern noch rechts daneben das nächste Event (also Einschaltung oder Ausschaltung) einfügen? Und kann man die erste Zeile einen Höher setzen, dass später alles Mittig ist?

type: custom:button-card
entity: switch.zitronenbaum_pflanzenlampe
color_type: label-card
name: Zitronenbaum Pflanzenlampe
show_icon: false
show_label: true
tap_action:
  action: more-info
  entity: sensor.zitronenbaum_pflanzenlampe_leistung
double_tap_action:
  action: more-info
  entity: sensor.zitronenbaum_pflanzenlampe_energie
hold_action:
  action: toggle
label: |
  [[[
  var pow = states['sensor.zitronenbaum_pflanzenlampe_leistung'].state;
  if (pow != 0.001)
  return 'Leistung: ' + (pow ? pow : '0') + ' W';
    else
    return "Offline";
  ]]]
state:
  - value: "on"
    color: yellow
  - operator: default
    color: rgb(255, 204, 229)
styles:
  card:
    - height: 90px
  custom_fields:
    blahblah:
      - position: absolute
      - left: 34%
      - bottom: 5px
      - color: red
custom_fields:
  blahblah: |
    [[[ 
      return "Temperatur" + " "+states['sensor.temperatur_buro_keller_temperature'].state +" °C"
    ]]]

[justone]

Das mit dem ersten Satz in meiner Antwort hattest du überlesen ?
Was hindert dich daran?

Im Abschnitt “STYLES” der Doku steht z.B. das du z.B. den Namen oder den State positionieren kannst.
Ich hatte ja schon geschrieben wofür der STLES Anschnitt ist.
Was hindert dich also daran neben dem BLAHBLAH: noch ein NAME: hinzubasteln und ihn dann mit - top:5px z.B. nach oben zu schieben?

Die 3 Zeilen schaffst du selbst und zwar schneller als hier danach zu fragen ob dir das jemand für dich bastelt. Da bin ich mir sicher.
Du hast schliesslich auch gewusst wie man hier code formiertiert postet und nicht einfach nur Bilder postet … Du kannst doch nix kaputt machen, notfalls machst du die erstemal ne Kopie von der Karte, falls was schiefgeht kannst du sie wieder löschen, falls es klappt dann halt die alte Karte.

[thphilipp]

Danke, der Arschtritt hat geholfen.

Ich habe es jetzt so hinbekommen. Vielleicht ein Hinweis von Euch ob so korrekt oder viel zu umständlich gemacht?

  - type: custom:button-card
    show_name: false
    entity: switch.zitronenbaum_pflanzenlampe
    color_type: label-card
    show_icon: false
    show_label: true
    tap_action:
      action: more-info
      entity: sensor.zitronenbaum_pflanzenlampe_leistung
    double_tap_action:
      action: more-info
      entity: sensor.zitronenbaum_pflanzenlampe_energie
    hold_action:
      action: toggle
    state:
      - value: "on"
        color: yellow
      - operator: default
        color: rgb(255, 204, 229)
    styles:
      card:
        - height: 90px
      custom_fields:
        Temperatur:
          - position: absolute
          - left: 10%
          - bottom: 7px
          - color: red
        Nächstes Event:
          - position: absolute
          - left: 53%
          - bottom: 7px
          - color: green
        Name:
          - position: absolute
          - left: 30%
          - bottom: 60px
          - color: black
        Leistung:
          - position: absolute
          - left: 38%
          - bottom: 32px
          - color: black
    custom_fields:
      Temperatur: |
        [[[ 
          return "Temperatur " + " "+states['sensor.temperatur_buro_keller_temperature'].state +" °C"
        ]]]
      Nächstes Event: |
        [[[ 
          return states['sensor.pflanzenlampe_next_event'].state +" Uhr"
        ]]]
      Name: |
        [[[ 
          return "Beleuchtung Zitronenbaum"
        ]]]
      Leistung: |
        [[[
          var pow = states['sensor.zitronenbaum_pflanzenlampe_leistung'].state;
          if (pow != 0.001)
          return 'Leistung: ' + (pow ? pow : '0') + ' W';
            else
            return "Offline";
        ]]]     

[justone]

Ob umständlich oder weniger umständlich sollte dir egal sein.
Wichtiger ist du hast es selbst hin bekommen und weisst vermutlich auch in 2 Wochen noch an welcher Stelle du etwas ändern kannst sollte es dir dann so doch noch nicht gefallen.

Nur mal als Beispiel ein Bild einer meiner ganz alten Spielereien mit der custom buttom-card …

endlose custom_fields, mal text mal sensorwerte und mal mini-graph cards. Ist halt sehr flexibel und man kann sie für alles mögliche brauchen/missbrauchen.

[thphilipp]

Echt cool, was man damit alles zaubern kann. Danke für die Hinweise.