Fun with custom:button-card

Well, this is extremely frustrating. I thought I had this, but after half a day of trying various things, I’m getting nowhere :frowning:
I like your custom HVAC controller, but I wanted something that would fit within a row of custom button cards more easily. All I want to do is have the “climate-button” show the mdi:thermostat icon (easily done), but have the label reflect whether it’s heating, cooling, or idle (in text) with colors (light red, light blue, white respectively). I’d also like the icon to be colored (same colors) for heating, cooling, and off modes.
Here is my latest attempt:
template:

  climate-button:
    template: standard-button
    icon: 'mdi:thermostat'
    show_label: true
    styles:
      card:
        - background-color: darkgrey
      name:
        - color: '[[[ return variables.name_color ]]]'
      icon:
        - color: '[[[ return variables.icon_color ]]]'
      label:
        - color: '[[[ return variables.label_color ]]]'

button-card definition:

                    - entity: climate_thermostat_2
                      variables: 
                        name_color: >
                          {% if  is_state('climate.thermostat_2', 'heat') %}LightCoral
                          {% elif is_state('climate.thermostat_2', 'cool') %}LightSkyBlue
                          {% else %}LightGrey
                          {% endif %}
                        icon_color: >
                          {% if  is_state('climate.thermostat_2', 'heat') %}LightCoral
                          {% elif is_state('climate.thermostat_2', 'cool') %}LightSkyBlue
                          {% else %}LightGrey
                          {% endif %}
                        label_color: >
                          {% if  is_state_attr('climate.thermostat_2', 'hvac_action', 'heat') %}LightCoral
                          {% elif is_state_attr('climate.thermostat_2', 'hvac_action', 'cool') %}LightSkyBlue
                          {% else %}LightGrey
                          {% endif %}
                      name: "{{ states('climate.thermostat_2') }}"
                      label: "{{ state_attr('climate.thermostat_2', 'hvac_action') }}"
                      template: climate-button
                      type: 'custom:button-card'
                      aspect_ratio: 1/1.2

Partial success: I can get the Name and Label to show correctly thusly:

                    - entity: climate_thermostat_2
                      name: '[[[ return states["climate.thermostat_2"].state; ]]]'
                      label: >-
                        [[[ return
                        states["climate.thermostat_2"].attributes["hvac_action"];
                        ]]]
                      template: climate-button
                      type: 'custom:button-card'

Now, if I could just figure out how to use those values to conditionally set the colors…
Also, for some reason, the normal tap action isn’t working on the new button. I have another button with thermostat_2 as the entity and tapping it will open the details/history panel and let me change the state, fan mode, and target temperature. This button doesn’t do that (?)

Look at my template it conditionally sets the colors and even conditionally starts blinking.

  battery_glance:
    variables:
      lvl_entity: null
    show_state: true
    color_type: icon
    show_label: true
    state:
      - value: 'on'
        color: green
        icon: 'mdi:power-plug'
      - operator: default
        color: red
        icon: 'mdi:battery'
    styles:
      grid:
        - grid-template-areas: '"n" "i" "l" "s"'
      card:
        - animation: |
            [[[
              var blevel=states[variables.lvl_entity].state;
              if (blevel < 10 ) return 'blink 2s ease infinite';
            ]]]
      icon:
        - color: |
            [[[
              var blevel=states[variables.lvl_entity].state;
              if (blevel > 60) return 'lime';
              else if (blevel >= 20 ) return 'orange';
              else return 'red';
            ]]]
  label: |
    [[[
      var blevel=states[variables.lvl_entity].state;
      return `
       <span><span style="color: var(--text-color-sensor);">${states[variables.lvl_entity].state}%</span></span>`
    ]]]

Here’s the card

type: 'custom:button-card'
template: battery_glance
entity: binary_sensor.sm_a515w_is_charging
name: Jen's Phone
variables:
  lvl_entity: sensor.sm_a515w_battery_level

1 Like

Thanks. What about if I want to use the same entity like in this code. Ist there away to reference the entity or do I need to use variables here as well?

entity: light.tasmota_dining
type: 'custom:button-card'
icon: 'mdi:wall-sconce-flat'
template: slider
name: Dining
variables:
  lvlentity: light.tasmota_dining

custom_fields:
  slider:
    card:
      full_row: true
      hide_state: true
      type: 'custom:slider-entity-row'
      entity: |
        [[[ return variables.lvlentity ]]]
    overflow: unset

I get “t.entity spli is not a function” if I try return entity.

