Lovelace: Button card

Share your Projects! Dashboards & Frontend
2501

Most of the people are running HA on raspberry PIs, and running that on the backend through jinja2 is only going to increase the load instead of reducing it.

Your phone, iPad, tablet, computer where your browser is displayed they are all fast (and JS is super fast on all the devices). Your backend is slow unless you have a high end server and this is far from being the case for everyone.
Evaluating a template in the frontend is not taking time, what is taking time is all the JS around it (a template is what, 10 lines?), the whole code for button-card is 120kB !!

I’m not going to add jinja2 through the backend support to the card, but PRs are welcome :slight_smile:

2502

No need, I was wrong as @iantrich pointed out. Though I still wonder if a spinning icon would be possible to template

2503

Feature requests on github is the way to go so that I can track that down. I’ll take some time to deliver them in the future but I have so much work right now it’s just not possible. I’m almost never at home and traveling all the time for work. Right now I’m in Austin, TX for example :us_outlying_islands:

2504

Don’t worry, no hurries. I will open another feature request for it. Take your time, you have already put in so much time for us. I can hardly complain!

Thanks again @RomRider

2505

Guess this is what it’s all about, and I agree with your remarks on frontend vs backend. Still, although using js templates in customize is fast and trouble free as one could wish, using js in custom Lovelace cards can bog the system significantly. Can’t explain it, it simply does.

I wonder if you can explain what you say here: ‘what is taking time is all the JS around’

(must stress that on my new RPi4, this is much less obvious, and my Hue config stays online much of the time, which is something to hurray about. Before, even reloading Lovelace would make the Hue lights of unavailable signaling capacity issues on the system)

Using the states of backend jinja template sensor can relieve that, let alone make the configs of these Lovelace cards much simpler, which is a feat on its own.

Now this sounds like music to my ears. Though I am far from capable to create a PR as such, I would gladly offer my time and assistance in testing and aiding such a development.
Since it apparently is feasible, looking at ThomasLovens cards, why wouldn’t it be for the other cards I wonder.

This might depend on the technique used though. Using Customizing entities - Home Assistant isn’t the same as using the custom-ui js templates, which would be done in the frontend, or as people sometimes say, on the fly, in browser. Which is rather fast with modern day devices.
And, of course, its is not only icons we can customize…

All in all, your mileage may vary :wink:

2506

might I ask you to hop over here, and see if you can help me out with some niftier nested JS templates then Ive been able to come up with…
apreciated if you would

2507

Can someone tell me why this configuration template is not working?

  ciabatte_1:
    entity: '[[entity]]'
    icon: >
      [[[
         if (entity.state === 'on')
      return "mdi:power-socket-eu";
         else
      return "mdi:power-socket-eu";
      ]]]
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: '[[entity_id]]'
    styles:
      card:
        - font-weight: bold
        - font-size: 13px
        - font-family: 'Times New Roman'
      icon:
        - color: >
            [[[
               if (entity.state === 'on')
            return "red";
                else
            return "green";
            ]]]

It gives me error about data [entity_id]…

2508

well, we cant cause we dont know what you’re feeding it…or what the template config looks like

btw, you’ve got [[entity]] and [[entity_id]] in this config, are they pointing to the same entity_id?

also your template for the icon seems unnecessary since in all cases you want the same icon ? no need for a template then :wink:

2509

You should share the decluttering-card that you use with this that gives this error. A logical thing to me would be that you have set the entity in your variables, but not set the entity_id. If you want them to be the same you won’t need a service-call. A tap_action toggle would do exactly that.

Edit: and @Mariusthvdb is correct, you seem to use the exact same icon in both the ‘on’ state and any other state. Again if you want them to be the same just put the icon instead of a template. So icon: mdi:power-socket-eu.

2510

Ok, about the icon you’re right, it’s my fault.
About the decluttering-card (if with this you mean the original card without configuration template), it’s this:

                  - type: custom:button-card
                    name: Ciabatta 1
                    entity: switch.ciabatta1
                    icon: mdi:power-socket-eu
                    tap_action:
                      action: call-service
                      service: switch.toggle
                      service_data:
                        entity_id: switch.ciabatta1
                    styles:
                      card:
                        - font-weight: bold
                        - font-size: 13px
                        - font-family: 'Times New Roman'
                      icon:
                        - color: >
                            [[[
                              if (states['switch.ciabatta1'].state == 'on')
                                return "red";
                              else
                                return "green";
                            ]]]

The entity and the entity_id point to the same entity, but i think the entity: switch.ciabatta1 is not so necessary as the entity_id: switch.ciabatta1 in the toggle action.

2511

check here for an even niftier solution for the moon name (a mapper in javascript) :wink:

2512

Ok thanks, but the icon it’s not a problem, my problem is about the template not working as i coded it…

2513

your code is using the format using a decluttering-template with variables in [].

