Banner Card

Configuration Frontend
1

Guys.

I am using the banner card from the link below. I am struggling to see how I can get the light to show as a button as like in this example.

bathroom
bathroom981×405 29.1 KB

This is how mine is showing with the name and when you click it is does not turn the light on or off. Not sure what I am missing here.

Screenshot 2022-04-04 at 22.31.05
Screenshot 2022-04-04 at 22.31.051048×436 33.2 KB 

type: custom:banner-card
heading:
  - mdi:shower
  - Bathroom
background: '#B0C2ED'
link: /lovelace/bathroom
entities:
  - entity: light.bathroom_main
    name: Light
  - entity: sensor.bathroom_heating
    name: Temperature
  - entity: sensor.bathroom_humidity
    name: Humidity
2

your code looks fine so I’d suggest you open an issue on the repo than here

3

Its already registered an issue for this at the repo.

4

Thanks. The workaround with editing the file seems to have done the trick and I can see the light as a button. Thank for sharing the post.

5

I’ve now got the light working…i just need to figure out those sexy icons for bath etc. They look so much nicer the the mdi icons.

7

If you find out please let me know also.

8

Yeah, no problem :smile:

9

Found it :slight_smile:

Put this in the appropriate place in your code
heading: “\U0001F6CB Living room”

that will give you a sofa.

What you need to do is google the name of the image you want, it appears that they are emojis.
So in google type ‘bathtub unicode’
you will get ’ U+1F6C1’ as a result, then just change the last 5 characters in your code.
heading: “\U0001F6CB Living room”
so it becomes
U0001F6C1

For example, \U0001F6C1 and you will get a bathtub icon.
Hope that makes sense.

11

Fantastic. Thanks, mate

12

No probs, glad to help

13

How did it work

14

It seems that the original author abandonded the project or does not merge PRs, 2 forks seem to fix the bugs without fiddling around with js:

To exchange follow: https://github.com/nervetattoo/banner-card/issues/139#issuecomment-1060027354

I currently use the fork from @jak119 as it is newer than the one from @crempp

And if someone found out how I can toggle the light or switch in the heading that would be great, I am struggling. I tried to set the action under entity for the card instead of one displayed entity, but it does not do the trick.

type: custom:banner-card
heading:
  - mdi:office-building
  - Office
entity: light.office
action:
  service: light.toggle

Instead of pressing each button under the nice big header, I want to press the text and the icon of the header to switch the whole room (the entitiy of the header switches the zigbee group containing all lights in that room)

15

It seems that this card is affected by the depreciation of polymer: Deprecating Polymer | Home Assistant Developer Docs

Are there any plans how to move on with this card?

16

Why is here in my configuration the switch missing?
Any ideas?

Ashampoo_Snap_Freitag, 31. Mai 2024_16h25m5s
Ashampoo_Snap_Freitag, 31. Mai 2024_16h25m5s983×425 59.2 KB