Fun with custom:button-card

your string isn’t terminated in the right places, and a + is missing:

return 'linear-gradient(rgb(255, 255, 255)' + ink_level + '%, rgb(124, 124, 0) 0%)';

you legend :slight_smile: Thank you so much. So near, yet so far… Thanks again

Anyone know how I’d add an ‘if’ statement to make the icon green when a secondary sensor (binary_sensor.pet_heston) is on and red when its off? I’m assuming I’d need a template under state > styles > icon > color?

entity: sensor.heston_last_state
icon: 'mdi:cat'
layout: icon_name_state
show_name: false
show_state: true
state:
  - styles:
      icon:
        - color: var(--button-card-light-color)
    value: 'on'
tap_action:
  action: more-info
type: 'custom:button-card'

image

1 Like

you’ve got to be kidding, didn’t you check the button card documentation, or any of the million other card configs in the button-card thread…?

  styles:
    icon:
      - color: >
          [[[ return states['binary_sensor.pet_heston'].state == 'on' ? 'green' : 'red'; ]]]

I’m trying to make a battery at a glance card where it will change icons based on charging status and display battery level information. I’m trying to make the template more easily configurable for use with the 2 entities so you just input the entity once and then can do multiple actions with it. This works, but is there a neater way of doing this? (ie. With this methjod I would always have to include a “variables: lvl_entity:” vs just inputing lvl_entity in the top level? I’ll eventually move the code to the template but left it here for visibility.

type: 'custom:button-card'
template: battery_glance
entity: binary_sensor.sm_a515w_is_charging
name: template
variables:
  lvl_entity: sensor.sm_a515w_battery_level
styles:
  grid:
    - grid-template-areas: '"n" "i" "l" "s"'
  icon:
    - color: |
        [[[
          var vlentity=variables.lvl_entity
          var blevel=states[vlentity].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['sensor.sm_a515w_battery_level'].state}%</span></span>`
  ]]]

Sure did but templating is not a strength of mine. I’m a hardware guy. Thanks for the advice. Working a treat.

1 Like

@dredvard, if you need 2 entities you have to use a variable to specify the 2nd entity. I don’t think there is any way around that.

One option to simplify things is to make the entity you use the most in javascript the primary entity and use a variable for the other one. You can simply refer to entity in the javascript for the primary entity: [[[ return entity.state > 60 ? 'lime' : entity.state >= 20 ? 'orange' : 'red'; ]]].

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