Lovelace: Button card

Hey @kuuji,

I know this kind of defies the point, but is it possible to nest a horizontal stack inside of a regular card below typical entities etc?

thank you :slight_smile:

Linton

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

Or use the ‘hui’ trick.

- type: entities
  entities:
    - type: custom:hui-horizontal-stack-card
      cards:
        - ...
3 Likes

using this template on my buttons works fine, except for a state with more than 2 underscores (or capitals, I don’t know for sure)

entity_picture_template: >
          return '/local/tiles/family/name_' + entity.state.toLowerCase().replace(' ','_') + '.png';

please see here for a separate post, didn’t want to obscure it too much.

js is correct ? (works everywhere in Tiles, and the rest of the Buttons), could it be the Button template interpreter?
thanks for having a look!

Fantastic! Thank you very much, can’t wait to try it

Unfortunately, no, your JS is not correct.
The replace function is taking a regexp, so the correct format for that to work is:

entity_picture_template: >
          return '/local/tiles/family/name_' + entity.state.toLowerCase().replace(/ /g, '_') + '.png';

note the g, which means apply it as many time as possible, without it, it’s only done once which is the result you have with your current code.

> "Zwembad de Stok".replace(' ', '_')
'Zwembad_de Stok'
> "Zwembad de Stok".replace(/ /g, '_')
'Zwembad_de_Stok'

See here for more info: How to replace all occurrences of a string in JavaScript

wow, thanks for your speed! ill change right away.

does this work for the toLowerCase also? it should endup like (name_)zwembad_de_stok

Still, it does work on the Tiles card, so maybe that has this built in?

toLowerCase() is applied to the whole string.

> "Zwembad de Stok".toLowerCase().replace(' ', '_')
'zwembad_de stok'
> "Zwembad de Stok".toLowerCase().replace(/ /g, '_')
'zwembad_de_stok'

I don’t see how it can work. Other tiles are also using javascript, the same way this card is doing it. It’s your browser interpreting javascript so it’s the same interpreter whatever the tile is.

please let me ask where do you test this? Is an online javascript of your preference tester available

thanks again.

I test it using node but you can run it from your browser console also:

1 Like

o yes, I’ve never known that.
Just imagine how many restarts this would have saved me, I can’t imagine… Once again you’re a life saver! can’t thanks you enough for this…

btw, the button works now :wink:

1 Like

Hi everyone, I have been absent on this thread for a while as I was busy creating templates with the decluttering card.

I remember creating my first Homekit button design a while back just when @RomRider took over this repo, and it has only gotten better.

For the ones interested, I use two templates for ALL my buttons in my setup. The reason I use two is because I can’t seem to figure out how to template

label: ' '

and

label_template: >
  var bri = Math.round(entity.attributes.brightness / 2.55);
  return (bri ? bri : '0') + '%';

in a single template with the decluttering card.
But still only 2 templates for over 60 different buttons is awesome! Thnx @RomRider

Here is the code for my shorted down template:

switch_button_card:
  default:
    - size: 25%
    - lock: false
    - color: auto
    - background_color: var(--homekit-white)
    - variable: spin
    - spin: false
    - show_name: true
    - show_state: true
    - show_label: true
    - show_icon: true
    - show_last_changed: false
    - tap_action:
        action: toggle
        haptic: light
    - hold_action:
        action: more-info
        haptic: success
    - aspect_ratio: 1/1
    - margin-right: 60px
    - label: ' '
    - opacity: 0.4
    - off_icon_color: gray
    - off_name_color: gray
    - off_state_color: gray
  card:
    type: custom:button-card
    name: '[[name]]'
    icon: 'mdi:[[icon]]'
    size: '[[size]]'
    color: '[[color]]'
    lock: '[[lock]]'
    aspect_ratio: '[[aspect_ratio]]'
    entity: '[[entity]]'
    label: '[[label]]'
    show_name: '[[show_name]]'
    show_icon: '[[show_icon]]'
    show_state: '[[show_state]]'
    show_label: '[[show_label]]'
    show_last_changed: '[[show_last_changed]]'
    tap_action: '[[tap_action]]'
    hold_action: '[[hold_action]]'
    styles:
      card:
        - border-radius: 12px
        - --paper-card-background-color: '[[background_color]]'
      label:
        - color: gray
        - font-size: 11px
        - font-family: Helvetica
        - padding: 0px 10px
        - justify-self: start
      state:
        - font-size: 11px
        - font-family: Helvetica
        - padding: 0px 10px
        - justify-self: start
        - text-transform: capitalize
        - font-weight: bold
        - padding-left: 10px
        - color: gray
      grid:
        - grid-template-areas: '"i" "n" "s" "l"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      img_cell:
        - align-self: start
        - text-align: start
        - margin-right: '[[margin-right]]'
      name:
        - justify-self: start
        - padding-left: 10px
        - font-weight: bold
        - font-family: Helvetica 
        - font-size: 13px
    state:
      - value: "on" 
        '[[variable]]': '[[spin]]'  
        styles:
          name:
            - color: black
          state:
            - color: gray
          lock:
            - color: black
      - value: "off"
        styles:
          card:
            - opacity: '[[opacity]]'
          icon:
            - color: '[[off_icon_color]]'
          name:
            - color: '[[off_name_color]]'
          state:
            - color: '[[off_state_color]]'
          lock:
            - color: black

