Lovelace: Button card

Share your Projects! Dashboards & Frontend
749

@RomRider Right. If you style inside the state, it ignores styles outside of the state. So yes, styles inside the state should add to styles outside, and override if there is a conflict.

Also want to say, you have made this button one of the most important elements in Lovelace. Iā€™m looking forward to seeing how people create innovative panels with this button.

Off-topic, (but Iā€™d like to know from people using this button) does anyone use Layout Card or something else to establish card order?

Cheers, Richard

1 Like
750

@RomRider is there a way to have the buttons centered ?
If I donā€™t mentioned the width on the last button it gets very wide as you see on the green button.
I try to have uniform buttons.

image

751

@elRadix, add 1 color_type: blank-card on each side of your horizontal-stack, both without a width and it will be centered

752

can you show me how, not getting any results

See card config here: 
cards:
  - type: 'custom:button-card'
    color: 'rgb(0,0,0.5)'
    color_off: var(--disabled-text-color)
    color_type: card
    default_color: var(--primary-text-color)
    name: LIVING
    style:
      - font-size: 20px
      - font-weight: bold
      - padding: 0px
      - height: 45px
      - border-color: '#ed17cc'
      - border-radius: 25px
  - cards:
      - card_style: ''
        color: 'rgb(255, 255, 0)'
        color_off: 'var(--disabled-text-color)(189, 255, 5)'
        color_type: card
        default_color: var(--primary-text-color)
        entity: switch.stp_living_other
        icon: 'mdi:power-socket-eu'
        name: Muur
        show_name: false
        size: 75%
        hold_action:
          action: more-info
          haptic: success
        state:
          - value: 'on'
            style:
              - height: 70px
              - width: 70px
              - border-radius: 50px
              - border-style: solid
              - border-width: 2px
              - border-color: '#e5e5e5'
          - value: 'off'
            style:
              - height: 70px
              - width: 70px
              - border-radius: 50px
              - font-size: 11px
              - box-shadow: '2px 2px rgba(0,0,0,0.3)'
        type: 'custom:button-card'
      - card_style: ''
        color: 'rgb(255, 255, 0)'
        color_off: 'var(--disabled-text-color)(189, 255, 5)'
        color_type: card
        default_color: var(--primary-text-color)
        entity: switch.living
        icon: 'mdi:battery-charging-40'
        name: Bureau Lader
        show_name: false
        size: 75%
        hold_action:
          action: more-info
          haptic: success
        state:
          - value: 'on'
            style:
              - height: 70px
              - width: 70px
              - border-radius: 50px
              - border-style: solid
              - border-width: 2px
              - border-color: '#e5e5e5'
          - value: 'off'
            style:
              - height: 70px
              - width: 70px
              - border-radius: 50px
              - font-size: 11px
              - box-shadow: '2px 2px rgba(0,0,0,0.3)'
        type: 'custom:button-card'
      - card_style: ''
        color: 'rgb(255, 255, 0)'
        color_off: 'var(--disabled-text-color)(189, 255, 5)'
        color_type: card
        default_color: var(--primary-text-color)
        entity: switch.stp_living_bureau
        icon: 'mdi:speaker-wireless'
        name: SUBWoofer
        show_name: false
        size: 75%
        hold_action:
          action: more-info
          haptic: success
        state:
          - value: 'on'
            style:
              - height: 70px
              - width: 70px
              - border-radius: 50px
              - border-style: solid
              - border-width: 2px
              - border-color: '#e5e5e5'
          - value: 'off'
            style:
              - height: 70px
              - width: 70px
              - border-radius: 50px
              - font-size: 11px
              - box-shadow: '2px 2px rgba(0,0,0,0.3)'
        type: 'custom:button-card'
    type: horizontal-stack
type: vertical-stack
753

@RomRider - do you have on your ā€˜to-doā€™ list the ability to individually customise text, icon, and card colour depending on either the card entity state or another specified entity by any chance please? I canā€™t see any reference to this in the GitHub readme or open issues, so happy to create a new one for tracking if you like?
Thanks.

754

Try this below :slight_smile:

