Lovelace: Button card

please allow another detail question…

I like the small boder turning the color of the light in the ‘on’ state, and therefor use:

  state:
    - value: 'on'
      styles:
        card:
          - box-shadow: 0px 0px 1px 1px var(--paper-item-icon-active-color)

this show very nice, but unfortunately takes out the 3d effect of the button (ie the shadow at the bottom and right side (and to a lesser extent the left side?))

24

can I bring that back with yet another css option?
I’ve tried it with:

    card:
      - border-radius: 12px
      - background-color: ivory
      - padding-left: 5px
      - border: 1px outset

which shows:

01

which is a bit better, but the shadow is too clearly visible…

thanks for having a look how this should be improved.

For example:

            - styles:
                card:
                  - box-shadow: 0px 0px 20px 3px var(--button-card-light-color)
                  - background-color: 'rgba(57,128,228,0.2)'
              value: 'on'
            - styles:
                card:
                  - background-color: 'rgba(0,0,0,0.6)'
              value: 'off'

that was a bit much for me… :wink:

    - value: 'on'
      styles:
        card:
          - box-shadow: 1px 1px 1px 1px var(--paper-item-icon-active-color)

shows as:

04

which comes near, but still a bit unsubtle maybe.

hello you would be kind to publish the code of the fan that turns, I succeeded in part that is I can not bring the text to the right and the fan on the left all remains in the center and overlapped …

Inkedf74a0a23bd8aa8cb049ac795c5381e328069e43a_2_517x240_LI

trying to order my buttons like we could before with a card (now each button is a card…) I tried this, and made a non-clickable button, which I’d like to re-use for all sets of buttons throughout the configuration.

Probably feel it coming, but the question is, can we create a template like this for a set of stacks, and have eg only the name and colors set in the actual config?

  - type: horizontal-stack
    cards:

      - type: custom:button-card
        template: horizontal-filler

      - type: 'custom:button-card'
        name: Set Switches
        aspect_ratio: 16/1
        styles:
          card:
          - color: '#F0C209'
          - border-radius: 12px
          - border: solid 2px
          - border-color: '#555B65'
          - font-size: 20px
          - font-weight: bold

      - type: custom:button-card
        template: horizontal-filler

  - type: horizontal-stack
    cards:

      - type: custom:button-card
        template: vertical-filler

looks like:

42

still have to play around with the optimal color settings and in the end want to have them inherit the theme colors probably.

1 Like

Exactly what I’ve created yesterday :slight_smile: Lovelace: Decluttering Card

1 Like

there’s no such thing as coincidence… thanks Ill have a thorough look.

could I bother you with stupid little css issue?

trying to set a border-color with a hex color doesn’t work:

          - operator: default
            color: '#555B65'
            styles:
              card:
                - box-shadow: 0px 0px 2px 1px '#F0C209'

have to use either the color name (doesn’t exist I think in this case) or the rgb-value:

          - operator: default
            color: '#555B65'
            styles:
              card:
                - box-shadow: 0px 0px 2px 1px rgb(240, 194, 9)

is there a way to use the # values? wasn’t able to find that in my first searches…

Quote at the beginning :wink:
- box-shadow: '0px 0px 2px 1px #F0C209'

1 Like

I am truly embarrassed…
So sorry.

I don’t know if this has already been asked, but is there any way to have more buttons inside one card?

Something like this:
gaes

a button is a card… so the answer is no, afaik.

you can however create groups of cards and join these in a ‘grid’ using hor. and vert. stacks

_edit

completely missed that one, my bad. great idea…though a bit confused how to do that…all my horizontal and vertical stacks overlap.

HI,

building another set of buttons,

51

please let me ask this:

  • header button: when no entity is given this button show as posted. However when I configure an entity there, in this case the group.all_ceiling_spots, the name shifts outside the button… Since I want to show Name and label later on I have not disabled these. Cant this be done?

  • button borders shift with color temperature: though I have set auto-no-temperature, the border does shift with temp, making it invisible when close to the button color temp. using:

      styles:
        card:
          - box-shadow: 0px 0px 2px 1px var(--button-card-light-color)

is there a way to prevent that?

icon_name and name_icon: Id would really love to mirror the left /right buttons. Left hand side show icon_name, right hand side name_icon. Is this already possible, if not, would you consider creating that option?

template:

