Lovelace: Button card

[Mariusthvdb (Marius)]

thank you! enough to get me starting
will report back, good or bad…

@RomRider

I/O might be too high to handle for your low-end device and this might be the reason why some entities do not have proper behavior (in the backend).
Regarding specifically hue lights, they also from time to time become unavailable for me, even without refreshing the page and I have a high end server to run my Home-Assistant instance

I see the same, not only on refreshing LL, but also without any other explanation (so far, and I have only been searching for 2 years…)
It is btw, only the Hue integration suffering, no other integration or component has this in my setup. Please note that not only Hue lights, but also the sensors go unavailable, forcing us to rely on the CC for Hue sensors, which we are supposed to not do, since that would incur ‘hammering of the Hub’. taking the CC out doesn’t solve it in any way though.

going off topic, sorry…

[AhmadK (akasma74)]

@RomRider

noticed some cards not updating because they had templates that use other entities (fixed it by adding their names to triggers_update ).

Could you please show me the config in this case?

it’s a base template for other buttons, something like

styles:
  # set standard font size and color
  name:
    - font-size: >-
        [[[
          var val = states[variables.current_font_size_entity_id];
          ...
        ]]]

and it won’t be picked up by your auto discovery so I added

triggers_update:
  - *current_font_size_entity_id

and it works now.

@RomRider

tiggers_update: [ “sensor.test” ] #note the quotes

do we really need quotes here? I’m almost certain it worked for me without.

@RomRider

But yes, I’ll add the support for triggers_update: sensor.test directly

you’re a star!

[eximo84]

What’s the best method for adjusting text size on different screen sizes? Using aspect ratio the card adjusts but the text doesn’t appear to change to match the card size.

I’m using css font 85%

[RomRider]

@AhmadK

it’s a base template for other buttons, something like

styles:
  # set standard font size and color
  name:
    - font-size: >-
        [[[
          var val = states[variables.current_font_size_entity_id];
          ...
        ]]]

and it won’t be picked up by your auto discovery so I added

triggers_update:
  - *current_font_size_entity_id

and it works now.

Right, it is expected in this case

@eximo84

What’s the best method for adjusting text size on different screen sizes? Using aspect ratio the card adjusts but the text doesn’t appear to change to match the card size.

I’m using css font 85%

There is no easy way to do that unfortunately. Resizing text based on the size of the box it is in is not something out of the box with CSS.

I’d try with:

• the vw unit instead of %. See here
• Use @media in the extra_styles field. See here
• Or SVG. See here

Don’t expect an out of the box/easy solution, you’ll have to try with different value and see what fits your needs.

[AhmadK (akasma74)]

@RomRider

Right, it is expected in this case

that’s why I updated my post saying it’s not that bad, just need to explicitly mention the entity.
here’s more interesting config/teaser

[Mariusthvdb (Marius)]

quick in between question, I now notice my motion sensor buttons dont get the icon anymore I have set in customize. Seems the get the device_class icon.

Secondly, the button doesnt immediately respond with the colorizations based on state of the entity_id. Must I set a triggers_update here? And if so, how. Since this is templated entity_id, I cant add it to the button hard coded…

The toggle is executed promptly.

this is what I have per binary_sensor, and it showed perfectly before on the buttons:

    binary_sensor.porch_buiten_motion_sensor:
#      show_last_changed: true
      templates:
        icon_color: >
          if (state === 'on') return 'rgb(192, 39, 30)';
          return 'rgb(54, 95, 140)';
        icon: >
          if (state === 'on') return 'mdi:run-fast';
          return 'mdi:wall-sconce';

my button config is:

      - type: custom:button-card
        template: button_motion
        name: Porch
        entity: binary_sensor.porch_buiten_motion_sensor

and the template:

button_motion:
  template: button_body
  show_last_changed: true
  tap_action:
    action: call-service
    service: switch.toggle
    service_data:
      entity_id: >
        [[[return 'switch.' + entity.entity_id.split('.')[1] + '_switch' ]]]