cards:
  - type: 'custom:button-card'
    color: 'rgb(0,0,0.5)'
    color_off: var(--disabled-text-color)
    color_type: card
    default_color: var(--primary-text-color)
    name: LIVING
    style:
      - font-size: 20px
      - font-weight: bold
      - padding: 0px
      - height: 45px
      - border-color: '#ed17cc'
      - border-radius: 25px
  - cards:
      - type: "custom:button-card"
        color_type: blank-card
      - card_style: ''
        color: 'rgb(255, 255, 0)'
        color_off: 'var(--disabled-text-color)(189, 255, 5)'
        color_type: card
        default_color: var(--primary-text-color)
        entity: switch.stp_living_other
        icon: 'mdi:power-socket-eu'
        name: Muur
        show_name: false
        size: 75%
        hold_action:
          action: more-info
          haptic: success
        state:
          - value: 'on'
            style:
              - height: 70px
              - width: 70px
              - border-radius: 50px
              - border-style: solid
              - border-width: 2px
              - border-color: '#e5e5e5'
          - value: 'off'
            style:
              - height: 70px
              - width: 70px
              - border-radius: 50px
              - font-size: 11px
              - box-shadow: '2px 2px rgba(0,0,0,0.3)'
        type: 'custom:button-card'
      - card_style: ''
        color: 'rgb(255, 255, 0)'
        color_off: 'var(--disabled-text-color)(189, 255, 5)'
        color_type: card
        default_color: var(--primary-text-color)
        entity: switch.living
        icon: 'mdi:battery-charging-40'
        name: Bureau Lader
        show_name: false
        size: 75%
        hold_action:
          action: more-info
          haptic: success
        state:
          - value: 'on'
            style:
              - height: 70px
              - width: 70px
              - border-radius: 50px
              - border-style: solid
              - border-width: 2px
              - border-color: '#e5e5e5'
          - value: 'off'
            style:
              - height: 70px
              - width: 70px
              - border-radius: 50px
              - font-size: 11px
              - box-shadow: '2px 2px rgba(0,0,0,0.3)'
        type: 'custom:button-card'
      - card_style: ''
        color: 'rgb(255, 255, 0)'
        color_off: 'var(--disabled-text-color)(189, 255, 5)'
        color_type: card
        default_color: var(--primary-text-color)
        entity: switch.stp_living_bureau
        icon: 'mdi:speaker-wireless'
        name: SUBWoofer
        show_name: false
        size: 75%
        hold_action:
          action: more-info
          haptic: success
        state:
          - value: 'on'
            style:
              - height: 70px
              - width: 70px
              - border-radius: 50px
              - border-style: solid
              - border-width: 2px
              - border-color: '#e5e5e5'
          - value: 'off'
            style:
              - height: 70px
              - width: 70px
              - border-radius: 50px
              - font-size: 11px
              - box-shadow: '2px 2px rgba(0,0,0,0.3)'
        type: 'custom:button-card'
      - type: "custom:button-card"
        color_type: blank-card
    type: horizontal-stack
type: vertical-stack

Please do so yes :slight_smile:

3 Likes
755

image
great tip, thank you very much !!!

2 Likes
756

The round buttons, - can you please share the code?

757

see post above

1 Like
758

Templating feature is very cool! Iā€™ve combined a battery state sensor and battery level sensor into one card within the first few minutes of trying it. Also made a ā€œNow Playingā€ for Spotify (media_title and media_artist attributes):

          label_template: >
            return ('  "' + states['media_player.spotify'].attributes.media_title + '" by ' + states['media_player.spotify'].attributes.media_artist + ' ');
          show_label: true

It would be perfect if you could style the label too though. Like in this example Iā€™d like the label with now playing text to be a smaller font size and different color. Maybe something that could be considered?

Thanks again for making this card so amazing! :slight_smile:

759

Looks like this is the code for your square buttons. I have been trying to get my buttons round. And to stay roundimage :thinking:

Whats your settings?

760

border-radius: 50% instead of px and specify a fixed height and width.

761

I heard you :wink:

Also fixed with the same PR.

per-style-config

762

:tada::tada: Version 1.5.0 :tada::tada:

Breaking Changes

  • for now style and entity_picture_style are still supported, but please make sure you update your configuration so that style becomes card and entity_picture_style becomes entity_picture, both under the styles option (note the S at the end of styles). Next releases will drop the support for style and entity_picture_style.
    Basically, this:
    - type: custom:button-card
  style:
    - border-radius: 10%
  entity_picture_style:
    - filter: grayscale(100%)
    Becomes:
    - type: custom:button-card
  styles:
    card:
      - border-radius: 10%
    entity_picture:
      - filter: grayscale(100%)
  • The styles defined in each state are now additive with the styles defined in the main part of the configuration. It means you donā€™t have to define all the CSS entries in each state, only define the ones which change. Define the common ones in the main styles config part and define specific ones in each state styles entries.

