The result is same, works with only pointer. Yes, the card is working and I use it outside.
someone can help me to understand to how transform or the 3 graph with a shady background or the last smaller without the black behind?
- entities:
- sensor.0x00158d00044b3373_humidity_1
font_size: 75
line_color: blue
line_width: 8
type: 'custom:mini-graph-card'
name: Living room
hours_to_show: 24
points_per_hour: 0.5
- type: custom:button-card
aspect_ratio: 1/1
custom_fields:
graph:
card:
type: sensor
entity: sensor.0x00158d00044b3373_temperature_1
graph: line
style: |
ha-card {
box-shadow: none;
}
styles:
custom_fields:
graph:
- filter: opacity(50%)
- overflow: unset
card:
- overflow: unset
grid:
- grid-template-areas: '"i" "n" "graph"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
- type: "custom:button-card"
color_type: blank-card
thanks
I want to get the rgb color of a light as the icon color (that is not light.wz_hue_go), as you espected this isnt working here.
Can someone help me out? And as iam asking alot of questions about javascript templates lately, can someone point me a good and beginner friendly tutorial?
styles:
icon:
- color: >
[[[ return rgb(states['light.wz_hue_go'].state.attributes.rgb_color) ]]]
this must have been posted before, but I cant seem to search and find it, so please forgive me a quick question:
how can we show a button-card based on being on a certain view?
use case: I want a quick menu horizontal stack of button cards, like this:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template: button_menu_button
icon: mdi:home
tap_action:
action: navigate
navigation_path: home
- type: custom:button-card
template: button_menu_button
icon: mdi:light-switch
tap_action:
action: navigate
navigation_path: lights
but only want to show these buttons when not already on that specific view. I dont think we can do that with the core conditional card, so probably need some JS templating? If at all possible of course.
Please have a look if you can help me? Thanks !
I’m wondering if its possible to do two things on a tap_action. I’d like to call a service and change a CSS variable. I have the following SVG icon I’d like to animate (I’ve wrapped it in some HTML to load in a webpage for testing)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
svg {
--up-or-down: translateY(-50%);
}
div {width: 300px;}
</style>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<defs>
<clipPath id="doorClip">
<rect x="0" y="10" width="20" height="14"/>
</clipPath>
</defs>
<g clip-path="url(#doorClip)">
<path style="transition: 4.4s linear; transform: var(--up-or-down)" d="M4.999 17.991h14v-2h-14v2zm0 3h14v-2h-14v2zm0 2.5a.5.5 0 00.5.5h13a.5.5 0 00.5-.5v-1.5h-14v1.5zm13.5-10.5h-13a.5.5 0 00-.5.5v1.5h14v-1.5a.5.5 0 00-.5-.5z"/></g>
<path d="M23.853 11.137L13.206.491c-.643-.644-1.767-.645-2.413 0L.146 11.138a.499.499 0 00.354.854H2v11.5a.5.5 0 00.5.5h1a.5.5 0 00.5-.5v-10c0-.827.673-1.5 1.5-1.5h13c.827 0 1.5.673 1.5 1.5v10a.5.5 0 00.5.5h1a.5.5 0 00.5-.5V11.991h1.5a.5.5 0 00.353-.854z"/></svg>
</div>
</body>
</html>
Just change the var from -50% to 0 and vice-versa to see the garage door go up or down.
have another view related question:
trying to color the background in a button_template, based on the current view:
button_menu_button:
variables:
view: >
[[[ return window.location.pathname.split('lovelace/')[1]; ]]]
styles:
card:
- background: >
[[[ return variables.view ? 'gold' : 'var(--paper-card-background-color)'; ]]]
but this doesn’t work. While I can do this on a single button:
variables:
view: >
[[[ return window.location.pathname.split('lovelace/')[1] == 'home'; ]]]
and base actions on that:
hold_action:
action: >
[[[ return variables.view ? 'navigate' : 'call-service'; ]]]
why wont the top template work? cant it pass the variable to the button like this?
EDIT
No, not like that 
missed the evaluation in the action template of course…
this now works, though maybe a bit of a hack, creating variables in both the template and the button config. But hey, if it works …
Menu bar (stack)
- type: custom:stack-in-card
mode: horizontal
keep:
background: true
cards:
- type: custom:button-card
template: button_menu_button
icon: mdi:home
tap_action:
action: navigate
navigation_path: home
variables:
path: home
styles:
icon:
- color: >
[[[
return (states['sensor.count_alerts_notifying'].state > 0)
? 'red': 'green';
]]]
- type: custom:button-card
template: button_menu_button
icon: mdi:light-switch
tap_action:
action: navigate
navigation_path: lights
variables:
path: lights
styles:
icon:
- color: >
[[[
return (states['group.all_inside_lights'].state == 'on')
? 'gold': 'grey';
]]]
etcetc
and template:
button_menu_button:
variables:
view: >
[[[ return window.location.pathname.split('lovelace/')[1]; ]]]
size: 25px
styles:
icon:
- color: var(--secondary-text-color)
card:
- background: >
[[[ return variables.view == variables.path
? 'var(--secondary-background-color)' : 'var(--paper-card-background-color)';
]]]
btw, I went away from the q-card, because the power of that card is the weakness in my current quest: it creates 1 card, which is used everywhere it is called. And I need a dedicated card everywhere on each view, it should re-render. So went for a simple !include.
title: Home
icon: mdi:home
path: home
cards:
# - type: custom:q-card
# card: shortcut_menu
- !include /config/lovelace/buttons/buttons_shortcut_menu.yaml
Could you post the config of that media player? Looks very neat !
Hi , i am trying to create a template but it does not recognize the entity , can someone help me to how fill it ?
template :
graph_button_style:
template: homekit_style
aspect_ratio: 1/1
name: '[[[ return entity.attributes.friendly_name ]]]'
custom_fields:
graph:
card:
type: sensor
entity: "[[entity]]"
graph: line
style: |
ha-card {
box-shadow: none;
}
styles:
custom_fields:
graph:
- filter: opacity(50%)
- overflow: unset
card:
- overflow: unset
grid:
- grid-template-areas: '"i" "n" "graph"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
entity: "[[entity]]"
hold_action:
action: more-info
card
- type: custom:button-card
template: graph_button_style
entity: sensor.0x00158d00044b3373_temperature_1
show_entity_picture: true
and error
thanks
Is there a possibility to abbreviate the last_changed text ?
Sometimes the message in dutch (e.g. ‘55 minuten geleden’) does not fit. Would be nice if it could be abbreviated like ‘55m geleden’ or ‘55 min geleden’.
in need of adding some css filters to a js template like this
card:
- background: >
[[[ return variables.view == variables.path
? 'var(--secondary-background-color)' : 'var(--paper-card-background-color)';
]]]
I haven’t found the correct syntax to do so yet. I’d want the brightness of the ? to be 110% and the : to remain as is. for a set of other buttons, I’d need the contrast filter
Is that possible?
UPDATE: I’ve now accomplished the same thing by converting the SVGs to custom icons, but I’d still be interested to know if it’s possible to color SVGs as entity-pictures.
Hi, all -
Is it possible to change the color of an SVG image used as entity-picture?
I would like to be able to do something like this, which of course doesn’t work:
type: 'custom:button-card'
entity: binary_sensor.linktap_left_sprinkler
entity_picture: /local/images/logos/Logo_LINKTAP_Black.svg
show_entity_picture: true
state:
- value: 'on'
styles:
entity_picture:
- color: green
- value: 'off'
styles:
entitiy picture:
- color: red
After some googling, it seems like this might be possible using CSS. But, I don’t really know where to start.
Thanks!
Hello,
Can you share all the code of this window please, I can not do it in my system
Hello, a nobbies question: How do you create the animated SVG???
I’m having a lot of difficulty in this.
Thanks e congratulations on the layout.
must have missed this before (since the ‘triggers_update’ was introduced) but in a heavy rewrite of several counting buttons now notice they are no longer working, on entities using a group. A mere count lights button with label
[[[
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);
]]]
only updates on refresh of the view… Of course I am fully aware of the fact the group only changes state on all or nothing, but this seems to be a major issue, since I cant start adding all entities to the button… or write autmations to somehow update this, since that would involve the same backend overhead.
Couldn’t the button be adapted to auto-expand the entities and ‘listen’ to these, when a group is used for entity?
using this template:
button_title_counter:
aspect_ratio: 16/1
layout: icon_label
show_icon: true
size: 60%
show_label: true
show_state: false
show_name: false
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- background-color: var(--background-color-off)
- color: var(--text-color-off)
- padding: 4px
icon:
- color: var(--icon-color-off) #grey
label:
- color: black #'#555B65'
- font-family: Helvetica
- font-size: 14px
- font-weight: bold
- justify-self: start
the icon and label are only correctly centered on desktop in a 1 column view:
if I resize to 2 column, the icon moves down:
and on the 1 column view in the iOS app, it never shows correctly:
Ive tried adding an align center property to the icon (the label is always fine) but that has zero effect.
what am I missing here, please have a look?
Hello all! sry for my bad english!
Anyone knows if its possible to add a countdown timer on a light button for example?
Countdown that starts when i press it? 
i know how to make a timer but not how to add it on a on/off button.
Thanks !
I need help find the right size for my climate card. It will not scale the right way.
How can i set it in the center of my button?
My template:
thermostat:
aspect_ratio: 1/1
show_state: false
show_icon: false
show_name: false
state: *button_state
custom_fields:
ac:
card:
entity: '[[[ return entity.entity_id ]]]'
type: thermostat
styles:
card: [overflow: unset, font-family: Sf Display, letter-spacing: 0.05vw, text-rendering: optimizeLegibility, font-weight: 400, color: 'rgba(255, 255, 255, 0.3)', font-size: 1.54vw, background-color: 'rgba(115, 115, 115, 0.2)', border-radius: 0.8vw,]
custom_fields:
ac:
- filter: opacity(100%)
- padding: 10%;
- --paper-card-background-color: 'rgba(115, 115, 115, 0)'
tap_action:
and my button config:
- type: custom:button-card
entity: climate.room_climate_tom
style:
top: 42%
left: 30%
width: 8%
template: thermostat
The climate card can’t scale that small. Even if you were to get it in the center it would still chop off edges and look weird.
Oha, thats sad. i like the look of the button with it inside 