see GitHub - custom-cards/decluttering-card: 🧹 Declutter your lovelace configuration with the help of this card for documentation on that card.
You should post that decluttering template for us to be able to check why it doesn’t work (what does that actually mean, do you get errors, do you get a button at all etc etc)

if you don’t have a decluttering template, the code unposted will never work, and you should write a full button card config first to see what you want.

since you’re new to HA, you better start getting a more fundamental understanding of the inner workings, before using something as complex, and simply copying other configs, or parts of it. It wont work like that

2514

Hmmm… i don’t have a decluttering template and the full button card config is what i posted in my last message. Or am i wrong? I have others configuration templates without the [[ ]] variables, so i tried to learn putting those variables but at the actual state i am wrong.
Is it possible to have a config template for that button-card without the [[ ]] variables?

2515

yes, read the docs at: button-card/README.md at master · custom-cards/button-card · GitHub

and then try:

                  - type: custom:button-card
                    name: Ciabatta 1
                    entity: switch.ciabatta1
                    icon: mdi:power-socket-eu
                    tap_action:
                      action: toggle
                    styles:
                      card:
                        - font-weight: bold
                        - font-size: 13px
                        - font-family: 'Times New Roman'
                      icon:
                        - color: >
                            [[[
                              if (entity.state == 'on') return "red";
                              return "green";
                            ]]]
2516

Maybe i am not so clear, but i already coded some configuration templates and all are working as i expected.
Now i am having troubles as never did a config template with a toggle action and with an entity_id inside it. I have many button-card like that i posted, so i was thinking to create a config template to use with those card to avoid to repeat every code inside every card like i did with other card but without toggle actions… Hope to be more clear now about what i would like to have…

2517

you don’t need that if using a switch and toggling that. See my post above. In fact, you dont even need to define the tap-action since toggle is default for entities in these domains

2518

Ok, so for every similar card i must put the same in every card? Is there a way/option to create something inside button_card_templates to avoid to repeat the same in every card?

For example i have this template:

  mio_header:
    color_type: label-card
    color: rgb(44, 109, 214)
    styles:
      name:
        - font-size: 14px
        - font-weight: bold
        - font-family: 'Times New Roman'
        - color: white

And i use this for every similar card:

              - type: "custom:button-card"
                template: mio_header
                name: Salotto Yeelight

Is it possible with that card?

2519

if you want something like this:

      - type: custom:button-card
        template: switch_regular
        entity: switch.sw_tv_auditorium_template
        name: Tv Aud.

you define a button-template (named ‘switch-regular’ here) like this:

switch_regular:
  label: >
    [[[
    var id = entity.entity_id.split('.')[1].slice(3, -9);
    return states['sensor.' + id + '_actueel'].state + ' Watt';
    ]]]
  template: button_body_alt

which uses yet another template button_body_alt

button_body_alt:
  color: auto
  size: 30%
  aspect_ratio: 1/1
  show_state: true
  show_label: true
  tap_action:
    action: toggle
    haptic: light
  hold_action:
    action: more-info
    haptic: success
  styles:
    lock:
      - color: red
    card:
      - border-radius: 6px
      - padding-left: 5px
      - box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
    name:
      - justify-self: start
      - font-weight: bold
      - font-family: Helvetica 
      - font-size: 13px

      - text-overflow: unset
      - white-space: unset
      - word-break: break-word

      - text-align: start
    label:
      - font-size: 11px
      - font-family: Helvetica
      - justify-self: start
    state:
      - font-size: 11px
      - font-family: Helvetica
      - justify-self: start
      - text-transform: capitalize
      - font-weight: bold
    grid:
      - grid-template-areas: '"i" "n" "s" "l"'
      - grid-template-columns: 1fr
      - grid-template-rows: 1fr min-content min-content
    img_cell:
      - justify-content: start
      - align-items: start
  state:
    - value: 'on'
      styles:
        card:
#          - box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
#          - box-shadow: 0px 0px 2px 1px rgb(85, 91, 101)
#          - box-shadow: 0px 0px 2px 1px var(--paper-item-icon-active-color)
          - background-color: '#F0C209'
        name:
          - color: '#555B65'
        state:
          - color: gray
        label:
          - color: red
        icon:
          - color: '#555B65'
      id: on-icon
    - value: 'off'
      styles:
        card:
          - color: '#F0C209'
          - background-color: '#555B65'
#          - box-shadow: 0px 0px 2px 1px
        label:
          - color: rgba(0, 0, 0, 0.0)
        icon:
          - color: '#F0C209'
      id: off-icon
    - value: 'unavailable'
      styles:
        card:
          - opacity: 0.6
          - color: grey
          - --paper-item-icon-color: grey
        label:
          - color: rgba(0, 0, 0, 0.0)

you then can reference this method on all switches you like to have that config for.

1 Like
2520

Yes, ok that’s what i wanted since the beginning of our conversation… Now i’ll study your config and make for my needed… thanks again for your support!