Fun with custom:button-card

Dominic_Dussault · October 13, 2021, 1:48pm

I would like to have a coontainer card with two rows of buttons, because with more than 4 button it doesnt fit on the screen, but I cant figure how to do it.
I tried with grid instead of horizontal-stack but when I change it button become super spaced and the card is super large.
Can anyone point me in the right direction ?

in this specific card, I would like the 5th entity to be on a second row, or 3-2 or 3-3, just not more than 4 max

type: custom:button-card
template: container
color: '#FCD299'
name: Chambre Dom
styles:
  card:
    - width: 545px
custom_fields:
  buttons:
    card:
      type: horizontal-stack
      cards:
        - entity: light.lumieres_lit_dom
          name: Lumières lit
          template: standard
          icon: null
          type: custom:button-card
          styles:
            card:
              - width: 90px
              - height: 68px
          state:
            - value: 'on'
              color: Gold
            - value: 'off'
              color: SlateGrey
        - entity: light.suite_parentale_lumieres_principales
          name: Plafonnier
          template: standard
          icon: null
          type: custom:button-card
          styles:
            card:
              - width: 90px
              - height: 68px
          state:
            - value: 'on'
              color: Gold
              tap_Action: toggle
            - value: 'off'
              color: SlateGrey
              tap_Action: toggle
        - entity: climate.mysa_1facb8
          template: bigtemp
          name: HVAC
          type: custom:button-card
          style:
            top: 40%
            left: 20%
        - entity: climate.mysa_d37cb4
          template: bigtemp
          name: PLINTHE
          type: custom:button-card
          style:
            top: 40%
            left: 20%
        - entity: climate.mysa_d37b98
          template: bigtemp
          name: Walk-In
          type: custom:button-card
          style:
            top: 40%
            left: 20%

skweng · October 14, 2021, 1:34pm

I can’t seem to get the buttons to appear on the container card. Is there something I’m doing wrong? The templates seems to come up but I only see the label card. Thanks!

type: custom:button-card
template: container
name: Test
custom fields:
  buttons:
    card:
      type: horizontal-stack
      cards:
        - entity: light.guest_strip
          name: guest strip
          template: standard
          icon: mdi:lightbulb
          type: custom:button-card
        - entity: light.guest_strip
          name: guest strip
          template: standard
          icon: mdi:lightbulb
          type: custom:button-card
        - entity: light.guest_strip
          name: guest strip
          template: standard
          icon: mdi:lightbulb
          type: custom:button-card
        - entity: light.guest_strip
          name: guest strip
          template: standard
          icon: mdi:lightbulb
          type: custom:button-card

paddy0174 · October 14, 2021, 2:41pm

If this is the only code, it won’t work. You need to define the custom_fields and where to show them. Right now you’re populating something to the custom_field but nowhere is defined where this custom_field should be and how it should look.

Despite the thing, that custom fields is not correct, it needs to be custom_fields (the underscore).

It is not easy to help you with this, as your intention is not clear. If you describe what exactly you want to achieve, preferable with all code you use (including the template definitions), there ~~might be~~ will be someone who can give a corrected example.

skweng · October 15, 2021, 3:35am

Thanks. I realised what was the issue. I missed out the ‘underscore’.

Grunt · October 15, 2021, 9:35pm

Wondering if anybody figured out a way for it to show a slider on the button card for dimmer lights? I see that long pressing on it will bring up the bar with a slider, was just hoping for something up front with the button. Regardless, great stuff.

paddy0174 · October 15, 2021, 10:03pm

You can find such a button in the Minimalist “theme”. The code for that light_slider would be this:

