Fun with custom:button-card

Share your Projects! Lovelace & Frontend
#196

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%
#197

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
#198

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. :slight_smile:

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. :slight_smile: 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. :slight_smile:

#199

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

#200

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.

#201

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. :slight_smile:

1 Like
#202

@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.

#203

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

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. :slight_smile: :+1:

#204

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.

#205

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.

image
image1153×800 16.4 KB

#206

So you mean you’re an UI guy? :slight_smile: 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. :wink:

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

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. :slight_smile:

#208

Please, no cross posting! :slight_smile: 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. :wink:

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

#209

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.

#210

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

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. :slight_smile:

#211

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

#212

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.

image
image1070×360 48 KB 

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
#213

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!

#214

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’.

image

https://hastebin.com/ikutotegub.yaml

#215

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>`
        ]]]
1 Like
#216

[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…
image

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>`
  ]]]