Yes. That’s the kind of stuff I’ve been playing with. For whatever reason, the Jinja way of expressing it isn’t giving me what I think it’s supposed to. However, the javascript is working (when I get the syntax right :wink: ) I was also having some issues using entity instead of the actual name of the entity so I just gave up on that.
The final issue seems to be what is actually returned when I put in states['climate.thermostat_2].state. It should be ‘heat’,‘cool’, or ‘off’, but conditionals I use never act as though they’re true.
eg:

      icon:
        - color: |
            [[[
              if (states['climate.thermostat_2].state == 'heat') return 'lightCoral';
              else if (states['climate.thermostat_2].state == 'cool') return 'lightSkyBlue';
              else return 'lightGrey';
            ]]]

So… I basically started over on my Thermostat card. I used the grid-area example (of and rPI monitor card) from here:
GitHub - custom-cards/button-card: :sparkle: Lovelace button-card for home assistant
and modified it thusly:

      - type: horizontal-stack
        cards:
          - entity: climate.thermostat_2
            type: 'custom:button-card'
            icon: 'mdi:thermostat'
            aspect_ratio: 3/2
            name: Thermostat 2
            styles:
              card:
                - background-color: darkBlue
                - border-radius: 0%
                - padding: 0%
                - color: ivory
                - font-size: 10px
                - text-transform: capitalize
              grid:
                - grid-template-areas: '"i temp temp temp" "n n n n" "stat stat stat stat" "fan fan fan fan"'
                - grid-template-columns: 1fr 1fr 1fr 1fr
                - grid-template-rows: 1fr min-content min-content min-content
              name:
                - font-weight: bold
                - font-size: 13px
                - color: white
                - align-self: middle
                - justify-self: start
                - padding-bottom: 4px
              img_cell:
                - justify-content: start
                - align-items: start
                - margin: 0%
              icon:
                - color: |
                     [[[
                       if (states['climate.thermostat_2'].state == 'heat') return 'red';
                       if (states['climate.thermostat_2'].state == 'cool') return 'blue';
                       if (states['climate.thermostat_2'].state == 'off') return 'black';
                       else return 'yellow';
                     ]]]
                - width: 100%
                - margin-top: 0%
              custom_fields:
                temp:
                  - align-self: middle
                  - justify-self: start
                stat:
                  - padding-bottom: 2px
                  - align-self: middle
                  - justify-self: start
                  - '--text-color-sensor': |
                      [[[
                        if (states["climate.thermostat_2"].attributes["hvac_action"] == "heat") return "lightCoral";
                        if (states["climate.thermostat_2"].attributes["hvac_action"] == "cool") return "lightSkyBlue";
                        else return "white";
                      ]]]
                fan:
                  - align-self: middle
                  - justify-self: start
                  - '--text-color-sensor': |
                      [[[
                        if (states["climate.thermostat_2"].attributes["fan_action"] == "on") return "lightSkyBlue";
                        else return "white";
                      ]]]
            custom_fields:
              temp: |
                [[[
                  return `<ha-icon
                  icon="mdi:thermometer"
                  style="width: 12px; height: 12px; color: yellow;">
                  </ha-icon><span>${states['climate.thermostat_2'].attributes['current_temperature']}°F | </span>
                  <span>Set: ${states['climate.thermostat_2'].attributes['temperature']}°F</span>`
                ]]]
              stat: |
                [[[
                  return `<ha-icon
                  icon="hass:fire"
                  style="width: 12px; height: 12px; color: deepskyblue;">
                  </ha-icon><span>mode: <span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].state} | </span>
                  <span><span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].attributes['hvac_action']}</span></span>`
                ]]]
              fan: |
                [[[
                  return `<ha-icon
                  icon="mdi:fan"
                  style="width: 12px; height: 12px; color: deepskyblue;">
                  </ha-icon><span>fan: <span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].attributes['fan_mode']} | </span>
                  <span><span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].attributes['fan_action']}</span></span>`
                ]]]
          - type: 'custom:button-card'
            color_type: blank-card
            aspect_ratio: 3/2
          - type: 'custom:button-card'
            color_type: blank-card
            aspect_ratio: 2/2

The horizontal-stack and blank cards are to get it to fit into my UI space nicely. It looks like this:
thermostat
and unlike the card I was working on before, this one opens the details/history (more-info) window when you tap on it.
The only thing I haven’t done at this point is to have it use different icons based on whether the mode is heat, cool, or off.

I’ve been playing with the grid card as a replacement for both horizontal and vertical stacks. I’m really liking the results:


There are some specific advantages. It seems a lot less work to line up bits with different column counts. I still have to specify that my groups with three items are “4 columns”, but it creates the blank for me without having to put in a blank card. (The only blank card I use is between the lights on my Living Room Lights group.)
The button-card templates are as ktownsend originally posted them with the exception that I have decreased the font size on the container lables to fit my own tastes. I added a few extra button templates (eg: light-group-button) to set specific icons for on/off states.
I’ve only started playing with making the top three cards into some sort of templates so I could reuse them on other pages without rewriting the whole code over. In addition the Thermostat one cries out for templating if you have a house with multiple thermostats. The option card template looks to be a good example of where to look for ideas.
Here’s the whole code dump, just so you can see how all the bits and pieces fit together.

title: Home
swipe_nav:
  wrap: true
  animate: swipe
views:
  - title: Buttons
    path: buttons
    badges: []
    cards:
      - type: grid
        columns: 1
        square: false
        cards:
          - type: grid
            columns: 3
            square: false
            cards:
              - entity: sensor.family_sensor
                type: 'custom:button-card'
                aspect_ratio: 3/2
                name: Presence
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/test
                styles:
                  card:
                    - background-color: darkGreen
                    - border-radius: 0%
                    - padding: 1%
                    - color: ivory
                    - font-size: 10px
                    - text-transform: capitalize
                  grid:
                    - grid-template-areas: >-
                        "n n n n" "i stat stat stat" "rms rms rms rms" "jbs jbs
                        jbs jbs" "kgs kgs kgs kgs"
                    - grid-template-columns: 1fr 1fr 1fr 1fr
                    - grid-template-rows: min-content 1fr min-content min-content min-content
                  name:
                    - font-weight: bold
                    - font-size: 13px
                    - color: white
                    - align-self: middle
                    - justify-self: start
                    - padding-bottom: 0px
                  img_cell:
                    - justify-content: start
                    - align-items: start
                    - margin: 0%
                  icon:
                    - color: yellow
                    - width: 100%
                    - margin-top: 0%
                  custom_fields:
                    stat:
                      - align-self: middle
                      - justify-self: start
                    rms:
                      - align-self: middle
                      - justify-self: start
                      - '--text-color-sensor': white
                    jbs:
                      - align-self: middle
                      - justify-self: start
                      - '--text-color-sensor': white
                    kgs:
                      - align-self: middle
                      - justify-self: start
                      - '--text-color-sensor': white
                custom_fields:
                  stat: |
                    [[[
                      return `<span>Family: </span>
                      <span>${states['sensor.family_sensor'].state}</span>`
                    ]]]
                  rms: |
                    [[[
                      return `<span>Russ: </span>
                      <span>${states['device_tracker.sm_n986u'].state}</span>`
                    ]]]
                  jbs: |
                    [[[
                      return `<span>Janette: </span>
                      <span>${states['device_tracker.janettes_phone'].state}</span>`
                    ]]]
                  kgs: |
                    [[[
                      return `<span>Kate: </span>
                      <span>${states['device_tracker.katies_phone'].state}</span>`
                    ]]]
              - entity: climate.thermostat_2
                type: 'custom:button-card'
                icon: 'mdi:thermostat'
                aspect_ratio: 3/2
                name: Thermostat
                styles:
                  card:
                    - background-color: |
                        [[[
                          if (states['climate.thermostat_2'].state == 'heat') return 'darkRed';
                          if (states['climate.thermostat_2'].state == 'cool') return 'darkBlue';
                          if (states['climate.thermostat_2'].state == 'off') return 'darkSlateGrey';
                          else return 'yellow';
                        ]]]
                    - border-radius: 0%
                    - padding: 1%
                    - color: ivory
                    - font-size: 10px
                    - text-transform: capitalize
                  grid:
                    - grid-template-areas: >-
                        "n n n n" "i temp temp temp" "stat stat stat stat" "fan
                        fan fan fan"
                    - grid-template-columns: 1fr 1fr 1fr 1fr
                    - grid-template-rows: min-content 1fr min-content min-content
                  name:
                    - font-weight: bold
                    - font-size: 13px
                    - color: white
                    - align-self: middle
                    - justify-self: start
                    - padding-bottom: 0px
                  img_cell:
                    - justify-content: start
                    - align-items: start
                    - margin: 0%
                  icon:
                    - color: yellow
                    - width: 100%
                    - margin-top: 0%
                  custom_fields:
                    temp:
                      - align-self: middle
                      - justify-self: start
                    stat:
                      - padding-bottom: 2px
                      - align-self: middle
                      - justify-self: start
                      - '--text-color-sensor': |
                          [[[
                            if (states["climate.thermostat_2"].attributes["hvac_action"] == "heat") return "lightCoral";
                            if (states["climate.thermostat_2"].attributes["hvac_action"] == "cool") return "lightSkyBlue";
                            else return "white";
                          ]]]
                    fan:
                      - align-self: middle
                      - justify-self: start
                      - '--text-color-sensor': |
                          [[[
                            if (states["climate.thermostat_2"].attributes["fan_action"] == "on") return "lightSkyBlue";
                            else return "white";
                          ]]]
                custom_fields:
                  temp: |
                    [[[
                      return `<ha-icon
                      icon="mdi:thermometer"
                      style="width: 12px; height: 12px; color: yellow;">
                      </ha-icon><span>${states['climate.thermostat_2'].attributes['current_temperature']}°F | </span>
                      <span>Set: ${states['climate.thermostat_2'].attributes['temperature']}°F</span>`
                    ]]]
                  stat: |
                    [[[
                      return `<ha-icon
                      icon="hass:fire"
                      style="width: 12px; height: 12px; color: deepskyblue;">
                      </ha-icon><span>mode: <span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].state} | </span>
                      <span><span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].attributes['hvac_action']}</span></span>`
                    ]]]
                  fan: |
                    [[[
                      return `<ha-icon
                      icon="mdi:fan"
                      style="width: 12px; height: 12px; color: deepskyblue;">
                      </ha-icon><span>fan: <span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].attributes['fan_mode']} | </span>
                      <span><span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].attributes['fan_action']}</span></span>`
                    ]]]
              - entity: input_boolean.day_night
                type: 'custom:button-card'
                aspect_ratio: 3/2
                name: Modes
                styles:
                  card:
                    - background-color: darkSlateGrey
                    - border-radius: 0%
                    - padding: 1%
                    - color: ivory
                    - font-size: 10px
                    - text-transform: capitalize
                  grid:
                    - grid-template-areas: '"n n n n" "i stat stat stat"'
                    - grid-template-columns: 1fr 1fr 1fr 1fr
                    - grid-template-rows: min-content 1fr
                  name:
                    - font-weight: bold
                    - font-size: 13px
                    - color: white
                    - align-self: middle
                    - justify-self: start
                    - padding-bottom: 0px
                  img_cell:
                    - justify-content: start
                    - align-items: start
                    - margin: 0%
                  icon:
                    - color: yellow
                    - width: 100%
                    - margin-top: 0%
                  custom_fields:
                    stat:
                      - align-self: middle
                      - justify-self: start
                custom_fields:
                  stat: |
                    [[[
                      if (states['input_boolean.day_night'].state) return `<span>Day</span>`
                      else return `<span>Day</span>`
                    ]]]
          - type: grid
            columns: 2
            square: false
            cards:
              - type: 'custom:button-card'
                template: container
                color: Grey
                name: Master
                custom_fields:
                  buttons:
                    card:
                      type: grid
                      columns: 4
                      square: true
                      cards:
                        - entity: group.downstairs_lights
                          name: Good Night
                          template: standard-button
                          type: 'custom:button-card'
                          icon: 'mdi:power'
                          aspect_ratio: 1/1.2
              - type: 'custom:button-card'
                template: container
                color: Brown
                name: Front Porch
                custom_fields:
                  buttons:
                    card:
                      type: grid
                      columns: 4
                      square: true
                      cards:
                        - entity: switch.mailbox_opened
                          template: standard-button
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                          variables:
                            background_color_on: LightCoral
                            text_color_on: Yellow
                          state:
                            - value: 'on'
                              id: value_on
                              name: check Mail
                              icon: 'mdi:mailbox-up'
                            - value: 'off'
                              id: value_off
                              name: Mail
                              icon: 'mdi:mailbox-outline'
                        - entity: camera.frontyardcam
                          name: Yard
                          template: standard
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                          color: SlateGrey
                        - entity: camera.front_doorbell
                          name: Porch
                          template: standard
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                          styles:
                            name:
                              - font-size: 0.45em
                          color: SlateGrey
                        - entity: switch.front_porch_light
                          name: Light
                          template: light-button
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
          - type: grid
            columns: 2
            square: false
            cards:
              - type: 'custom:button-card'
                template: container
                color: GoldenRod
                name: Dining/Kitchen
                custom_fields:
                  buttons:
                    card:
                      type: grid
                      columns: 4
                      square: true
                      cards:
                        - entity: light.dining_room_chandelier
                          name: DR Light
                          template: light-group-button
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                          styles:
                            name:
                              - font-size: 0.45em
                        - entity: binary_sensor.dining_room_motion_motion
                          name: Motion
                          template: standard-button
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                          styles:
                            name:
                              - font-size: 0.45em
                        - entity: switch.stove_sink_lights
                          name: K Light
                          template: light-button
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                          styles:
                            name:
                              - font-size: 0.45em
              - type: 'custom:button-card'
                template: container
                color: Khaki
                name: Living Room
                custom_fields:
                  buttons:
                    card:
                      type: grid
                      columns: 4
                      square: true
                      cards:
                        - entity: binary_sensor.front_door_sensor_contact
                          name: Door
                          template: door-button-open
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                        - entity: camera.livingroomcam
                          name: Camera
                          template: standard
                          type: 'custom:button-card'
                          color: SlateGrey
                          aspect_ratio: 1/1.2
                        - entity: binary_sensor.living_room_motion_motion
                          name: Motion
                          template: standard-button
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                          styles:
                            name:
                              - font-size: 0.45em
          - type: 'custom:button-card'
            template: container
            color: Khaki
            name: Living Room Lights
            custom_fields:
              buttons:
                card:
                  type: grid
                  columns: 8
                  square: true
                  cards:
                    - entity: switch.r_desk_lamp
                      name: 'R:Desk Lamp'
                      template: light-button
                      type: 'custom:button-card'
                      aspect_ratio: 1/1.2
                      styles:
                        name:
                          - font-size: 0.45em
                    - entity: switch.j_desk_lamp
                      name: 'J:Desk Lamp'
                      template: light-button
                      type: 'custom:button-card'
                      aspect_ratio: 1/1.2
                      styles:
                        name:
                          - font-size: 0.45em
                    - entity: switch.living_room_fan_light
                      name: Fan Light
                      template: light-button
                      type: 'custom:button-card'
                      aspect_ratio: 1/1.2
                      styles:
                        name:
                          - font-size: 0.45em
                    - entity: group.sconces
                      name: Sconces
                      template: light-group-button
                      type: 'custom:button-card'
                      aspect_ratio: 1/1.2
                    - entity: group.floor_table
                      name: Floor & Table
                      template: light-button
                      type: 'custom:button-card'
                      aspect_ratio: 1/1.2
                      styles:
                        name:
                          - font-size: 0.45em
                    - entity: group.wall_lights
                      name: N&S Wall
                      template: light-group-button
                      type: 'custom:button-card'
                      aspect_ratio: 1/1.2
                    - type: 'custom:button-card'
                      color_type: blank-card
                    - entity: input_boolean.zoom_lighting
                      name: Zoom Lights
                      template: light-group-button
                      type: 'custom:button-card'
                      aspect_ratio: 1/1.2
          - type: grid
            columns: 2
            square: false
            cards:
              - type: 'custom:button-card'
                template: container
                color: dimgrey
                name: Upstairs
                custom_fields:
                  buttons:
                    card:
                      type: grid
                      columns: 4
                      square: true
                      cards:
                        - entity: binary_sensor.upstairs_motion_sensor_motion
                          name: Motion
                          template: standard-button
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                          styles:
                            name:
                              - font-size: 0.45em
                        - entity: switch.bathroom_master_switch
                          name: Bath
                          template: light-button
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                          styles:
                            name:
                              - font-size: 0.45em
                        - entity: binary_sensor.bathroom_door_contact
                          name: Bath
                          template: door-button-closed
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
              - type: 'custom:button-card'
                template: container
                color: LightBlue
                name: Side
                custom_fields:
                  buttons:
                    card:
                      type: grid
                      columns: 4
                      square: true
                      cards:
                        - entity: binary_sensor.side_door_sensor_contact
                          name: Door
                          template: door-button-open
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                        - entity: switch.outside_tap
                          name: Bib
                          template: standard-button
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                          state:
                            - value: 'on'
                              id: value_on
                              icon: 'mdi:water-pump'
                            - value: 'off'
                              id: value_off
                              icon: 'mdi:water-pump-off'
                        - entity: switch.outside_water_valve_lock
                          name: Lock
                          template: standard-button
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                          state:
                            - value: 'on'
                              id: value_on
                              icon: 'mdi:lock'
                            - value: 'off'
                              id: value_off
                              icon: 'mdi:lock-open'
          - type: grid
            columns: 2
            square: false
            cards:
              - type: 'custom:button-card'
                template: container
                color: Green
                name: Back Yard
                custom_fields:
                  buttons:
                    card:
                      type: grid
                      columns: 4
                      square: true
                      cards:
                        - entity: binary_sensor.back_door_sensor_contact
                          name: Door
                          template: door-button-open
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                        - entity: switch.back_door_motion_light
                          name: Light
                          template: light-button
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                        - entity: camera.backyardcam
                          name: Yard
                          template: standard
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                          color: SlateGrey
                        - type: 'custom:button-card'
                          color_type: blank-card
              - type: 'custom:button-card'
                template: container
                color: MidnightBlue
                name: Garage
                custom_fields:
                  buttons:
                    card:
                      type: grid
                      columns: 4
                      square: true
                      cards:
                        - entity: camera.garagecam
                          name: Garage
                          template: standard
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                          styles:
                            name:
                              - font-size: 0.45em
                          color: SlateGrey
                        - entity: binary_sensor.garage_door_sensor_contact
                          name: Door
                          template: door-button-open
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                        - entity: cover.overhead_garage_door
                          template: standard-button
                          type: 'custom:button-card'
                          tap_action:
                            action: call-service
                            service: cover.toggle
                            service_data:
                              entity_id: cover.overhead_garage_door
                          aspect_ratio: 1/1.2
                          show_label: true
                          name: myQ
                          styles:
                            name:
                              - font-size: 0.45em
                            label:
                              - color: white
                              - font-size: 0.45em
                          state:
                            - value: open
                              id: value_on
                              label: open
                            - value: closed
                              id: value_off
                              label: closed
                            - value: opening
                              label: opening
                              icon: 'mdi:arrow-up-bold-box-outline'
                              styles:
                                card:
                                  - background-color: LightCoral
                                name:
                                  - color: yellow
                                label:
                                  - color: yellow
                                icon:
                                  - color: yellow
                            - value: closing
                              label: closing
                              icon: 'mdi:arrow-down-bold-box-outline'
                              styles:
                                card:
                                  - background-color: LightSkyBlue
                                name:
                                  - color: yellow
                                label:
                                  - color: yellow
                                icon:
                                  - color: yellow
                        - entity: camera.alley_camera
                          name: Alley
                          template: standard
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                          color: SlateGrey
1 Like

Good use of the grid. My UI was already stable by the time the grid was introduced, so I haven’t played with grid yet. I like how the explicit column count simplifies getting the widths you expect without blank placeholders.

Yep, used the eather weekend with covid lockdown to play with the button cards.
Beside the actors I still wanted to group my sensors. And it ended up in a smartphone-alike screen per room … thanks to the fact that a using % on a rectangle button card does these fancy curves :slight_smile:

In detail it’s a CB per room with nothing in in but several CBs for each entity. (so that I could make use of more-info from all of these.

Though it might fit in here “fun with …” and yeah I had lots of fun.
Especially getting the windrose done which I wanted to rotate against having the directions arrow running around in cicles. Was a bit painful to get this going using custom:canvas-gauge since placement with inthe CB was very strange for me.

Impressive array of charts! The wind gauge looks interesting. What are you using to get all of those measurements, like wifi strength in each room?

Had a handfull of ESP8266 mini d1 boards lying around and added some bme280 sensors and some other sensors. Currently I’m after this idea: https://www.thingiverse.com/thing:3860911 but it’s a bit tricky to get correct values back from the watermeter.

For the number of charts. I tried the same using apexcharts first since they do look more impressive but this brought my pi4 to it’s knees after 10 charts side by side.

Could be because I’m still a HA noob not really understanding about the advantages of lovelace: YAML mode and !include. Means the code is a real pain, and I must read lots more to prevent redundancy of codeblocks.

As said ealier, the windgauge was a real pain since that custom:canvas-gauge things did show a complete different behaviour as other objects with the buttoncard when it comes to getting this into the expected position. Looks as if my brains too short to get it why this happens.

Could someone help me, please? I can NOT finger out how to add an image to my button. I want to add /local/image/me_g3-1.png in the middle of the person’s name and their current location.

type: 'custom:button-card'
entity: person.g3_1
aspect_ratio: 1/1
name: null
icon: null
styles:
  card:
    - background-color: transparent
    - border-radius: 10%
    - padding: 4%
    - color: ivory
    - font-size: 10px
    - text-shadow: 0px 0px 5px black
    - text-transform: capitalize
  grid:
    - grid-template-areas: '"n n" "i i" "location location" "battery battery" "power power"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr min-content min-content min-content min-content
  name:
    - margin-top: '-70'
    - font-weight: bold
    - font-size: 13px
    - color: white
    - align-self: start
    - justify-self: middle
  img_cell:
    - justify-content: start
    - align-items: start
    - margin: none
  icon: null
  custom_fields:
    location:
      - font-size: 12px
      - color: white
      - align-self: null
      - justify-self: null
      - padding-bottom: 4px
    power:
      - entity: device_tracker.g3_1_iphone_12_pro_max_2
      - align-self: middle
      - justify-self: start
    battery:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.g3_1_iphone_12_pro_max_battery_state_2"].state
          < 20) return "red"; ]]]
custom_fields:
  location: |
    [[[
      return `</ha-icon><span> ${entity.state}</span>`
    ]]]
  power: |
    [[[
      return `<ha-icon
        icon="mdi:battery-charging"
        style="width: 12px; height: 12px; color: deepskyblue;">
        </ha-icon><span>: ${states['device_tracker.g3_1_iphone_12_pro_max_2'].attributes.battery_status} </span>`
    ]]]
  battery: |
    [[[
      return `<ha-icon
        icon="mdi:battery"
        style="width: 12px; height: 12px; color: deepskyblue;">
        </ha-icon><span> : <span style="color: var(--text-color-sensor);">${states['device_tracker.g3_1_iphone_12_pro_max_2'].attributes.battery_level}%</span></span>`
    ]]]

@G3GhostTech, you probably need another custom field and use that instead of “i i” in the grid-template-areas.

I noticed all of your grid-template-areas are doubled up, so you essentially have just one column and can remove the duplicate names: '"n" "i" "location" "battery" "power"'.

1 Like

why do you keep posting in this thread, while there is a huge thread with so many more people to help and get inspiration from? Not saying you shouldn’t, it just that the other thread has all the examples you would need to get you all going.

I know I am doing some basic wrong. I have put this into my raw configuration but am getting this error:

Button-card template 'container' is missing!

This is the config. I am fairly new to dashboards with HA so I am quite certain it is probably something in the wrong place sort of thing. Any help would be appreciated. Of course I truncated the config to just enough to show the error.

Thanks!

title: Home
template:
  button_card_templates:
    container:
      color_type: label-card
      color: dimgray
      styles:
        card:
          - padding: 0
        name:
          - border-radius: 0.4em 0.4em 0 0
          - padding: 0.1em
          - width: 100%
          - font-weight: bold
        grid:
          - grid-template-areas: '"i" "n" "buttons"'
          - grid-template-columns: 1fr
          - grid-template-rows: 1fr min-content min-content
        custom_fields:
          buttons:
            - background-color: 'rgba(0,0,0,0.3)'
            - margin: 0
            - padding: 0.3em
views:
  - path: default_view
    title: Home
    cards:
      - type: 'custom:button-card'
        template: container
        color: '#EDE7B0'
        name: Eating & Patio
        custom_fields:
          buttons:
            card:
              type: horizontal-stack
              cards:
                - entity: switch.ge_14291_in_wall_smart_switch_switch_2
                  name: Kitchen
                  template: standard
                  icon: 'mdi:wall-sconce-flat'
                  type: 'custom:button-card'

Do you have the first section that begins with “button card templates:”? It’s something like this and is at the very beginning of your Lovelace raw config.

button_card_templates:
  standard:
    color_type: card
    size: 80%
    hold_action:
      action: more-info
    styles:
      card:
        - padding: 0.2em
        - '--mdc-ripple-color': yellow
        - '--mdc-ripple-press-opacity': 0.5
      icon:
        - opacity: 0.75
      name:
        - font-size: 0.5em
        - white-space: normal
      state:
        - font-size: 0.5em
        - white-space: normal
      label:
        - font-size: 0.5em
        - white-space: normal
  wide:
    template: standard
    styles:
      grid:
        - position: relative
        - grid-template-areas: '"i n"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr
  container:
    color_type: label-card
    color: dimgray
    styles:
      card:
        - padding: 0
      name:
        - border-radius: 0.4em 0.4em 0 0
        - padding: 0.0em
        - width: 100%
        - font-weight: bold
        - font-size: 0.6em
      grid:
        - grid-template-areas: '"i" "n" "buttons"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      custom_fields:
        buttons:
          - background-color: 'rgba(0,0,0,0.3)'
          - margin: 0
          - padding: 0.15em
  standard-button:
    template: standard
    variables:
      value_on: 'on'
      value_off: 'off'
      background_color_on: gold
      background_color_off: slategrey
      text_color_on: blue
      text_color_off: white
    styles:
      label:
        - color: '[[[ return variables.text_color_off ]]]'
    state:
      - id: value_on
        value: '[[[ return variables.value_on ]]]'
        styles:
          card:
            - background-color: '[[[ return variables.background_color_on ]]]'
          name:
            - color: '[[[ return variables.text_color_on ]]]'
          icon:
            - color: '[[[ return variables.text_color_on ]]]'
            - opacity: 1
      - id: value_off
        value: '[[[ return variables.value_off ]]]'
        styles:
          card:
            - background-color: '[[[ return variables.background_color_off ]]]'
          name:
            - color: '[[[ return variables.text_color_off ]]]'
          icon:
            - color: '[[[ return variables.text_color_off ]]]'
            - opacity: 0.5
  option-button:
    template: standard
    show_icon: false
    aspect_ratio: 1/1
    styles:
      card:
        - border-radius: 20%
  dimmer-option:
    template: option-button
    tap_action:
      action: call-service
      service: light.turn_on
      service_data:
        entity_id: entity
        brightness: '[[[ return variables.set_value ]]]'
    state:
      - operator: default
        styles:
          card:
            - background-color: '[[[ return variables.option_button_off_color ]]]'
            - color: '[[[ return variables.option_text_off_color ]]]'
      - operator: template
        value: >-
          [[[ return (entity.attributes.brightness||0) >= variables.range_start
          && (entity.attributes.brightness||0) <= variables.range_stop ]]]
        styles:
          card:
            - background-color: '[[[ return variables.option_button_on_color ]]]'
            - color: '[[[ return variables.option_text_on_color ]]]'
  presets:
    template: standard
    color_type: icon
    tap_action:
      action: none
    styles:
      card:
        - background-color: 'rgba(0,0,0,0.3)'
      icon:
        - color: white
      grid:
        - grid-template-areas: '"i opt1 opt2 opt3 opt4" "n opt1 opt2 opt3 opt4"'
        - grid-template-columns: 1fr 1fr 1fr 1fr 1fr
      custom_fields:
        opt1:
          - margin: 0.1em
          - overflow: visible
        opt2:
          - margin: 0.1em
          - overflow: visible
        opt3:
          - margin: 0.1em
          - overflow: visible
        opt4:
          - margin: 0.1em
          - overflow: visible
    variables:
      option_template: dimmer-option
      option_button_on_color: var(--paper-item-icon-active-color)
      option_text_on_color: white
      option_button_off_color: var(--paper-card-background-color)
      option_text_off_color: white
      option1_name: Low
      option1_set_value: 51
      option1_range_start: 1
      option1_range_stop: 77
      option2_name: Med
      option2_set_value: 102
      option2_range_start: 78
      option2_range_stop: 170
      option3_name: High
      option3_set_value: 255
      option3_range_start: 171
      option3_range_stop: 255
      option4_name: 'Off'
      option4_set_value: 0
      option4_range_start: 0
      option4_range_stop: 0
    custom_fields:
      opt1:
        card:
          type: 'custom:button-card'
          entity: '[[[ return variables.entity ]]]'
          template: '[[[ return variables.option_template ]]]'
          name: '[[[ return variables.option1_name ]]]'
          variables:
            set_value: '[[[ return variables.option1_set_value ]]]'
            range_start: '[[[ return variables.option1_range_start ]]]'
            range_stop: '[[[ return variables.option1_range_stop ]]]'
            option_button_on_color: '[[[ return variables.option_button_on_color ]]]'
            option_button_off_color: '[[[ return variables.option_button_off_color ]]]'
            option_text_on_color: '[[[ return variables.option_text_on_color ]]]'
            option_text_off_color: '[[[ return variables.option_text_off_color ]]]'
      opt2:
        card:
          type: 'custom:button-card'
          entity: '[[[ return variables.entity ]]]'
          template: '[[[ return variables.option_template ]]]'
          name: '[[[ return variables.option2_name ]]]'
          variables:
            set_value: '[[[ return variables.option2_set_value ]]]'
            range_start: '[[[ return variables.option2_range_start ]]]'
            range_stop: '[[[ return variables.option2_range_stop ]]]'
            option_button_on_color: '[[[ return variables.option_button_on_color ]]]'
            option_button_off_color: '[[[ return variables.option_button_off_color ]]]'
            option_text_on_color: '[[[ return variables.option_text_on_color ]]]'
            option_text_off_color: '[[[ return variables.option_text_off_color ]]]'
      opt3:
        card:
          type: 'custom:button-card'
          entity: '[[[ return variables.entity ]]]'
          template: '[[[ return variables.option_template ]]]'
          name: '[[[ return variables.option3_name ]]]'
          variables:
            set_value: '[[[ return variables.option3_set_value ]]]'
            range_start: '[[[ return variables.option3_range_start ]]]'
            range_stop: '[[[ return variables.option3_range_stop ]]]'
            option_button_on_color: '[[[ return variables.option_button_on_color ]]]'
            option_button_off_color: '[[[ return variables.option_button_off_color ]]]'
            option_text_on_color: '[[[ return variables.option_text_on_color ]]]'
            option_text_off_color: '[[[ return variables.option_text_off_color ]]]'
      opt4:
        card:
          type: 'custom:button-card'
          entity: '[[[ return variables.entity ]]]'
          template: '[[[ return variables.option_template ]]]'
          name: '[[[ return variables.option4_name ]]]'
          variables:
            set_value: '[[[ return variables.option4_set_value ]]]'
            range_start: '[[[ return variables.option4_range_start ]]]'
            range_stop: '[[[ return variables.option4_range_stop ]]]'
            option_button_on_color: '[[[ return variables.option_button_on_color ]]]'
            option_button_off_color: '[[[ return variables.option_button_off_color ]]]'
            option_text_on_color: '[[[ return variables.option_text_on_color ]]]'
            option_text_off_color: '[[[ return variables.option_text_off_color ]]]'
  alerter:
    template: standard
    show_last_changed: true
    color_type: icon
    extra_styles: |
      [[[ return `
        @keyframes pulse {
          20% {
            background-color: ${variables.color};
          }
        }
      `]]]
    variables:
      color: var(--paper-item-icon-active-color)
    state:
      - value: 'on'
        id: value_on
        styles:
          card:
            - animation: pulse 1s infinite
  alerter-dual:
    template: standard
    show_last_changed: true
    color_type: icon
    extra_styles: |
      [[[ return `
        @keyframes pulse1 {
          20% {
            background-color: ${variables.color_initial};
          }
        }
        @keyframes pulse2 {
          20% {
            background-color: ${variables.color_extended};
          }
        }
        @keyframes color {
          0% {
            color: unset;
            opacity: 0.5
          }
          99% {
            color: unset;
            opacity: 0.5
          }
          100% {
            color: ${variables.color_extended};
          }
        }
      `]]]
    variables:
      color_initial: var(--paper-item-icon-active-color)
      color_extended: 'rgba(240,52,52, 0.9)'
      color_seconds: 60
    state:
      - value: 'on'
        id: value_on
        styles:
          card:
            - animation: >-
                [[[ return `pulse1 1s ${variables.color_seconds}, pulse2 1s
                ${variables.color_seconds}s infinite` ]]]
          icon:
            - color: '[[[ return variables.color_extended ]]]'
            - opacity: 1
            - animation: '[[[ return `color ${variables.color_seconds}s 1` ]]]'
          name:
            - font-weight: bold

check this Lovelace config:

title: Ha Rpi4 Data

button_card_templates: !include lovelace/buttons/button_card_templates.yaml    # <------- this is where you save your templates
decluttering_templates: !include_dir_named lovelace/decluttering_templates
custom_header: !include lovelace/custom_header/custom_header_data.yaml

views:
  - !include lovelace/views/view_Home_assistant.yaml         #0
  - !include lovelace/views/view_Light_data.yaml             #1
  - !etcetcetc

in that file you should copy what you now show below template: (which isnt a valid key in the first place)

safe below code in a button_card_templates.yaml file in the directory of your naming (and reference that in the main lovelace-ui.yaml like I suggested above)

container:
  color_type: label-card
  color: dimgray
  styles:
    card:
      - padding: 0
    name:
      - border-radius: 0.4em 0.4em 0 0
      - padding: 0.1em
      - width: 100%
      - font-weight: bold
    grid:
      - grid-template-areas: '"i" "n" "buttons"'
      - grid-template-columns: 1fr
      - grid-template-rows: 1fr min-content min-content
    custom_fields:
      buttons:
        - background-color: 'rgba(0,0,0,0.3)'
        - margin: 0
        - padding: 0.3em
2 Likes

That decluttering is a good move.

@qoheleth Yes, it is there, it is the third line in the config that I posted.

ah, that was my problem. I removed templates and everything started working. Not sure why I put that in there in the first place. Many thanks!!