card_light_slider:
  variables:
    ulm_card_light_slider_name: "[[[ return entity.attributes.friendly_name ]]]"
  show_icon: false
  show_name: false
  show_label: false
  state:
    - operator: template
      value: "[[[ return entity.state == 'on' ]]]"
      styles:
        card:
          - background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
  styles:
    grid:
      - grid-template-areas: '"item1" "item2"'
      - grid-template-columns: 1fr
      - grid-template-rows: min-content  min-content
      - row-gap: 12px
    card:
      - border-radius: var(--border-radius)
      - box-shadow: var(--box-shadow)
      - padding: 12px
  custom_fields:
    item1:
      card:
        type: 'custom:button-card'
        template:
          - icon_info
          - light
        entity: "[[[ return entity.entity_id ]]]"
        name: "[[[ return variables.ulm_card_light_slider_name ]]]"
        styles:
          card:
            - box-shadow: none
            - border-radius: var(--border-radius) var(--border-radius) 0px 0px
            - padding: 0px
    item2:
      card:
        type: 'custom:my-slider'
        entity: '[[[ return entity.entity_id ]]]'
        radius: 14px
        height: 42px
        mainSliderColor: rgba(var(--color-yellow),1)
        secondarySliderColor: rgba(var(--color-yellow),0.2)
        mainSliderColorOff: rgba(var(--color-theme),0.05)
        secondarySliderColorOff: rgba(var(--color-theme),0.05)
        thumbHorizontalPadding: '0px'
        thumbVerticalPadding: '0px'   
        thumbWidth: 0px
        card_mod:
        style: |
          ha-card {
            border-radius: 14px;
            box-shadow: none;
          }

You’d need my-cards for the slider component.

ktownsend-personal · October 16, 2021, 2:54am

@paddy0174 hanks for sharing that! I hadn’t encountered that slider component yet and I like the simplicity of it. I like how it lights up when the entity is turned on, but still shows the level clearly when the entity is toggled off.

paddy0174 · October 16, 2021, 3:22am

I enhanced it a bit, sorry, posted the “old” code before.

I assume you get the variables, if not I can post some instructions.

Here are the changes for the “new” version, use them instead of the item2 definitions above:

    item2:
      card:
        type: conditional
        conditions:
          - entity: "[[[ return entity.entity_id ]]]"
            state: 'on'
        card:
          type: 'custom:my-slider'
          entity: '[[[ return entity.entity_id ]]]'
          radius: 14px
          height: 42px
          mainSliderColor: rgba(var(--color-yellow),1)
          secondarySliderColor: rgba(var(--color-yellow),0.2)
          mainSliderColorOff: rgba(var(--color-theme),0.05)
          secondarySliderColorOff: rgba(var(--color-theme),0.05)
          thumbHorizontalPadding: '0px'
          thumbVerticalPadding: '0px'   
          thumbWidth: 0px
          card_mod:
          style: |
            ha-card {
              border-radius: 14px;
              box-shadow: none;
            }

It hides the slider, if the entity is off.

Grunt · October 17, 2021, 2:17am

I like the look of that theme, but I do enough digging through yaml and the like in my work hours, I don’t want to have to do it when I’m off work too. The WAF was apparently high enough to pass muster when I told her to long press on the icon to get the color changing pallet.

Appreciate the suggestion though.

Grunt · October 17, 2021, 2:27am

One last (?) question, I have six lights in a container that I’d like to split into two rows. When I change the button type to grid and set columns to 3, I get huge amounts of spacing between the two rows. I imagine I’d need to add styling directly to the cards to fix this, but I’m not sure which need to be adjusted.

paddy0174 · October 17, 2021, 2:53am

So you mean you’re an UI guy? Compared to what you’re doing now with the buttons, I can tell you, there is something in the making for the Minimalist “theme” to make that easier in the future.

At least a lot easier than what you’re doing now.

I’m not ready yet, but there will be some kind of generator to use the Minimalist theme. It will not free you from working in the UI editor (not the raw-config-editor, but the code editing mode), but it will be possible to generate the code to paste in there.

Take a look in the above linked thread in a few days, to get more info.

paddy0174 · October 17, 2021, 4:55pm

Please, no cross posting! You won’t get more help, if you ask in two different threads, as mostly the same people will answer, no matter if here or there, but not in both.

So let’s stay where you want to end up, a swipe through your button-card, see here:

yolani · October 20, 2021, 12:40pm

HI there,

is it possible to create templates using other templates for custom fields and pass the entity object?

This code here fails with “Unsupported entity type: entity” and I have no idea why.

