Lovelace badge+notification banner

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?

You already got the basic status/info display, next step is getting familiar with lovelace and add customization and functions.

To control any objects, you need to use the tap_action/double_tap_action/hold_action.
Here is an example that creates an icon on banner to toggle my TV switch:

              - type: icon
                tap_action: 
                  confirmation: 
                    text: Toggle TV Power?
                  action: call-service
                  service: switch.toggle
                  service_data:
                    entity_id: switch.tv_power
                icon: mdi:remote
                style:
                  top:  50%
                  left: 50%

It’s a lot trickier to getting the same banner to work on multiple devices, i.e. PC, phone, because of the screen size and resolution. I’ll suggest getting one device working first.

When I first setup my banner, took me months to get all the pieces to work. On my phone, I use other lovelace cards more suitable for the display :slight_smile: