Fun with custom:button-card

maurizio53 · February 9, 2023, 11:58am

Following examples in this thread i am trying to create a button card who shows how many lights are on in my house and did the following:

              - type: custom:button-card
                color: auto
                name: Luci Casa
                icon: mdi:lightbulb
                styles:
                  card:
                    - font-size: 12px
                    - font-weight: bold
                  icon:
                    - color: >
                        [[[
                          if (states['group.luci'].state == 'on')
                            return "green";
                          return "red";
                        ]]]
                  grid:
                    - position: relative
                  custom_fields:
                    notification:
                      - background-color: |
                          [[[
                            if (states['group.luci'].state == 'on')
                              return "yellow";
                            return "white";
                          ]]]
                      - border-radius: 50%
                      - position: absolute
                      - left: 75%
                      - top: 3%
                      - height:15px
                      - width: 15px
                      - font-size: 10px
                      - line-height: 25px
                      - color: black
                custom_fields:
                  notification: |
                    [[[ {{ return "expand(states.group.luci) | selectattr( 'state', 'eq', 'on') | list | count"}} ]]]

But i get this:
Schermata 2023-02-09 alle 14.02.49

How to make this notification working right?
Where am i wrong?

mb-software · February 9, 2023, 7:29pm

Thanks a lot for your answer. I know Minimalist, but unfortunately it doesn’t help me much. From what I understand Minimalist uses its own Theme. I wanted to use the default HA Themes which seems to already contain the proper colors (as used by the tile card). But I don’t know how to use them.

basbrus · February 10, 2023, 8:26am

Ah I misinterpreted your post. You can find all variables for the default theme here: https://github.com/home-assistant/frontend/blob/adb65176f02658cb1b48bd0a919b012da9f19744/src/resources/ha-style.ts#L127

The greyed-out arrow is done by reducing the opacity to 0.4

arrow color: rgb(var(--rgb-primary-text-color))
inactive arrow color: rgba(var(--rgb-primary-text-color), 0.4)
background-color: rgb(var(–rgb-secondary-text-color))

slofii · February 10, 2023, 9:42am

Hello Party People,

hope, someone can help me. ^^"
I use the awesom template from matt: GitHub - matt8707/hass-config: ✨ A different take on designing a Lovelace UI (Dashboard)

But since the last weeks i cant control my light if i click on a button.
Theres only appear the circle on the right top, but nothing else happend:

There are eben no entries in my logs, did I need to activate something?

And here is the template I use for:

light:
  template:
    - base
    - circle
    - loader
  double_tap_action:
    action: fire-dom-event
    browser_mod:
      service: browser_mod.popup
      data:
        title: >
          [[[
            return !entity || entity.attributes.friendly_name;
          ]]]
        card_mod:
          style:
            #popup header
            .:
        content:
          type: entities
          card_mod:
            style: |
              #states {
                padding-top: 0.5em;
              }
          entities: >
            [[[
              if (entity) {
                  let lights = [],
                      id = Boolean(entity.attributes.entity_id)
                          ? [entity.entity_id].concat(entity.attributes.entity_id)
                          : [entity.entity_id];

                  for (let i = 0; i < id.length; i++) {
                      lights.push({
                          "type": "custom:mushroom-light-card",
                          "entity": id[i],
                          "fill_container": false,
                          "primary_info": "name",
                          "secondary_info": "state",
                          "icon_type": "icon",
                          "show_brightness_control": true,
                          "use_light_color": true,
                          "show_color_temp_control": true,
                          "show_color_control": true,
                          "collapsible_controls": true
                      });
                  }
                  return lights;
              }
            ]]]
  variables:
    circle_input: >
      [[[
        if (entity) {
            // if light group get brightness from child to remove bounce
            let child = entity.attributes.entity_id,
                brightness = child && states[child[0]].attributes.brightness
                    ? Math.round(states[child[0]].attributes.brightness / 2.54)
                    : Math.round(entity.attributes.brightness / 2.54);
            return brightness === 0 && entity.state !== 'off'
                ? 1
                : brightness
        }
      ]]]
    circle_input_unit: '%'

Can anyone help me plz?

Gaston · February 10, 2023, 4:24pm

I had a similar problem with template within custom:button-card.
I resolved this issue by using Decluttering Card by Romrider.
This allow to use use your template for any card type. There is an example using template for a mushroom card.

You can have both type of template coexisting. Your configuration will have
decluttering_templates:
button_card_templates:

In the Raw Configuration. Follow by their own templates.

Gaston · February 10, 2023, 4:26pm

I had a similar problem with template within custom:button-card.
I resolved this issue by using Decluttering Card by Romrider.
This allow to use use your template for any card type. There is an example using template for a mushroom card.

You can have both type of template coexisting. Your configuration will have
decluttering_templates:
button_card_templates:

