Agree! The Tiles have an advantage though , they snap into a grid. And that grid automatically adapts to the window size, and auto adjust rows if set to do so .
While the Buttons are fixed in the stacks, and fall out of the window if resized too small…
Ah, well maybe in the future lovelace will integrate a tileboard style layout to views.
or we could ask @RomRider to takeover the Tiles card, which seems to be no longer supported or developed… 
I bet he would make it even better and more robustly integrate in the new Lovelace frontend.
I think that’s because the tile-card is a card by itself with multiple entities inside the card contrary to this one where each button is a card. 
I won’t 
but maybe I can think about creating another card to embed multiple button-card in the same way that the tiles-card does that will automatically align stuff based on the screen size 
let’s call this button-cards-in-card 
I think @iantrich had the crazy idea to try Muuri - Infinite layouts with batteries included with LL
3 Likes
Yah, that’s exactly what I had in mind! Also, Instead of having ‘panel=true’, the view would change to layout=[panel, muuri, normal]. Then we could add new layouts in the future if we wanted.
1 Like
Please do! Yess! And let’s indeed. You’re really making my day now.
Muuri looks impressive too, and probably a great future addition. Button-cards-in-Card is still a great idea though;-)
As an example why we need that:
Note the buttons reaching out of view on the right…
Btw, how can we set a margin on the left side? I’ve given the stacks 10px I think, which is alright on desktop, but in the 2.0 beta app nothing happens . Is that an App issue or do the buttons require special App care?
I did everything again and it worked!!
+1 on having a more flexible “grid-stack” type card to arrange cards. Would alleviate a lot of rigidity with vertical and horizontal stacks, and could possibly allow for dynamic arrangement (i.e. reshuffle if a card is hidden). Similar to how the glance cards work with entities, but cards 
@RomRider
wow, this is really cool… Ive just updated to 1.10.0 branch and both entity_picture_template and more-info (other entity) work beautifully.
Had to fiddle a bit with the JS template (which in itself is a bit odd, since the templates I used in Tiles were JS too) but once I got used to the main differences, it was rather simple.
this works very nicely:
- type: horizontal-stack
cards:
- type: custom:button-card
template: button_picture_family
entity: device_tracker.life360_name
entity_picture_template: >
if (entity.state === 'home' || entity.state === 'not_home') return '/local/tiles/family/name_' + entity.state + '.png';
return '/local/tiles/family/name_' + states['sensor.name_location_picture'].state + '.png';
tap_action:
entity: group.name
state:
- operator: template
value: >
return entity.state === 'home'
color: '#008000'
- operator: template
value: >
return entity.state === 'not_home'
color: '#808080'
- operator: template
value: >
return entity.state !== 'home' && entity.state !== 'not_home'
color: '#643aac'
using this button_template:
button_picture_family:
size: 80%
show_state: false
show_label: false
show_name: false
show_entity_picture: true
color_type: card
tap_action:
action: more-info
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- border-radius: 12px
- width: 105px
- height: 105px
entity_picture:
- border-radius: 12px
thanks!
I am still lost on how to set the icons by state, and have one that in the entity config, and the rest of the state config in the template. I know I have t use the new id: (and have read https://github.com/custom-cards/button-card/issues/165) but seem to read the whole state should then be entered in the entity config. overriding the template config. Which is not what I would think should be happening?
this is my challenge: Lovelace: Button card
could you please help me and show how these could use the new id: ?
Should I enter this in the template:
state:
- value: 'on'
id: on-icon
styles:
etc etc
- value: 'off'
id: off-icon
styles:
etc etc
and then in the entity config
state:
- value: 'on'
id: on-icon
icon: 'mdi:desk-lamp'
- value: 'off'
id: off-icon
icon: 'mdi:flashlight-off'
1 Like
I would love to see your entire lovelace config for some good ol bathroom reading if you haven’t already and are cool with it. Would love to use it as a template. Its awesome!!
@RomRider, not sure if this is a bug or just the way things work, but I’ve noticed that if I open up Home Assistant on my phone (I use the Android PWA) after not being in it for awhile, buttons with a show_last_changed configuration don’t update until I manually pull down to refresh. So, for example, I had a device tracker button that showed “3 hours ago” last night, and when I woke up this morning, still said “3 hours ago” until I manually refreshed and it changed to “10 hours ago”. Is there a way to automatically update those values on reconnect?
for reference to the community replying to my self here:
this seems to be successful. Had to add the id for icon in states on and off at the end of the template config section per state, so it will not overwrite anything following in that section.
template:
button_light:
label_template: >
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
color: auto
size: 30%
show_state: true
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- border-radius: 12px
- width: 105px
- height: 105px
- --paper-card-background-color: rgb(255, 251, 239)
- padding-left: 10px
name:
- justify-self: start
- padding-left: 3px
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
label:
- color: gray
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- padding-left: 3px
state:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 3px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
- margin-left: 10px
state:
- value: 'on'
# spin: true (uncomment this line for spinning icon)
styles:
name:
- color: black
state:
- color: gray
label:
- color: red
id: on-icon <<----- new id to be used in the entity config
- value: 'off'
styles:
card:
- opacity: 0.6
label:
- color: rgba(0, 0, 0, 0.0)
icon:
- color: black
name:
- color: black
state:
- color: black
id: off-icon <<----- new id to be used in the entity config
- value: 'unavailable'
styles:
card:
- opacity: 0.4
- color: grey
- --paper-item-icon-color: grey
label:
- color: rgba(0, 0, 0, 0.0)
and entity config:
- type: custom:button-card
template: button_light
name: Frontdoor
entity: light.frontdoor
state:
- value: 'on'
id: on-icon
icon: 'mdi:door-open'
- value: 'off'
id: off-icon
icon: 'mdi:door-closed'
If @RomRider confirms this is the correct way of doing so, I can shorten my config with 26 lines per entity… yea
I use Home-assistant’s core default component to display last_changed. It doesn’t update probably because on reconnect the source entity is not considered as changed, obviously because it hasn’t changed . I’ll have a look but I think it will be hard to reproduce
EDIT: If you happen to have the same thing again, could you wait for 1 minute and see if the display updates and then report back? (as the interval to update this component is 1 minute)
It will be… once this version 1.10.0 is released wich is not the case… yet
haha, ok sorry for that, couldn’t wait…
my above settings work for all my light entities, except for 1. Which is kind of strange because everything is identical. It is a lightgroup, not an individual light. The icon fades out when the brightness grows stronger!
Interesting, can you share the code of your button and the full JSON state of your entity when the brightness is at 100% please?
sure. Ive just added another is_hue_group light group, and it has the same behavior…
- type: custom:button-card
template: button_light
name: Dining
icon: 'mdi:silverware'
entity: light.dining_table
{
"min_mireds": 153,
"max_mireds": 500,
"effect_list": [
"colorloop",
"random"
],
"brightness": 254,
"color_temp": 343,
"is_hue_group": true,
"friendly_name": "Dining table",
"supported_features": 63,
"custom_ui_state_card": "state-card-custom-ui",
"icon": "mdi:silverware",
"show_last_changed": true
}
I suspect it t be a matter of contest with the button background…coincidentally these groups are made of lights without color. So the brighter they became, the closer the color if the icon approached the button color…
Its not really easy to find a general background. Ive set it to white for now (easy, 1 line in the template !) and look what’s happening to other lights when color_temperature is in the middle of the spectrum:
looking at the color wheel explains a lot:
its white in the middle.
Somehow a setting for the color should be found contrasting with the icon in auto mode…
Well well well… if the color is white, and the background is white, what should the color be? Not white means not auto I can’t do “if it’s close to your background color then it’s another color” it wouldn’t mean anything anymore
However, with the upcoming 1.10.0 that you’re trying now, there’s an option to disable matching against temperature:
color: auto-no-temperature: This will have the same effect ascolor: autobut will ignore your light temperature.
yes, that works very nicely indeed ! you’re a magician…
not sure if this is possible at all, but is seems to have a freeing effect on the whole HA instance. Could it be this lightens the load on the processor?
There is no link between the HA instance load and cards as Lovelace is purely rendered in your browser. HA has nothing to compute about what you display on your screen, it just streams status updates for all your entities to your browser through a websocket and then your browser renders everything, so it’s actually your browser which is doing all the work 
yes, that’s what I thought. Still the difference is remarkable, and can’t imagine it is coincidence.
Lovelace reloading does create a burden in the system, each and every time I refresh (upper right corner menu) the Hue lights disappear, which has come to be a signal for system capacity issues.
There is a link, just don’t know which it is.
not sure what:
causes, but websockets buffer overruns are in the logs, in abundance …