Home Assistant Community

Lovelace badge+notification banner

#1

Playing with Lovelace, this is a proof-of-concept using a banner to combine badges and message/notification.

ui-lovelace.yaml
title: My Awesome Home
views:
. . . .
  - title: info
    background: radial-gradient(lightgray, black)
    panel: true
    cards:
    - type: vertical-stack
      cards:
      - type: picture-elements    
        image: /local/banner2.png?v=3
        elements:
        - type: state-badge
          entity: sensor.local_date
          style:
            top: 50%
            left: 5%
        - type: state-badge
          entity: sensor.local_time
          style:
            top: 50%
            left: 10%
        - type: state-badge
          entity: sensor.pws_temp_f
          style:
            top: 50%
            left: 15%
        - type: state-badge
          entity: binary_sensor.front_porch
          style:
            top: 50%
            left: 20%
        - type: state-badge
          entity: binary_sensor.front_door
          style:
            top: 50%
            left: 25%
        - type: state-badge
          entity: binary_sensor.garage
          style:
            top: 50%
            left: 30%
        - type: state-badge
          entity: binary_sensor.side_door
          style:
            top: 50%
            left: 35%
        - type: state-badge
          entity: binary_sensor.carport
          style:
            top: 50%
            left: 40%
        - type: state-badge
          entity: binary_sensor.basement
          style:
            top: 50%
            left: 45%
          
        - type: state-label
          entity: input_text.text3
          tap_action: call-service
          service: script.cleartext3
          style:
            top: 50%
            left: 85%
            color: white
            font-family: "Arial"
            font-size: 20px
configuration.yaml
input_text:
  text3:
    name: Text 3
    pattern: '[a-fA-F0-9]*'
    initial: No Message
scripts.yaml
cleartext3:
  sequence:
    - service: input_text.set_value
      data_template:
        entity_id: input_text.text3
        value: "No Message"

Descriptions:

  • Lovelace view

    • must have panel: true
    • must have only one card (vertical- or horizontal-stack), other cards can be added under it
    • first card under the above vertical-/horizontal-stack is the picture-element card (banner), you can move it down the page if you want
    • the goal here is to have the picture-element card (banner) to span the width of display in a view
  • picture-element card (banner)

    • create a png image file for this card with enough width to span the display
    • add state-badge elements to the card, place them anywhere you like with top/left
    • add state-label containing input_text entity element (input_text.text3)
      • I used tap_action: call-service to call a script (cleartext3) which clears the message when clicked
  • input_text entity (text3)

    • an input_text entity to store and display message
    • you can send all kinds of message/notification to it via script/automation/api using service input_text.set_value
  • script (cleartext3)

    • a simple script using input_text.set_value to blank/re-initialize the entity

Have fun :slight_smile:

[Version 2]
Got some free time today…


[Version 2.1]
Added animated gif for state ‘on’ (red dash circling 5th badge :grin:), custom thermostat-card, column-card
picture-elements card: local variables to set relative position of ‘badges’, changed unit % to vw for better scaling across devices
To do: figure out scaling of picture-elements card size across devices, show/hide ‘badge’ based on entity state ( tried monster-card, won’t work inside picture-elements card)

[Version 2.2]
Added compact-custom-header compact-custom-headerto save screen space on top. Tested moving the banner setup under a conditional card to hide/show banner, works fine.

[Version 2.3]
Added AlarmDecoder badge to simplify arm/disarm/monitoring

[Version 2.4]

  • Added weather badge (color is temperature-based) using config-template-card
  • AlarmDecoder badge dynamic icon using same config-template-card

12 Likes

Lovelace UI badges. Possible?
Stretch top card lovelace UI
Lovelace: column-card
Just a big clock
Showing and hiding a card with a web call
Just a big clock
Badge State Image
#2

This is great can you include the banner2.png please…

Thanks

0 Likes

#3

Sure, that’s just a simple png with appropriate picture size for your device.

0 Likes

#4

Looks nice. This gentleman created a custom card that can simulate a banner

How did you get badges?

1 Like

#5

Column-card did not create the banner, it make use of panel:true, 1st card will be full width and then let the cards under the 1st one auto flow based on screen size/orientation.

In my banner done with picture-element card, I created composite ‘badge’ using combinations of state-icon/image/state-label types. You can also use the simple state-badge but I found it does not scale.

In column-card case, I can use my banner or you can just use badge under view badge in view

1 Like

#6

Thanks for the PNG.:smiley:

0 Likes

