Lovelace: Button card

[Mariusthvdb (Marius)]

look, I know I cant force anyone, I can only report back what I am experiencing.

Which is, before (button-card) didn’t respect icons set by the device_class. It did however not block icons set by custom-ui (might not have ‘supported’ it actively, but it didn’t block it either)
Not sure which update it was (couldn’t find it in the release notes), and I might have skipped a version, but todays beta version changed all that for entities with a device_class set. It shows those icons, which is what many asked for (including me )

of course, what I didn’t ask for is by doing so, customizations are abandoned. Luckily, only those with a device_class feel this, all other entities are still customized nicely.

this shows it should at least be possible, this is all done in custom-ui:
switches:

and lights:

so, its not necessary start supporting that, you already do!
my only question was to not prevent it when handling device_classes.

on the custom-ui repo: yes it has been abandoned apparently by @andrey , unfortunately I must admit. Many many people still use it to much satisfaction. It might be out of order in this thread to discuss the need for a Lovelace replacement for custom-ui, but still, it really feels unsatisfactory to not be able to set (HA) global customizations for entities, and be forced to do so in each and every Lovelace card. Your button card offers templates to re-use, so is a miracle for my setup and many others, as we can all see here. I am so glad you made it to is current state, and it is one of the main cards in my setup period. Decluttering card helps too

But other than that, the templater cards of which we now have a few burden the system quite heavily (had to do away with monster card, template-card and card-templater for that matter)

And believe it or not, since I installed your current beta, I haven’t seen my Hue lights go unavailable yet, other than on LL refresh. So it has made an improvement in that department… Cant explain it technically other than by repeating what you said about updating all entities instead of the single button. Just reporting back here, testing the beta. Which I recommend, if only because of that!

update
hue went unavailable in the meantime… so, not yet perfect, but still, much improved, Ui still much more responsive indeed. think I can take back that I wrote earlier about the buttons responding slowly on tap. Where I had to wait quite some time before, they now act rather immediate. A true performance update.

[AhmadK (akasma74)]

have you tried to roll back to one of the previous button-card releases to see if it returns the desired behaviour?
it might be something from HA updates instead… just a thought.

[RomRider]

@Mariusthvdb

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

    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

this can be converted into button-card code:

icon: '[[[ return entity.state === 'on' ? "mdi:water-boiler" : "mdi:water-boiler-off"; ]]]'
styles:
  icon:
    - color: '[[[ return entity.state === 'on' ? "rgb(251, 210, 41)" : "rgb(54, 95, 140)"; ]]]'

Put that in a template and you’re good to go
It’s going to be even easier with the future feature where you’ll be able to do things like:

template:
  - template1
  - template2

[Mariusthvdb (Marius)]

let there be no misunderstanding: I love your card beyond my capabilities expressing myself in the English language.
Didn’t realize tbh I could put these in templates other than per button config, but now realize you’ve promised us multiple templates that would indeed be an even better possibility. Extra reason to have asked for this in hindsight

It would however still only be valid for the button-card would it?

[Mariusthvdb (Marius)]

could be yes, I did try the 3.2.0 version I was on until today, and it did suffer the same issue I hadn’t noticed…
Won’t go back though, because using the variable solution is so beautiful, it will stay in my config, in favor of merging the state configs using id:, which was way more involving, and much less obvious.
Also, the latest beta is way more responsive in my setup. So a huge improvement it is.

[RomRider]

@Mariusthvdb

It would however still only be valid for the button-card would it?

Yes, but I’m thinking about adding exactly the same thing to decluttering-card (javascript templates and multiple templates chaining), it would be a bit redundant with config-template-card from @iantrich, so I’m not yet decided . That would be a big breaking change but you’d be able to do the same thing then.

[Mariusthvdb (Marius)]

please do (what did you expect…), Ive been looking forward to that for a very long time! the would be so awesome and powerful.

I am not using config-template-card, (mentioned earlier why) and would really welcome the ability for templates to decluttering card. Added to that the possibility to keep custom-cards to a minimum.
Again, a huge yes!

btw, just installed 108.1 on my test system, and after that added custom-ui via the automatic setup. added these to the config:

##########################################################################################
# Minute package to test custom-ui support in HA 108.+
# @mariusthvdb 20200409
##########################################################################################

homeassistant:
  customize_domain:
    device_tracker:
      templates:
        icon_color: >
          if (state === 'home') return 'green';
          return 'orange';

  customize:
    binary_sensor.updater:
      templates:
        icon_color: >
          if (state === 'on') return 'red';
          return 'green';

    device_tracker.hall:
      templates:
        icon_color: >
          if (state === 'home') return 'green';
          return 'orange';
        icon: >
          if (state === 'home') return 'mdi:speaker-wireless';
          return 'mdi:speaker-off';

and there is no issue whatsoever:

custom-ui for domain, icon and icon_color are still very much alive, thank goodness for that! Didn’t yet test the rest of the options, but this suffices for now.

sorry for this off-topic post, but since you mentioned the possible demise of support for custom-ui in new HA 108, this is relevant for custom-ui’rs.

[callifo]

Does anyone have issues with these errors since 0.108?

2020-04-10 13:32:44 ERROR (MainThread) [frontend.js.latest.202004071] https://xxx:9123/hacsfiles/button-card/button-card.js:1504:27 Uncaught TypeError: Cannot read property 'states' of undefined

Tracing it back to the number of errors its produces each refresh, seems to be related to using button cards with timers. As soon as I remove the button cards using timers, it all works fine. E.g. this card,

                          - type: "custom:button-card"
                            entity: timer.aircon_run_timer

Causes it. Nothing else is required. Remove the card, error goes away. Full errors from the console,

