Lovelace: Button card

[jimz011 (Jim)]

This can already be done though:

I’d go for an input_boolean as the switch, and a state template to show the state. The button wil now correctly show the state (you might consider templating color as well) but the button will do nothing (just like a permanent lock would do).

You could also do a tap_action: none for example or a service-call to do something else. This way you wouldn’t need the input boolean.

Not the most beautiful solution but it works for me. For example I have servers in HA as switches which should never ever be turned of. Pressing the button does nothing but show a more-info window.

Edit: lol I should have read up this was already answered

[Mariusthvdb (Marius)]

tbh, I think a switch needs to be able to be a switch… lots of hacks possible, but thats what makes it all too complex all over.

I probably will endup not using lock: true, set a dedicated icon lock-alert, and have tap action show more info…
o wait, that can’t be, I need the lock-alert to be the lock icon, not the entity icon…
feature request holds…
tap_action and hold_action don’t work as configured

[RomRider]

Lock is the same for hold and tap and double tap. There’s no way to differentiate it.
You have to see it as an overlay that captures all your clicks until it’s unlocked.

If you want to display a lock icon just use a custom field and put the tap_action to none while keeping the hold action to more info.

I don’t quite understand your use case honestly

BTW, putting icon: mdi:something in the styles of the lock will not do anything, it’s not valid css.

[RomRider]

You’re not using the latest version of button card. label_template doesn’t exist anymore, it’s just label now. Plus the template would be "[[[ return entity.attributes.temperature + ' °C' ]]]"

[Mariusthvdb (Marius)]

@RomRider

Lock is the same for hold and tap and double tap. There’s no way to differentiate it.

I don’t need to differentiate it for these actions, I need it to be different than the default lock icon. Can’t that be done styling the lock, just as we can set the color?

@RomRider

You have to see it as an overlay that captures all your clicks until it’s unlocked.

so I understand correctly with unlock_users: unknown, the lock will never be unlocked, and no action at all is possible?

@RomRider

If you want to display a lock icon just use a custom field and put the tap_action to none while keeping the hold action to more info.

That will be my first custom field, will have to check the docs how to create this overlay, with the lock-alert icon.

@RomRider

I don’t quite understand your use case honestly

well, I want it to be visually different from the regular locks (since the behavior is different), so need another lock icon.
I do want to be able to use a more-info, probably of the locked switch, maybe even use another entity. for now, simply the locked switch as more info, on both tap and hold to be sure.

@RomRider

icon: mdi:something in the styles of the lock will not do anything, it’s not valid css

I noticed that since I now need to use it in a custom-field, I must check the docs for setting a custom icon here. don’t suppose you could assist me, please?

thanks for letting me know, appreciated!

[typeonegative (Gunnar)]

@RomRider, maybe you can help me.
i used state custom ui card in the past and i was getting “last-triggered” info for automations as below:

>-
    if(!attributes.last_triggered)return null;
    var t,s=(new Date()-new Date(attributes.last_triggered))/1e3;
    return(
    (t=Math.floor(s/86400))?t+(t>1?" days":" day"):
    (t=Math.floor(s/3600))?t+(t>1?" hours":" hour"):
    (t=Math.floor(s/60))?t+(t>1?" minutes":" minute"):
    (t=Math.floor(s))!==1?t+" seconds":" second"
    )+" ago";

i would love to get same info with buttoncard but i have no idea how to do it. any help?

[RomRider]

A simple

show_last_changed: true

Should do the trick

[typeonegative (Gunnar)]

its still not so simple. last_changed and last_triggered showing different info.

[RomRider]

Ah true, the problem with that is that it will not update automatically because your entity will not change over time and the display will not update, that’s why we have a specific show_last_changed option.

Your code should just work in button-card by replacing attributes.last_triggered with entity.attributes.last_triggered but again, it will not update properly

[Mariusthvdb (Marius)]

followed your suggestion to create a custom_field, but have a couple issues…

I would love to position the custom lock exactly as you do with the lock: true option. Could you please let me know what the coordinates and size are? I am now using

  custom_fields:
    icon: >
      [[[ return `<ha-icon icon="mdi:lock-alert" style="width: 22px; height: 22px;"> </ha-icon>` ]]]

