Overlaying information from a sensor onto a button card

Configuration
1

Hi guys and gals,

I have a dishwasher on/off button card for which I’d like to add the number of cycles completed this week so far.
This is the current code:

            - type: "custom:button-card"
              entity: switch.dishwasher_active
              name: Dishwasher
              icon: mdi:dishwasher
              show_state: false
              color_style: icon
              action: more_info
              color: rgb(239, 83, 26)
              state:
                - value: 'unavailable'
                  styles:
                    icon: 
                      - color: rgb(0, 0, 0)
                - value: 'off'
                  styles:
                    icon: 
                      - color: rgb(222, 226, 215)

Thanks for any inputs on this one.

2

Bumping this in case someone know how to do it and missed it before

3

You should look at these posts, they should give you a hint about what you need. Lovelace: Button card

4

Thanks, but this didn’t lead me to something useful

5

Alright, I just did a similar thing for myself today, so I thought I’d paste it to you.

You need to combine this code into your own. What you need mostly is grid, and the custom field parts. This will make a homekit-like button with a badge at the top right. You will need a template sensor that counts the cycles to put in the badge.

image

type: custom:button-card
entity: sensor.bedroom_window
show_label: false
show_state: true
show_last_changed: true
name: Bedroom
icon: mdi:window-closed
color: auto
size: 25%
tap_action: 
  action: more-info
opacity: 0.8
aspect_ratio: 1/1
custom_fields:
  badge: >
    [[[ return `<ha-icon
          icon="mdi:battery-outline"
          style="width: 12px; height: 12px;">
          </ha-icon>` + states['sensor.bedroom_window_battery_level'].state + "%"]]]
styles:
  card:
    - --ha-card-background: var(--homekit-card-off)
  label:
    - font-size: 11px
    - font-family: Helvetica
    - padding: 0px 10px
    - justify-self: start
    - color: var(--label-color-off)
  state:
    - font-size: 11px
    - font-family: Helvetica
    - padding: 0px 10px
    - justify-self: start
    - text-transform: capitalize
    - padding-left: 10px
    - color: var(--upcoming-color)
  grid:
    - position: relative
  custom_fields:
    badge:
      - border-radius: 50%
      - position: absolute
      - left: 60%
      - top: 5%
      - height: 20px
      - width: 40px
      - font-size: 10px
      - line-height: 20px
  name:
    - color: var(--upcoming-color)
    - justify-self: 'start'
    - padding-left: '10px'
    - font-weight: bold
    - font-family: Helvetica 
    - font-size: 13px
    - margin-top: '0px'
  icon:
    - color: var(--upcoming-color)
  img_cell:
    - align-self: start
    - text-align: start
    - margin-left: -65%
2 Likes
6

Thanks Isabella, I managed following a more thorough reading through the post you recommended and the many comments in it in addition to the examples in the card wiki, here’s my take on it (the labels are in hebrew but this is not important for this example I guess)

Screen Shot 2020-02-07 at 16.17.12
Screen Shot 2020-02-07 at 16.17.12942×186 13.6 KB


            - type: "custom:button-card"
              entity: switch.boiler_dud
              name: בוילר
              show_state: false
              color_style: icon
              icon: mdi:shower
              color: rgb(239, 83, 26)
              show_label: true
              size: 35%
              label: >
                [[[
                  var bri = states['sensor.boiler_on_today'].state + "h today<br>" + states['input_text.showers_today'].state + " showers";
                  return (bri ? bri : '0');
                ]]]
              styles:
                img_cell:
                  - align-self: start
                  - text-align: start
                name:
                  - justify-self: middle
                state:
                  - justify-self: start
                  - padding-left: 10px
                label:
                  - justify-self: start
                  - text-align: start
                  - padding-left: 5px
                  - font-weight: bold
                  - font-size: 9px
                grid:
                  - grid-template-areas: '"l" "i" "n" "s"'
                  - grid-template-columns: 1fr
                  - grid-template-rows: 1fr min-content min-content

Thanks for taking the time to answer @teachingbirds you rock!

3 Likes