"icon:" and "translation:" from another entity

[SiL-X]

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

[SiL-X]

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. :/

[rianadon]

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.

[SiL-X]

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_nameactive 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.