Lovelace: Button card

[ASNNetworks]

Hi @RomRider, I wonder if it’s possible what I’m trying to do. I have a template configuration setup (which works great). Now I want to move over popup-cards using browser-mod (instead of global settings, inside each button through call-service). So I have all entities (future and past) use the popup card (in combination with auto-entities and grid card).

The problem I’m facing now is that I need the template to also fill in the popup part the of code with the same entity. I also use decluttering card for other stuff, which has the option to use [[entity]], this works great with nested cards. I miss this function with the template option of button-card.

This is the hold_action part the the configuration template which has the nested cards.

    hold_action:
      action: call-service
      haptic: heavy
      service: browser_mod.popup
      service_data:
        title: " "
        card:
          actions:
            - color: '#9900FF'
              service: light.turn_on
              service_data:
                entity_id: this.entity_id
                rgb_color:
                  - 128
                  - 0
                  - 255
            - color: '#FFA500'
              service: light.turn_on
              service_data:
                entity_id: this.entity_id
                kelvin: 1000
            - color: '#FFF1D6'
              service: light.turn_on
              service_data:
                entity_id: this.entity_id
                kelvin: 3600
            - color: '#FF2212'
              service: light.turn_on
              service_data:
                entity_id: this.entity_id
                rgb_color:
                  - 255
                  - 0
                  - 0
          actionsInARow: 4
          borderRadius: 30px
          brightnessHeight: 400px
          brightnessWidth: 150px
          entity: this.entity_id
          fullscreen: true
          icon: 'mdi:'
          settings:
            closeButton: Sluiten
            openButton: Instellingen
          settingsCard:
            type: 'custom:light-entity-card'
            cardOptions:
              entity: this.entity_id
              shorten_cards: false
              consolidate_entities: true
              color_wheel: true
              persist_features: false
              brightness: true
              color_temp: true
              white_value: true
              color_picker: true
              smooth_color_wheel: true
              hide_header: false
              child_card: false
              show_slider_percent: true
              full_width_sliders: false
              brightness_icon: weather-sunny
              white_icon: file-word-box
              temperature_icon: thermometer
              header: ''
              effects_list: true
              style: |
                ha-card {
                    box-shadow: none;
                    background: none;
          sliderThumbColor: var(--light-accent-color)
          switchHeight: 400px
          switchWidth: 150px
          type: 'custom:light-popup-card'                    
        deviceID: this
        style: !include /config/templates/popup/popup-sliders-style.yaml

I tried using this.entity_id but that doesn’t work (I think this is not a core feature, but something of auto-entities). Is it at all possible to use nested cards inside a configuration template and passon the same entity? The pop-up does open, but it’s empty. I think because it can’t find an entity.

Edit: for the time being I tried this using decluttering-card and made button-card templates as variables within decluttering card. Works great (also with auto-entities and grid card)

[bschatzow (Bill Schatzow)]

I created a template file that loads the custom templates (many copied from examples above). I did a config check and no errors. When I point to the template, no matter which one, I get for example; Button-card template ‘standard’ is missing! Not sure what to look for. I have a spit config, and load the templates via the package documentation.
Example of the start of the yaml file.

button_card_templates:
  standard:
    color_type: card
    size: 80%
    hold_action:
      action: more-info
    styles:
      card:
        - padding: 0.2em
        - '--mdc-ripple-color': yellow
        - '--mdc-ripple-press-opacity': 0.5
      icon:
        - opacity: 0.5
      name:
        - font-size: 0.65em
        - white-space: normal
      state:
        - font-size: 0.65em
        - white-space: normal
      label:
        - font-size: 0.4em
        - white-space: normal
  wide:
    template: standard
    styles:
      grid:
        - position: relative
        - grid-template-areas: '"i n"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr

#=========================
#----- Container Button Card
#=========================    
#Container Button
#button_card_templates:
  container:
    color_type: label-card
    color: dimgray
    styles:
      card:
        - padding: 0
      name:
        - border-radius: 0.4em 0.4em 0 0
        - padding: 0.1em
        - width: 100%
        - font-weight: bold
      grid:
        - grid-template-areas: '"i" "n" "buttons"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      custom_fields:
        buttons:
          - background-color: 'rgba(0,0,0,0.3)'
          - margin: 0

Example of the lovelace card that is failing

  - 
    type: custom:button-card
    template: standard
    #<--- containing several other nested button card templates
    entity: binary_sensor.ha_update_available
    icon: mdi:home-assistant
    name: Home Assistant
    show_state: false
    tap_action:
      action: more-info
      entity: sensor.ha_available_version
    hold_action:
      action: url
      url_path: https://www.home-assistant.io/latest-release-notes/

    styles:
      card:
        - font-size: 10px
      grid:
        - grid-template-areas: '"i i" "n n" "available available" "local local"'
      icon:
        - color: >
            [[[ if (entity.state == 'on') return 'green'; return 'grey'; ]]]
        - width: 30%
        - animation: >
              [[[ if (entity.state == 'on') return 'blink 2s ease infinite'; ]]]
      custom_fields:
        available:
          - align-self: start
          - justify-self: start
          - --text-color-sensor: >
              [[[ if (entity.state == 'on') return 'green'; return 'grey'; ]]]
          - --animation: >
                [[[ if (entity.state == 'on') return 'blink 2s ease infinite'; ]]]
        local:
          - align-self: start
          - justify-self: start
    custom_fields:
      available: >
        [[[ return `<span>Avail: </span> <span style='color: var(--text-color-sensor);animation: var(--animation)'>${states['sensor.ha_available_version'].state}</span>`; ]]]
      local: >
        [[[ return `<span>Local: <span style='color: grey;'>${states['sensor.ha_local_version'].state}</span></span>`; ]]]

Example of from others that are helping me understand, but I am missing something (still). Does each button card template need to be in a sperate file?

[Mariusthvdb (Marius)]

Where did you save the templates?

[jhein (Julian)]

Hi,

I am trying to add a link (to navigate back to the main view) to a custom field that is just an icon. It already looks exactly how I want it, but I can’t figure out how to add the link.

type: 'custom:button-card'
name: The Den
color_type: label-card
color: 'rgb(83,38,6)'
styles:
  name:
    - font-weight: bold
  grid:
    - position: relative
  custom_fields:
    test:
      - position: absolute
      - left: 5%
custom_fields:
  test: |
    <ha-icon icon="mdi:chevron-left-circle"
     style="width: 30px; height: 30px; color: white;"></ha-icon>

Thank you for any help!

[RomRider]

You can’t trigger an action from a custom field, you’ll have to embed a card in your custom field with the action on it (it can be a button-card) or assign the action to the main button-card.

[jhein (Julian)]

Ah OK. Thank you!

I tried that too, but then I had to define the color twice, so that you can’t see the embedded card. Is there a way to make the embedded card transparent? Would make the templates easier.

Thanks again.

[RomRider]

There’s always a way, if you share your config (with the embedded card)

[jhein (Julian)]

Fair enough

type: 'custom:button-card'
name: The Den
color_type: label-card
color: 'rgb(83,38,6)'
styles:
  name:
    - font-weight: bold
  grid:
    - position: relative
  custom_fields:
    arrow_back:
      - position: absolute
      - left: 5%
custom_fields:
  arrow_back:
    card:
      type: 'custom:button-card'
      icon: 'mdi:chevron-left-circle'
      size: 30px
      color_type: card
      color: 'rgb(83,38,6)'
      tap_action:
        action: navigate
        navigation_path: /lovelace/

Oh, I could probably use one of those var(something) variables, if I knew how to define them myself.

Thank you again. For the card and for being so helpful.

[RomRider]

Something like this should do the trick:

type: 'custom:button-card'
name: The Den
color_type: label-card
color: 'rgb(83,38,6)'
styles:
  name:
    - font-weight: bold
  grid:
    - position: relative
  custom_fields:
    arrow_back:
      - position: absolute
      - left: 5%
custom_fields:
  arrow_back:
    card:
      type: 'custom:button-card'
      icon: 'mdi:chevron-left-circle'
      size: 30px
      color_type: card
      styles:
        card:
          - background: none
          - box-shadow: none
          - border-radius: 0px
      tap_action:
        action: navigate
        navigation_path: /lovelace/

[jmmitchell81]

Hi All,

Could someone please assist with the changes i require to make these buttons have rounded edges? Thank in advance.

    ' - type: horizontal-stack
        cards:
          - type: button
            tap_action:
              action: toggle
            entity: script.atv_lounge_on
            icon: 'hass:power'
            icon_height: 40px
            name: 'On'
          - type: button
            tap_action:
              action: toggle
            entity: script.atv_lounge_off
            icon: 'hass:power'
            name: 'Off'
            icon_height: 40px
      - cards:
          - entity: remote.lounge
            hold_action:
              action: none
            icon: 'mdi:arrow-left'
            name: Left
            show_icon: true
            show_name: false
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: left
                entity_id: remote.lounge
            type: button
          - entity: remote.lounge
            hold_action:
              action: none
            icon: 'mdi:apple'
            name: Enter
            show_icon: true
            show_name: false
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: select
                entity_id: remote.lounge
            type: button
          - entity: remote.lounge
            hold_action:
              action: none
            icon: 'mdi:arrow-right'
            name: Right
            show_icon: true
            show_name: false
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: right
                entity_id: remote.lounge
            type: button
        type: horizontal-stack
      - cards:
          - entity: remote.lounge
            hold_action:
              action: none
            icon: 'mdi:arrow-up'
            name: Up
            show_icon: true
            show_name: false
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: up
                entity_id: remote.lounge
            type: button
          - entity: remote.lounge
            hold_action:
              action: none
            icon: 'mdi:menu'
            name: Menu
            show_icon: true
            show_name: false
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: menu
                entity_id: remote.lounge
            type: button
          - entity: remote.lounge
            hold_action:
              action: none
            icon: 'mdi:arrow-down'
            name: Down
            show_icon: true
            show_name: false
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                command: down
                entity_id: remote.lounge
            type: button
        type: horizontal-stack
      - type: horizontal-stack
        cards:
          - type: button
            tap_action:
              action: call-service
              service: script.lounge_volume_up
            name: Vol Up
            icon: 'mdi:volume-plus'
            icon_height: 55px
            show_name: false
          - type: button
            tap_action:
              action: call-service
              service: script.lounge_volume_down
            name: Vol Down
            icon: 'mdi:volume-minus'
            icon_height: 55px
            show_name: false'

[RomRider]

You are not using button-card but the default button from home-assistant. This thread is about the custom button-card from here. So you have to install the custom-card first.

Then once installed and once your type: button changed to type: custom:button-card:

• More round

  styles:
    card:
      - border-radius: 25px # change the number here
  

• If you want them to be circles:

  styles:
    card:
      - border-radius: 50%
  

[bschatzow (Bill Schatzow)]

Can the card size be made round similar to the badge size? I am not seeing how from the documentation.

[RomRider]

@RomRider

If you want them to be circles:

styles:
  card:
    - border-radius: 50%

Just check the post above yours ^^

[bschatzow (Bill Schatzow)]

I understood the circle. I didn’t understand how to make it that small.

Is what I am trying to replace. When they changed the naming of the OS / supervisor, etc it no longer fits in the badge. I used this as a glance to see if I needed to apply an update.

[Mariusthvdb (Marius)]

HI Rom,

Please allow me to reinterate on this, because I had updated the post after we last spoke.

using the state_display: is working fine now, but I had to ditch most of my more complex state: configurations, because state_display: seems to not work in those?

Is it correct we can only use state_display: in the main button config section, and not in the state: section eg using the example I gave with my custom_field stateDisplay: ?

If the latter, would it be possible, and hence an accepted FR to make state_display: available in the state: field to make it work with operators?

[RomRider]

@Mariusthvdb

If the latter, would it be possible, and hence an accepted FR to make state_display: available in the state: field to make it work with operators?

Yes, please open a FR, it’s not possible yet but easy to add

[Mariusthvdb (Marius)]

@RomRider

Yes, please open a FR, it’s not possible yet but easy to add

Magic! consider it done: Allow state_display: in state: operator section · Issue #426 · custom-cards/button-card · GitHub
thanks!

[kongo09]

I discovered an issue in the interplay of the button-card with the light card when working with a dimmer control. Maybe I’m just missing something obvious and you guys can help?

Coming from the end, the goal is to have a dimmer button that allows simple on/off switching on a tap, but where the button has a “backside” where the brightness can be controlled. This is working in principle by combining a state-switch card with two button-cards, one for each side. The backside button-card embeds a light card to get the nice dimmer control.

It all works as you can see from the animation, but what doesn’t work is the brightness setting of the light card once it is embedded inside a custom_field of the button-card. The point where you grab the control doesn’t realize when you release the mouse button or lift the finger. Consequently, it keeps moving even if you move the mouse away and the brightness change doesn’t register.

In the animation I have a pure light button on the same entity on the right that shows correct behaviour. I have also stripped down the whole construct of flipping and templating to just have a simple button-card, but that shows the same behaviour:

type: 'custom:button-card'
entity: light.shelly_leo_dimmer
styles:
  custom_fields:
    setting:
      - position: absolute
      - top: 0%
      - left: 0%
      - width: 100%
      - height: 100%
custom_fields:
  setting:
    card:
      type: light
      icon: 'mdi:arrow-left'
      entity: light.shelly_leo_dimmer
      name: ' '

Does anyone have an idea what’s keeping the embedded light card control from working?

[RomRider]

That’s probably a bug on my side, please open a bug on github

[Mariusthvdb (Marius)]

So. All of a sudden the space between 2 of some buttons has become smaller than before… I have been rewriting my templates, and did fiddle with card: padding: 5px here and there, but thought this was only the internal padding on the card?

What other parameter sets the space between 2 cards?

I am stumped, and don’t have a real clue what I did wrong this time…

please give me a hint…

found it… and this might be something to have a look at. Of course it was a user error:

config_title:
  templates: styles_card

should be:

config_title:
  template: styles_card

shouldn’t this error out? a typo like templates: in the main config of a card?

I still don’t understand why this would break up the spacing between cards, (and coloring of the icons in the button at hand), unless this would break anything after the erroneous templates: field?