Lovelace: Button card

Perfect. Thank you!

Excuse my ignorance (I am still learning Javascript)…

Is

                  if (zone > number_of_zones)
                    return 'none';
                  return null;

The same as

                  if (zone > number_of_zones)
                    return 'none';
                  else return null;

Or have misunderstood?

it’s the same but you have to type else without any gain :wink:

1 Like

Except some readability for us Javascript novices. :stuck_out_tongue_winking_eye:

I’d say non-devs

@AhmadK
Per your suggestion, I moved my buried button-card out and created a single top-level horizontal-stack card with my 3 button-cards as members of that stack. Everything works as I would expect it to. The hass object is getting updated on state changes so I get the color changes and the proper services get called.

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.

@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.

The main reason I was using the button-card as my top-level card was to take advantage of some of it’s styling options for the container, but I can probably just apply some card-mod styles to a vertical-stack parent and get around that. Within the parent container, I don’t have any button-cards nested in other button-cards.

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

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

Hi, its possible to make a invisible border?

could you follow the rules please?

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

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

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) + ";}"; ]]]

circle
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>

animation
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

29 Likes

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

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! :slight_smile:
firefox_WnhjYXM4vj
One thing I was wondering if it’s possible is to add hover effect on the buttons.

1 Like

That is great!! Love it!

3 Likes

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

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.

Thanks @AhmadK i did this and it all works. :grinning:

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

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

Oh cool, will check it out!

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.

1 Like