Fun with custom:button-card

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.

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:

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

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

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!

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

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

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

The error was “state” instead of “stat”. You can’t use state as a variable because it’s already defined as something else.

Styling question: The following screenshot shows my cover card I built using button-card.

The text "Position 100% is an embedded button-card through custom_fields of the root card. The text itself is the “name” attribute taking an attribute from the entity.

The question is, how can I make the background of the embedded card transparent? I only want the text to be displayed.

Any way to make an IF based entity with an embedded button?
In the custom_fields below I would want to do something like:

entity >
      [[[
        if (states["alarm_control_panel.ring_alarm"].state == "armed_home") return 'switch.ringdisarm';
        if (states["alarm_control_panel.ring_alarm"].state == "disarmed") return 'switch.ringarmhome';
      ]]]

What I want to have a button change to different actions based on the current state: if alarm is armed, button should disarm etc. Similar to how the standard alarm-panel works by default.

  - type: 'custom:button-card'
    show_state: true
    show_name: false
    entity: alarm_control_panel.ring_alarm
    state:
      - value: 'armed_home'
        icon: mdi:shield-account
        color: red
      - value: 'disarmed'
        icon: mdi:shield-off
        color: darkgreen
    styles:
      icon:
        - width: 24%
        - margin-left: 10%
      state:
        - margin-top: -35%
        - margin-left: 80%
    custom_fields:
      button:
        card:
          type: 'custom:button-card'
          entity: switch.ringarmhome
          show_icon: false
          styles:
            name:
              - text-transform: uppercase
              - letter-spacing: 0.1em
              - font-size: 13px
              - font-weight: bold
            card:
              - border-radius: 5px
              - height: 35px
              - width: 100px
              - box-shadow: 0px 0px 1px 1px
              - margin: 0px 120px 0px -30%

image

Question about the button shadow:
I would like to control the button shadow color based on a few conditions.
For example, for a plug, I would like the border to be green when on, and the template primary when it is off.
for a light, I would like to make it the color light when on, and the theme primary when off.
I have done some research, and I see the use of the template. This is what I have now:

standard:
  color_type: card
  size: 80%
  hold_action:
    action: more-info
  styles:
    card:
      - padding: 0.2em
      - "--mdc-ripple-color": var(--light-primary-color)
      - "--mdc-ripple-press-opacity": 0.5
      - box-shadow: 0px 0px 3px 3px var(--light-primary-color)
    icon:
        - opacity: 0.75

I found that using - box-shadow: 0px 0px 9px 3px var(--button-card-light-color) will give me what I need for the light.
How can I program the border to set a color based on the entity state? I have it for the icon based on the template provided earlier in the thread.

- color: >
          [[[
            if (entity.state == 'on') return 'lime';
            else return 'red';
          ]]]

But how do I do that when the color is not under its own tag, but part of the box-shadow. Can’t tell what code I am in now, JSON, YAML, CSS.
Any guide to help with the mix of codes for lovelace would help me figure out, or any pointers.

Hi,

I want to get a value of the weekday.
Did someone now’s how to do that?

Thanks

custom_fields:
  test: >
    [[[ return [now().weekday()] ]]]

You should use “states” for the different styles.

state:
  - value: 'on'
    some style
  - value: 'off'
    some other style

Hi all,

Having some issues configuring a switch-on-button with call service to work.

The error is seem to be getting is “failed to call service switch/turn on. must contain at least one of entity_id, device_id, area_id”.

Below is the code for the button and switch-on-template.

Thanks,

  option-button:
    show_icon: false
    styles:
      card:
        - border-radius: 10%
        - border: 1px solid gray
        - padding: 0.4em
        - font-size: 0.65em
        - height: 80px
  switch-on-button:
    template: option-button
    show_icon: true
    tap_action:
      action: call-service
      service: switch.turn_on
      service_data: {}
      target:
        entity_id: entity
    state:
      - value: 'Off'
        styles:
          card:
            - color: '[[[ return variables.option_text_off_color ]]]'
          icon:
            - color: '[[[ return variables.option_button_off_color ]]]'
      - value: 'On'
        styles:
          card:
            - color: '[[[ return variables.option_text_on_color ]]]'
          icon:
            - color: '[[[ return variables.option_button_on_color ]]]'

  type: custom:button-card
  template: switch-on-button
  entity: switch.switchbot_living_room_fan
  show_state: true

