Lovelace: Button card

Share your Projects! Dashboards & Frontend
3344

Cool. Can you share your code?

3345

I plan on publishing my config to github once I get a little more added to it.

The person buttons at the top do not refer to presence, but used to notify the specific user when the washer/dryer has finished. I work irregular hours and would prefer to not cast/notify all devices if someone else is doing laundry.

as for the time, its a run time, showing how long the washer/dryer has run on the last cycle.

I will adjust the wording??

Thanks for your input!

1 Like
3346

Card:

type: custom:hui-entities-card
title: Laundry
entities:
  - type: custom:hui-horizontal-stack-card
    cards:
      - type: 'custom:decluttering-card'
        template: button_laundry_notify
        variables:
          - name: 'Nathan'
      - type: 'custom:decluttering-card'
        template: button_laundry_notify
        variables:
          - name: 'Sarah'
      - type: 'custom:decluttering-card'
        template: button_laundry_notify
        variables:
          - name: 'Mom/Dad'
      - type: 'custom:decluttering-card'
        template: button_laundry_notify
        variables:
          - name: 'Hayley' 

  - type: custom:hui-horizontal-stack-card
    cards:
      - type: 'custom:button-card'
        template: button_laundry
        name: Washer
        entity: sensor.washing_machine_status
      - type: 'custom:button-card'
        template: button_laundry
        icon: mdi:tumble-dryer
        name: Dryer

  - type: custom:mini-graph-card
    name: Laundry
    icon: mdi:washing-machine
    hours_to_show: 48
    font_size: 70
    points_per_hour: 20
    line_width: 2
    show:
      points: false
      extrema: true
    entities: 
      - sensor.washing_machine_power
      - sensor.dryer_power

template:

button_laundry:
  template: default_button_settings
  aspect_ratio: 2/1
  tap_action:
    action: none
  styles:
    grid:
      - grid-template-areas: '"i i" "n n" "s door" "l timer"'
      - grid-template-columns: 1fr 1fr
      - grid-template-rows: 1fr min-content min-content min-content
    custom_fields:
      door:
      - align-self: end
      - font-size: 11px
      - font-family: Helvetica
      - justify-self: end
      - font-weight: bold
      timer:
      - align-self: end
      - font-size: 11px
      - font-family: Helvetica
      - justify-self: end
  custom_fields:
    door: >
      [[[ 
        var id = entity.entity_id.split('.')[1];
        var door = (states['binary_sensor.door_' + id].state);
        var door_state = door == 'on' ? 'Open' : 'Closed';
        return `<span>Door: ${door_state}</span>`
      ]]]
    timer: >
      [[[
        var id = entity.entity_id.split('.')[1];
        var timer = (states['sensor.timer_' + id].state);
        return `<span>Time: ${timer}</span>`
      ]]]
  state:
    - value: 'Running'
      styles:
        card:
          - color: orange
    - value: 'Finishing'
      styles:
        card:
          - color: yellow
    - value: 'Clean'
      styles:
        card:
          - color: green
2 Likes
3347

@RomRider I was playing around with my remote activity buttons a little more today. What I think is happening now, is that after performing the tap_action, the javascript objects are not being refreshed. Was that the bug you were mentioning before? Iā€™ve been debugging via logging to the console and after switching activity, the hass, states, and entity objects donā€™t change based on the state changing.

So what I thought was the javascript templates in the config template being evaluated and put in as static values, I think was incorrect. It was just really that itā€™s not picking up the state changes.

Here is a zip file with a simple test case, basically just a small portion of my remote. You should be able to just change the harmony hub name and the activities to test it out.

3348

Anyone using this in a horizontal-stack with swiper card? I have tried it in the past but I have issues with touch being too sensitive.

The cards work fine (have them setup in a horiontal-stack), but when swiping to the next set of button cards in a horizontal-stack, I have to start the swipe motion by dragging a button card. It then either registers it as a tap_action or hold_action (depends on how slow I drag). Is there a way I can fix this by either doing something to button card or swiper card? I asked in the swiper card topic but unfortunately no succes, so figured try it here too.

This behaviour is om iOS and Android btw. On desktop with a mouse it seems to work fine.

3349