button_card_templates:
  cover_card_template:
    show_name: false
    show_label: true
    show_icon: true
    custom_fields:
      position_slider:
        card:
          type: custom:slider-entity-row
          entity: entity
          attribute: position
          full_row: true
          hide_state: true

It works if I don’t create this card through a template but pass the entity myself.

paddy0174 · October 20, 2021, 12:59pm

I don’t fully understand your question, sorry, but with button_card_templates you can do almost everything!

Inheriting a template is possible in all ways, even nested templates are ok, or calling one template through the other.

But you need to call the entity in the correct way, that’s why it won’t work in your case. Try something like this:

button_card_templates:
  cover_card_template:
    show_name: false
    show_label: true
    show_icon: true
    custom_fields:
      position_slider:
        card:
          type: custom:slider-entity-row
          entity: "[[[ return entity.entity_id ]]]"
          attribute: position
          full_row: true
          hide_state: true

But you need to have the entity set in your view. There are cases, where you don’t want the entity set for the “wrapper” card, but onl for one of the “custom_fields”-card, you need to work with a variable.

Something like this:

button_card_templates:
  cover_card_template:
    show_name: false
    show_label: true
    show_icon: true
    custom_fields:
      position_slider:
        card:
          type: custom:slider-entity-row
          entity: "[[[ return variables.entity_name ]]]"
          attribute: position
          full_row: true
          hide_state: true

and in your view:

- type: custom:button-card
  template: cover_card_template
  variables:
    entity_name: sensor.my_livingroom_temp_sensor

You need to see, what suits your design/layout best.

yolani · October 20, 2021, 1:02pm

Thanks, I did not know that I can pass the entity_id like that, problem solved.

yolani · October 21, 2021, 8:46am

Quick follow up question: Whats the correct way and/or theme variable to set the background of the label to the same color then the root card itself? If I delete the “styles” in the code, the background is just black.

button_card_templates:
  position_label_right_aligned:
    label: >
      [[[ return `Position:
      ${states[entity.entity_id].attributes.current_position}%` ]]]
    show_state: false
    show_icon: false
    show_label: true
    show_name: false
  cover_card_template:
    show_name: false
    show_label: true
    show_icon: true
    custom_fields:
      position_label:
        card:
          type: custom:button-card
          template: position_label_right_aligned
          entity: '[[[ return entity.entity_id ]]]'
          styles:
            card:
              - background-color: red

skweng · October 21, 2021, 2:49pm

Hi,

Just wondering if there’s a way to use card mods to resize the containers? It seems to work to move the containers but I’m not able to resize the containers when using horizontal stack.

Thanks!

tscibilia · October 22, 2021, 5:50am

I’m not sure this is the right spot to ask for some assistance but… I really like using the custom fields/grid element card that the github page shows the raspberry pi. It works great when I’m using sensors but I have a card that uses binary sensors and I don’t know how to change the state from ‘off’ to something else like ‘clear’.

https://hastebin.com/ikutotegub.yaml

qoheleth · October 22, 2021, 11:43pm

Try this (inserted in the same spot you you have the temp display defined).

      temp: >
        [[[
          var stat="clear";
          if (${entity.state}=="on") then stat="wet!";
          return `<ha-icon
            icon="mdi:water-alert"
            style="width: 16px; height: 16px; color: orange;">
            </ha-icon><span style="font-size: 12px;">${stat}</span>`
        ]]]

tscibilia · October 23, 2021, 5:19am

[quote=“qoheleth, post:215, topic:238450”]

Thank you so much, it actually gave me an error but it got me thinking and I was able to config an if/else condition…

temp: >
  [[[
    if (entity.state == "on")
      return `<ha-icon
        icon="mdi:water-alert"
        style="width: 16px; height: 16px; color: red;">
        </ha-icon><span style="font-size: 12px;">Wet</span>`
    else
      return `<ha-icon
        icon="mdi:water-off"
        style="width: 16px; height: 16px; color: orange;">
        </ha-icon><span style="font-size: 12px;">Dry</span>`
  ]]]