Lovelace badge+notification banner

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

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

HELLO
i get this error:
Integration not found: text3

how can i solve it ?»
thanks

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.

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).

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

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.

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

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 :slight_smile:

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

JT,

Thanks for the reply. I am really trying to follow the steps laid out in multiple messages. I am on the HA Supervised version running on Debian 11 (non-GUI). I did add your lines to the right places (as you indicate and I created the ui-lovelace.yaml file - but as soon as I pasted in your lines (I use the Visual Basic file editor) - lots of it turned RED and then running a CONFIG CHECK - I am getting errors. So I took everything out of the configuration.yaml and the scripts.yaml file and deleted the ui-lovelace.yaml file and then rebooted. I could never get any semblance of the dashboard to what yours looks like.

Looking at the folders on my system - I do not appear to have that path you reference: I would assume the rotating red.gif you shared would go there too.

Curtis,

I’m using HA Core and lovelace in yaml mode.
Are you running lovelace in yaml mode or the default storage mode?

You’ll need yaml mode for this, here is the dashboards document https://www.home-assistant.io/dashboards/dashboards/#dashboards

JT

JT,

I am not sure – I guess I am not. I will rad through that, as I am trying to put everything in its own YAML file. Appreciate the guidance.

Curtis

JT,

I am back (call me ‘bad penny’ ) – I created the “www” folder via the File Editor under “config” - and in there I created an “images” folder to put images (sorry - old Web Developer here).

Added the following lines to configuration.yaml

image

When I go to CONFIG CHECK – I am getting:

image

Ideas???

Curtis

[quote=“JTPublic, post:28, topic:62074”]

Well I may be getting closer – This is what I get. I am not getting any errors in the CONFIG CHECK NOW - but no idea what nothing is showing. I cannot even get the BANNER2.PNG file to show either.

Here is part of the ui-lovelace.yaml file:

title: My Home
views:

  • title: info
    background: radial-gradient(lightgrey, 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%

=========================[end sample]

I created a folder under the following folders:
config/www
config/www/images

Added this to the configuration.yaml file

allowlist_external_dirs:
- “/config/www”

Possible typo ?

I think it should be /local/images/banner2.png

I got it working – It appears to have been – “where” I had placed my image files. I had put them in the wrong place. I created a new folder under CONFIG called ‘www’ and within there ‘images’ - then added the line in the homeassistant.yaml file “properly”

image

— I am not sure what effect the “?v=3” at the end has - but it does not seem to matter. :slight_smile:

Now I am getting this: (the banner is showing)

Cool :ok_hand:

@JTPublic can tell you all about Portage

You are getting there !!

The “?v=3” is to force refresh the png file, just change the number every time the banner.png is changed. Not really important, alternatively, you can keep refreshing browser if the changed banner image is not showing correctly.

The sensor.local_date I used was format as M.Dw[weekday starting Sunday=0] to fit them inside the circle.

Sensor:

  - platform: template
    sensors:
      local_date:
        friendly_name: "...Today"
        value_template: "{{ now().strftime('%-m.%-dw%w') }}"
        entity_id: sensor.date

Portage is my town :slight_smile: , the city name came from the state-badge with pws_temp_f in my version 1.

The right side “No Message” is the place to display the content of input_text.text3.
You can test by entering some text into input_text.text3, it will display and stay on the banner until you click on it. I used automation to display messages about sensor state there.

I really appreciate your help here.

Thanks for explaining the ?v=3 info. Makes more sense now.

For the SENSOR – where did you put those lines? I put them in my sensor.yaml file (which has the lines for collecting Date/Time, etc.) But when I add them- I get this error:

But you can see that Entity in Developer Tools:

– I will re-check the “Portage” related stuff, see if I can figure that one out. Which WEATHER app/add-on are you using? The one which appears to be built in?

As for the MESSAGE stuff - not gotten too much into the Automations yet. :frowning:

Just realized, that’s legacy sensor configuration format, try use modern configuation instead.

@JTPublic

No idea what that means (use modern configuration).

I currently have the dashboard (like yours) on my system - turned OFF. I could not figure out the banner stuff - and could not figure out how to add any controls for my objects - and I was getting the same dashboard on my phone as the computer - on the phone - not able to read anything - or control anything either.

I really do like the looks of your Banner UI - but gonna be some long-learning stuff, and it is summer here in Georgia, USA - too many things to do ‘outside’ – LOL

Maybe you care to share your .yaml files? Let me play with those?