and

  styles:
    custom_fields:
      icon:
        - color: red
        - position: absolute
        - left: 70%
        - top: 5%

which seems to come close, but just not exactly:

lock: true :

and custom_field:

I did try to make them 20px but then rendered too small again…

also, since I am not using a template, would I still need to use the [[[ ]]] construction? seems the code can be simpler without that, using a fixed ha_icon?

for reference this is my full button template:

button_lock_permanent:
  label: >
    [[[
    var id = entity.entity_id.split('.')[1].slice(3, -9);
    return states['sensor.' + id + '_actueel'].state + ' Watt';
    ]]]
  color: auto
  size: 30%
  aspect_ratio: 1/1
  show_state: true
  show_label: true
  tap_action:
    action: none
    haptic: light
  hold_action:
    action: more-info
    haptic: success
  custom_fields:
    icon: >
      [[[ return `<ha-icon icon="mdi:lock-alert" style="width: 22px; height: 22px;"> </ha-icon>` ]]]
  styles:
    custom_fields:
      icon:
        - color: red
        - position: absolute
        - left: 70%
        - top: 5%
    icon:
      - color: grey
    card:
#      - color: grey
      - background-color: lightgrey
      - border-radius: 6px
      - padding-left: 5px
      - box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
    name:
      - justify-self: start
      - font-weight: bold
      - font-family: Helvetica 
      - font-size: 13px
      - text-overflow: unset
      - white-space: unset
      - word-break: break-word
      - text-align: start
    label:
      - font-size: 11px
      - font-family: Helvetica
      - justify-self: start
    state:
      - font-size: 11px
      - font-family: Helvetica
      - justify-self: start
      - text-transform: capitalize
      - font-weight: bold
    grid:
      - grid-template-areas: '"i" "n" "s" "l"'
      - grid-template-columns: 1fr
      - grid-template-rows: 1fr min-content min-content
      - position: relative
    img_cell:
      - justify-content: start
      - align-items: start
  state:
    - value: 'on'
      styles:
        state:
          - color: green
        label:
          - color: red
    - value: 'off'
      styles:
        label:
          - color: rgba(0, 0, 0, 0.0)
        state:
          - color: darkgrey
    - value: 'unavailable'
      styles:
        label:
          - color: rgba(0, 0, 0, 0.0)
        state:
          - color: red

thanks for having a look if you would.

[Anders_M_Olausson]

@RomRider

[[[ return entity.attributes.temperature + ’ °C’ ]]]

Damn, that was why it stopped working. Thanks a million.

[RomRider]

@Mariusthvdb

thanks for having a look if you would.

The style for the lock is defined here, omit the z-index part.

Regarding the size, not specifying anything should do the trick.

[Mariusthvdb (Marius)]

thank you Rom. I am not sure though how to ener that in the template for the button though. Could you assist me here?

Not setting a size is easy

custom_fields:
    icon: >
      [[[ return `<ha-icon icon="mdi:lock-alert" > </ha-icon>` ]]]

but the how to use the overlay bit is over my head tbh. Hope you can provide me with a snippet to use

[jimz011 (Jim)]

Wowzers that is a lot of templated code. I really love it, but was a bit too complex for what I wanted to achieve. I use grid with a custom field now which seems to look pretty much the same in the end.

Still thanks for sharing this, I might get something useful out of it in the future.

This is what I have created with the grid I already use:

When tapping one of those buttons it will take you to the corresponding page:

And when doing a hold_action/deep_press on these buttons you will get a popup card showing what is on:

Anyways still a big thanks even though I do not use your code

[daphatty]

I’ve encountered a strange issue and I’m uncertain whether the problem is related to button-card or elsewhere.

Based on the example cards from the ESXi Custom Component page, I’ve discovered that using hostnames which contain dashes within the button code below will result in the card not rendering. Hostnames with simple, alpha-numeric hostnames work fine.

