sorry if I mistakenly tagged you… and, thanks!
text-transform is so simple I forgot to think about it
you mean like this:
level:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- text-transform: capitalize
- --text-color-sensor: >
[[[ return entity.attributes.awareness_level.split(' ')[1].slice(0,-1) ]]]
or should I set it in the field config itself…
level: >
[[[
return `<ha-icon
icon=${'mdi:numeric-' + entity.attributes.awareness_level.split(';')[0] + '-box'}
style='width: 12px; height: 12px;'>
</ha-icon><span>Level: <span style='color: var(--text-color-sensor) text-transform: capitalize;'>${entity.attributes.awareness_level.split(' ')[1].slice(0,-1)}</span></span>`
]]]
sorry I ask, but I cant test it at the moment, since the binary_sensor.meteoalarm this is based on doesn’t exist at the moment…
even so, can you explain why can’t I use the variable --color-name in the field config?
update
new weather alert
and bingo, thanks @iantrich , works perfectly:
denver
December 17, 2019, 12:52pm
2776
I have an issue when using the buttons on a tablet, on the computer the mouse click switches the dining room lights on and off ok, but with the touch control on the wall tablet the button bulb icon becomes out of sync. In other words sometimes when touching the button the dining room lights turn on but the colour of the bulb icon on the button doesn’t change its colour, If I triple touch the button quickly I can get the button icon back in sync again. Any ideas please.
This is part of my code in the Lovelace card entry:
cards:
- entity: switch.dining_room_lights
icon: 'mdi:lightbulb-on-outline'
name: Dining Room
show_state: false
type: 'custom:button-card'
mase
December 20, 2019, 8:47am
2777
is it possible to get the graph working on a button that is 95px high?
and that what i have in mind:
- type: 'custom:button-card'
aspect_ratio: 1/1
custom_fields:
graph:
card:
type: sensor
entity: sensor.heizung
graph: line
style: |
ha-card {
box-shadow: none;
}
styles:
custom_fields:
graph:
- filter: opacity(50%)
- overflow: unset
card:
- overflow: unset
- height: 95px
grid:
- grid-template-areas: '"i" "n" "graph"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
1 Like
johntdyer
December 21, 2019, 8:58pm
2778
@hwoltering - Did you ever get this to work ? i’m getting the same error right now and now sure how to debug it
jimz011
December 22, 2019, 12:28am
2779
Hello everyone, I have a question as I am not real good at templating. I was wondering if it would be possible to do something like this in the button-card.
{{ states|selectattr('entity_id','in',state_attr('group.electrics','entity_id'))|selectattr('state','eq','on')|list|count }}
It can count the devices that are ‘on’ in a specific group. I currently do this with a template sensor in the backend. But one of the Home Assistant devs told me it would be better to do this through the frontend. So I wonder if it would be possible to do something like this with button-card and templates. The templates in button-card are different than the jinja ones so I could use some help here.
Thanks in advance.
iantrich
December 22, 2019, 12:55am
2780
I disagree with it being better todo in the frontend. This is exactly where a template sensor shines.
1 Like
iantrich
December 22, 2019, 12:57am
2781
You’ll probably want to grab just the graph from the mini card and do the name and state in the button card so you can arrange them as you want.
jimz011
December 22, 2019, 1:10am
2782
That is initially what I thought, but Frenck asked me why I would create a backend problem whilst it is better as a frontend problem. (I don’t know why though). Either way would work fine for me, I was just wondering if and how this could be possible using a button-card.
Edit: The problem I currently have is that the code above doesn’t update the counter. I currently have a template sensor where all the entities I want in there are defined one by one. This does update the sensor in realtime however it is harder to setup. I wanted to create a sensor which would count the lights in a group but without the need of creating an automation (where I would have to define all those same entities again). He actually told me, the frontend already knows what the states are and there is no need to ‘bother’ the backend with it. So if I could get this from a group than it would be a lot easier to use (and to set up for other people that copy my config).
mase
December 22, 2019, 10:01am
2783
i got it somewhat working, but i can´t figure how to get the graph bigger.
type: horizontal-stack
cards:
- type: 'custom:button-card'
aspect_ratio: 1/1
show_name: false
show_label: true
show_icon: false
show_state: false
custom_fields:
graph:
card:
type: 'custom:mini-graph-card'
height: 50
line_width: 2
show:
fill: false
name: false
icon: false
state: false
points: false
legend: false
avergage: false
labels: false
entities:
- entity: sensor.heizung
styles:
custom_fields:
graph:
- filter: opacity(50%)
label:
- font-size: 15px
- justify-self: start
- padding: 1px 1px
- padding-bottom: 0px
card:
- overflow: unset
- height: 95px
grid:
- grid-template-areas: '"graph" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
entity: climate.all
label: '[[[ return entity.attributes.current_temperature + "°C" ]]]'
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
This is exactly why you need this in the backend… simply add entity_id sensor time to the template you have, and it updates every minute. Unless you truly want to update it on each individual state and indeed need to list them
You might be able to do as you want with the auto-entities card and filter on the group and state ‘on’
It wouldn’t be a button though …
jimz011
December 22, 2019, 3:32pm
2785
I have it in the backend. The only reason I ask this is because the HA devs told me it would be better to do this in the frontend. No other reason. In my logic the backend would be more suited as well.
However you are right, I do need it to change state in realtime. That is why they are defined one by one. Thanks for the answers though. I still wish there was a way to do it simpler and be realtime.
you could use this automation to update the sensor, instead of using time:
- alias: 'State changed Ikea Light'
id: 'State changed Ikea Light'
trigger:
platform: event
event_type: state_changed
condition:
condition: template
value_template: >
{{ trigger.event.data.entity_id in state_attr('group.ikea_tradfri_lights','entity_id') }}
action:
as you can see, this updates based on ikea lights in the group. If you adapt it to your group, and use the homeassistant.update_entity service on the sensor, you’d have all you want.
2 Likes
jimz011
December 22, 2019, 9:52pm
2787
Thanks @Mariusthvdb as always good stuff. I will try this.
jimz011
December 23, 2019, 9:51pm
2788
You are the man! This actually works like a charm and was exactly what I was looking for. Thanks a lot!
1 Like
I have a problem after working with Conditions on my Remote Card.
On the left is my normal Remote. And on the right is the one with me conditions.wierd spaced area
Anyone with some insight to why this is?
Ill post my cards code under the Picture.
cards:
- entities:
- sensor.harmonyicon
- input_select.living_room_tv
- input_select.freetoair
show_header_toggle: false
title: Vardagsrums Fjärrkontroll
type: entities
- cards:
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:exit-to-app'
name: HDMI 1
show_icon: false
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi1
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-up'
name: HDMI 2
show_icon: false
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi2
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:menu'
name: HDMI 3
show_icon: false
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi3
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:volume-plus'
name: HDMI 4
show_icon: false
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi4
type: horizontal-stack
- cards:
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:exit-to-app'
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_exit
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-up'
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_upp
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:menu'
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_menu
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--primary-text-color)
color_type: icon
double_tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_ljud_upp_2
hold_action:
action: call-service
repeat: 500
service: script.turn_on
service_data:
entity_id: script.harmony_ljud_upp_5
icon: 'mdi:volume-plus'
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_ljud_upp
type: horizontal-stack
- cards:
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-left'
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_left
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:smoke-detector'
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_ok
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-right'
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_right
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--primary-text-color)
color_type: icon
double_tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_ljud_ner_2
hold_action:
action: call-service
repeat: 500
service: script.turn_on
service_data:
entity_id: script.harmony_ljud_ner_5
icon: 'mdi:volume-minus'
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_ljud_ner
type: horizontal-stack
- cards:
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:volume-off'
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_mute
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-down'
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_ner
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:keyboard-return'
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_prev
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:arrow-up-bold'
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_channel_up
type: horizontal-stack
- cards:
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:gamepad-variant'
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.gamemode
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:play-pause'
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_play
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:television-guide'
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_guide
- type: conditional
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
card:
type: 'custom:button-card'
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:arrow-down-bold'
size: 25%
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_channel_down
type: horizontal-stack
type: vertical-stack
As one Replied it all about the Custom areas of your template. And then just move the code to that area with a copy paste. So look in the template of the button. I think That area is called “tempfield” that your info needs to be moved to. Well atleast if your using the template button most people are using here to make it look like yours do.
yoni3210
December 26, 2019, 8:16am
2791
Can you please help? I tried everything and it’s not working.
Thank you!
how can I make 4 sensors with each other like a list on a card?
Can me where help?
On my iPad 2019 7th Generation and iPadOS 13.2.3, I still have the reported issue that in the iOS App a button click tiggers twice. A workaround that was reported some weeks ago is to enforce desktop pages in Safari but this does not work for the app.
Is there any hotfix for the button card to remedy this new browser behavior in the new iPadOS?
krovachek
December 26, 2019, 9:29pm
2795
For example:
custom_fields:
cpu: |
[[[
return `<ha-icon
icon="mdi:cpu-64-bit"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.processor_use'].state}%</span></span>`
]]]
ram: |
[[[
return `<ha-icon
icon="mdi:memory"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.memory_use'].state}MB</span></span>`
]]]
sd: |
[[[
return `<ha-icon
icon="mdi:harddisk"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span>SSD: <span style="color: var(--text-color-sensor);">${states['sensor.disk_use_percent_home'].state}%</span></span>`
]]]
speed: |
[[[
return `<ha-icon
icon="mdi:pulse"
style="width: 14px; height: 14px; color: deepskyblue;">
</ha-icon> <span> <span style="color: var(--text-color-sensor);">${states['sensor.cpu_speed'].state} GHz</span></span>`
]]]
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 14px; height: 14px; color: orange;">
</ha-icon> <span>${entity.state}°C</span>`
]]]
entity: sensor.cpu_temp
icon: 'mdi:raspberry-pi'
name: NUC
show_icon: true
styles:
card:
- background: 'linear-gradient(rgba(255,255,255,0.1) 50%, rgba(0,0,20,0.3)50%)'
- border-radius: 15px
- border: 'solid 1.5px rgba(57,128,228)'
- color: ivory
- font-size: 11px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
- height: 132px
- width: 132px
- padding: 4%
custom_fields:
cpu:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': '[[[ if (states["sensor.processor_use"].state > 80) return "red"; ]]]'
ram:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': '[[[ if (states["sensor.memory_use"].state > 4000) return "red"; ]]]'
sd:
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.disk_use_percent_home"].state > 80) return
"red"; ]]]
speed:
- font-size: 14px
- justify-self: end
- margin-top: '-5px'
temp:
- font-size: 14px
- justify-self: end
- margin-top: '-5px'
grid:
- grid-template-areas: '"i temp""speed speed" "n n" "cpu cpu" "ram ram" "sd sd"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
icon:
- color: |
[[[
if (entity.state < 60) return 'dodgerblue';
if (entity.state >= 60 && entity.state < 80) return 'orange';
else return 'red';
]]]
- width: 70%
- margin-top: '-5%'
img_cell:
- justify-content: start
- align-items: start
- margin: none
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
tap_action:
action: navigate
navigation_path: 'https://xxxxxxxxxxxxx.duckdns.org/lovelace/8'
type: 'custom:button-card'
