Hi, I need little help wit variable in template if it's possible

Configuration Frontend
1

Hi guys.
I want to make a template for my custom buttons integration, but I am stuck,. I have the following:

entity: switch.door
type: custom:button-card
template: light_button
state:
  - value: 'on'
    styles:
      card:
        - transition: all 2s ease
        - border-top: >
            [[[ if (states['timer.timer_entrance'].state == 'idle') return
            "0.5rem solid cyan";  return "0.5rem solid yellow"; ]]]

Can I make from this state: a template in raw file ?

I mean it is possible to use custom timers (like timer.timer_entrance), with template?

Thank you!

2

Do you want to create a template that involves multiple entities, of which one is a timer?

If so, you have two options: use a naming convention for the timer and the other related entity. You can then do a search and replace to change from the one or the other. E.g. if it’s a light such as light.my_light and timer.my_light_timer.

Alternatively, button card templates accept variables. You can specify additional entities that way.

  light_with_timer:
    triggers_update: all
    size: 20%
    color: var(--button-card-light-color)
    styles:
      name:
        - color: var(--paper-item-icon-color)
      label:
        - color: var(--primary-background-color)
      card:
        - font-size: 12px
      grid:
        - grid-template-areas: '"t" "i" "n"'
        - grid-template-rows: min-content 1fr min-content
        - grid-template-columns: 1fr
    custom_fields:
      t:
        card:
          type: custom:button-card
          name: Timer
          entity: "[[[ return entity.entity_id.replace('light.', 'timer.') + '_timer'; ]]]"
          show_name: false
          show_icon: false
          show_state: true
          styles:
            card:
              - font-size: 12px
              - box-shadow: none
            state:
              - margin-top: -1ex
              - margin-bottom: -1ex
              - color: >
                  [[[
                    if (states[`${entity.entity_id}`.replace('light.', 'timer.') + '_timer'].state == 'idle')
                      return "var(--paper-item-icon-color)";
                    else
                      return "var(--custom-color-red)";
                  ]]]
    state:
      - value: 'unavailable'
        styles:
          icon:
            - color: var(--state-icon-unavailable-color)
    tap_action:
      action: toggle
      haptic: light
    double_tap_action:
      action: call-service
      haptic: medium
      service: script.turn_on_light_and_timer
      service_data:
        light: "[[[ return entity.entity_id; ]]]"
        duration: "00:03:00"
    hold_action:
      action: more-info
      haptic: selection

          - type: custom:button-card
            template: light_with_timer
            name: Living Room
            entity: light.living_room_lamp

Source:
Template
Use of template

3

Thank you very much Pieter!

I have some different timers for outside, inside, bathroom, bedroom etc, even for night or evening. So , my code is on all buttons, and I need to change somehow (if is allowed) to reflect the time for specific button.
This is because I want to keep it light for speed propose, because I use a PI.
Unfortunately I cannot adapt your example, because a timer can be used on more buttons., and I canott really use

entity.entity_id.replace('light.', 'timer.') + '_timer';

Thank you!

4

To paraphrase, you have many lights, each with a matching timer you want to display on each button for that light? If so, I think we have the same idea. The code I use is lightweight, AFAIK.

5

well not really. one timer is for 3 buttons.
Like: timer.outside will work with switch.patio, switch.porch and switch.barbecue

so… timer + “outside” will not match let say timer + patio :thinking:

EDIT: Thank you Pieter I figured out.
Do you know if is possible to combine multiple templates?

Here is the solution in case anyone want it:

in template I changed timer state with “variables.timer_c”:

    state:
      - value: 'on'
        styles:
          card:
            - transition: all 2s ease
            - border-top: >
                [[[ if (variables.timer_c == 'idle') return "0.5rem solid
                cyan";  return "0.5rem solid yellow"; ]]]

and in dashboard i defined the button timer (timer.timer_entrance) like this:

type: custom:button-card
template: light_button
variables:
  timer_c: |
    [[[ return states['timer.timer_entrance'].state ]]]
7

I’m with you now.

You can list templates and they will be applied in that order. You will also see this in my repo link above. For example, just put:

template:
  - template_a
  - template_b

So, in your case you can have a single styling template, and then one for each of the timers. If the timer is a variable, then you only need one template though, since you’ll specify the variable with the template for a button.

BTW, I think it’s cleaner / more readable to pass the entity to the variable and then do the parsing and matching all in one place.

8

Yes, you are right, thank you very much!