Bubble Card Hintergrund ändern bei Clima-Kart

Allgemein
1

Hallo zusammen,
ich bin neu hier und hoffe es kann mir geholfen werden.
Versuche den Hintergrund einer Clima Bubble Card mit einem Attribut zu ändern.

Hier mal mein Versuch den ich in der Karte unter custom styles eingebunden habe.
<
.bubble-button-background {
background-color: ${hass.states[‘climate.test_thermostat_buro_v1’].attributes.preset_mode === ‘Abwesend’ ? ‘green)’ : ‘red)’} !important;

Leider änder sich hier nicht wenn das Attribut present_mode umschaltet

Hat jemand eine Idee was ich falsch mache???

2 
  .bubble-climate-container{
          background: ${hass.states['climate.hm_druckerraum_schlafzimmer'].attributes['preset_mode'] === 'EIN' ? '#006400' : 
                        hass.states['climate.hm_druckerraum_schlafzimmer'].attributes['preset_mode'] === 'AUS' ? '#104E8B' :
                        hass.states['climate.hm_druckerraum_schlafzimmer'].attributes['preset_mode'] === 'BOOST' ? '#EE0000' :
                        hass.states['climate.hm_druckerraum_schlafzimmer'].state === 'heat' ? '#EE0000' : 'gray'} !important; 
  }
3

Hallo Mandi,

danke dir für den Code werde es gleich mal testen.
Wenn er Helfer generetic Thermostat als HVK Heizen,Aus und Auto hätt wäre das viel einfacher dann würde es direkt funktionieren.
Ich habe eine Automation geschrieben wo schaut ob das fenster offen oder geschlossen ist und entsprechend schalte ich die Solltemperatur um.
Bei dem hier habe ich ja leider nur die option HVK Heizen oder AUS, was mich dazu gebracht hat entsprechend die Voreinstellung umzuschalten.

Wie gesagt werde es gleich mal testen.

4

dieses EIN,AUS,BOOTS sind bei mir Heizprofile. Dieses “heat” ist ein 30 Minuten Booster. Den Code musst du dir anpassen, da ich HMIP (Cloud) benutze.

Beim Code ging es mir nur darum die näher zu bringen wie der Code aussehen sollte um mit Hilfe des Attributes die Hintergrundfarbe ändern zu können.
Die eigentliche Steuerung übernimmt bei mir HMIP. Natürlich kann ich über HA die Heizprofile u. Temp. verändern, mache ich aber sehr selten.

Bubble-Card dient zu 90% dafür, um alles zu sehen, was in meinen beheizten Räumen los ist :wink:

Screenshot_271

5

Habe jetzt einen Farbumschwung hinbekommen, allerdings entspricht der nicht dem HEX Code.
Es sieht aus als ob die das standard Orange als Basisfarbe bleibt

Habe auch schon versucht ganz wide HEX Farbcodes einzusetzen aber das orange bleibt immer irgendwie bestandteil der Farbe

6

Habe jetzt bemerkt wenn die den heizbetrieb ausschalte funktionier der Farbumschwung wie er soll.
Sobald die den Heizbetrieb wieder aktiviere überwiegt die orangne Farbe wieder

7

versuche es mal mit “rgb” Farbcodes

Beispiel: rgb(255,0,0) ist rot

und vl. nach Änderungen den Cache leeren!

8

hat leider nichts gebracht, sobald der Heizbetrieb ein ist sieht es so aus

Bild Fabe1

Bild Fabe2

.bubble-climate-container{
          background: ${hass.states['climate.test_thermostat_buro_v1'].attributes['preset_mode'] === 'none' ? 'rgb(34,139,34)' : 
                        hass.states['climate.test_thermostat_buro_v1'].attributes['preset_mode'] === 'away' ? 'rgb(255,0,0)' :
                        hass.states['climate.test_thermostat_buro_v1'].state === 'heat' ? 'rgb(255,0,0)' : 'grey'} !important; 
  }
9

hast du den Background eventuell eingeschalten?

Screenshot_272

wenn ja, mach diesen mal aus.

10

Das war der Fehler :see_no_evil:
Super jetzt klappt es!
Vielen Dank für deine Hilfe und deine Zeit, hätte ich alleine nicht hinbekommen!!!

11

kein Problem und klar hättest du es auch hinbekommen… alles nur eine Frage der Zeit. Die Bubble-Card ist toll aber noch etwas “undurchsichtig”.