This can’t work. :wink:
target must bei indented by two spaces. And I’m not sure, if targetis needed here at all. Try with

tap_action:
  action: call-service
  service: switch.turn_on
  service_data: 
    entity_id: entity

If this doesn’t work, than you have to use target as well, but it needs to be indented

tap_action:
  action: call-service
  service: switch.turn_on
  service_data:
    target:
      entity_id: entity

Both examples assume, you’re defining your entity anywhere, otherwise you need to set an entity for the button (or "service_data > entity_id : entity" will not work)

1 Like

Hi guys,
I have read up and down and I am impressed about the answers and what you have built.
I am trying to acomplish something but I am stuck now… My target is to have a panel with different cards. Each card is a “big” button-card with the main function, e.g. light. But on the same Card I want to put additional cards (button-cards) for e.g. my covers, my switches, showing information such as Temperature and Humidity and a graph for my CO2 value. So far so good.

At this point appologies for everything that comes next - I am still learning and this is quite new to me.

There are two attemps I am trying
#1 (preferred)
Using a layout-card as grid and adding each item as an individual button-card, this gives me much more felxibility using javascript to get the entity state etc. I think this is much cleaner and I can use the entities assigned to a button-card in it’s full potential.
Downside, I did not figure out how to put a background and a border to make it look like a card

#2
Using one button card and working with custom_fields. This is great because I have one main card where i can add all the styles and I am position each custom_field by top,left, … This is awesome and looks pretty neat.
Downside, when I am working with templates and then try to e.g. fire-dom and pass “entity.entity_id”, it will not give the entity ID of the custom_field, but the main one from the button-card.

I hope this was understandable what I mean.

#1

          ###### Left Card #####
          - type: custom:layout-card
            layout_type: grid
            layout_options:
              grid-gap: var(--custom-layout-card-padding)
              grid-template-columns: repeat(3, 1fr)
              grid-template-rows: repeat(2, 1fr), auto
              grid-template-areas: |
                  "light      switch    cover"
                  "name       name      name"
                  "graph      graph     graph"
            cards:

              ## Light Card
              - type: custom:button-card
                entity: light.office_top
                aspect_ratio: 5/3
                view_layout:
                  grid-area: light
                template:
                  - icon_light_new
                  - icon_card

              ## Switch
              - type: custom:button-card
                entity: switch.doorbird_relay_1
                view_layout:
                  grid-area: switch                
                template:
                  - icon_switch_new

              ## Cover
              - type: custom:button-card
                entity: cover.eg_esszimmer_hof_rollladen 
                view_layout:
                  grid-area: cover
                template:
                  - icon_cover_new

              ## Name and Labels
              - type: custom:button-card
                entity: light.office_top
                view_layout:
                  grid-area: name
                name: Left Card
                label: |
                  [[[
                    var temp = states['sensor.room_sensor_co2_temperature_office'].state;
                    var hum = states['sensor.room_sensor_humidity_office'].state;
                    var icon = "<ha-icon icon='mdi:thermometer' class='yellow'></ha-icon>" + temp + "°C  <ha-icon icon='mdi:water-percent' class='blue'></ha-icon>" + hum +"%";
                    return icon;
                  ]]] 
                template:
                  - button_label_new                
                
              ## graph
              - type: custom:mini-graph-card
                entities: 
                  - sensor.room_sensor_co2_bedroom
                view_layout:
                  grid-area: graph
                show:
                  icon: false
                  name: false
                  state: true
                font_size: 60
                color_thresholds:
                  - value: 0
                    color: "#00ff00"
                  - value: 800
                    color: "#ffff00"
                  - value: 1200
                    color: "#ff8000"
                  - value: 1600
                    color: "#ff0000"
                style: |
                  ha-card {
                    box-shadow: none;
                  }
                
          ###### Left Card ENDS HERE #####