New Features

  • Styling per element supported by using the new styles object available in the main config and in each state entry.
    You can configure the style for:

    • card: Styles that are defined here will be applied to the whole card and itā€™s content, unless redefined in elements below.
    • entity_picture
    • icon
    • name
    • state
    • label

    per-style-config

    - type: "custom:button-card"
  color_type: icon
  entity: light.test_light
  label_template: >
    var bri = states['light.test_light'].attributes.brightness;
    return 'Brightness: ' + (bri ? bri : '0') + '%';
  show_label: true
  show_state: true
  size: 10%
  styles:
    card:
      - height: 100px
    label:
      - color: gray
      - font-size: 9px
      - justify-self: start
      - padding: 0px 5px
    name:
      - text-transform: uppercase
      - letter-spacing: 0.5em
      - font-familly: cursive
      - justify-self: start
      - padding: 0px 5px
    state:
      - justify-self: start
      - font-size: 10px
      - padding: 0px 5px
  state:
    - value: 'on'
      styles:
        state:
          - color: green
    - value: 'off'
      styles:
        state:
          - color: red
        card:
          - filter: brightness(40%)
- type: "custom:button-card"
  color_type: icon
  entity: light.test_light
  layout: icon_label
  label_template: >
    return 'Other State: ' + states['switch.skylight'].state;
  show_label: true
  show_name: false
  size: 100%
  styles:
    card:
      - height: 200px
    label:
      - font-weight: bold
      - writing-mode: vertical-rl
      - text-orientation: mixed
  state:
    - value: 'on'
      styles:
        label:
          - color: red
    - value: 'off'
      styles:
        label:
          - color: green

Fixes

  • Brightness calculation for lights was different than the default from Home Assistant. This is fixed.
  • Own longpress was not used in some cases
5 Likes
763

Great work, I like what you have done with styles as it will save a lot of code. However do I need to change something to get the right RGB brightness colors? It says it is fixed in the last PR, however I still get a difference in brightness.

Screenshots below, show brightness at around 20%, they are the same entity (different icon srry). The button screenshot shows the color with this card, the screenshot with the lightbulb shows the original HA color (brightness is at 20%)

image image

764

Did you empty your browser cache? Try in a private instance of your browser please to make sure it has nothing to do with caching.
If itā€™s still not working copy the content of your light state when itā€™s at 20% like in the picture (using the http://HASS_IP/dev-state)

I donā€™t have the issue anymore (brightness ~= 25%):
image

And thatā€™s my state:

brightness: 62
hs_color: 0,100
rgb_color: 255,0,0
xy_color: 0.701,0.299
value_index: 0
value_instance: 1
power_consumption: 1.4
supported_features: 17
hidden: false
icon: mdi:led-strip
765

Hm yeah in my browser it has the right color, canā€™t seem to clear cache in the ios app (usually a refresh would suffice, but seems to do nothing). Will try some more refreshes haha. Thanks anyways.

Edit: Couldnā€™t get it to clear, reinstalling the ios app solved it for me.

766

This is truly amazing! I was literally trying to figure out whether I could style an individual button based on an entity state last night. So glad I decided to sleep on it and not forge ahead. Thank you so much @RomRider!

Quick question for the brain trust - Does anyone know how I might go about tweaking the gap between these cards? I tried using -padding: 0px but that didnā€™t have my desired effect.

image
image962Ɨ212 18.4 KB

Ultimately, my goal is to make these buttons look and function more like a tabbed sub-menu system whereby each button triggers a conditional card based on the state of several input_booleans within the same view.

767

Itā€™s not possible with padding. A card has no control over the width between cards.
However thanks to

- type: custom:button-card
  color_type: blank-card
  style:
    card:
      - width: 50px #change the value to suit your needs

put in between each card on the line and youā€™ll be able to cheat and add space between buttons :blush:

768

And if you want to increase the gap vertically @daphatty you can use gap-card:

EDIT: Though I guess a single line with just one blank card would work equally well.