button-card.js:1504 Uncaught TypeError: Cannot read property 'states' of undefined
    at HTMLElement.connectedCallback (button-card.js:1504)
    at h.__insert (parts.ts:233)
    at h.__commitNode (parts.ts:241)
    at h.__commitTemplateResult (parts.ts:278)
    at h.commit (parts.ts:218)
    at a (render.ts:55)
    at Function.V.render (shady-render.ts:277)
    at HTMLElement.update (lit-element.ts:220)
    at HTMLElement.performUpdate (updating-element.ts:704)
    at HTMLElement._enqueueUpdate (updating-element.ts:653)

This is what the trace shows,

`;let Se = window.cardHelpers;const xe = new Promise(async t => {
  Se && t(), window.loadCardHelpers && (Se = await window.loadCardHelpers(), window.cardHelpers = Se, t());
});console.info("%c  BUTTON-CARD  \n%c Version 3.2.3 ", "color: orange; font-weight: bold; background: black", "color: white; font-weight: bold; background: dimgray");let ke = class extends tt {
  disconnectedCallback() {
    super.disconnectedCallback(), this._clearInterval();
  }connectedCallback() {
    if (super.connectedCallback(), this.config && this.config.entity && "timer" === ge(this.config.entity)) {
      const t = this.hass.states[this.config.entity];this._startInterval(t);
    }
  }_createCard(t) {
    if (Se) return Se.createCardElement(t);{
      const e = function (t, e) {
        void 0 === e && (e = !1);var i = function (t, e) {
          return n("hui-error-card", { type: "error", error: t, config: e });
        },
            n = function (t, e) {
          var n = window.document.createElement(t);try {
            n.setConfig(e);
          } catch (n) {
            return console.error(t, n), i(n.message, e);
          }return n;
        };if (!t || "object" != typeof t || !e && !t.type) return i("No type defined", t);var s = t.type;if (s && s.startsWith("custom:")) s = s.substr("custom:".length);else if (e) {
          if (Vt.has(s)) s = "hui-" + s + "-row";else {
            if (!t.entity) return i("Invalid config given.", t);var r = t.entity.split(".", 1)[0];s = "hui-" + (Ht[r] || "text") + "-entity-row";
          }
        } else s = "hui-" + s + "-card";if (customElements.get(s)) return n(s, t);var a = i("Custom element doesn't exist: " + t.type + ".", t);a.style.display = "None";var o = setTimeout(function () {
          a.style.display = "";
        }, 2e3);return customElements.whenDefined(t.type).then(function () {
          clearTimeout(o), jt(a, "ll-rebuild", {}, a);
        }), a;
      }(t);return xe.then(() => {
        jt(e, "ll-rebuild", {});
      }), e;
    }

Line 1504 is this one,

      const t = this.hass.states[this.config.entity];this._startInterval(t);

[iantrich (Ian)]

While I can understand why people want templates all over the place and in every card, it really becomes a burden to have them all over the place IMO, hence why I made the config-template-card. One-stop-shop for templates

[AhmadK (akasma74)]

can you try using timers in a standard card to see if it get you the same errors?

[callifo]

No errors in HA log, and no errors in the webbrowser console.

[AhmadK (akasma74)]

you need to provide a minimal example that creates those errors.

[klogg]

@iantrich

While I can understand why people want templates all over the place and in every card, it really becomes a burden to have them all over the place IMO, hence why I made the config-template-card. One-stop-shop for templates

Interesting…
Born out of total ignorance I have consciously only ever used config-template-card when all else fails as I made the assumption that as it was so powerful it must be resource hungry.

Are you saying that it might actually have been better for me to have used more of config-template-card and less of other cards templating abilities?

[DavidFW1960 (David)]

Hmmm… I use the config-template card but as it’s just it’s a bastard to use and support is somewhat non-existant to be honest. It can be difficult getting help.
Personally I would far rather use ninja for everything than struggle with js. But I also see the button card growing like topsy and becoming unwieldy and I don’t think that’s long term sustainable either. 2c

[callifo]

Yeah just this does,

                          - type: "custom:button-card"
                            entity: timer.aircon_run_timer

[RomRider]

I don’t have this issue on my side with this setup on the latest version.
I see that your card seems buried deep based on the indentation, what are the parent cards of this button-card?

[RomRider]

@klogg

Are you saying that it might actually have been better for me to have used more of config-template-card and less of other cards templating abilities?

You’ll get the same performance in config-template-card than in button-card (at leat with the actual beta that I’m going to release soon) because the mechanism is the same for both.

[klogg]

@DavidFW1960

I don’t think that’s long term sustainable either

There are probably a million reasons both technical and philosophical why they can’t/won’t/haven’t, but I wish jinja was made available natively throughout Lovelace.

[callifo]

You seem to be suggesting the right direction, if I put it at the base of a card, it’s fine. It seems if I put it inside any vertical-stack or horizontal-stack cards, then it starts to error. I can use a custom:vertical-stack-in-card without issue though.

This is fine,

  - id: 7
    title: Test
    cards:
      - type: "custom:button-card"
        entity: timer.alarm1_repeat

Also fine,

  - id: 7
    title: Test
    cards:
      - type: custom:vertical-stack-in-card
        title: Test
        cards:
          - type: "custom:button-card"
            entity: timer.alarm1_repeat

Not fine,

  - id: 7
    title: Test
    cards:
      - type: vertical-stack
        title: Test
        cards:
          - type: "custom:button-card"
            entity: timer.alarm1_repeat

Or this,

  - id: 7
    title: Test
    cards:
      - type: horizontal-stack
        title: Test
        cards:
          - type: "custom:button-card"
            entity: timer.alarm1_repeat

[odiv (Duta Ovidiu)]

Somebody has something like this?
With slider inside button card?
It can be done?