#2

          ###### Right Card #####
          - type: custom:button-card
            entity: light.office_top
            custom_fields:

              ## Switch
              switch:
                card:
                  entity: switch.homematic_ip_wama
                  icon: >
                    [[[
                      var stat = states['switch.homematic_ip_wama'].state;
                      return stat === 'on' ? 'mdi:power-plug' : 'mdi:power-plug-off';
                    ]]]

              ## Cover
              cover:
                card:
                  entity: cover.og_bad_rollladen
                  type: custom:button-card
                  color: >   
                    [[[ 
                      var stat = states['cover.og_bad_rollladen'].state;                      
                      if (stat === 'open'){
                        return 'rgba(0, 150, 150, 0.7)';
                      }else if( stat === 'opening' || stat === 'closing'){                                              
                        return 'rgba(150, 0, 0, 0.7)';
                      }else{
                        return 'rgba(0, 0, 150, 0.7)'; 
                      }
                    ]]]
                  icon: >
                    [[[
                      var stat = states['cover.og_bad_rollladen'].state;
                      return stat === 'closed' ? 'mdi:blinds' : 'mdi:blinds-open';
                    ]]]

              ## Name and Label          
              button_label: 
                card:                
                  entity: light.office_top
                  name: "Right Card"
                  template:
                    - light_tap
                  label: |
                    [[[
                      var temp = states['sensor.room_sensor_co2_temperature_office'].state;
                      var hum = states['sensor.room_sensor_humidity_office'].state;
                      var icon = "<ha-icon icon='mdi:thermometer' class='yellow'></ha-icon>" + temp + "°C  <ha-icon icon='mdi:water-percent' class='blue'></ha-icon>" + hum +"%";
                      return icon;
                    ]]] 

              ## graph + value, as I wanted to put the value lower
              graph:
                card:
                  entities: 
                    - sensor.room_sensor_co2_bedroom
              value:
                card:
                  entity: sensor.room_sensor_co2_bedroom
            template:     
              - icon_light
              - icon_card
              - icon_switch
              - icon_cover
              - graph
              - button_label
              - glow_card
          ###### Right Card ENDS HERE #####

Example of the Switch Template used in #2 in “button_card_templates”:

icon_switch:
  custom_fields:
    switch:
      card:
        type: custom:button-card
        tap_action:
          action: fire-dom-event
          browser_mod:
            command: popup
            card:
              type: entities
              entities:
                - type: custom:button-card
                  entity: >            
                    [[[ return entity.entity_id ]]]   
                  ## The above DOES NOT WORK, it will not give me the entity of the Switch (e.g. switch.homematic_ip_wama)
                  ## but will give me the entity of the "main" button-card (e.g. light.office_top)

I do hope and appreciate that you read till here and would be able to point me in the right direction what I am doing wrong or if there is a better approach to this.

I have to be honest, I read your full text, but I didn’t analyse the code snippets, sorry. :slight_smile: But I can give you a hint, on how you could approach this for yourself. :wink: At least I hope so. :rofl:

Button-card itself uses a grid system, so I wouldn’t use another system to put a grid in a grid. And to solve your entity problem, I’d work with variables and without an entity on the main card. That should work, but you might have to adjust the layout (again).

type: custom:button-card
variable:
  entity_one: sensor.xy
  entity_two:sensor.yz
custom_fields:
  a:
    entity: "[[[ return variables.entity_one; ]]]"
  b:
    entity: "[[[ return variables.entity_two; ]]]"

Just to give you an idea. As I said, button-card doesn’t need an entity to show, especially when you’re working with custom_fields. Other cards can fit into a custom_field as well. So you can still use another button-card inside, and the custom_fields in this card. :slight_smile:

What you should set as well, if you choose to use the above approach, is triggers_update. So your main card is able to receive updates from all the used entities.

1 Like

Thank you Patrick! This was very helpful indeed.
It took me some time though to figure that in the second line it should also be called “variables” but this was just a small issue! That solution looks very good and first tests look very promising!!!

Thanks a lot!

type: custom:button-card
variables:
  entity_one: sensor.xy
  entity_two: sensor.yz
custom_fields:
  a:
    card:
      entity: "[[[ return variables.entity_one; ]]]"
      type: custom:button-card
  b:
    card:
      entity: "[[[ return variables.entity_two; ]]]"
      type: custom:button-card

beautiful bright behind the card, could you share your code? thanks