#        switch.laundry_motion_sensor_switch
  state:
    - value: 'on'
      styles:
        card:
          - color: red
        name:
          - color: black
        icon:
          - color: red
    - operator: template
      value: >
        [[[ var id = 'switch.' + entity.entity_id.split('.')[1] + '_switch';
        return states[id].state == 'on';
        ]]]
      styles:
        card:
          - color: grey
        icon:
          - color: 'green'
        state:
          - color: 'green'
      id: on-icon
    - operator: default
      styles:
        card:
          - color: grey
#          - opacity: 0.8
        icon:
          - color: grey
      id: off-icon

I did use the id’s for icon before, but that was before I had set the customizations. Did Button-card stop respecting the customizations?
Please have a look to get the customization back, I now see this…:

[RomRider]

@Mariusthvdb

this is what I have per binary_sensor, and it showed perfectly before on the buttons:

You shouldn’t use custom_ui anymore, especially not with button-card as this is something you can do inline in the card. Unexpected behaviours can happen.

    - operator: template
      value: >
        [[[ var id = 'switch.' + entity.entity_id.split('.')[1] + '_switch';
        return states[id].state == 'on';
        ]]]

The computed entity here will not be detected as said in the release notes and thus the card will not update. There is nothing I can do about it. Either add the entity to the list in triggers_update or set triggers_update to all.
Supporting javascript templates in triggers_update is again something that will introduce load (the same way it was before, it’s a chicken and egg problem )

Maybe I’ll swap the default behaviour and default to all, unless the triggers_update is set to auto or a list of entities… That should avoid the breaking change and be useful for power users I’m not decided yet

[petro]

I’ll give it a whirl later today. It will force me to change one of my templates for the update you did a few weeks back. I just needed the nudge. Is there a timeframe for this beta or is this a ‘go with the flow’?

[brucehvn (Bruce H)]

@RomRider
I’ve tested the new beta version. The problems with my buried button-card not getting hass/state object updates has been fixed. My activity buttons are working correctly.

I still see a problem with the javascript objects between a config template and the card config. For example, take the following javascript template for the ‘tap-action’. First placed in the config template.

    tap_action:
      action: |
        [[[
          console.log("power button data");
          let retVal = 'none';
          console.log(variables ? variables : 'variables is undefined');
          if (entity && variables && states[entity.entity_id].attributes.current_activity != variables.var_activity) {
            retVal = 'call-service';
          }
          let entity_state = (entity && entity.attributes.current_activity ? entity.attributes.current_activity : 'entity undefined');
          let state_state = (entity && hass.states[entity.entity_id].attributes.current_activity ? hass.states[entity.entity_id].attributes.current_activity : 'entity undefined');
          console.log(entity ? entity : 'entity undefined');
          console.log(states);
          console.log("entity state: " + entity_state + ", state state: " + state_state);
          console.log("tap-action returning: " + retVal);
          return (retVal);
        ]]]

In the console, I see the log output happen multiple times upon card load and when I click the button, I see it again. All objects are defined and it’s returning the proper result, call-service or none

Now if I move that same code to the tap_action in my card config, I still see multiple outputs on card load, but it says that ‘variables is undefined’ and ‘entity undefined’ and that the return result is ‘none’. Clicking on the button shows no output to the console. Even if I force the return result to always be call-service by changing the 2nd line of the js to let retVal = 'call-service', I still get no output when clicking the button and the service does not get called. I don’t see any errors or stack traces to the console.

[Mariusthvdb (Marius)]

@RomRider

You shouldn’t use custom_ui anymore, especially not with button-card as this is something you can do inline in the card.

maybe per entity, but custom-ui still works globally, so is way more powerful. I did work just fine. Is this caused by the recent beta update? Or maybe changed since you added support for the device_classes. In which case it could maybe made optional?

@RomRider

The computed entity here will not be detected as said in the release notes and thus the card will not update.

What I could see as solution is to add the switch (in this case) to the button_card config:

  - type: custom:button-card
    template: button_motion
    name: Porch
    entity: binary_sensor.porch_buiten_motion_sensor
    triggers_update: switch.port_buiten_motion_sensor_switch