button_spots_group:
  color: auto-no-temperature
  size: 30%
  aspect_ratio: 4/1
  show_state: false
  show_label: false
  layout: icon_name
  tap_action:
    action: toggle
    haptic: light
  hold_action:
    action: more-info
    haptic: success
  styles:
    icon:
    card:
      - border-radius: 12px
      - background-color: ivory
    name:
      - font-weight: bold
      - font-family: Helvetica 
      - font-size: 13px
    label:
      - color: gray
      - font-size: 11px
      - font-family: Helvetica
    state:
      - font-size: 11px
      - font-family: Helvetica
      - text-transform: capitalize
      - font-weight: bold
  state:
    - value: 'on'
      color: '#555B65'
      styles:
        card:
          - box-shadow: 0px 0px 2px 1px var(--button-card-light-color)
        icon:
          - color: '#F0C209'
        name:
          - color: '#F0C209'
      id: on-icon

    - value: 'off'
      color: '#F0C209'
      styles:
        card:
          - box-shadow: '0px 0px 2px 1px #555B65'
        icon:
          - color: '#555B65'
        name:
          - color: '#555B65'
      id: off-icon
    - value: 'unavailable'
      styles:
        card:
          - opacity: 0.4
          - color: grey
          - --paper-item-icon-color: grey

and config:

type: vertical-stack
cards:

  - type: horizontal-stack
    cards:

      - type: custom:button-card
        template: horizontal-filler

      - type: 'custom:button-card'
        name: Ceiling spots
#        entity: group.all_living_ceiling_spots
        aspect_ratio: 16/1
#        layout: icon_name
        styles:
          card:
          - color: '#F0C209'
          - border-radius: 12px
          - border: solid 1px
          - background-color: '#555B65'
          - font-size: 20px
          - font-weight: bold

      - type: custom:button-card
        template: horizontal-filler

  - type: horizontal-stack
    cards:

      - type: custom:button-card
        template: vertical-filler

  - type: horizontal-stack
    cards:

      - type: custom:button-card
        template: horizontal-filler

      - type: custom:button-card
        template: button_spots_group
        entity: light.living_ceiling_1_cds
        name: Cd's
        icon: mdi:grid

      - type: custom:button-card
        template: button_spots_group
        entity: light.living_ceiling_3_wall
        name: Wall
        icon: mdi:theater

      - type: custom:button-card
        template: horizontal-filler

  - type: horizontal-stack
    cards:

      - type: custom:button-card
        template: horizontal-filler

      - type: custom:button-card
        template: button_spots_group
        entity: light.living_ceiling_2_terrace
        name: Terrace
        icon: mdi:nature


      - type: custom:button-card
        template: button_spots_group
        entity: light.living_ceiling_4_sofa
        name: Sofa
        icon: mdi:sofa


      - type: custom:button-card
        template: horizontal-filler

thanks!

You can use vertical-stack-in-card for that exact purpose

What is “this” in your question?

Nope, not yet possible, I’ll include that in the next release

(Almost) Everything is possible with CSS: see here, go a bit down to the examples and there is one example where you have the icon on the other side.

Haha, sorry. This: display Name (when configured with an entity) in the middle of the button, like now, without the entity…

I had spotted that, and tried:

      - type: custom:button-card
        template: button_spots_group
        entity: light.living_ceiling_3_wall
        name: Wall
        icon: mdi:theater
        grid:
          - grid-template-areas: ' "n i "'

to switch name and icon. But made an error and double quoted both. using the above no indeed switches the icon, cool! It does enlarge the rightside icon though.

36

without vertical-stack-in-cards:

38

With an entity attached, the icon is shown by default that’s why your name is partially shown. So:
show_icon: false

That’s because you didn’t follow the example :slight_smile:
Add this:
- grid-template-columns: 1fr 40%

yes, thanks. Really feel a bit troubled asking so much, but CSS still holds many secrets… eg, why would I need 40% , and not 30% as I have set for the icon in the template?

also, I do want to show an icon using the entity in the button, so I made id use layout: icon_name. No icon displayed… because I suspected the color to have the same color as the background and not be visible, Ive talen out that too, but still no icon? Ive checked and the entity has an icon in HA.
The aligning is a bit unexpected also, since I believed it to default to center?

16

using

        styles:
          card:
          - color: '#F0C209'

should color the icon too should it?