In the Raw Configuration. Follow by their own template.

mb-software · February 10, 2023, 7:53pm

Unfortunately this does not work:

type: custom:button-card
....
styles:
   card:
      - background-color: rgb(var(–-rgb-secondary-text-color))

what am I doing wrong?

nullae · February 12, 2023, 7:31pm

I wonder if anyone can help me ‘escape’ a character, or whatever is actually necessary to template a unfortunate attribute I want to use?

let rgb = states['sensor.media_colors'].attributes.light.dummy_1

As each attribute contains a period, I get this error as a result:

ktownsend-personal · February 12, 2023, 9:38pm

Try this:
let rgb = states[‘sensor.media_colors’].attributes[‘light.dummy_1’]

nullae · February 13, 2023, 4:27pm

Of course! thanks very much.

DeltaGolf · February 13, 2023, 8:52pm

Hopefully a simple question!

I want to call from theme:

styles:
  card:
    - height: 175px
    - border-radius: 5%
    - background-image: var(--background-image)

but that doesn’t work…

What am I missing?

100lv · February 16, 2023, 4:01pm

Hi Team,
I’m trying to build a card using button card, but as few of the items on the card are connected to combination of few sensors - is there a way to define once a “variable” where I’m evaluating a current status of those sensors and then to use in for setting items on the grid. By the sample - for TVR card - I want to have 4 options - off / on but TVR is closed (As current temp is higher than target) / On - heating / On - on max temp - and based on this to change background and few other things. I know how do it for each item separately - but this increase code in times.

DeltaGolf · February 16, 2023, 4:53pm

Would need a little more detailed info, but based on what you’ve said, could you define a text helper variable and set it through an automation? Then change the card based on the value.

Silvrav · February 17, 2023, 2:27am

How does one define the size of the container?
here in your screenshot you have 3 different sizes?

100lv · February 17, 2023, 4:00pm

Thanks for the idea. I’m not sure that helpers have such a functionality (I’ll double check it), but most probably I’ll define a template sensor - based on the values for the TVR sensors / statuses.
But just to provide mode details - I’m using Tado TVRs. Data is in 1 device and 2 sensors:

device - status - Off / Heat / Auto and current_temperature. sensor.bedroom_heating - shows how open is the Valve (0% - closed / 100% - opened) and sensor.bedroom_temperature - target temperature…
So my idea is to have different colors of the background and few of the icons on button card based on the combined status of TVR. I want 4 different options:

Off
Idle (target temp lower than current)
heating (target temp higher than current ot valve is open more than 10%)
max when target temp is set on max (this means valve is 100% open all the time).

ktownsend-personal · February 17, 2023, 6:59pm

@Silvrav the width and height are automatic. All the containers in a row will divide the available width equally. The height is determined by how many buttons are in the container because they will all try to fit equally and preserve their aspect ratio. For example, more buttons makes them shorter. I balanced the number of containers and buttons in a row to get them all roughly the same size.

Silvrav · February 17, 2023, 7:19pm

Thanks Keith but mine doesn’t seem to work that way. The buttons will adjust in size to fit the container, the container remain the same size. This in the above example if I try and fit in 7 buttons (indicators I’m image) they will all resize and the container will remain the same size as say the front porch above but with smaller buttons.

See mine below, I would like lounge in one row but has to settle for a vertical stack to fit it into the same container

mif3 · February 18, 2023, 11:04am

Hello everyone,

did anyone of you manage to display a refreshing value of “Last_changed” or “Last_updated” to the custom-button-card. I have a card which shows the reading of a water meter and want to know how up-to-date that is.

So i tried the following:

    [[[
      const lastChanged = new Date(entity.last_changed);
      const now = new Date();
      const diffMs = now - lastChanged;
      const diffMins = Math.floor((diffMs / 1000) / 60);
       return `<ha-icon
       style="width: 25px; height: 12px; color: white;">
       </ha-icon><span>${diffMins} minutes ago</span>`
    ]]]

I does the job, but only if i refresh my dashboard… if not the value stays the same.
Any solutions a bit more elegant?

qoheleth · February 21, 2023, 4:40pm

I think Keith’s description is right. The things to remember though, are

the container will size vertically to the tallest item
the container will fill horizontally to fill the space allowed and size buttons horizontally to fit equally according to the number of buttons in each container.
So, if you wanted the four buttons to be essentially the same size as the five buttons below them in your example, you should add a blank button to the set of four (making it five.) It’s a little odd, but I’ve basically set my containers to four items each with at least one that has 3 buttons and a blank so they all appear the same height and width.

Silvrav · February 21, 2023, 8:11pm

Thanks Russel but how is the horizontal space allowed determined?
I can add as many cards as I want the horizonal size does not change? I am sure I am missing something simple here