That didn’t work for me but it worked doing that:
template:
- sensor:
- name: "Time spent home Lovalace"
state: >
{% set list = states('sensor.time_at_home').split('.') %}
{{ list[0] }}h {{ (60 * ('0.'~list[1]) | float) | round(0) }}m
Where ‘sensor.time_at_home’ is the history stat sensor
Thanks all including the devs for this card.
Im finally shaping my dashboard the way I wanted.
Few more cleanups, tweaks to do. When completed, Ill share my code and resources if anyone is interested.
Hi there anyone knows an anwser to this:
I want to show 2 states of different entities in one button.
I’ve got the state of my weather entity but I also want to show the temprature which is another entity so maybe it can be done by label or something.
button:
type: custom:button-card
entity: weather.buienradar
show_name: false
show_state: true
state:
- value: cloudy
color: white
icon: mdi:cloud
- value: clear
icon: mdi:weather-sunny
- value: fog
icon: mdi:weather-fog
- value: rainy
icon: mdi:weather-pouring
- value: snowy
icon: mdi:weather-snowy
- value: lightning
icon: mdi:weather-lightning
styles:
card: null
icon:
- width: 42px
- height: 42px
- padding: 18%
- color: white
- border-radius: 50%
name:
- font-size: 14px
- font-weight: bold
state:
- font-size: 14px
- font-weight: bold
Look way, way, back in this thread (here: Fun with custom:button-card - #94 by qoheleth) and you’ll see a way to put multiple entity states on a single card.
Don’t use static button sizes, use aspect ratio
My code doesn’t work, can anybody help me?!
venue: >
[[[ return {{states['sensor.venue_england'].attributes['response']
|selectattr('name','search', variables.venue)
|map(attribute='image')
|list
|replace("]","")
|replace("[","")
|replace("'","") }}
]]]
custom button card uses JS templates, not jinja templates.
Ok, thanks!
it’s possible to do this same filter with js?
Is there a way to have a script for several buttons? For example lets say I have 4 custom buttons, they all call the same script but in the script I want something like this:
- service: number.set_value
data_template:
{% set entity_id = 'number.'+button_name %}
value: 140
it is, but the syntax is completely different and much harder. It’s probably better to just do your template in a template sensor’s attribute and display the attribute.
venue: >
[[[
return states['sensor.venue_england'].attributes['response'].filter(item => item.name.includes(variables.venue)).map(item => item.image).join(', ');
]]]
No idea if that will work as I had to google all the calls.
EDIT: You might need to change item.image to item['image']. Same goes for item.name.
works perfectly. Thanks…
Hello guys.
How can I set a css style of button-card html element from within a JS template of a custom button card?
The goal is to hide the card completely when some conditions are met. Here is my attempt but it doesn’t work (see below why)
- type: custom:button-card
template: subsection_bottom
entity: binary_sensor.garbage_mixed
show_icon: true
styles:
card:
- display: >
[[[ return (states['binary_sensor.garbage_mixed'].state
!= 'on' ? 'none' : 'undefined') ]]]
it seems that documentation is not 100% precise:
The style object members are:
card: styles for the card itself. Styles that are defined here will be applied to the whole card and its content unless redefined in the elements below.
The method is good if I want to hide a card, leaving an empty space in the layout instead.
It’s because styles set in the card: apply to ha-card element which is yet wrapped by button-card element. I need to set display:none to the latter, but being able to use JS template at the same time.
Probably I have to use card mod, but not sure how to address button-card - the card’s most parent element.
Incidentally there is an issue reported to the card author with the same question. Fortunatelly (to me), some other user posted there an workaround.
Can anyone help?
I have used the custom fields function to combine two entities into one card. I want to remove the name of the bottom entity (EV Power Draw) but I cannot figure out how.
custom_fields:
graph:
card:
entity: sensor.ev_power_energy
style: |
ha-card {
box-shadow: none;
}
type: sensor
entity: binary_sensor.leaf_charging
hold_action:
action: more-info
name: Leaf Charging
state:
- color: rgb(3,169,244,255)
icon: mdi:car
name: Not Charging
value: 'off'
- color: green
icon: mdi:car-electric
name: Charging
operator: default
styles:
card:
- overflow: unset
custom_fields:
- filter: opacity(50%)
- overflow: unset
grid:
- grid-template-areas: '"i" "n" "graph"'
type: custom:button-card
I have read and re-read the doc but I am struggling to figure this one out. Can anyone tell me whats wrong with my yaml?
Thanks
I believe that title is part of the graph. (That’s the only thing that makes sense.)
What I don’t know is how to un-title the graph.
You are using a sensor card that is not much configurable.
I cannot see the graph which I expect should be the main reason of using this type of card.
But if you really want to stick with this card, the only way is to use card-mod to remove the name part (find the object in html tree and set display css property to none)
You can also use other cards which are more configurable, like apexcharts-card or mini-graph-card
Gloss buttons theme.
Ok, Im not an expert in coding, based on what I learned and little bit of photshop, I created this for my dashboard tablets and phones that work well. Enjoy : 
I saved my images under www folder
\192.1xx.x.x\config\www\images
Sample codes for a RGB Light
color: black
color_type: card
aspect_ratio: 2/1
entity: light.sofa_lamp_1
name: Sofa Lamp 1
state:
- value: 'on'
styles:
card:
- background-image: url('/local/images/button_b1.png')
- background-size: cover
- border-radius: 0%
- padding: 4%
icon:
- color: var(--button-card-light-color)
icon: mdi:floor-lamp-dual
- operator: default
styles:
card:
- background-image: url('/local/images/button_bk1.png')
- background-size: cover
- border-radius: 0%
- padding: 4%
icon:
- color: grey
icon: mdi:floor-lamp-dual-outline
type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
Sample for Home security button on preview with little blink animation.
color: black
color_type: card
aspect_ratio: 2/1
entity: input_boolean.home_security
name: Home Security
state:
- value: 'on'
styles:
card:
- background-image: url('/local/images/button_g1.png')
- background-size: cover
- border-radius: 0%
- padding: 9%
icon:
- animation: blink 3s ease infinite
- color: white
icon: hass:shield-home
- operator: default
styles:
card:
- background-image: url('/local/images/button_r1.png')
- background-size: cover
- border-radius: 0%
- padding: 9%
icon:
- animation: blink 1s ease infinite
- color: grey
icon: hass:shield-home
type: custom:button-card
tap_action:
action: none
hold_action:
action: more-info
Can anyone help me with the correct syntax for a sensor state in a span, so that it can be styled.
This is not working:
[[[
return "<ha-icon icon=mdi:wifi style='width:12px; height:12px;'></ha-
icon><span>${states['sensor.signalstrength_screen_dubbeledeuren'].state}</span>"
]]]
This is from the documentation looks the same to me:
<span style="color: var(--text-color-sensor);">${states['sensor.raspi_cpu'].state}%</span>
Thanks