Lovelace: Button card

[RomRider]

@brucehvn

So, it appears that when a button-card is way down in the stack like I showed above, it is not getting it’s hass object updated when the state changes. It doesn’t appear to look like an independent card to the lovelace control code.

I’ll have a look, probably a problem with button-card

@brucehvn

@RomRider As a side note, I had also noticed that if I put a javascript template in the buried button-card and dump console.dir(this.config) , I actually get the config object for the top-level button-card. Using the custom_fields config variable in that object, I can dig down and get to the config for the buried card. That might be expected behavior, but I thought I would point it out.

That is expected this.config contains your whole button-card LL config.

[pollinolas]

Hi, its possible to make a invisible border?

[AhmadK (akasma74)]

could you follow the rules please?

[RomRider]

A screenshot of what you want to remove would be useful in order to help you

[pollinolas]

thanks for answer, finally i did it,just wanted to remove the border of the button

[Mattias_Persson]

Wow, this is really a super versatile card! Thanks!

I managed to throw away the outdated circle-sensor-card and make my own with only a few lines of code.

custom_fields:
  info: >
    [[[ var brightness = Math.round( entity.attributes.brightness / 2.54 ); if (entity.state === 'on') 
    return '<svg viewBox="0 0 50 50"><circle id="c_brightness" cx="25" cy="25" r="20.5" stroke="#b2b2b2" stroke-width="1.5" fill="none" /><text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">' + brightness + '<tspan font-size="10">%</tspan></text></svg>'; ]]]
extra_styles: |
  [[[ var radius = 20.5; 
  var circumference = radius * 2 * Math.PI; 
  var brightness = Math.round( entity.attributes.brightness / 2.54 );
  return "#c_brightness { transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: " + circumference + "; stroke-dashoffset: " + (circumference - brightness / 100 * circumference) + ";}"; ]]]

And color only parts of a svg with fill="var(--button-card-light-color-no-temperature)"

custom_fields:
  icon_hue: >
    <svg viewBox="0 0 50 50"><path d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7" fill="#9da0a2"/><path d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z" fill="var(--button-card-light-color-no-temperature)"/></svg>

And finally svg animations that doesn’t only loop

custom_fields:
  icon_fan: >
    [[[ if (entity.state === 'on') return '<object type="image/svg+xml" data="/local/fan.svg"></object>'; 
    else return '<svg viewBox="0 0 50 50" fill="#9ca2a5"><g class="spin animated"><circle cx="25" cy="25" r="6.6"/><path d="M31.9 30.4c-.5.6-1.1 1.1-1.7 1.5-1.4 1.1-3.2 1.7-5.2 1.7-2.3 0-4.5-.9-6-2.4-.9 1.1-1.6 2.3-2.3 3.2l-4.9 5.4c-1.8 2.7.3 5.6 2.5 7 3.9 2.4 9.8 3.1 14.1 1.9 4.6-1.3 7.9-4.7 7.4-9.7-.2-3.4-1.9-6-3.9-8.6zM17 28.3c-.4-1-.6-2.1-.6-3.3a8.7 8.7 0 0 1 6.4-8.4l-1.6-3.5L19 6.2c-1.5-2.8-5-2.5-7.3-1.2-4 2.2-7.5 6.9-8.7 11.3-1.2 4.6.2 9.2 4.7 11.3 3.1 1.3 6.1 1.2 9.3.7zm26.9-17.6c-3.3-3.4-8-4.6-12.1-1.8-2.8 1.8-4.2 4.6-5.5 7.5 4.2.6 7.4 4.2 7.4 8.6 0 .9-.1 1.7-.4 2.5 1.3.2 2.8.3 3.8.4 2.3.4 4.7 1.3 7.1 1.7 3.2.3 4.7-3 4.8-5.6.3-4.6-1.9-10.1-5.1-13.3z"/></g></svg>'; ]]]
extra_styles: |
  @keyframes spin {
      from { transform:rotate(0deg); }
      to { transform:rotate(720deg); }
  }
  .spin.animated {
      animation: spin 1.7s ease-out 1;
      transform-origin: center center; }

https://github.com/matt8707/hass-config/blob/master/ui-lovelace.yaml

[Darbos]

Do you happen to know how you could add how many lights are on in the corner like that how you have the brightness?

[binaryMind]

Fantastic addon! I just wanted to say thank you! With few extra ones I was able to build my status/control card for Air Purifier!

One thing I was wondering if it’s possible is to add hover effect on the buttons.

[RomRider]

@Mattias_Persson

That is great!! Love it!

[cameron]

Hi i am having trouble with this can i can’t figure it out.
Can anyone help me please.

     state:
       - value: '[[[ return 'sensor.master_fan_speed' == 'low' ; ]]]'
         spin: true

Thanks

[AhmadK (akasma74)]

Could you tell us more about your goal and maybe post a bit more of the card’s config.
Based on the docs, you need to use string values (not templates) with value unless operator is template, that’s why your current config doesn’t work.

[cameron]

Thanks @AhmadK i did this and it all works.

           state:
              - operator: template
                value: >
                    [[[ if (states['sensor.master_fan_speed'].state == 'low') return 'on' ; ]]]
                spin: true

[RomRider]

@binaryMind

One thing I was wondering if it’s possible is to add hover effect on the buttons.

You should be able to use the CSS modifier :hover in extra_styles to handle that.

[binaryMind]

@RomRider

You should be able to use the CSS modifier :hover in extra_styles to handle that.

Oh cool, will check it out!

[ASNNetworks]

Where do you put ‘extra_styles’? I don’t think that’s an option for button card right? Or am I missing something, can’t find that line in the documentation.

[petro]

It’s a main option at the root level. It’s in the doc’s in the main options table.

custom-cards/button-card

[ASNNetworks]

Can’t believe I missed that, thanks!

[petro]

It’s a big table, super easy to miss stuff.

[RomRider]

@brucehvn, I’ve published a beta release that should fix your issue with nested cards. Would you mind testing? (If you’re using HACS, display the beta releases to be able to install it)

@AhmadK, I’ve also added a better way of handling updates in this release: It only updates when needed and there is some auto-discovery of entities used in templates (I said I wouldn’t do it but in the end I did it ). However, it’s still possible to add manually entities that would trigger an update or keep the old behaviour and update every time anything is updated in HA.

@all, if you want to test and report back, that would be great. Please read the release notes of the beta there are important information! I plan to release it in some days after people had some time to test (@petro, @Mariusthvdb, @jimz011, … thinking about you here ).

It should improve a lot the reactivity of the frontend on low-end devices (and consume less on high end mobile devices)

[brucehvn (Bruce H)]

@RomRider

@brucehvn, I’ve published a beta release that should fix your issue with nested cards. Would you mind testing? (If you’re using HACS, display the beta releases to be able to install it)

On it