Just wanted to send a BIG thank you to everyone who has helped me these last several weeks, including but certainly not limited to @RomRider, @petro, and @Mariusthvdb. Without your help, I wouldn’t have made anywhere near the same progress in improving my buttons, graphical complexities, and overall layout. Button card has come a long way in such a short time and it continues to inspire me to make “all the things” look and function better. I may have even learned a thing or two (or three).
So thank you, everyone!
Gratuitous before (left) and after (right) screenshots below.
Things below will work with the version that I’ll publish later today (1.10.1). Waiting on another PR in a library.
That’s the result with the new config below (I didn’t change much). Note that I used the template feature, but you can change to use anchoring if you prefer:
Also you can’t specify a height or a width if you specify aspect_ratio, it will not work
Regarding the size: xx%: before, if you had specified a height on the card, the icon would be cropped as it wasn’t scaling based on the height of the card and you’d have to use size: xx% to resize it. Now it’s fixed in 1.10.0, it will scale both based on the width AND height of the card.
Maybe it was not clear in my release notes, but as you I’m not a native english speaker, I’m french
I can’t reproduce this issue, can you share your config please?
You should set a blank-card on the row to fill an empty space yes. However, if you set 4 buttons on the row for example, it will take the full width if you use aspec_ratio on the 4 buttons. And will scale on all your devices.
I don’t have this problem. Make sure you use the latest release and have cleared your cache. Also make sure you don’t specify a width or a height.
Here’s the anchor. The aspect ratio isn’t doing anything. If i remove the layout it appears to partly work, but when I squeeze the browser, the button elongates. If I fully remove all the styles, the buttons work as expected.
# 105 x ? GLOW - THEME - OVERVIEW COUNTER - 3 BUTTONS PER ROW
cb_overview_counters: &cb_overview_counters
type: custom:button-card
layout: icon_state
color: auto
aspect_ratio: 1/1
show_state: false
show_name: true
show_label: true
label_template: >
var i;
var status = entity.state;
var entities = entity.attributes.entity_id;
var count = 0;
for (i = 0; i < entities.length; i++) {
var state = states[entities[i]].state;
if (state === 'on') {
count += 1;
}
}
var phrase = (count === 1 ? ' light ' : ' lights ');
return (status === 'on' ? count.toString() + phrase + status : status);
styles:
grid:
- grid-template-rows: 42px auto 42px
- grid-template-columns: 42px auto
card:
- border-radius: 15px
- margin: 8px 0px 0px 0px
- padding: 0px 0px
icon:
- align-self: end
- height: 30px
- width: 30px
name:
- justify-self: start
- padding: 0px 10px
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- text-transform: capitalize
- font-weight: bold
- align-self: end
- justify-self: start
- padding: 9px 10px
lock:
- align-items: flex-end
state:
- value: "on"
styles:
card:
- --paper-card-background-color: rgba(40, 40, 40)
- box-shadow: 0px 0px 10px 3px var(--button-card-light-color)
name:
- color: white
state:
- color: white
label:
- color: white
tap_action:
action: toggle
hold_action:
action: more-info
Aspect ratio works in both of your case on my setup (FF, Chrome and Safari) with the latest dev version.
Could you please replace button-card.js with this file (it’s from the next upcoming release), test again and report back (clear your cache or use the /customcards/ endpoint to serve your cards): https://raw.githubusercontent.com/custom-cards/button-card/dev/dist/button-card.js
@RomRider yes I figured that size/heigth/width and aspect_ratio do not play so nice. Par tout facon, I’m going to rework everything again anyways because I’d like to make use of the new config options. Merci beaucoup (no French isn’t my native language either haha)
maybe even worse , see last button left with the moon icon.
family buttons show identical, with a wider background left and right than top bottom.
(this is the dev version, not the release you posted after that, wil test also)
just to post separately:
this is nearing perfection now!
the way I create all my button configs is using the aspect_ratio: 1/1 in the templates (of course for square buttons…) and have the horizontal filler template to keep the buttons from touching the edges of the display. Also I use the blank card to keep ‘grids’ together, and have eg a set of 7 buttons on 2 rows have the buttons in the identical size showing top 4 and bottom 3 buttons.
very nice, and I wonder if we even need an extra grid card as suggested before, to replace the Tiles card.
2 sets of buttons:
8: 2 stacks of 4
3 1 stack of 3
cropped down revealing yet another set of buttons:
(Srry I said 50px before but I meant 60px) if you have 4 buttons in a row, meaning smaller buttons, you could use 45px instead). Just keep in mind that it doesn’t align the same on larger screens as on smaller screens if you do not use a fixed width/height.
It’s our new build system that we’ll use soon to do releases 