timer-bar-card
timer-bar-card copied to clipboard
"icon:" and "translation:" from another entity
Hello,
It´s hard to describe my problem / idea. But I will try my best to make it understandable. I do not know if this is even possible to code but I have following idea:
Is it possible to link the "icon:" and "translation" function to another entity?
Explanation:
At the moment I have this card on my Dashboard:
The "Play-Button" activates an automation which proves if I have enough PV Energy and some Energy in my battery pack. If true the dishwasher starts and the automation gets deactivated. While the automation is active the Play-Icon is orange. I am able to see if I activated the automation.
But imo, this card is not very attractive.
First I tried conditional cards: Only show play-button if not running. If running dont show play button, only show timer-bar. I never got this to work.
Then I tried "extend_paper_buttons_row". But the paper button showed up just beside "Inactive". Also not very attractive. The problem here is that "layout: hide_name" aligns on the left. If it would stay right like "full_row" this would look much better.
And then I had the idea for this topic:
type: entities
title: Geschirrspüler
entities:
- type: custom:timer-bar-card
entity: sensor.geschirrspuler_operation_state
icon: mdi:play-box
end_time:
entity: sensor.geschirrspuler_remaining_program_time
text_width: 4.5em
bar_background: rgb(0, 0, 0)
bar_foreground: var(--paper-item-icon-color)
bar_width: calc(90% - 10em)
bar_radius: 7px
bar_height: 14px
layout: hide_name
translations:
Inactive: Starten
tap_action:
action: call-service
service: automation.toggle
data: {}
target:
entity_id: automation.geschirrspuler_start
Ends up like this:
In this solution the "Play-Icon" is a button. But it is not going orange if the automation is active. So I do not know if I already pushed it. If I would be able to link the "icon:" to my automation, I can change the active_color to e.g. orange and can see if the automation is running. And if I would be able to link the "translation" to my automation I can write: "Start" when the automation is off "Waiting on conditions..." for on.
When the dishwasher starts (operation_state == Run) the progress bar appears instead of the translation.
What I am achieving with this is, that I have an implemented "conditional" card. IMO this would look really nice. I hope I described it understandable. I have no idea if this is even possible...
Kind regards, SiL
I tried something new.
Now I have a conditional entity row in my "entities:"
Code:
type: entities
title: Geschirrspüler
entities:
- type: custom:timer-bar-card
entity: sensor.geschirrspuler_operation_state
active_state: Run
active_icon: mdi:update
icon: mdi:play-box
end_time:
entity: sensor.geschirrspuler_remaining_program_time
text_width: 4.5em
bar_background: rgb(0, 0, 0)
bar_foreground: var(--paper-item-icon-color)
bar_width: calc(90% - 10em)
bar_radius: 7px
bar_height: 14px
layout: hide_name
translations:
Inactive: Starten
tap_action:
action: call-service
service: automation.toggle
data: {}
target:
entity_id: automation.geschirrspuler_start
- type: conditional
conditions:
- entity: automation.geschirrspuler_start
state: 'on'
row:
entity: automation.geschirrspuler_start
name: Wartet auf Bedingungen
icon: mdi:update
It only appears when the automation is on. But its still not looking good. :/
Hey! Sorry I had missed this earlier. It looks like you have a lot of different card configurations to choose from. I can answer your question about how to change the icon color.
I just added a section to the README showing how you can use templates in the configuration.
Here's an example I put together with a timer. I only show the paper buttons row when the timer is idle, and the icon color changes the orange when the timer is running:
Is that sort of what you were imagining?
type: custom:config-template-card
variables:
STATE: states['timer.alarm'].state # CHANGE TO AUTOMATION
entities:
# ADD AUTOMATION HERE
# You need to list every entity referenced in the templates
- timer.alarm
style:
'--paper-item-icon-color': '${ STATE == "active" ? "orange" : "" }' # Override the icon color
element:
type: icon # This doesn't really do anything.
# The element field needs be specified though for style to take effect (don't know why)
card:
type: custom:timer-bar-card
entities:
- timer.alarm
extend_paper_buttons_row:
position: right
buttons:
- icon: mdi:play
tap_action:
action: call-service
service: timer.start
service_data:
entity_id: timer.alarm
styles:
display: '${ STATE == "active" ? "none" : "" }' # Setting display to none hides the paper buttons row
For your automation, you should add the automation's entity id under the first entities
and change the STATE
variable.
Hello,
thanks for your answer.
After the new patch, my last solution is a litte bit broken now. :/
After the new patch the "Starten" (see image in my second post in this thread) went to the right side. Still works, but doesn´t look very nice.
To fix this I now changed my code from this:
layout: hide_name
translations:
Inactive: Starten
to this
name: Starten
translations:
Inactive: ' '
which fixed the "Starten" on the right side back to the left right next to the mdi:play-icon BUT still is there while the timer-bar-card is active and show the timer-bar. So it shows "Starten" while already active. layout: hide_name_active could fix this if available. ;)
Back to your solution: I tried your solution above. But with the card-templater the "normal-timer-bar-card-functions" dont work as expected anymore.
For example:
type: custom:card-templater
variables:
STATE: states['automation.geschirrspuler_start'].state
entities:
- automation.geschirrspuler_start
- sensor.geschirrspuler_operation_state
- sensor.geschirrspuler_remaining_program_time
style:
'--paper-item-icon-color': '${ STATE == "active" ? "orange" : "" }'
element:
type: icon
card:
type: custom:timer-bar-card
entities:
- sensor.geschirrspuler_operation_state
active_state: Run
active_icon: mdi:update
icon: mdi:play-box
end_time:
entity: sensor.geschirrspuler_remaining_program_time
text_width: 4.5em
bar_background: rgb(36, 60, 64)
bar_foreground: var(--state-fan-active-color)
bar_width: calc(90% - 10em)
bar_radius: 10px
bar_height: 40px
name: Geschirrspüler
translations:
Inactive: 'Starten'
tap_action:
action: call-service
service: automation.toggle
data: {}
target:
entity_id: automation.geschirrspuler_start
sync_issues: ignore
extend_paper_buttons_row:
position: right
buttons:
- icon: mdi:play
tap_action:
action: call-service
service: automation.toggle
data: {}
target:
entity_id: automation.geschirrspuler_start
styles:
display: '${ STATE == "active" ? "none" : "" }'
Ends up like this:
For example
- "name:" should be "title:"
- translation: inactive: 'Starten' should be "name:" while inactive etc. pp.
Maybe I have to rethink everything... My start-intention was it to have a card as a big button on the tablet to activate the automation (normally disabled). If the automation is activated it should show me that he is waiting for the conditions. If i press it again it should disable the automation (e.g. i forgot something to put in the dishwasher). If the dishwasher started it should show me the timer-bar-card.