Lovelace: Button card

jztan79 · April 1, 2021, 11:34pm

Is it possible to set an entity name as an var and use it in template. I got an card it already partially templated but want to move the rest over to the template side, because all the setting is the same with the exception of entity name.

############## Picture Element Main Light Entities ##############
  - type: "custom:button-card"
    entity: light.hall_way_walkway
    template: light_element_button
    style:
      left: 54.5%
      top: 33%
    ######### want to move this section into template #########
    entity_picture: |
      [[[
        if (states['light.hall_way_walkway'].state == 'off')
          return "/local/photos/lovelace_photos/general/recessed_light_off.png";
        return "/local/photos/lovelace_photos/general/recessed_light_on.png";
      ]]]
    custom_fields:
      light_bri: |
        [[[
          var bri = states['light.hall_way_walkway'].attributes.brightness;
          if (bri > 0) 
            return Math.floor(bri/255 * 100) + '%';
          return
        ]]]
    ######### want to move this section into template #########

############## Button Card Template ##############
##### main light button
light_element_button:
  hold_action:
      action: more-info
  show_entity_picture: true
  show_name: false
  styles:
    grid:
      - position: relative
    entity_picture:
      - width: 21px
    custom_fields:
      light_bri:
        - position: absolute
        - height: 21px
        - width: 21px
        - font-size: 8px
        - line-height: 21px
        - align-self: middle
        - justify-self: start
        - color: 'red'

parautenbach · April 2, 2021, 6:18am

entity.state

jztan79 · April 2, 2021, 6:54am

perfect thank.

RomRider · April 2, 2021, 11:38am

Yes, using the entity_picture (or for more options, the custom_fields)

maxym · April 3, 2021, 10:07am

Hello
Do you know how can I achieve circular brightness indicator like implemented in homekit card?
I’m going to migrate from hk to button card, but I like this “circles”.
Author of hk card mentions he got idea from other source, but link he provided directs to an image.

obrazek

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.