Room card in bubble cards mit Temperatur und Luftfeuchte

[onkelbobby]

Hallo zusammen,

ich versuche mich seit einiger Zeit an einem ansprechenden Dashboard basierend auf den Bubble cards. Mein Startscreen besteht aus mehreren Bubble Room Cards ähnlich wie in diesem Screenshot

jetzt würde ich zusätzlich noch gerne die Temperatur und Luftfeuchtigkeit in jedem Raum unterhalb des Titels anzeigen… hab das hier mal in einen Screenshot gebastelt.

Ich habe versucht den Code der verlinkten Github Seite in meinen einzubinden, doch wie ich es auch anstelle wird bei mir leider nichts angezeigt.

Könnte mir bitte jemand auf die Sprünge helfen, was ich bei meinem Code ändern muss?

type: custom:bubble-card
card_type: button
button_type: switch
card_layout: large-sub-buttons-grid
rows: "3"
modules:
  - room_card
  - frosted_glass
button_action:
  tap_action:
    action: none
  hold_action:
    action: none
sub_button:
  - entity: light.dimmer_kuche
    tap_action:
      action: toggle
    state_background: true
    show_icon: true
    show_name: false
    show_state: false
    show_last_changed: false
    show_attribute: false
    show_background: true
    light_background: false
  - entity: input_boolean.h_kuchenschranke_unten
    tap_action:
      action: toggle
    show_state: false
    show_last_changed: false
    show_attribute: false
    show_background: true
  - entity: input_boolean.h_kuchenschranke_oben
    tap_action:
      action: toggle
    show_background: true
  - entity: input_boolean.dummy
    tap_action:
      action: toggle
grid_options:
  columns: 6
  rows: "3"
use_accent_color: false
scrolling_effect: true
show_icon: true
force_icon: true
show_name: true
show_state: false
show_last_changed: false
show_last_updated: false
show_attribute: false
attribute: supported_color_modes
name: frei gewählter Name
icon: ""
frosted_glass:
  icon_background: dark
  border: vision
  main_shadow: false
  icon_shadow: false
  opacity: 0.02
  background:
    - 255
    - 255
    - 255
  blur: 5
room_card:
  square_icon: false
tap_action:
  action: navigate
  navigation_path: "#kueche"
entity: input_button.kuche_dummy

vielen Dank

[Alex]

Das kannst du über die Custom Styles machen. Hier die Anleitung: GitHub - Clooos/Bubble-Card: Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch. –> Templating texts (like name or state)

Ein Beispiel:

styles: >-
  #${card.querySelector('.bubble-state').innerText = hass.states['sensor.temperature'].state + hass.states['sensor.humidity'].state}

[onkelbobby]

@Alex

#${card.querySelector('.bubble-state').innerText = hass.states['sensor.temperature'].state + hass.states['sensor.humidity'].state}

Danke für Deine Antwort und den Link zur Erklärung.
Ich habe Deinen Code Schnipsel ein bisschen angepasst und natürlich meine Sensoren eingetragen

styles: >-
  #${card.querySelector('.bubble-state').innerText =
  hass.states['sensor.wohnen_temp_temperature_2'].state + '°C  •  ' +
  hass.states['sensor.wohnen_temp_humidity_2'].state + '%'}

und wie beschrieben ganz ans Ende des Yaml Codes angefügt.

Zuerst wurde wieder nichts angezeigt, das lag aber daran, dass zuerst “Show attribute” angeschaltet werden muss

show_attribute: true

Leider rutscht mit dieser Modification auch der Titel sehr weit nach oben, dass es nicht mehr so ansehnlich ist:

Wie kann man das denn verhindern?

[Alex]

Ich denke, hier findest du die richtigen Anregungen, wie du die Position anpassen kannst:

[Styling Module] Room Card · Clooos Bubble-Card · Discussion #1700

[onkelbobby]

vielen lieben Dank!
manchmal braucht es einfach einen Schubser in die richtige Richtung.
Der von Dir verlinkte Github Post war tatsächlich von mir selbst…

genau gesagt muss man mit diesen Werten spielen

.bubble-name-container {
        position: absolute;
        width: 120px;
        #transform:translate(10px,-75px);
        transform:translate(10px,-67px); #(bei Verwendung von Titel und Temp / Hum)
        margin: 0px;
        overflow: visible;
      }