#7

Hi,
Can you please share a sample code with your latest changes.
how did you change the badge css (red/green circle).
Thanks,

0 Likes

#8

The ‘green’ (actually the primary color of the theme) circle is created from border-radius/border under style here:
- type: image
entity: sensor.local_date
state_image:
“open”: /local/lightbulb-outline.png
“closed”: /local/lightbulb-outline.png
filter: opacity(0)
style:
. . . .
border-radius: 100%
border: var(–primary-color) double 0.2vw

The state_image does not matter here since filter: opacity(0) make whatever it is ‘disappear’ and showing only the border/circle.

I have theme change periodically and wanted the badges to look part of the theme, so I set the border color to var(–primary-color). You can set border to any color you want, just replace var(–primary-color) with a color name.

The red circle is actually an animated gif loading , I overlay that on top the ‘green’ circle image:
- type: image
entity: binary_sensor.motion
state_image:
“on”: /local/loading.gif
“off”: /local/loading.gif
state_filter:
‘on’: opacity(1)
‘off’: opacity(0)
style:
. . . .
border-radius: 100%

I wanted the red circling to ‘appear’ only when the binary_sensor.motion is on, so I used opacity(0) to make it ‘disappear’ when off.

These 2 images have to been defined in this order to have the correct overlay result.

Have fun.

0 Likes

#9

Getting the state-badges to align was a minor pain, but I got it working somehow, with the exception of the gap between the first and the second badge, which is smaller.

But my problem is the friendly_names of my sensors, which in case of the DWD weather sensor come from the sensor-attributes so I can’t change them in customization. This wrecks the panel pretty much:

image

Does anyone have an idea how to style around this?

0 Likes

#10

That’s one of the reasons I do ‘composite’ badges instead of limited by state-badge design.

If the friendly_name can be changed in config or customize.yaml, that would be easiest.
Otherwise, reconstruct it with:

  • type: image (for circle, example for border above post),
  • type: label (for the text/value in and outside the circle),
  • type: state-icon (optional)

I highly recommend plan-coordinates for positioning/sizing in picture-element.

0 Likes

#11

You mean as you explained in the post about badges and animated gifs?

Anyway, I got around the very long friendly names that I unfortunately can’t change in customization - I simply created a value_template-sensor that gives me the state of the real sensor, now I can set a friendly name as I like.

0 Likes

#12

Yes, I layered different types (icon,label,etc) to look like a badge.
Glad you solved it.

0 Likes

#13

While the relative positioning of entities on picture-maps is fine for a floor, it doesn’t suit a panel. If I resize the browser window, the background image of the floor scales and all icons move, effectively “staying in the same place” - that is fine and as it should be. But with

top: 50%
left: 10%

the badges slide around and change their positions and distances. No go! But since this is CSS, you can use absolute positioning. I didn’t find any documentation in the HA-docs about that, but it worked alright:

top: 30px
left: 70px

And all badges stay fixed where they are.

1 Like

#14

This is my reference to different CSS units.

0 Likes

#15

Sorry to hijack the thread but does anyone have a working example of badges under view?

Cheers,

Linton

0 Likes

#16

The default badges of lovelace work like this:

# default view
  - title: RokuTV
    id: RokuTV
    badges:
      - binary_sensor.internet
1 Like

#17

I’m looking to create similar views in Lovelace as I have in legacy frontend using CustomUI, is that at all possible? Different colors if family members are home or not, and diffrent colors depending on temperature and humidity etc.

0 Likes

#18

I used binary_sensor/input_boolean state to do color change in type: state-icon, those are relatively easy, under style, --paper-item-icon-color is the off state color, --paper-item-icon-active-color is the on state color.

To use this method for sensor entities, like temperature and humidity, you’ll have to create template binary_sensor for each of them, that may not be what you want.
You may also want to look at this discussion about icon-template and customization.

0 Likes

#19

So in order to get color change of the badges I can use state-icon?
Any example of config?
I have tried some but cannot get any positive results…

0 Likes

#20

Here is what I used to display my motion sensors, changes color from lightgreen when off, to red when on:

- type: state-icon
  entity: binary_sensor.front_porch_motion
  tap_action:
    action: more-info
  hold_action:
    action: none
  style:
    top: 50%
    left: 50%
    filter: opacity(0.6)
    "--paper-item-icon-color": lightgreen
    "--paper-item-icon-active-color": red
    --iron-icon-height: auto
    --iron-icon-width: 1.5vw
1 Like