even explicitly using show_icon: true doesn’t reveal the icon:

      - type: 'custom:button-card'
        name: Ceiling spots
        entity: group.all_living_ceiling_spots
        show_state: false
        show_label: false
        show_icon: true
        aspect_ratio: 16/1
        layout: icon_name
        styles:
          card:
            - color: '#F0C209'
            - border-radius: 12px
            - border: solid 1px
            - background-color: '#555B65'
            - font-size: 20px
            - font-weight: bold

I am having mind bending issues here: how to get the middle button (of 3) the have the same height, but 4 times the width of the 2 outer buttons… no matter what I try, the horizontal_stack is divided into 3 equal parts…while the 2 outer buttons should remain small, as the rest of the posts buttons:

47

should become like:

20

this the code for the center horizontal stack:

  - type: horizontal-stack
    cards:

      - type: custom:button-card
        template: horizontal-filler

      - type: custom:button-card
        template: button_spot
        entity: light.hue_ambiance_spot_7
        name: 7
        icon: mdi:nature

      - type: 'custom:button-card'
        template: button_default_state
        name: Ceiling spots
        entity: group.all_living_ceiling_spots
        show_state: false
        show_label: false
        show_name: false
        show_icon: true
        aspect_ratio: 8/1
        styles:
          card:
            - border-radius: 6px
            - border: solid 1px

      - type: custom:button-card
        template: button_spot
        entity: light.hue_ambiance_spot_14
        name: 14
        icon: mdi:sofa

      - type: custom:button-card
        template: horizontal-filler

Even tried to nest horizontal stacks, but no difference. Only filling the stack with 4 empty cards will put the outer 2 buttons in the correct spacing and size.

17

would be really useful if somehow the aspect ratio could be maintained , while using a stack division over the stack members somehow.

separate post for a template related issue:

Using this name_template works fine on first state change:

        name_template: >
          if (states['sensor.spots_badge'].state !== 0) return 'Ceiling spots on: ' + states['sensor.spots_badge'].state;
          return 'Ceiling spots';

after that, it never gets updated anymore.

I have the same (except for the exact naming if the entity) state template in another (Tiles) setup and that shows it does work correctly.

    templates:
      label: >
        if (entities['sensor.spots_badge'].state !== 0) return 'Total Spots on: ' + entities['sensor.spots_badge'].state;
        return 'No Spots on';

20
40

please check why the buttons aren’t updating the template? (this is a sensor that gets updated every 30 sec)

That’s a bug, please open a github issue. Thanks

I can’t change that, that’s how it works in HA core, you have to put an equal number of blank cards or use lovelace-layout-card, or maybe use a vertical-stack-in-card with 4 buttons inside

Can you force the icon using icon: mdi:your_icon please? If it displays by forcing the icon, it means your entity doesn’t have an icon (or the button can’t find it)

Button click only «ON»?
HA%20Mode
I have a group of buttons, that I like to behave like a radio-button-list. If I press one button, the others go “off”. When I press another button “on” in the group, the other goes “off”. I have the above functionality working with an automation.

But if I press the button that is “on” to “off” my radio-button-functionality breaks, - the pressed button goes “off”. And all other buttons are “off”.
I have a second automation setting the Home-button to “on” in this case, but its not perfect. The best would be that the buttons only could be set to “on” (other functionality/automation could then set the buttons to “off”).

Is it possible to configure a button to only be set to “on” in the GUI?

UPDATE:

    #######################################################################
    #  HA MODE SET                                                 
    #######################################################################

    - alias: HA Mode set
      initial_state: true
      trigger:
        platform: state
        entity_id: input_boolean.ha_mode_home,
                   input_boolean.ha_mode_away,
                   input_boolean.ha_mode_holiday, 
                   input_boolean.ha_mode_night
        to: 'on'
      action:
        - service: input_boolean.turn_off
          data_template:
            entity_id: >
              {% set booleans = [ 'input_boolean.ha_mode_home', 'input_boolean.ha_mode_away', 'input_boolean.ha_mode_holiday', 'input_boolean.ha_mode_night' ] | reject('equalto', trigger.entity_id) %}
              {{ booleans | list | join(', ') }}

    - alias: HA Mode default
      initial_state: true
      trigger:
        platform: template
        value_template: "{% if is_state('input_boolean.ha_mode_home', 'off') and is_state('input_boolean.ha_mode_away', 'off') and is_state('input_boolean.ha_mode_holiday', 'off') and is_state('input_boolean.ha_mode_night', 'off')%}true{% endif %}"
      action:
        - service: input_boolean.turn_on
          data_template:
            entity_id: input_boolean.ha_mode_home