Frontend: Person Card

[zsarnett]

The request

The card would be able to take a person entity and auto-fill in the Image, battery, and location if available.

It would then work as an entities card on the bottom where you supply entities that you want on the card and it would display them.

This is a quick mock-up of what I think it should look like. Looking for feedback on if people would use this or no? As well as feedback on the design.

The alternatives

Creating a picture entities card and doing it basically the same way

[SeanPM5]

This looks great! I would definitely use this and I think many others would as well. I do something kind of similar with the custom button card but yours looks way nicer 😃

One thing I think would be neat to add is Proximity integration support in this. So if the person is home, it could just say "Home" like your mockup, but if they're away it could have secondary text that says "5 miles away" or "Driving towards home" or some additional context like that.

[bramkragten]

I also like the comment by @thomasloven to make it a header, so it can be used above an entities card

[zsarnett]

That may be the route, but I would want it as a stand alone card for ease of use. That was more talking about you supply it entities and it displays them. Reason for that is from my mock the state is actually the text after the icon not the name of the entity. As the entity should be related to the person I dont think having the entity name is very usefull

[balloob]

Here is what I had mocked up for the config redesign. Just another idea:

I like the first screenshot a lot, but it would also require a cover picture.

[SondreNjaastad]

Hi! I started making this card. Its my first lovelace card, so i bet there is a handfull of tweaks to be made. I allso wanted to indicate MS Teams status on the card.

https://github.com/SondreNjaastad/person-card

The card is atm fully functional and you can add as many entites in the card as you want

[zsarnett]

Nice. Looks great!

[SondreNjaastad]

I think i want to remove the circle around the image and add a dot in the lower right corner instead

[spacegaier]

How does it look if there is no background image defined? Will you fill this header section with a theme color (e.g. the teal in your case)? Or will we provide a default HA image that is used as default so the users can see that it actually contains an image and therefore realize they can switch it out with a custom one?

[SondreNjaastad]

How does it look if there is no background image defined? Will you fill this header section with a theme color (e.g. the teal in your case)? Or will we provide a default HA image that is used as default so the users can see that it actually contains an image and therefore realize they can switch it out with a custom one?

I have not yet handeled default background image. It currently just stays white. Using a theme color is a great idea. i allso need to implement theme on the rest of the card.

[SondreNjaastad]

I believe this looks better than the ring around the image

[balloob]

We need some more space for the location. Like if it is something like "University" or "Grocery Shopping"

[balloob]

It's not quite clear to me what the red dot stands for ?

[spacegaier]

It's not quite clear to me what the red dot stands for ?

I think it's meant to show an availability status, here derived from the MS Teams status.
Perhaps this is something that could be configurable to select the source for that information or the user can not use that option.

[SondreNjaastad]

I have now set up a release action on github.
The card in the image is in a single cloumn next to another of the same card, so this is at 50% width.
The status indicator is optional 😊

[sjobergsson]

Is it possible to use a templated image url so that I could have one banner when home and another when at work for example?

[balloob]

Uh, it's a custom card and not a contribution to core? We should stop talking about it right now then. This issue is about a person card in core.