I’ve got a question regarding the sizing of the custom button card:
I try to define the the layout of my button card in a relative manner so that it scales nicely (still a work in progress):
button_template:
variables:
svg_icon: null
corner: null
name: "[[[ return entity.attributes.friendly_name ]]]"
color: auto
color_type: icon
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: var(--button-card-on-background)
- color: var(--button-card-on-text-color)
- value: 'unavailable'
styles:
icon:
- color: var(--button-card-disabled-text-color)
name:
- color: var(--button-card-disabled-text-color)
# lock:
# enabled: false
# duration: 5
# unlock: tap
show_last_changed: false
custom_fields:
svg_icon: "[[[ return variables.svg_icon ]]]"
corner: ""
corner_2: ""
cust_1: "[[[ return entity.state ]]]"
cust_2: ""
# Styles of the card
styles:
# Card style itself
card:
- padding: 10% # Padding between card edge and contents
- font-size: 12px # Font pixel size of the card, actual fonts are based relative to this value
- text-transform: capitalize
- font-family: -apple-system, system-ui, BlinkMacSystemFont
- border-radius: var(--button-card-border-radius)
- background-color: var(--button-card-background-color)
- color: var(--button-card-text-color)
- backdrop-filter: blur(20px)
icon:
- transform: scale(1.5,1.5)
- top: -20%
- left: 2%
- width: 35%
- position: absolute
- opacity: >
[[[ return variables.svg_icon == null ? 1 : 0; ]]]
# Properties of the entity name text
name:
- font-size: 1.20em # Text size of the entity name (relative to card font size)
- font-weight: bold
- top: 60%
- left: 10.1%
- position: absolute
- text-align: left
- width: 80%
# Lock properties
# lock:
# - color: var(--button-card-lock-color)
# Properties of the custom fields
custom_fields:
svg_icon:
- top: 11.5%
- left: 11.5%
- width: 35%
- position: absolute
corner:
- top: 11.5%
- right: 8%
- max-width: 35% # Max width to prevent text from overlapping with icon
- padding-left: 0.5em # Add some space between rounded edge and the text
- padding-right: 0.5em # Add some space between rounded edge and the text
- position: absolute
- font-size: 1em # Font size relative to card font size
- font-weight: bold
- text-align: middle
- color: var(--button-card-corner-on-text-color)
- border-radius: 1em # Should be half the height for a round edge
- opacity: 0 # Make it invisible by default
- background-color: var(--button-card-corner-background-color)
- line-height: 2em
- height: 2em # Must be equal to the line-height
corner_2:
- top: 25%
- right: 8%
- position: absolute
- color: var(--button-card-corner-text-color)
cust_1:
- top: 75%
- left: 10.1%
- text-align: left
- position: absolute
- font-weight: bold
- color: var(--button-card-cust-1-text-color)
cust_2:
- top: 70%
- right: 10.1%
- text-align: right
- position: absolute
- color: var(--button-card-cust-2-text-color)
But when I load it on my phone and laptop, I get different presentations:
Laptop:
Phone:
Do you have any clue how I can make the layout of these cards the same?
state_display: |
[[[
var active_speaker_state = (states[variables.active_speaker].state);
var active_speaker_media_artist = (states[variables.active_speaker].attributes.media_artist);
var active_speaker_media_title = (states[variables.active_speaker].attributes.media_title);
if (active_speaker_state === 'playing') return `<div style="animation: marquee 8s linear infinite;display: inline-block;padding-left: 100%;">${active_speaker_media_title}</div>`;
else return " ";
]]]
I now have scrolling song title - this will always scroll now though even if the text fits on the card. Not sure how i implement an IF width greater than clause within the CSS.
I didnt say it didnt work, it did work but its a depreciated tag. Also the tag itself has some odd margin/padding which i couldnt be bothered to fix so i went the other route after looking at your examples.
i am very new to the custom button card, but i like it a lot.
One Question i have at the moment is, is it possible to “call” a different card with double-tap for example.
What i want to achieve is the following:
tap_action: => Open or Close a Cover (that works great)
double_tap_action: => call different card to set the postion (that does not work )
The option more-info is not the thing i like at this point
Perhaps anybody can share how he/she has achieved something like that
Is it possible to set an entity name as an var and use it in template. I got an card it already partially templated but want to move the rest over to the template side, because all the setting is the same with the exception of entity name.
############## Picture Element Main Light Entities ##############
- type: "custom:button-card"
entity: light.hall_way_walkway
template: light_element_button
style:
left: 54.5%
top: 33%
######### want to move this section into template #########
entity_picture: |
[[[
if (states['light.hall_way_walkway'].state == 'off')
return "/local/photos/lovelace_photos/general/recessed_light_off.png";
return "/local/photos/lovelace_photos/general/recessed_light_on.png";
]]]
custom_fields:
light_bri: |
[[[
var bri = states['light.hall_way_walkway'].attributes.brightness;
if (bri > 0)
return Math.floor(bri/255 * 100) + '%';
return
]]]
######### want to move this section into template #########
)