Lovelace: Button card

Sorry, I said it in around post 3287 last night about the hass object not getting updated. That’s why when @RomRider mentioned how the updates happen, it peaked my interest.

Definitely a good idea about trying to create a top level card that’s the same as the buried one. I’ll try that out, thanks!

I think I have some interesting behaviour related to this (updating with state changes)

I have an entities card that contains amongst other things eight custom:button-cards that all have thier display attribute set based on an input_number. (see below).

The interesting thing is that this works perfectly when the value of the input_number is reduced i.e. the UI updates instantly but if the value of the input_number is increased then no change in the front end is visible until after a refresh.

styles:
  card:
    - display: >
        [[[
          var zone = '{{ zone }}';
          zone = zone.substring(4, 5) + '.0';
          var number_of_zones = states['input_number.irrigation_number_of_zones'].state;
          var show_history = states['input_boolean.irrigation_show_status_history'].state;
          if (zone > number_of_zones ||
              show_history == 'off' )
            return 'none';
        ]]]

EDIT: as you can see I use lovelace_gen in this config and the buttons are ‘included’ in the entities card like this:

- !include
    - item_activity_history_line.yaml
    - entity: input_boolean.irrigation_show_status_history
      zone: zone1

- !include
    - item_activity_history_line.yaml
    - entity: input_boolean.irrigation_show_status_history
      zone: zone2

--- etc. ---

have you tried to create an automation that reacts to your input_number’s state change and say, displays a notification with info about previous and current state?
that way you can see whether the card is not reacting to HA’s state change or there’s something wrong with HA.
just a thought to check as the whole thing is pretty complex and you need to test it by chunks.

Ok, so I did that and the state is definitely changing correctly.

Yes it is complex, but it just feels weird that it works when decreasing but not when increasing.

Hi,
Can anyone help me with my setting. I’m trying to display the “last change” state on my light button, only when the state of the button is ON. I tried below code but it is not working. Any ideas?
button1

here is my code:

  - aspect_ratio: 4/4
    state:
      - value: 'on'
        styles:
          show_last_changed: true
    color: 'rgb(255, 255, 51)'
    color_type: icon
    entity: switch.lamppcdesk
    icon: 'mdi:ceiling-light'
    lock:
      enabled: true
    name: Desk
    template: button_template
    type: 'custom:button-card'

Many thanks!

you need to read the docs - they clearly say what can be inside styles and show_last_changed is not there.

One option is to use a custom field and return last_changed attribute if your entity is on or an empty string otherwise.

Another option is to use one of the standard fields like label and do as above.

Or you can use card-mod to make invisible/don’t display your last_changed in the original config.

agree. I saw similar behaviour in input_selects (but it was Polymer).
interesting…

That’s not possible, but you can open a FR on github and I’ll look into it.

If you manage to reproduce it with a simple config, I’ll have a look. I can see from here that there are things that are not updated when they should so I’m going to start investigate that (actually I’ve already started but can’t yet find a reason why it is not updated)

1 Like

I’ll try and find some time to do this :upside_down_face:

Hi,
thanks for the replay. I was just playing with the “state” option and in was just a long shot! I will try to do custom fields as you suggested.

In order to have the “input_select.select_next” functionality work, do you need to have the automations created in HA? Can it not be done directly with the input_select?

I’m trying to cycle through the selctions of my input_select.pool_mode, with choices of “Off”, “Pool”, “Spa”, "Spillover

You can use tap_action to call the service:

tap_action:
  action: call-service
  service: input_select.select_next
  service_data:
    entity_id: '[[[ return entity.entity_id ]]]'

Perfect! Thank you. Is there a way to have it only use some of the options?

Don’t know why but I’d try label, not state.

maybe. what is some btw?

I have an input_select with five options, but I would really only like to be able to cycle through 3 of them, as the others are more “automated”. If it’s not possible with the button card to choose only a portion of the list, I have another idea, that will just require re-working the input_select.

Anything would be possible in javascript but the question is should it be the case :wink:
I’d rework on the backend instead of trying to do crazy stuff in the frontend.

The logic should be in the backend, the frontend is supposed to be for user interaction only, not “business logic”.

I think this is as simple as it can be…

All you need is an input_number and the following Lovelace. Reduce the input_number below 8 and the button disappears. Increase the input_number above 8 and it doesn’t reappear unless you refresh.

  - type: entities
    entities:
      - entity: input_number.irrigation_number_of_zones

      - type: custom:button-card
        name: zone8
        show_icon: false
        tap_action: 
          action: none
        styles:
          card:
            - display: >
                [[[
                  var zone = 'zone8';
                  zone = zone.substring(4, 5) + '.0';
                  var number_of_zones = states['input_number.irrigation_number_of_zones'].state;
                  if (zone > number_of_zones)
                    return 'none';
                ]]]

I’m going to have a look, however, can you tell me first if this works?

                [[[
                  var zone = 'zone8';
                  zone = Number(zone.substring(4, 5));
                  var number_of_zones = Number(states['input_number.irrigation_number_of_zones'].state);
                  if (zone > number_of_zones)
                    return 'none';
                  return;
                ]]]

No it doesn’t. Same result.

Right, I see what happens, no bug here rather a “feature” of lit-elements :slight_smile:
You have to reset the value to its initial value using null. Returning nothing will not “remove” the style actually :slight_smile:

                [[[
                  var zone = 'zone8';
                  zone = Number(zone.substring(4, 5));
                  var number_of_zones = Number(states['input_number.irrigation_number_of_zones'].state);
                  if (zone > number_of_zones)
                    return 'none';
                  return null;
                ]]]
1 Like

in similar situations I return unset - do you think it’s worse than null?