Lovelace: Button card

[DavidFW1960 (David)]

@Mariusthvdb

I will certainly follow your suggestion for the templater card, but truly feel this is what Lovelace makes more and more unapproachable, having to nest custom cards in custom cards,

The template card is an acquired taste to be sure. But I do share your frustration with wrapping cards in cards and TBH it makes me nervous - @RomRider fortunately took over this card and is killing it… but before he came along it was as good as dead… only one HA version away from a card totally breaking and if the dev is gone that’s it. So continually adding custom-cards to correct minor issues increases the potential for this to break in the future… (Not saying this specifically about the button-card - but it’s nonsensical to me to have to use say card-modder just to change the colour of a line on a different custom-card or say having to use card-loader…)

[petro]

@RomRider

using the config-template-card which enables you to do templates on all the fields.

My only gripe with this process is that button layouts are interrupted if you try and place these into a horizontal stack. You lose all benefits of placing all buttons into a horizontal stack when wrapping the card in another card.

[petro]

@DavidFW1960

The template card is an acquired taste to be sure. But I do share your frustration with wrapping cards in cards and TBH it makes me nervous

I wouldn’t be nervous about it. The normal cards are wrapped cards in cards in cards, you just don’t know that without looking at the code.

[DavidFW1960 (David)]

Yes but stuff in core is more likely to be supported going forward.

[petro]

Yeah, but with how CSS and HTML work, it’s no different. It’s just a panel that’s inside a panel. The only time this stuff will break is if they change the base classes of the cards. They’ve only done that once and I personally don’t see that happening again for quite some time.

EDIT:

Also, if you use anchors, replacing bulk cards is pretty easy if you can manage. I try to make all custom card anchors use everything but the attributes that are shared between the built in button card and the custom card.

[DavidFW1960 (David)]

You’re forgetting cardgate and then the paper-button-card/MWC changes… In fact this card was dead because of those for a while. It’s a risk.

[petro]

@DavidFW1960

paper-button-card/Mac changes

That’s the base class change that I’m referring to.

[Mariusthvdb (Marius)]

in the meantime I am trying this, but inspector complains…

  label_template: >
    var name = entity.object_id[3:-9];
    if (entity.state == 'on') return entities['sensor.' + name + '_actueel'].state

have an entity

switch.sw_multi_purpose_template and need to go to sensor.multi_purpose_actueel

have this for all my entity switches and sensors.

please help me correcting this.

[RomRider]

@DavidFW1960

You’re forgetting cardgate and then the paper-button-card/MWC changes… In fact this card was dead because of those for a while. It’s a risk.

That’s not going to happen anymore for this one, unless they completely change the ha-card object (but that’s going to break every card then). The button-card doesn’t inherit anything from any object in HA. It extends a LitElement (base element).
It only consumes:

• ha-card
• ha-icon

@Mariusthvdb

but truly feel this is what Lovelace makes more and more unapproachable, having to nest custom cards in custom cards, which each on their own are developing in different speeds and details.

I will think about adding templates for name and entity_picture, but I still don’t like it

[jarrah]

@RomRider

Try this:

Superb, thank you for your tweak suggestions, the buttons look great now!

One thing to add, I gave the label style a little more padding (2 vs 0) in case anyone wishes to use the code:

      label:
        - color: gray
        - font-size: 9px
        - justify-self: start
        - padding: 2px 5px
        - align-self: start

So, not only is this an incredibly useful card, it also has a very helpful and knowledgable developer who very kindly provides assistance to non-coding newbies like the rest of us. Let’s hope we don’t end up annoying you too much as HA needs people like you to make this project thrive! Thank you @RomRider!

[RomRider]

@Mariusthvdb

label_template: > var name = entity.object_id[3:-9]; if (entity.state == ‘on’) return entities[‘sensor.’ + name + ‘_actueel’].state

The entities object doesn’t exist, it’s called states
Also what is entity.object_id?

[petro]

@RomRider

The button-card doesn’t inherit anything from any object in HA. It extends a LitElement (base element).

That’s good info. That means this card should always work for the most part. Excellent.

@RomRider

I will think about adding templates for name and entity_picture, but I still don’t like it

I’m not entirely sure templating is needed there.

@Mariusthvdb can you explain why you want this? Are you sure state based styling cannot handle this?

[RomRider]

@petro

My only gripe with this process is that button layouts are interrupted if you try and place these into a horizontal stack. You lose all benefits of placing all buttons into a horizontal stack when wrapping the card in another card.

I don’t see your point @petro, can you show me an example please?

[Mariusthvdb (Marius)]

@RomRider

The entities object doesn’t exist, it’s called states
Also what is entity.object_id ?

… sorry.

since we’re not using state.state in these templates, but entity.state, I figured I needed entity.object_id (while the docs State objects - Home Assistant talk about state.object_id).

Cut it short, I want the string after the ‘.’ in this case ‘sw_multi_purpose_template’
consequently I need to cut ‘sw_’ and ‘_template’ , [3:-9], and build the remaining ‘multi_purpose’ in the sensor , ‘sensor.’ + name + ‘_actueel’

this does the trick, now maybe make it a bit smarter:

  label_template: >
    var id = entity.entity_id.slice(10, -9);
    if (entity.state == 'on') return states['sensor.' + id + '_actueel'].state + ' Watt';

or

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

[Mariusthvdb (Marius)]

@petro

you explain why you want this? Are you sure state based styling cannot handle this?

yes, I think so, as I already pointed out, my template uses more states than only on/off/unavailabe, since it is zone based, and the pictures change based on the zones.

as you can see in my templates above, also the style templates uses other states than on/off/unavailable.

we might be able to use state based styling for that, but the config will be endless, and imagine that for more than a few buttons.

True templating would ease up the config enormously. Just like your anchors

[petro]

So, whenever I wrapped the button card in another card:

- type: horizontal-stack
  cards:
  - type: button-card
  - type: card-modder
    card:
      type: button-card
  - type: button-card

You lose the ability to use this functionality

Instead it comes out like this:

[iantrich (Ian)]

Use card-loader to fix that issue put it above the conditional card and wait for all your custom card types that you use in the conditional.

We should just fix the core conditional/stack cards to better handle custom cards.

[JustinAiken]

For this example from the README:

How could you make a row that had the 1 button just like that, and then the 2 button the width of four buttons?

[RomRider]

@iantrich

We should just fix the core conditional/stack cards to better handle custom cards.

It mostly applies to all custom cards nested in any card (not only conditonal/stack). However I agree with you that we should have a universal method for that, custom or core cards.

[iantrich (Ian)]

Agreed, the same fix should be submitted to the vertical-in-stack-card rather than wrapping it with another card as a fix.