now that this card is really getting a lot of traction (so cool) please let me ask if I can do this for a button entity_picture template. It is what I am using in my current (regular Ha) Tiles cards, and havent seen possible in any other card yet (I think).
If this would be possible Id jump on the button-card wagon within seconds…
- entity: device_tracker.life360_name
style_template: >
if (state === 'home' || state === 'not_home') return 'background-image: url(\"/local/tiles/family/name_' + state + '.png\")';
return 'background-color: #643aac;background-image: url(\"/local/tiles/family/name_' + entities['sensor.name_location_picture'].state + '.png\")';
more_info: group.name
little explanation:
it shows home or not home when the device_tracker is either home/not_home (duh…) or shows a picture based on the zoning of the device_tracker when not being home/not_home.
Having spend some tome trying to read all the thread and your documentation didn’t reveal the possibly yet 100% for me, so please forgive me asking before trying.
@RomRider, it sounds like this might already be in progress with some of the other style/layout work you’re doing, but wanted to run this question by you just in case it’s not (or if there’s already a way I’m not realizing to do what I want to do).
My priority has been to set up my Lovelace config for the scenario I’m using it for most, on a phone in portrait mode. However, ideally I’d still like for the same view to look nice in landscape orientation, or on my PC.
One thing I did was set the pixel width of the button cards and put a blank card on each side, to give the buttons just a little more room to breathe instead of having them stretch to the edge of the screen:
I tried setting the size on the blank cards and letting the actual buttons auto-size, but the blank cards did not appear to honor the sizing. I also tried adjusting margin/padding on the cards but the cards don’t adjust size to fit the page width when that’s done so that did not work either. Anything I am missing that I can try?
Holy, that is so awesome. I have just little experience with CSS, but a 9 months ago I did not have any experience with Home Assistant/python/yaml/java at all so I think I’ll manage.
This card is really getting advanced, I wonder if it won’t affect performance though
Putting the width on both of the blank card and not on the actual button where you have information to display is what you should do, on my side it works so can you share your config please?
My dev view has like 100 buttons on the same page, it’s a bit laggy on my computer but that because they are all linked to the same entity, so it updates 100 buttons in one time (takes 1sec to update). On my phone though, it’s super super fast with the same 100 buttons!
I think you could achieve this by using a state-switch-card and picture-elements. Then make the card show something else when the state of a certain device changes.
You could use a state-switch card within a state-switch card so that you could make it not only change per device state, but also per user.
For example, it will only show user B another card when user B’s device is not_home. But it won’t change for user A. You can put as many state switch cards in as you want, which I use a lot for showing lovelace cards as notification bubbles. (Will post my code later, when I have access to a computer)
For this kind of setup you don’t need this button-card though.
Hey! Ive made several input_select groups to control my portable AC. When triggering the scripts manually from HA, they work fine. However, when using button-card with “more-info”, I can choose settings, but nothing happens. Any ideas?
Sure!
My problem is that the AC remote sends the entire command set each time. So I had to capture every temperature input with fan mode low/med/high. I need the dropdown menu to handle that many.
The more-info is not linked to the button-card. What happens inside is managed by Home Assistant directly.
If you put your input-select entity in an entity-card, does it work? If not, the problem is in your input-select.
never used the state-switch card yet, but don’t you have to show the entities of which you use the state for that? Thats not what I am looking for. I only want the buttons, in my current setup Tiles to be displayed, with an entity_picture depending on the state of these entities (they can be device-trackers, or groups of device_trackers, and, in the new HA 92.2 version, maybe persons.
I also did some with input booleans that work as dummy entities (they do nothing but they are just for showing some states and I can automate stuff with them).
So based on what I understand of what you want to do here is the basic setup of what you want to achieve. In my screenshot above this post you can see how the picture-element would look like. It shows you the state and the zone at the bottom of the picture. (you could use a picture-entity for this if you don’t want the little icons I did which is far easier to setup)
So when the specific person is at home, it will show the picture-elements card and when that person is not home it will show the map. (you’d have to replace the map with picture-elements and have a camera entity that is capable of showing a location, like the one used for google maps. If you’d want the zone and state on that card as well)
I have also added how you can do it per user on the top, so it would only show a certain card based on an entity (in this case a person) but it will also only show it for the specific user that is logged in.
The code below is NOT the exact same as the screenshot, I removed a lot of elements and all styling to not bloat the forum with unnecessary code. If you wish to have the full code you can PM me or wait for me to put it on my Github repo (https://github.com/jimz011/HA-Current)
Oh and as this is pretty off topic, you could replace any of the picture elements with a vertical/horizontal stack and put button-cards in there to show certain buttons only when a certain state condition is met and only to a certain person (e.g. my wife doesn’t really need to see certain cards/buttons, with this you could hide the button for her, but not for yourself and only show it when you are home).
The reason why I put the exact same image in the picture-elements twice is because I wanted to have the element to be tappable (to open the more-info panel), the standard picture-elements image which is required to set it up is not clickable.
Loving this custom card - I might have overlooked this, but I couldn’t see if there’s a way to template an icon?
I’m using buttons for a menu, so the state they’re linked to is based on if that menu is option is selected, but it’d be great to have the icon reflect something separate. I.e. a button which activates the ‘garage page’, but the icon on the button shows if the garage door is open or closed.
Effectively the same functionality as the label_template, but for icons.
@mynameisdaniel Alternatively you can use a state-switch card to achieve this, see my explanation above.
Replace the device_trackers with a button-card, you could also use a horizontal/vertical stack and configure your button cards in that horizontal/vertical stack like you would usually do.
Looks great now, thanks for the help!