@RomRider, could you tell me how the card knows when to refresh itself?
Iā€™m asking because I wanted to create a card that shows states of 2 sensors and I couldnā€™t find in the docs anything that answers my question so I wasnā€™t sure it will update itself when state of each sensors changes.
I ended up creating a card with no entity and a name that is a template like this (this one uses only one sensor but the idea is the same across the board)

name: >
  [[[
    let primary_obj = states[variables.primary_entity];
    let unknown = '?'

    if (primary_obj == null || primary_obj.state === null || variables.invalid_states.includes(primary_obj.state)) return unknown;

    return primary_obj.state + ' ' + primary_obj.attributes.unit_of_measurement;
  ]]]

and it seems to be updated well.
So my question is - what rules do we need to follow (if any) to make sure out cards are updated when data its field are based upon is changed?
Cheers

3350

If there is a template defined ([[[...]]]), it will update anytime any entity is updated even without the entity field defined.
If there is only an entity defined, it will update only if this entity is updated.

3351

Thanks for confirming.
Is HA or your card evaluates templates?
If itā€™s HA, things like

{% set entity = 'sensor.test' %}
{{ return states(entity) }}

wonā€™t trigger update if the template as HA fails to detect entity to listen to.
(I know this card uses JS templates but I just used Jinja to show you what I mean.)

If itā€™s your card that is in charge of evaluating templates, I take it there is no requirements to follow to get them updated.

3352

The card computes everything in frontend, not HA. For every card in lovelace, an update is requested when the hass object is assigned (it contains all the states, so as soon as any state is updated, it should be reassigned to each card). When that variable is assigned, I check if the button needs an update or not based on the rule above (Lovelace: Button card)

But if HA does not assign the hass object, the card will not be updated and this is out of my control. :slight_smile:

1 Like
3353

Thanks for the great explanation!
Actually, after reading the rule for the second time I realised that in case when there is no entity specified, the card will be updated every time any HA entity changes its state (or an attribute).
It sounds a bit overkill so maybe you could add a config variable like entities that will hold all entities that can trigger update of the card so we would dramatically reduce the number of required updates?

If it sounds ok, Iā€™ll create a FR and add more details to it there.

3354

I thought about this a while ago but youā€™d need to list all the entities in your templates and cards in custom fields (and I know some people have a lot :slight_smile: ). Also I didnā€™t want to handle questions like ā€œwhy is my card not updating?ā€ as this would be an advanced feature and I donā€™t plan to do auto discovery at all :slight_smile:

However, technically itā€™s quite easy to add.

3355

Cool! Iā€™ll try create a very good PR proposing an approach that addresses/takes into account all of your concerns :wink:

3356

Donā€™t bother with the PR, Iā€™ll handle it later today or tomorrow :slight_smile:
(Iā€™ve got a bunch of bugfix already on their way and a lot of modifications in the way I build the card also on its way so not a great time to do a PR)

1 Like
3357

I meant FR ā€¦ :man_facepalming:

3358

That would be great :slight_smile:

3359

Hmm, interesting. If I have a button-card that has no entity defined, and it has a custom field that is a vertical-stack that contains several horizontal-stacks each of which has several button-cards, would each of those button-cards follow the same principles on getting updated? In other words are they completely independent from any enclosing button-card that might house them?

And does HA see those ā€œsub-cardsā€ as independent cards meaning that it also attempts to reassign the hass object to them upon a state change?

3360

I canā€™t imagine why and how to make them dependent tbh. They shouldnā€™t be.

well, imho HA has nothing to do with the cards in general, all that happens is hass object changes when anything in HA changes and all cards get an updated hass.

thatā€™s how it works. and then

3361

The reason I was asking is because I was commenting in an earlier post that Iā€™m seeing a case where it doesnā€™t appear the hass object is being updated, even upon a state change if I have an entity defined, or even if I have no entity defined. The card in question is buried in

button-card->custom_field->vertical-stack->horizontal-stack->button-card

3362

well, you need to tell that. and even if your observation is right,

have you tried ā€œdiggingā€ your card out to see if it makes any difference?
I mean, you can leave the weird one where it is and create an identical one at say, top level and compare their behaviour if you suspect it has something to do with nesting.

3363

Each cards assign hass to each direct child element. So in button-card->custom_field->vertical-stack->horizontal-stack-> button-card:

  • button-card1 assigns hass to vertical-stack
  • vertical-stack is responsible for assigning hass to horizontal-stack
  • horizontal-stack is responsible for assigning hass to button-card2
1 Like