HA-one
1
I recently came across the timer-bar-card frontend (GitHub - rianadon/timer-bar-card: A progress bar display for Home Assistant timers) and have been gleefully finding places to insert it in my existing cards.
I have a script that runs an air filter for 10 minutes. The top is the original script entity card, the bottom is how the timer-bar-card entity looks.
If I activate it, it then looks like this:
Is there a way to alter the “Off” in the timer-bar-card to “RUN,” so it looks like the standard script entity?
Like this…
type: custom:timer-bar-card
entity: timer.timer
sync_issues: fix
translations:
idle: Yup!
Adjust idle: to your timer’s state and make the text whatever you want.
1 Like
HA-one
3
Found a way.
Looking at some examples in the timer-bar-card, I realized I can punch in a translations line.
type: custom:timer-bar-card
duration:
fixed: "00:10:00"
tap_action:
action: toggle
hold_action:
action: call-service
service: switch.toggle
target:
entity_id: switch.air_filter_socket_1
sync_issues: fix
state_color: true
translations:
off: RUN
So “off” becomes RUN. Interestingly “off” is acceptable but “Off” is not. Now to find out how to color it.
You’ll need card_mod for that…
HA-one
5
Thank you! Looks like I found and posted my response right after your reply.
I’m looking at card-mod but it’s not clicking with me how to make just the state a color as opposed to the whole entity.
I was incorrect, card_mod doesn’t work from what I can see. I’ll keep testing
1 Like
The option to change colors are built in, but I am searching for way to work around that…
type: custom:timer-bar-card
entities:
- timer.alarm
modifications:
- elapsed: 40%
bar_foreground: orange
active_icon: mdi:fire
bar_height: 12px
- elapsed: 70%
bar_foreground: red
active_icon: mdi:fire-alert
You can adjust the colors with card_mod if the timer-bar-card is embedded in an entities card
type: entities
entities:
- type: custom:timer-bar-card
sync_issues: fix
state_color: true
entity: timer.timer
translations:
idle: RUN
card_mod:
style:
timer-bar-entity-row:
$:
div.generic-entity-row: |
div.text-content.value.pointer {
color: blue !important;
padding-right:10px
}
1 Like
