Bubble Card Icon umfärben nach Status

Dashboards
1

Hallo Smarte Gemeinde,

ich nutze sehr viel Bubble Card mittlerweile und möchte gerne mein Icon einfärben lassen, sobald der Verbrauch über null ist und wenn der verbrauch unter null ist, also das ich einspeise soll das Icon anders eingefärbt werden.

Ich habe es mit folgendem Code versucht, aber leider ohen Erfolg.

.bubble-icon {
    color: ${hass.states['sensor.smartmeter_ehz_power'].state === 'float <= 0 ' ? '#8cbd8c' : '#ff7465'} !important;
  }

Könnt Ihr mir helfen?

Vielen Dank im Vorraus
EUER
SmarterBauherr

2

Versuche es mal so:

  .bubble-icon {
    opacity: 1 !important;
    color: 
      ${
        hass.states[entity].state < 0 ? 
        '#8cbd8c' : 
        '#ff7465'
      } 
  } !important;
1 „Gefällt mir“
3

Die custom-button-card bietet über die Konfiguration die Möglichkeit auf bestimmte Werte zu reagieren (mit state und dann value für den gewünschten Wert).

type: custom:button-card
entity: sensor.total_power
name: Stromfluss
icon: mdi:flash
show_state: true
state:
  - value: 0
    operator: ">"
    icon: mdi:flash
    color: red
  - value: 0
    operator: <
    icon: mdi:flash
    color: green
styles:
  icon:
    - width: 40px
  card:
    - padding: 10px

Oder zweite Möglichkeit wäre über style der button-card das icon zu einzufärben. So benötigt man in diesem Fall kein card-mod. :slight_smile:

type: custom:button-card
entity: sensor.total_power
name: Stromfluss
icon: mdi:flash
show_state: true
styles:
  card:
    - padding: 10px  
  icon:
    - width: 40px
    - color: |
        [[[
          if (entity.state > 0) return "red";
          if (entity.state < 0) return "green";
          return "gray";
        ]]]

Bei der bubble card habe ich auch gerade nochmal geschaut:
Da ist die bubble-card mit eigener css config anscheinend auch schon sehr flexibel. Im Link sind einige gute Beispiele aufgeführt.

styles: |
  ${icon.setAttribute("icon", hass.states['vacuum.downstairs'].state === 'error' ? 'mdi:alert' : 'mdi:robot-vacuum')}

Hier ein Beispiel für die Farbänderung mit der bubble-card. Funktioniert auch hier ohne card mod direkt über styles der bubble-card. :slight_smile:

type: custom:bubble-card
card_type: button
entity: sensor.total_power
icon: mdi:transmission-tower
name: Netzfluss
button_type: state
styles: |
  .bubble-icon {
    color: ${parseFloat(hass.states['sensor.total_power'].state) > 0 ? 'red' : parseFloat(hass.states['sensor.total_power'].state) < 0 ? 'green' : 'grey'} !important;
  }
1 „Gefällt mir“
4

@jayjojayson
Du beschreibst Formatierungen für Custom Button-Cards.
SmarteBau möchte aber die Icons von Bubble-Cards verändern.

2 „Gefällt mir“
5

Danke, habe ich glatt überlesen… war wieder so auf meine custom-button-card fixiert… :sweat_smile: Meinen Beitrag habe ich angepasst. Im github der bubble-card sind ein paar gute Beispiele wie man das icon ändern kann.

6

Vielen Dank an euch beide :call_me_hand:

@HAndy Ja du hast richtig gelesen :smiley:
@jayjojayson Danke auch für deine anderen Vorschläge, diese hatte ich nun 2 Jahre und finde die Bubble einfach etwas ansprechender :smiley:

Ich werde die Codes mal testen und euch dann bescheid geben.