Lovelace: Banner card

nervetattoo · May 18, 2019, 7:21am

I like to keep my HA front page light weight, clutter free and perhaps even a bit delightful for maximum partner approval . After testing out various setups using glance and picture cards I ended up building a lightweight banner card that simply combines the three factors big bold text, interactive entity glances and warm fuzzy colors.

So here is my fluffy banner-card for the rest of ya’ll to consume if you too want a less tech-heavy HA view.

banner-card on Github

I use the card to represent snapshots of rooms instead of for example using a floorplan (which is cool but hard to use imo for every day usage).
The card looks best with 3 entities listed imo, but I do have some that have between 4 and 6 to produce two rows of glance entities.

Oh, if you find the name to be off in any way I must confess I had a hard time coming up with a satisfactory name, but banner-card feels close enough for me as it’s a bit inspired by billboard banners

Right now there is support for the light domain to render a toggle as that simply is my main need. I expect people will start asking for buttons for other domains and I’m sure I’ll add that as the requests come in; Or, please, do provide Pull requests on Github

Feedback much appreciated as always

banner-card on Github

yoni3210 · May 18, 2019, 11:06am

Great Job!!

i have a few questions

when i turn on light the sofa icon not changing like in your photo.
is there a way to stack all entities in the same line ?

this is my config:

  - type: custom:banner-card
    background: "#EDE7B0"
    heading: "\U0001F6CB Bedroom"
    link: /lovelace/0
    entities:
      - entity: light.bedroom_lights
        name: Lights
      - entity: switch.toshiba_tv
        name: TV
      - entity: fan.ceiling_fan
        name: Ceilling Fan
      - entity: sensor.bedroom_temp_temperature
        name: Temperature
      - entity: climate.mzgn_khdr_shynh
        name: AC

Abeksis · May 18, 2019, 5:03pm

Looks great - is it possible to reduce the caption and the black part a bit?

nervetattoo · May 18, 2019, 6:07pm

I did move font sizes into CSS vars and published a 0.2 so you can see what you can do with that.

That is not changing in my photo. The downside of emojis are that they differ from OS to OS, thats why ours look different. The icon is just the weird part of the string in my examples, its an encoded UTF sequence referencing the emoji.
No, I chose to lock it at 3 items and then wrap because thats simply what looked best. All you can do is to order your entities so that you have them logically grouped in order.

Abeksis · May 18, 2019, 6:26pm

thank you for the answer.

Are there any options for css from my side?

nervetattoo · May 20, 2019, 11:23am

You can use the card-modder card to mess up the styles for banner-card easily to achieve this:

- type: custom:card-modder
  style:
    --bc-font-size-heading: 2em
    --bc-font-size-entity-value: 1em
  card:
    type: custom:banner-card
    ...

Set the sizes as you wish

Abeksis · May 20, 2019, 11:40am

Can move (indicated by red arrow) to right or left.

mkhattab · May 20, 2019, 6:19pm

@nervetattoo This is great work. Thanks for taking the time to put it together and share it. Is it possible to change the size [width] of each card? If I create a view to use on a wall-mounted tablet it only takes 4 cards

nervetattoo · May 20, 2019, 6:24pm

The width of the card is up to HA, not something that each card normally limits.
Do you mean each entity listed inside the cards lower block?

mkhattab · May 20, 2019, 6:32pm

No I mean the entire card. Have a look at the view in this screenshot. Three cards with space for 1 more. I’d like to make each card smaller so I can fit more into the view

nervetattoo · May 20, 2019, 6:38pm

At first I had been wildly against the idea, but I think I’ve settled on making this customisable to some extent. I’ll get back to this soonish

mkhattab · May 20, 2019, 6:40pm

Great! Let me know if you need contributor help. This has great potential and I’d like to be able to help

j4Media · May 20, 2019, 7:44pm

Great work! I love the simplicity of it. I will certainly be using it in my design.

Bluhme · May 20, 2019, 9:33pm

Could you give an example of how to show the attribute?

And I would love to be the first to ask for a toggle button in the switch domain

nervetattoo · May 21, 2019, 8:12pm

Thanks to some contributions and some more motivation after the good reception a 0.4 release was just published that contains some neat updates like switch+cover+media_player support, configurable grid for entities.
Read the changelog in the Github release here

Greg · May 21, 2019, 10:39pm

Looks good! Thanks

Mike_i386 · May 22, 2019, 7:09pm

Hi there,

sorry to interrupt but would you mind sharing your theme, background image and especially your layout-css-config for the buttons?

I love your buttons in combination with your theme, but I was unable to completely recreate the style.
So it would be awesome to have your theme and button-css-template.

Thank you very much.

Abeksis · May 22, 2019, 7:21pm

I have not finished working on the new design yet. For now you can follow the “old” design at the following link: https://github.com/abeksis/My-HomeAssistant-Config

Miicroo · May 22, 2019, 7:39pm

Love these! So much easier to get an overview than a floorplan, exquisite job!

Christian_Hollbjar · May 22, 2019, 7:48pm

Hi! Awesome card!! What attribute do i need to modify to get rid of the overlap in the corners?