Button-Cards calling scripts - card is always with state on, need to change this

TheStigh · January 7, 2020, 11:16am

Hi,

Stuck on a small problem;

I have some button-cards that are used to set dim-levels (10%, 25%, 50%, 75% and 100%).

Now, whatever dim level the state of the button-card = on.
But I want by default only the actual card with the correct dim-level (brightness) to have state = on.
Each card call a script which perform the dim-process.

Can I use a template (and then; how?) that check the brightness of the light to set the correct button with state = on?

@RomRider, can I use the template inside the ‘button-card’ / ‘state’ ?
I’ve tested, but so far without success:

              type: custom:button-card
              state:
                - value: "on"
                  styles:
                    icon:
                      - color: >
                          [[[ 
                          if (states['light.stue_finnsnes'].attributes.brightness = 25)
                              return '#fed281'; 
                          else return 'blue';
                          ]]]

Here is the button-card:

    type: custom:button-card
    layout: icon_name
    show_state: false
    show_icon: true
    show_name: true
    show_label: false
    styles:
      card:
        - background-color: transparent
        - border: 'solid 1px rgba(57,128,228)'
        - border-radius: 15px
        - padding: 0px 0px
        - height: 50px
      icon:
        - height: 20px
        - width: 20px
        - color: '#2F7EFD'
      name:
        - font-size: 13px
        - color: '#2F7EFD'
      state:
        - font-size: 11px
        - font-family: Helvetica
        - text-transform: capitalize
        - font-weight: bold
        - color: '#2F7EFD'
    state:
      - value: "on"
        styles:
          card:
            - box-shadow: 0px 0px 10px 10px rgba(57,128,228)
          icon:
            - color: '#fed281'
          name:
            - color: white
          state:
            - color: white
          label:
            - color: white
    tap_action:
      action: toggle
    hold_action:
      action: more-info

petro · January 7, 2020, 1:05pm

You’d need to make a template switch. You can’t do what you want inside the lovelace configuration, this would have to be done on the backend.

switch:
- template: switch
  switches:
    light_a_10_pct:
      value_template: >
        {{ is_state_attr('light.light_a','brightness', 25) }}
      turn_on: >
        service: light.turn_on
        ...
      turn_off: >
        service: light.turn_off
        ...

TheStigh · January 7, 2020, 1:08pm

@petro, I think you perhaps misunderstand.
Button-card does support templating, and I got it partially working.

I’ve made it change the icon color based on the brightness, but then changing the brightness doesn’t work, it always set it to 100%.

petro · January 7, 2020, 1:12pm

I understand but you can’t modify the state on or off with templating. You’re pulling the on/off from the light I assume. So if you are trying to do this, you’d have to template both on and off style sections of the card.

TheStigh · January 7, 2020, 1:17pm

@petro I don’t want to change the state, I want to change the colors based on the brightness, as I set colors of the button based on state. Does that explain it better?

    state:
      - value: "on"
        styles:
          card:
            - box-shadow: 0px 0px 10px 10px rgba(57,128,228)
          icon:
            - color: '#fed281'
          name:
            - color: white
          state:
            - color: white
          label:
            - color: white

I want to edit this to say “if the brightness = 25 (that is 10%) then use the colors as the if the state is off”

These are the default if state is ‘off’

    styles:
      card:
        - background-color: transparent            
        - border: 'solid 1px rgba(57,128,228)'     
        - border-radius: 15px
        - padding: 0px 0px
        - height: 50px
      icon:
        - height: 20px
        - width: 20px
        - color: '#2F7EFD'
      name:
        - font-size: 13px
        - color: '#2F7EFD'
      state:
        - font-size: 11px
        - font-family: Helvetica
        - text-transform: capitalize
        - font-weight: bold
        - color: '#2F7EFD'

petro · January 7, 2020, 1:24pm

You’d have to template every attribute that’s different from the value using this as a template:

[[[
  if (states['light.x'].attributes.brightness == 25)
    return "red";
  return "green";
]]]

TheStigh · January 7, 2020, 1:28pm

@petro

For some reason, it kind of works; it pick of the current brightness and show the correct color, but then the other buttons doesn’t work calling the script to change the brightness level…

petro · January 7, 2020, 1:33pm

what other button? Can you post your whole config for these buttons, still don’t see how you’re making the service call and how the light is attached to the button.

TheStigh · January 7, 2020, 1:41pm

