Custom:Button-Card with extra info

Third party integrations
1

I am working on a custom button card for my dashboard, and using the relative grid as shown in the documentation.
The purpose is to have a window sensor group as the main entity. I also want to have 2 small entities displayed, one to show how many are open from the group, and the other is to show if any are unavailable or have low battery.
I have not figured out the code for the low battery or unavailable.
I am testing with a known entity for now on the front end while I work on the code.
This is what it looks like today:
image

This is my code for the sensor.

button_sidebar_small_windows:
  template: button_sidebar_big
  styles:
    grid:
      - position: relative
    custom_fields:
      notification:
        - background-color: >
              [[[
                if (states['sensor.lights_1st_floor'].state == 0)
                  return "green";
                return "red";
              ]]]
        - border-radius: 50%
        - position: absolute
        - left: 70%
        - top: 10%
        - height: 15px
        - width: 15px
        - font-size: 10px
        - line-height: 15px
      warning:
        - background-color: >
              [[[
                if (states['sensor.lights_1st_floor'].state == 0)
                  return "green";
                return "red";
              ]]]
        - border-radius: 50%
        - position: absolute
        - left: 70%
        - top: 60%
        - height: 15px
        - width: 15px
        - font-size: 10px
        - line-height: 15px
    card:
      - width: 55px
      - height: 55px
      - margin: 5px
      - margin-top: 10px
    icon:
      - width: 50px
      - height: 50px
  state:
    - value: 'off'
      icon: mdi:window-closed
      styles:
        icon:
          - color: green
    - value: 'on'
      icon: mdi:window-open
      styles:
        card:
          - animation: blink 2s ease infinite
        icon:
          - color: darkred
  custom_fields:
    notification: >
      [[[ return (states['sensor.lights_1st_floor'].state) ]]]
    warning: >
      [[[ return (states['sensor.lights_1st_floor'].state) ]]]

So I got the basic formatting and function. But I am looking for more customization.

  1. Change the lower circle to be an icon (mdi:alert-circle)
  2. Have that icon blink when there is one or more sensors with low battery (lower than 20%) or a sensor is unavailable. This is an error case.

So when there is a window open, the whole button blinks, and that is currently working.
In case of error, I only want the mdi:alert-circle to blink, not the whole button. So imagine you have all windows closed, but one sensor is less than 20% battery. The window would look green, but the alert icon will blink.

Is this possible with a Button-Card?
Do I need to move to a decluttering card to have that done? For the decluttering card, can we use the same relative grid also? I would like the notifications to be overlapping the main icon as shown in the pictures above.

Thought on the best approach?

EDIT: Ignore the sensor I am using, it is not a window sensor, but one I know contains the number 1 so I can test the logic.

2

So I got the exclamation mark to work using html inline.
image

custom_fields:
    notification: >
      [[[ return (states['sensor.lights_1st_floor'].state) ]]]
    warning: >
      <span style="color:red"><b>&#9888</b></span>

I will be trying to make it blink now…when there are one or more sensor. Let’s see.

3

Just keeping the update in case anyone has use for the function:
This now blinks the icon on one logic, blinks the warning at a different rate. so I can tie each to a different logic based on which entities they will have. (still need to create the entities and so on). But the logic works.

BTW, what is the best tool to record these animated posts I see on some posts? So I can record the behavior I have for reference.

Now what I have left is put a condition that if there are no sensors with a low battery, the warning symbol will not be displayed. If this is not an option, then I will have to change it to a checkmark or something.

button_sidebar_small_windows:
  template: button_sidebar_big
  styles:
    grid:
      - position: relative
    custom_fields:
      notification:
        - background-color: >
              [[[
                if (states['sensor.lights_1st_floor'].state == 0)
                  return "green";
                return "red";
              ]]]
        - border-radius: 50%
        - position: absolute
        - left: 70%
        - top: 10%
        - height: 15px
        - width: 15px
        - font-size: 10px
        - line-height: 15px
      warning:
        - color: >
            [[[
              if (states['sensor.lights_1st_floor'].state == 0)
                return "green";
              return "red";
            ]]]
        - border-radius: 50%
        - position: absolute
        - left: 70%
        - top: 60%
        - height: 15px
        - width: 15px
        - font-size: 15px
        - line-height: 15px
        - animation: blink 1s ease infinite
    card:
      - width: 55px
      - height: 55px
      - margin: 5px
      - margin-top: 10px
    icon:
      - width: 50px
      - height: 50px
  state:
    - value: 'on'
      icon: mdi:window-closed
      styles:
        icon:
          - color: green
    - value: 'off'
      icon: mdi:window-open
      styles:
        card:
        icon:
          - color: darkred
          - animation: blink 2s ease infinite
  custom_fields:
    notification: >
      [[[ return (states['sensor.lights_1st_floor'].state) ]]]
    warning:
      >
      <b>&#9888</b>
4

FINAL product in case anyone needs it:
Animation

with the code for a template.
Improvements welcome!

button_sidebar_small_windows:
  template: button_sidebar_big
  styles:
    grid:
      - position: relative
    custom_fields:
      notification:
        - background-color: >
            [[[
              if (states['sensor.lights_1st_floor'].state == 0)
                return "green";
              return "red";
            ]]]
        - border-radius: 50%
        - position: absolute
        - left: 70%
        - top: 10%
        - height: 15px
        - width: 15px
        - font-size: 10px
        - line-height: 15px
      warning:
        - color: >
            [[[
              if (states['sensor.lights_1st_floor'].state == 0)
                return "transparent";
              return "red";
            ]]]
        - border-radius: 50%
        - position: absolute
        - left: 70%
        - top: 60%
        - height: 15px
        - width: 15px
        - font-size: 15px
        - line-height: 15px
        - animation: blink 0.5s ease infinite
    card:
      - width: 55px
      - height: 55px
      - margin: 5px
      - margin-top: 10px
    icon:
      - width: 50px
      - height: 50px
  state:
    - value: 'off'
      icon: mdi:window-closed
      styles:
        icon:
          - color: green
    - value: 'on'
      icon: mdi:window-open
      styles:
        icon:
          - color: darkred
          - animation: blink 2s ease infinite
  custom_fields:
    notification: >
      [[[
        if (states['sensor.lights_1st_floor'].state == 0)
          return null;
        return (states['sensor.lights_1st_floor'].state) ;
      ]]]
    warning:
      >
      <b>&#9888</b>
1 Like