Lovelace badge+notification banner

SirBronski · September 25, 2018, 8:56am

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.

JTPublic · October 9, 2018, 3:47pm

This is my reference to different CSS units.

LintHart · October 15, 2018, 11:52am

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

Cheers,

Linton

JTPublic · October 15, 2018, 2:16pm

The default badges of lovelace work like this:

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

Johan_Nolen · January 25, 2019, 3:27pm

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.

JTPublic · January 25, 2019, 7:51pm

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.

Johan_Nolen · January 27, 2019, 11:55am

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…

JTPublic · January 27, 2019, 4:29pm

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

wendan20 · January 31, 2019, 6:45pm

I am trying to get this to work but I’m stuck. What I want is exactly shown at the beginning of this post. I want the first card full width and the following cards normal width.
What I understood is that I start with a vertical stack card where the banner is placed. What I do not get is where the rest of the cards come. If I place them in the vertical stack, all the cards are the full width. When I place them under the cards: from the view (first row) I only see the background image.

Someone knows what I am doing wrong? Thanks.

JTPublic · January 31, 2019, 8:40pm

After the vertical-stack/banner, I’ve used 1 horizontal-stack that contains 4 vertical-stacks (4 columns).
Each vertical-stack (column) can have as many cards as you want.

Currently, I use custom:layout-card to replace the horizontal/vertical-stack combo.

Casper · April 25, 2019, 3:11pm

Can you please post your updated ui-lovelace.yaml with the custom laycard added. I’ve been going nuts trying to convert this from old way (vertical-stack) to the new way.

Thanks

JTPublic · April 25, 2019, 6:53pm

Here is what I did with 4 columns in one of my views.
Just a reminder, the layout-card does not work exactly the same as just horizontal-stack/vertical-stack combos.
Hope this helps.

views:
  - title: Main
    id: Main
    icon: mdi:home-assistant
    panel: true
    cards:
    - type: vertical-stack
      cards:       
      - type: custom:layout-card
        layout: auto
        max_columns: 4
        max_width: [30%, 30%, 25%, 15%]
        cards:             
        - type: vertical-stack
          cards:
          ### this is a set of 2x3 camera cards in 1st column
          - type: horizontal-stack
            cards:
            - type: vertical-stack
              cards:        
              - < camera card 1>
              - < camera card 2>
              - < camera card 3>
            - type: vertical-stack
              cards:  
              - < camera card 4>
              - < camera card 5>
              - < camera card 6>
           - < other cards in 1st column>
        - break
        - type: vertical-stack
          cards:
          - <cards in 2nd column>
        - break
        - type: vertical-stack
          cards:
          - <cards in 3rd column>
        - break
        - type: vertical-stack
          cards:
         -  <cards in 4th column>

Casper · April 26, 2019, 4:55am

Thank You! I was trying to use the custom:layout card in place of the first vertical-stack was my issue.

magiva · July 10, 2019, 10:43am

Hi, did you find an example of how to change the colour of the badge based on state ?

mclaudiopt · July 10, 2019, 11:10am

HELLO
i get this error:
Integration not found: text3

how can i solve it ?»
thanks

JTPublic · July 10, 2019, 3:02pm

Assuming you have defined text3:

input_text:
  text3:
    name: Text 3
    pattern: '[a-fA-F0-9]*'
    initial: No Message

My script:

cleartext3:
  sequence:
  - service: input_text.set_value
    data_template:
      entity_id: input_text.text3
      value: ". . . ."

I use the script in the lovelace banner this way:

          - type: state-label
            entity: input_text.text3
            tap_action: 
              action: call-service
              service: script.cleartext3
            style:
              top: 3vw
              left: 80vw
              color: white
              font-family: "Arial"
              font-size: 1.2vw
              font-weight: bold

Hope that helps.

bearhntr · April 12, 2022, 8:42pm

JT,

I know this article is quite old - you may not even be doing anything with HA any longer - in the off chance that you are, I wanted to say first off this is a fantastic dashboard. Sort of something that I would like to do.

I tried re-creating your .yaml files (or adding to the ones already in HA) and getting all sorts of strangeness.

Was your dashboard done with HACS implementation? (as I have not gotten that far in my setup yet - brand new to HA, moving over from HomeSeer).

JTPublic · April 13, 2022, 3:02pm

@bearhntr, it’s been a while since I updated my banner but it is still working

Not sure how far you’ve got, this banner does not require anything from HACS at its simplest form, just basic lovelace UI in yaml. Once the banner/picture-elements is ready, all kinds of badge and customization can be added.

A sample of the basic code:

  - title: Dev
    id: Dev
    panel: true
    cards:
    - type: vertical-stack
      cards: 
      - type: picture-elements
        image: /local/banner2.png
        style: |
          ha-card {background: transparent; border-style: none; border: 0px; box-shadow: none;}
        elements:   
        - type: icon
          icon: mdi:cogs
          style:
            top:  50%
            left: 50%   
            color: red

This will create a card “Dev”, with a red cogwheel icon in the center of the banner as defined by the banner2.png (earlier post).

Let me know if you have specific problem or question.
Welcome to the HA community.

bearhntr · April 19, 2022, 7:27pm

JT,

Thanks for the reply. Where specifically would your ‘script’ above go? I am trying to put everything into separate .yaml files as I build…keeping the configuration.yaml “clean”.

I was basically trying to figure out where the images went. I also tried my hand at creating a banner.png file - and was not sure on the dimensions to use for it - and then again, where to put it on the system. I am running Debian 11 and the HA Supervised installation

I am still learning and once I get a better grasp on some more of the basics, and I get everything integrated (looking at SmartThings stuff now for my Samsung Smart Appliances) – I would at some point love to have an LCARS interface on tablets mounted around the house. (LCARS is from Star Trek - The Next Generation…all of the screens on the ship)

Curtis

JTPublic · April 21, 2022, 3:00pm

Curtis,

If you are referring to “My script” in Lovelace badge+notification banner - #28 by JTPublic, it goes into the scripts.yaml file in the base homeassistant folder (i.e. where the home-assistant.log is).

If you are referring to the code in Lovelace badge+notification banner - #30 by JTPublic, that goes to ui-lovelace.yaml file.

Regarding the size of the banner image, it really depends on your display.
I created mine as 809x66. You can start with any size and adjust to fit your screen using any graphic app. It can be any image to your liking, even the LCARS image

I put my banner image file under the www folder. Just make sure you specify your folder under the allowlist_external_dirs in the configuration.yaml like:

configuration.yaml

homeassistant:
. . . . .
allowlist_external_dirs:
- /home/homeassistant/.homeassistant/www

With the banner file under www, I can use the alias “local” as /local/banner2.png for the image location.

Cheers,
JT