Lovelace badge+notification banner

Share your Projects! Dashboards & Frontend
1

image
image1680×434 70.6 KB

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


image
image1658×329 114 KB

[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)
image
image1653×302 170 KB

[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.
image
image1651×242 111 KB

[Version 2.3]
Added AlarmDecoder badge to simplify arm/disarm/monitoring
image
image1661×211 112 KB

[Version 2.4]

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

image
image1660×185 81 KB

12 Likes
2

This is great can you include the banner2.png please


Thanks

3

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

banner2
banner2809×66 912 Bytes

4

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

How did you get badges?

28
281902×445 72.3 KB

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:

7

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

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.

1 Like
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?

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.

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.

12

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

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.

15

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

Cheers,

Linton

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.

770
7701036×415 115 KB

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.

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


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