search

Clooos / Bubble-Card

Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.
MIT License
2k stars 57 forks source link

Style on an entity with 4 states #824

Closed alexcool83 closed 1 month ago

alexcool83 commented 1 month ago

I have an entity that I want to change color with bubble card, which is not on-off, but has four states: alarm, ready, fault, short-circuit. I tried setting this in the style part of bubble-card but it always takes last color. The states are regularly detected by a test template that I made in home assistant.

.bubble-button-card-container { opacity: 1 !important; background-color: ${state === 'allarme' ? 'red' : state === 'guasto' ? 'orange' : state === 'allarme' ? 'red' : 'grey'} !important; }

UberDudePL commented 1 month ago

Hey, have you tried to apply style using full hass.state option? it works for me for two different states: .bubble-icon { color: ${hass.states['person.gosia'].state === 'praca' ? 'var(--accent-color)' : hass.states['person.gosia'].state === 'home' ? '#04a5e5' : ''} !important; }

Replace person.gosia with you entity and it should work :)

alexcool83 commented 1 month ago

With two states it works as per manual, I wanted to understand and know if it is possible to overcome the two as in the case of my 4-state entity.

UberDudePL commented 1 month ago

Hey, just tested in my HA with Input_Text and I was able to apply 5 different colors to icon based on 4 criteria and 5 for anything else

styles: |
  .bubble-icon {
    color: ${hass.states['input_text.test4'].state === 'Test1' ? 'var(--accent-color)' : hass.states['input_text.test4'].state === 'Test2' ? '#04a5e5' : hass.states['input_text.test4'].state === 'Test3' ? 'blue' : hass.states['input_text.test4'].state === 'Test4' ? 'red' : ''} !important;
  }

I assume you can apply the same for your entity. Reminder, it is case sensitive

alexcool83 commented 1 month ago

Everything perfect, I had to replicate the entity for each state...