Here is the button & script:

          - type: custom:button-card
            layout: icon_name
            show_state: false
            show_icon: true
            show_name: true
            show_label: false
            name: Dim til 10 %
            icon: mdi:lamp
            entity: light.stue_finnsnes
            styles:
              card:
                - background-color: transparent 
                - border: 'solid 1px rgba(57,128,228)' 
                - border-radius: 15px
                - padding: 0px 0px
                - height: 50px
              icon:
                - height: 20px
                - width: 20px
                - color: '#2F7EFD'
              name:
                - font-size: 13px
                - color: '#2F7EFD'
              state:
                - font-size: 11px
                - font-family: Helvetica
                - text-transform: capitalize
                - font-weight: bold
                - color: '#2F7EFD'
            state:
              - value: "on"
                styles:
                  card:
                    - box-shadow: 0px 0px 10px 10px rgba(57,128,228)
                  name:
                    - color: white
                  state:
                    - color: white
                  label:
                    - color: white                
                  icon:
                    - color: >
                        [[[ 
                        if (states['light.stue_finnsnes'].attributes.brightness = 255)
                            return 'green'; 
                        else return 'blue';
                        ]]]
            tap_action:
              action: call-service
              service: script.dim10pct
              service_data:
                light: light.stue_finnsnes

dim10pct:
  alias: Dim lys til 10%
  sequence:
    - service_template: light.turn_on
      data_template:
        entity_id: >
          {{ light }}
        brightness_pct: 10

petro · January 7, 2020, 2:01pm

I still don’t follow you. There’s only 1 button here, so what do you mean:

The way your button is configured, I would expect the following to occur:

When you press THIS button, the light turns on to 10%. The button will appear “OFF” in the interface.
When you turn the brightness to 100%, THIS button will appear “ON”.
Any other state for the light, THIS button will appear “OFF”.

TheStigh · January 7, 2020, 2:06pm

Sorry, the template of the code I pasted had ‘brighness 255’ whic is 100% (should been 25 as this is 10%). This was for testing.

Each button are identical except it calls for different scripts setting different levels.

EDIT: I was wrong, the brightness of the lights DO change when I press the other buttons, BUT the color in the template does not change whatever the brightness level it is, it always stay green.

Meaning this template always return ‘green’ what ever the brightness level are:

                    - color: >
                        [[[ 
                        if (states['light.stue_finnsnes'].attributes.brightness = 254)
                            return 'green'; 
                        else return 'blue';
                        ]]]

TheStigh · January 7, 2020, 3:20pm

@petro

RESOLVED!

As this is javascript, I had to use double == in the IF statement
Now the buttons change colors according to dim level …

                  icon:
                    - color: >
                        [[[ 
                        if (states['light.stue_finnsnes'].attributes.brightness == 254)
                          return '#fed281'; 
                        else 
                          return '#2F7EFD';
                        ]]]

petro · January 7, 2020, 3:38pm

Yes, I thought you noticed that change in what I posted.

Also, fyi, all languages require ‘==’ for if statements. Including jinja (home assistants templating).

TheStigh · January 7, 2020, 3:48pm

I’m using this in a popup-card

Thx - as always @petro - your skills are amazing!

petro · January 7, 2020, 4:00pm

Nice, Looks good. Personally, i’d make those buttons smaller. A single row of 5 buttons with just the percent value.

TheStigh · January 7, 2020, 4:04pm

Sure, this is just the first layout - first I had to make it work, now to make it prettier…hehe…
I will try to alter the size of the popup-card also (the card is deprecated, so no help from author), the two size-options are either “normal” or “large” where “large” is REALLY large

EDIT: was easy to change X * Y size of the popup-card

Mariusthvdb · January 7, 2020, 4:20pm

just for the fun of it, I wonder it this would work (never tried it but it would seem possible) and make the layout even more meaningful?

          [[[ var bri = states['light.stue_finnsnes'].attributes.brightness;
             return 'hsl(' + bri + ',65%,50%)';
          ]]]

TheStigh · January 7, 2020, 4:22pm

Hi @Mariusthvdb Tried several of those - they do work quite good
Button-card are soooo powerful.

Next task might be add buttons for different scenes that are part of Philips Hue hub - shouldn’t be to difficult

petro · January 7, 2020, 4:23pm

No it shouldn’t, but even more reason to get those buttons smaller!

Mariusthvdb · January 7, 2020, 4:24pm

have those for you, and posted them somewhere here on the community already