Does anyone know why this would happen?

    - type: custom:button-card
      entity: sensor.esxi_stats_vms
      name: Win 7
      template: esxi_stats_vm
      styles:
        icon:
          - color: >
              [[[
                if ( states['sensor.esxi_stats_vms'].attributes.HOST-NAME.status == "green")
                  return "green";
                if ( states['sensor.esxi_stats_vms'].attributes.HOST-NAME.status == "warning" )
                  return "yellow";
                return "red";
              ]]]
      custom_fields:
        uptime: >
          [[[
            return `<ha-icon
              icon="mdi:arrow-up"
              style="width: 12px; height: 12px; color: deepskyblue;">
              </ha-icon><span><span style="color: var(--text-color-sensor);">
              ${states['sensor.esxi_stats_vms'].attributes.HOST-NAME.uptime_hours}</span></span>`
          ]]]
        cpu: >
          [[[
            return `<ha-icon
              icon="mdi:server"
              style="width: 12px; height: 12px; color: deepskyblue;">
              </ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">
              ${states['sensor.esxi_stats_vms'].attributes.HOST-NAME.cpu_count}</span></span>`
          ]]]
        ram: >
          [[[
            return `<ha-icon
              icon="mdi:memory"
              style="width: 12px; height: 12px; color: deepskyblue;">
              </ha-icon><span>Mem: <span style="color: var(--text-color-sensor);">
              ${states['sensor.esxi_stats_vms'].attributes.HOST-NAME.memory_allocated_mb} MB</span></span>`
          ]]]
        state: >
          [[[
            return `<ha-icon
              icon="mdi:harddisk"
              style="width: 12px; height: 12px; color: deepskyblue;">
              </ha-icon><span>State: <span style="color: var(--text-color-sensor);">
              ${states['sensor.esxi_stats_vms'].attributes.HOST-NAME.state}</span></span>`
          ]]]

[daphatty]

In the realm of providing an answer to my own question…

@Navith on Discord managed to find the solution. Changing attributes.HOST-NAME to attributes['HOSTNAME']resolved the problem.

[RomRider]

@Mariusthvdb

but the how to use the overlay bit is over my head tbh. Hope you can provide me with a snippet to use

The code I’ve sent you is just CSS, so just copy paste that into your styles for the custom_field, remove the ; from each line and remove z-index completely and you’ll be good to go.

[Mariusthvdb (Marius)]

I see, yes, thanks!

so I made it like this now:

  custom_fields:
    icon: >
      [[[ return `<ha-icon icon="mdi:lock-alert" > </ha-icon>` ]]]
  styles:
    custom_fields:
      icon:
        - align-items: flex-start
        - justify-content: flex-end
        - padding: 8px 7px
        - opacity: 0.5
        - color: red
#        /* DO NOT override items below */
        - position: absolute
        - left: 0
        - right: 0
        - top: 0
        - bottom: 0
#        - z-index: 1
        - display: flex

but the positioning is not as expected…
coloring, opacity, size seem perfect, so I am getting there…

top: the custom_field,
bottom: the default lock: true

btw, if I enter some text in the custom_fields key it shows at the top alright, only the icon gets positioned incorrectly

  custom_fields:
    icon: text

would be much appreciated if you’d be able to help me fix that last bit too @RomRider : (position my custom_field icon on the exact spot as the lock: true card)

[yoni3210 (yoni mo)]

Hi guys,

i’m finishing to configure my system monitor, and i need help with a title, i need the title of the speed test to match like all the rest, please see pic below:

Any idea i can i do it?

code:

                      - type: "custom:button-card"
                        color_type: icon
                        aspect_ratio: 8/1
                        name: Speed Test                     
                      - type: custom:bar-card                  
                        title: Download
                        title_position: inside
                        entity: sensor.speedtest_download
                        max: 200
                        severity:
                        - value: 50
                          color: '#e60000'
                        - value: 150
                          color: '#ffa500'
                        - value: 200
                          color: '#40bf60'                    
                      - type: custom:bar-card
                        title: Upload
                        title_position: inside
                        entity: sensor.speedtest_upload
                        max: 6
                        severity:
                        - value: 1
                          color: '#e60000'
                        - value: 3
                          color: '#ffa500'
                        - value: 6
                          color: '#40bf60'
                      - type: custom:bar-card
                        title: Ping
                        title_position: inside
                        entity: sensor.speedtest_ping
                        icon: mdi:database
                          #title_position: inside
                        max: 200
                        severity:
                        - value: 40
                          color: '#40bf60'
                        - value: 80
                          color: '#ffa500'
                        - value: 200
                          color: '#e60000'    

[VDRainer]

How did you do it on the Pi-Hole card?