Lovelace: Button card

Mariusthvdb · April 3, 2021, 10:10am

here you go:

  custom_fields:
    info: &info_light
      >
        [[[ if (entity.state == 'on' && entity.attributes.brightness) {
            const brightness = Math.round(entity.attributes.brightness/2.54);
            const radius = 20.5; const circumference = radius * 2 * Math.PI;
            return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}"
            stroke="var(--active-color)" stroke-width="2" fill="none"
            style="transform: rotate(-90deg); transform-origin: 50% 50%;
            stroke-dasharray: ${circumference};
            stroke-dashoffset: ${circumference - brightness / 100 * circumference};" />
            <text x="50%" y="54%" fill="black" font-size="16" font-weight= "bold"
            text-anchor="middle" alignment-baseline="middle">
            ${brightness}<tspan font-size="10">%</tspan></text></svg>`;} ]]]

  styles:
    custom_fields:
      info: &circle_pos
        - position: absolute
        - right: 5%
        - top: 10%
        - width: 30%

maxym · April 3, 2021, 12:49pm

epic… thank you!
What does the syntax starting with & in your code?
it works for me without &info_light and &circle_pos. once entered and saved, after reopen those “things” disappeared being converted to:

custom_fields:
    info: |
      [[[ if (entity.state ...

Thank you

Mariusthvdb · April 3, 2021, 1:01pm

Those are yaml anchors, to be able to easily inject the identical code elsewhere below this code in the file, using
*info_light

You can leave them out if this is the only place you need it.

cdrom1028 · April 4, 2021, 5:57pm

@Mariusthvdb Nice, I have been looking for good examples of YAML Anchors!! Is there a way to use YAML Anchors to set a couple Styles that I can recall other places? I reuse style configs constantly and making even a small change means I need to update tons of different places…

Mariusthvdb · April 4, 2021, 9:58pm

Do it exactly like I did above, create the anchor on the fly using the & and inject it using the *

Of course , button-card has the templates possibility which is even better… you can use them globally in your config ( on button cards), while anchors can only be used in the specific file you create them

cdrom1028 · April 5, 2021, 4:40am

thank you!

uvjim · April 6, 2021, 5:00pm

I don’t suppose you had a chance to have a look any further did you? I spotted when trying this that the event handler was attached but the code in the handler never seemed to fire.

Proxlx · April 7, 2021, 7:21am

Hi all!

Apologies if this has been covered in the past, I’ve had a good search but can’t quite seem to find the answer!

I’m trying to change and icon colour based on the state of 2 other entity attributes. I have it working with either but I’m trying to use a form of AND condition. Is this possible? Apologies I don’t have the exact code to sent here at the moment but in short looking to show the following.

media_player.lounge.attribute.volume_level is > 2
AND
media_player.kitchen.attribute.volume_level is > 2
return icon colour red otherwise return grey.

I know you can do this with templates but is it possible to do directly in the custom button coding? I understand the styling/icon colours/values. Any help much appreciated.

Kind regards

Mark

Lindansaren · April 7, 2021, 7:49am

Hi, need some help. Is it possible to have a setup like this with the button card? With grid? Or absolute position?

The buttin should control a group of lights and sensor data for the specific room would be placed on the right hand side.

KaherdinTristan · April 7, 2021, 8:10am

Hi everyone
I’m trying to learn how to configure the custom card. My setup is by using the grid, and four buttons.
The question at hand is how I add data for icon and text size…

cards:
  - type: 'custom:button-card'
    entity: light.tvroom_left
    icon: 'mdi:floor-lamp'
    Size: 4px
    name: tv-rum vänster
    template: light
  - entity: light.tvroom_right
    icon: 'mdi:floor-lamp'
    name: tv-rum höger
    template: light
    type: 'custom:button-card'
  - entity: light.glaskulan
    icon: 'mdi:circle-outline'
    name: glaskulan
    template: light
    type: 'custom:button-card'
  - entity: light.hallway_window
    icon: 'mdi:floor-lamp'
    name: hallen
    template: light
    type: 'custom:button-card'
columns: 4```

KaherdinTristan · April 7, 2021, 9:00am

Realized that there’s a reference to template. And in template i found the styles

delete · April 7, 2021, 3:42pm

Yes, check out this example:

Here’s the code for the Home Assistant button card in the screenshot (btw I took out my popup yaml, but you can add your own if you like):

entity: sensor.processor_use_percent
show_name: false
show_entity_picture: true
show_icon: false
show_state: false
entity_picture: /local/mdi/ha.png
styles:
    card:
    - width: 'min(20vw, 80px)'
    - height: 'min(20vw, 80px)'
    - margin: 10px
    - border-radius: 15px
    - background-color: var(--primary-background-color)
    grid:
    - position: relative
    icon:
    - position: absolute
    - left: 5%
    - top: 1%
    - height: 28px
    - width: 28px
    - border-radius: 10px
    custom_fields:
    cpu:
        - position: absolute
        - left: 5%
        - top: 35%
        - font-size: 12px
        - line-height: 20px
        - font-family: Raleway
    disk:
        - position: absolute
        - left: 5%
        - top: 55%
        - font-size: 10px
        - line-height: 20px
        - font-family: Raleway
        - '--text-color-sensor': >-
            [[[ if (states["sensor.disk_use_percent_home"].state > 80)
            return "red"; ]]]
    memory:
        - position: absolute
        - left: 5%
        - top: 75%
        - font-size: 10px
        - line-height: 20px
        - font-family: Raleway
        - '--text-color-sensor': >-
            [[[ if (states["sensor.memory_use_percent"].state > 80) return
            "red"; ]]]
    ver_cur:
        - position: absolute
        - left: 30%
        - top: 0%
        - font-size: 10px
        - line-height: 20px
        - font-family: Raleway
    ver_ava:
        - position: absolute
        - left: 30%
        - top: 18%
        - font-size: 10px
        - line-height: 20px
        - font-family: Raleway
custom_fields:
    cpu: |
    [[[
        return `<ha-icon
        icon="mdi:chip"
        style="width: 14px; height: 14px; color: white;">
        </ha-icon><span> <span style="color: var(--text-color-sensor);">${states['sensor.processor_use_percent'].state}%</span></span>`
    ]]]
    disk: |
    [[[
        return `<ha-icon
        icon="mdi:harddisk"
        style="width: 14px; height: 14px; color: white;">
        </ha-icon><span> <span style="color: var(--text-color-sensor);">${states['sensor.disk_use_percent_home'].state}%</span></span>`
    ]]]
    memory: |
    [[[
        return `<ha-icon
        icon="mdi:memory"
        style="width: 14px; height: 14px; color: white;">
        </ha-icon><span> <span style="color: var(--text-color-sensor);">${states['sensor.memory_use_percent'].state}%</span></span>`
    ]]]
    ver_cur: |
    [[[
        return `<ha-icon
        icon="null"
        style="width: 12px; height: 12px; color: white;">
        </ha-icon><span> <span style="color: var(--text-color-sensor);">${states['sensor.installed_version'].state}</span></span>`
    ]]]
    ver_ava: |
    [[[
        return `<ha-icon
        icon="null"
        style="width: 12px; height: 12px; color: white;">
        </ha-icon><span> <span style="color: var(--text-color-sensor);">${states['sensor.latest_available_version'].state}</span></span>`
    ]]]
tap_action:
    action: fire-dom-event
    browser_mod:
    command: popup
    title: Sensors
    card:
        type: vertical-stack
        cards:
          ####### ADD YOUR OWN HERE IF YOU WANT######
type: 'custom:button-card'

This card is amazing once you start to learn it

maxym · April 7, 2021, 4:39pm

Is there a way to get using javascript a value set in card’s name attribute other than traversing this object?

I need to pass the name to popup card.

eximo84 · April 8, 2021, 9:50am

Does the entity variable pass down to custom fields?

Main Card has entity_id: vacuum.robovac

custom field i am using another card button to call a service, the below fails:

tap_action:
  action: call-service
  service: vacuum.start
  service_data:
    entity_id: entity

However if i define the entity directly on the custom field button card it works:

tap_action:
  action: call-service
  service: vacuum.start
  service_data:
    entity_id: vacuum.robovac

parautenbach · April 8, 2021, 11:49am

I think you need to post the full button config (including all the nested custom fields).

Is the custom field itself a button card? Does the inner button card have an entity ID set?

Even so, I think from what I’ve tried before that the answer is no (even if the inner card has no entity set.

It’s not specified how the inheritance works for variables but you could experiment with that. You could define e.g. my_entity and set the parent card’s entity from that and if it works, reference it also in the inner card. Just an untested idea.

eximo84 · April 9, 2021, 10:12am

type: 'custom:button-card'
custom_fields:
  battery: |
    [[[
      var battery_icon = entity.attributes.battery_icon;
      var battery_level = entity.attributes.battery_level;
      return `<ha-icon 
        icon="${battery_icon}" 
        style="width: 24px; height: 24px;"></ha-icon><br />
        <span>${battery_level}%</span>`
    ]]]
  vac_status: |
    [[[ 
      var vac_status = entity.attributes.status;
      return "Status <br />" + vac_status;
    ]]]
  vac_fanspeed: |
    [[[ 
      var vac_fanspeed = entity.attributes.fan_speed;
      return "Fan Speed <br />" + vac_fanspeed;
    ]]]
  action1:
    card:
      type: 'custom:button-card'
      aspect_ratio: 1/1
      name: Start
      icon: 'mdi:play'
      styles:
        card:
          - border-radius: 0
          - box-shadow: none
      tap_action:
        action: call-service
        service: vacuum.start
        service_data:
          entity_id: vacuum.dust_e
  action2:
    card:
      type: 'custom:button-card'
      aspect_ratio: 1/1
      name: Pause
      icon: 'mdi:pause'
      styles:
        card:
          - border-radius: 0
          - box-shadow: none
      tap_action:
        action: call-service
        service: vacuum.pause
        service_data:
          entity_id: vacuum.dust_e
  action3:
    card:
      type: 'custom:button-card'
      aspect_ratio: 1/1
      name: Spot
      icon: 'mdi:autorenew'
      styles:
        card:
          - border-radius: 0
          - box-shadow: none
      tap_action:
        action: call-service
        service: vacuum.clean_spot
        service_data:
          entity_id: vacuum.dust_e
  action4:
    card:
      type: 'custom:button-card'
      aspect_ratio: 1/1
      name: Edge
      icon: 'mdi:publish'
      styles:
        card:
          - border-radius: 0
          - box-shadow: none
      tap_action:
        action: call-service
        service: vacuum.clean_edge
        service_data:
          entity_id: vacuum.dust_e
  action5:
    card:
      type: 'custom:button-card'
      aspect_ratio: 1/1
      name: Locate
      icon: 'mdi:magnify-scan'
      styles:
        card:
          - border-radius: 0
          - box-shadow: none
      tap_action:
        action: call-service
        service: vacuum.locate
        service_data:
          entity_id: vacuum.dust_e
  action6:
    card:
      type: 'custom:button-card'
      aspect_ratio: 1/1
      name: Home
      icon: 'mdi:power-plug'
      styles:
        card:
          - border-radius: 0
          - box-shadow: none
      tap_action:
        action: call-service
        service: vacuum.return_to_base
        service_data:
          entity_id: vacuum.dust_e
entity: vacuum.dust_e
aspect_ratio: 1/1
name: Dust-e
show_status: false
size: 100%
triggers_update:
  - all
styles:
  grid:
    - grid-template-areas: >-
        ". i i i i battery" "vac_status vac_status n n vac_fanspeed
        vac_fanspeed" "action1 action2 action3 action4 action5 action6"
    - grid-template-rows: 50% 30% 20%
    - grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%

Basically im just trying to avoid entering the entity_id multiple times in each service call. Not sure if the service_data can accept a variable.

parautenbach · April 9, 2021, 12:22pm

Try:

      tap_action:
        action: call-service
        service: vacuum.return_to_base
        service_data:
          entity_id: "[[[ return entity.entity_id; ]]]"

Ctek · April 9, 2021, 1:06pm

Hi,
Thanks for the snippet it is of great value (for further reference).
Can the circle be used to display a “duration”?

For example i have a script that is run for 10 seconds, and the button is active on the whole period of the script run.

Can the Circle decrease or fill as time goes from 0 to 10 ?
And how can this be done? ( loop while state is ON -> decrease circumference ?)

I think it will be a great feature to use the circle as a duration indicator.

Thank you and best regards
Bogdan

Mariusthvdb · April 9, 2021, 1:44pm

yeah that seems totally possible, though I havent tested it yet.
You should replace the brightness const with your timer entity, and replace that in the calculation

${circumference - brightness / 100 * circumference}

also, you would add it to the triggers_update: field, though I would think it being in the template might already do that, not sure.

Assuming your entity has 20 max, I suppose you could do this:

    custom_fields:
        info:
          >
            [[[ if (entity.state != 0) {
                const timing = Math.round(entity.state);
                const radius = 20.5; const circumference = radius * 2 * Math.PI;
                return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}"
                stroke="var(--active-color)" stroke-width="2" fill="none"
                style="transform: rotate(-90deg); transform-origin: 50% 50%;
                stroke-dasharray: ${circumference};
                stroke-dashoffset: ${circumference - timing /20 * circumference};" />
                <text x="50%" y="54%" fill="black" font-size="16" font-weight= "bold"
                text-anchor="middle" alignment-baseline="middle">
                ${timing}<tspan font-size="10">sec</tspan></text></svg>`;} ]]]

and Ive tested it on a input_number as entity: the circle auto-updates

If you want the remaining time, simply reverse the calculation

Ctek · April 9, 2021, 2:32pm

Thanks Marius, this is a great (almost complete) starting point !
I’ll try to add a timer to the script and then to get it into the button for the circle progress.

Thank you again and hope this will help others too.

Best regards
Bogdan