Wenn du mal sehr viel Zeit hast, kannst ja mal hier reinschaun. Im Grunde genommen findet man hier alles (wenn man massig Zeit hat ^^). Hier habe ich mir auch schon einiges rausgezogen :wink:

12

Links sind gespeichert :+1:
werde sie mir bei Gelegenheit mal zu Gemüte führen

Dann wünsche ich dir mal frohe Feiertage und nochmals Danke :slight_smile:

1 „Gefällt mir“
13

Screenshot_20241217-224801
Screenshot_20241217-2248011080×2172 74 KB

Screenshot_20241217-224805
Screenshot_20241217-2248051080×2184 104 KB

Bei mir ist auch das dropdown Menü angepasst

Screenshot_20241223-081204
Screenshot_20241223-0812041080×2400 147 KB

Falls du einen code willst schicke ich den noch
Bin gerade mobil unterwegs da ist Code kopieren echt ne Herausforderung :smiley:

14

hallo,
sieht interessant aus, würde mich freuen wenn ich mir den Code mal ansehen könnte. Werde dann zu der Karte noch viel lernen können :slight_smile:

15

Hier der Code (für eine Klimaanlage)

type: custom:bubble-card
card_type: climate
entity: climate.esszimmer
sub_button:
  - entity: climate.esszimmer
    select_attribute: fan_modes
    show_arrow: false
  - name: HVAC modes menu
    state_background: false
    show_arrow: false
    tap_action:
      action: toggle
    icon: mdi:power
    select_attribute: hvac_modes
    show_background: true
    show_icon: true
icon: mdi:air-conditioner
name: Esszimmer
show_state: true
show_attribute: true
force_icon: false
state_color: true
card_layout: large
attribute: current_temperature
styles: |-
  .bubble-icon {
      color: ${state === 'on' ?  '#FFAF45' : '#ffffff'} !important;
  }

  .bubble-icon-container {
      background: ${hass.states['climate.esszimmer'].state === 'heat' ? '#FF9E53' :  
                  hass.states['climate.esszimmer'].state === 'cool' ? '#5293B4' : 
                  hass.states['climate.esszimmer'].state === 'fan_only' ? '#7B9175' : 
                  hass.states['climate.esszimmer'].state === 'off' ? '#212531' : 
                  '#91AC8F'} !important; 
  }

  .bubble-climate {
      border-radius: 10px !important;
      background-color: ${hass.states['climate.esszimmer'].state === 'heat' ? '#ff7b18' : 
                        hass.states['climate.esszimmer'].state === 'cool' ? '#3A6D8C' :
                        hass.states['climate.esszimmer'].state === 'fan_only' ? '#66785F' :
                        '#252a38'} !important; 
  }

  .bubble-sub-button-1 {
      background: ${hass.states['climate.esszimmer'].state === 'heat' ? '#FF9E53' :
                  hass.states['climate.esszimmer'].state === 'cool' ? '#5293B4' :
                  hass.states['climate.esszimmer'].state === 'fan_only' ? '#7B9175' :
                  '#212531'} !important;
  }

  .bubble-sub-button-2 {
      background: ${hass.states['climate.esszimmer'].state === 'heat' ? '#FF9E53' :
                  hass.states['climate.esszimmer'].state === 'cool' ? '#5293B4' :
                  hass.states['climate.esszimmer'].state === 'fan_only' ? '#7B9175' :
                  '#212531'} !important;
  }

  .bubble-temperature-container {
      background: ${hass.states['climate.esszimmer'].state === 'heat' ? '#FF9E53' :
                  hass.states['climate.esszimmer'].state === 'cool' ? '#5293B4' :
                  hass.states['climate.esszimmer'].state === 'fan_only' ? '#7B9175' :
                  '#212531'} !important;
  }

  ha-card {
    --bubble-select-list-background-color: #252a38 !important;
    --bubble-list-item-accent-color: #212538 !important;
  }
tap_action:
  action: none
double_tap_action:
  action: none
hold_action:
  action: none
columns: 4
16

werde es mir heute Abend mal genauer anschauen :slight_smile: Finde es immer klasse wenn man von erfahren Usern ein code sich anschauen kann um die Funktionen besser verstehen und lernen zukönnen.

Nochmals vielen Dank für den Code

1 „Gefällt mir“