would it be possible to add that to the new button-card? That way we wouldn’t need to update on ‘all’, and still be able to use the computed entities for templates, not being based on ‘entity’.

[petro]

@Mariusthvdb

but custom-ui still works globally,

I still don’t see the need for this globally, I never have my entities show up more than once in my interface. And if I do, I just reuse the card with lovelace_gen.

[Mariusthvdb (Marius)]

@petro

I still don’t see the need for this globally, I never have my entities show up more than once in my interface. And if I do, I just reuse the card with lovelace_gen.

well, as always, you mileage may vary…
I dont only use these binaries on custom button-card, but also in entities cards. I have global (customize_glob) customizations for many domains, or even switches/sensors like this:

    switch.sw_boiler_bijkeuken*:
      templates:
        icon: >
          if (state === 'on') return 'mdi:water-boiler';
          return 'mdi:water-boiler-off';
        icon_color: >
          if (state === 'on') return 'rgb(251, 210, 41)';
          return 'rgb(54, 95, 140)';
      show_last_changed: true

meaning my switches with suffix _template (for template switches) _sh, for shell_command switches and _rc (rest command) all use the same customizations. have more examples that are way easier than using anchors, or the complexity of lovelace_gen, which would automate that.

the above change was made only recently, so I hope this can still be re-installed easily.

[RomRider]

@Mariusthvdb

would it be possible to add that to the new button-card? That way we wouldn’t need to update on ‘all’, and still be able to use the computed entities for templates, not being based on ‘entity’.

This is already possible:

triggers_update: 
  - switch.port_buiten_motion_sensor_switch

I’ll allow triggers_update: switch.port_buiten_motion_sensor_switch in the future too.

@Mariusthvdb

maybe per entity, but custom-ui still works globally, so is way more powerful. I did work just fine. Is this caused by the recent beta update? Or maybe changed since you added support for the device_classes. In which case it could maybe made optional?