For my full setup you can check here https://github.com/jimz011/homeassistant

@iantrich I think you might be interested in this

2 Likes

@kuuji is gone. @RomRider took over :wink:

The king is dead. Long live @RomRider

1 Like

So I’d like to change the ‘lock’ duration from 5 seconds to 1 or 2 seconds. I tried this but it doesn’t work:

              - type: custom:button-card
                entity: input_boolean.alarmgaragedoor
                icon: mdi:security
                color_type: icon
                lock: true
                styles:
                  lock:
                    - -webkit-animation-duration: 1s
                    - animation-duration: 1s
                    - -webkit-animation-fill-mode: both
                    - animation-fill-mode: both
                    - margin: unset
                state:
                  - value: 'off'
                    color: var(--paper-item-icon-color)       # rgb(54, 95, 140)
                  - value: 'on'
                    color: var(--secondary-text-color)        # rgb(251, 210, 41)
                name: Exit-Enter
                show_state: false
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  service_data:
                    entity_id: input_boolean.alarmgaragedoor

I just copied in the default style for lock and put it in what looked like the correct format but did I screw up?

Unfortunately that will not work, the lock is handled in javascript and the 5 seconds are hard-coded, it’s not an animation, it’s 2 animations + a delay between both.
If you’re interested in the code: https://github.com/custom-cards/button-card/blob/9ef93a2a350176d9d1e86adee9d86908ff13a270/src/button-card.ts#L776-L793

Well that’s a pity…

I just logged a Feature Request for this.

once again you were right. I forgot I have double setups for Lovelace and legacy. I meant to say the legacy tiles works correct. It uses this:

          - entity: device_tracker.life360_name
            style_template: >
              if (state === 'home' || state === 'not_home') return 'background-image: url(\"/local/tiles/family/name_' + state + '.png\")';
              return 'background-color: #643aac;background-image: url(\"/local/tiles/family/name_' + entities['sensor.name_location_picture'].state + '.png\")';
            more_info: group.name

and this jinja template sensor for state, since I couldn’t get my head around creating 1 template for all, had to make a dedicated image template for the non home/not_home states (zones):

        value_template: >
          {% set state = states('device_tracker.life360_name') %}
          {{ state|replace(' ','_')| lower }}

so jinja does it for all occurrences… no javascript

pretty much every language but javascript does it for all occurrences. Javascript had to be that guy.

Hi there

I’m struggling to make button_card_templates: work, can someone please shed some light? Gotta be something simple that I can’t see.

What is ui-lovelace-card.yaml? Never saw another reference to this file.

I built a view using the example on the documentation but that also don’t work:

title: Home

resources:
  - url: /local/button-card.js
    type: module

button_card_templates:
  header:
    styles:
      card:
        - padding: 5px 15px
        - background-color: var(--paper-item-icon-active-color)
      name:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold
      label:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold

  header_red:
    template: header
    styles:
      card:
        - background-color: '#FF0000'

views:

  - title: "Test View"
    icon: mdi:wrench
    cards:

      - type: custom:button-card
        template: header_red
        name: "My Test Header"

This is what is rendered:

Thanks for any hint.

Tales Maschio