I don’t know what introduced the problem but I don’t plan to test against custom_ui, for me this is deprecated and not maintained anymore. (Also see this issue which might be the one you’re hitting: HA 0.108.1 · Issue #183 · andrey-git/home-assistant-custom-ui · GitHub)

[Mariusthvdb (Marius)]

sorry, I forgot to paste this:

      - type: custom:button-card
        template: button_motion
        name: Porch
        entity: binary_sensor.porch_buiten_motion_sensor
        triggers_update: switch.port_buiten_motion_sensor_switch

if that would be possible, all issues of updating would be solved (I think?) The dashed version or not, my point would be taking these 2 entities to the template, and have that button, and that button alone, update on these 2 entities

[RomRider]

As I said, this is already possible (just not yet with the 1 line format)

PS: I’ve updated my previous post

[Mariusthvdb (Marius)]

great! 1 problem solved. Now how to get my icons back…

I’ve tried to re-add the id’s for icon again:

      - type: custom:button-card
        template: button_motion
        name: Dining
        entity: binary_sensor.dining_table_motion_sensor
        state:
          - value: 'on'
            id: on-icon
            icon: 'mdi:run-fast'
          - value: 'off'
            id: off-icon
            icon: 'mdi:silverware'

but somehow this messes with the colors set in the state part of the template, and always returns this:

which, according to the state template for color should be showing grey, and not green for icon and state…

do you spot an error in my config/template here, check the default state (which is when the switch is on, but the sensor is ‘off’ (no motion, clear)?

button_motion:
  template: button_body
  show_last_changed: true
  tap_action:
    action: call-service
    service: switch.toggle
    service_data:
      entity_id: >
        [[[return 'switch.' + entity.entity_id.split('.')[1] + '_switch' ]]]
#        switch.laundry_motion_sensor_switch
  state:
    - value: 'on'
      styles:
        card:
          - color: red
        name:
          - color: black
        icon:
          - color: red
      id: on-icon
    - operator: template
      value: >
         [[[ return entity.attributes.on == true ]]]
#        [[[ var id = 'switch.' + entity.entity_id.split('.')[1] + '_switch';
#        return states[id].state == 'on';
#        ]]]
      styles:
        card:
          - color: grey
        icon:
          - color: 'green'
        state:
          - color: 'green'
      id: off-icon
    - operator: default
      styles:
        card:
          - color: grey
#          - opacity: 0.8
        icon:
          - color: grey
      id: off-icon

@RomRider

Also see this issue which might be the one you’re hitting: https://github.com/andrey-git/home-assistant-custom-ui/issues/183 )

that’s not it, because I am still on 107.5, and all my colors are nicely customized throughout the config:

[Mariusthvdb (Marius)]

trying it the modern way:

      - type: custom:button-card
        template: button_motion
        name: Dining
        entity: binary_sensor.dining_table_motion_sensor
        variables:
          motion-icon: 'mdi:run-fast'
          clear-icon: 'mdi:silverware'

and the template:

button_motion:
  template: button_body
  variables:
    motion-icon: 'motion-icon'
    clear-icon: 'clear-icon'
  show_last_changed: true
  tap_action:
    action: call-service
    service: switch.toggle
    service_data:
      entity_id: >
        [[[return 'switch.' + entity.entity_id.split('.')[1] + '_switch' ]]]
#        switch.laundry_motion_sensor_switch
  state:
    - value: 'on'
      icon: >
        [[[ return variables.motion-icon ]]]
      styles:
        card:
          - color: red
        name:
          - color: black
        icon:
          - color: red
#      id: on-icon
    - operator: template
      value: >
         [[[ return entity.attributes.on == true ]]]
#        [[[ var id = 'switch.' + entity.entity_id.split('.')[1] + '_switch';
#        return states[id].state == 'on';
#        ]]]
      icon: >
        [[[ return variables.clear-icon ]]]
      styles:
        card:
          - color: grey
        icon:
          - color: 'green'
        state:
          - color: 'green'
#      id: off-icon
    - operator: default
      icon: >
        [[[ return variables.clear-icon ]]]
      styles:
        card:
          - color: grey
#          - opacity: 0.8
        icon:
          - color: grey
#      id: off-icon

results in the error:

am I using the variables incorrectly?

[RomRider]

- is not valid in a variable name. You should use _ instead.

[Mariusthvdb (Marius)]

thank you! I see the buttons back, and no error. no icons either…the rest is correct now, state, colors, motion detection.

please help me find the icon in the config…

template:

button_motion:
  template: button_body
  variables:
    motion_icon: 'motion_icon'
    clear_icon: 'clear_icon'
  show_last_changed: true
  tap_action:
    action: call-service
    service: switch.toggle
    service_data:
      entity_id: >
        [[[return 'switch.' + entity.entity_id.split('.')[1] + '_switch' ]]]
#        switch.laundry_motion_sensor_switch
  state:
    - value: 'on'
      icon: >
        [[[ return variables.motion_icon ]]]
    etc

and button config:

      - type: custom:button-card
        template: button_motion
        name: Dining
        entity: binary_sensor.dining_table_motion_sensor
        variables:
          motion_icon: 'mdi:run-fast'
          clear_icon: 'mdi:silverware'

update

got it!

using only a customized clear_icon, (since the device_class already shows a run icon, and, can always add the run-fast. …)

      - type: custom:button-card
        template: button_motion
        name: Laundry
        entity: binary_sensor.laundry_motion_sensor
        variables:
#          motion_icon: mdi:run-fast
          clear_icon: mdi:washing-machine

btw, about customize not being checked: this is only true for the device_class. All my other customized icons are respected, so it definitely was changed after you updated button-card to respect te device_classes.

Would be really very much appreciated if that could be made optional somehow. Seems no core code needs to be changed for that (since all is still functional), only sensing the device class or not?

[RomRider]

@Mariusthvdb

btw, about customize not being checked: this is only true for the device_class. All my other customized icons are respected, so it definitely was changed after you updated button-card to respect te device_classes.

The code is the same as core for the icon. I don’t know how custom_ui works to replace the icon and as I said, I have no plans to support it.
I don’t think that frontend stuff should be done in backend (this was the solution before LL). You now have card-mod for that and config-template-card also. Also with 108.x, I don’t think custom_ui will be fixed as the last commit is from almost 1 year ago.