OK. Thanks for the hint. But it doesn’t work with this option. If i try to click nothing happens.
chips_temp_nas:
template: chips
tap_action:
action: more-info
label: |
[[[
var temp = states['sensor.ds218plus_temperature'].state;
return '🌡️' + " " + temp + '° | DS218+';
]]]
chips_used_space_nas:
template: chips
tap_action:
action: more-info
label: |
[[[
var spacetotal = states['sensor.ds218plus_volume_1_used_space'].state;
var spacepercent = states['sensor.ds218plus_volume_1_volume_used'].state;
return '💾' + " " + spacetotal + " TB | " + spacepercent + " %";
]]]
1 Like
bms
August 19, 2021, 11:25am
216
@flirtysanchez Ah yes, I see the next problem.
chips_temp_nas:
template: chips
entity: sensor.ds218plus_temperature
tap_action:
action: more-info
label: ......
or specify an entity in your tap_action:
chips_temp_nas:
template: chips
tap_action:
action: more-info
entity: sensor.ds218plus_temperature
label: ......
2 Likes
clemalex
August 20, 2021, 8:55pm
219
No time to continue tonight.
Be careful, these are the old names.
It is necessary to adapt the ‘generic’ template to finish the job…
To share work already done
Left card
#left card
type: custom:button-card
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 0px
grid:
- grid-template-areas: '"item1" "item2" "item3" "item4" "item5" "item6"'
- grid-template-columns: 1fr
- grid-template-rows: min-content
custom_fields:
item1:
card:
entity: sensor.canon_mg5700_series
name: Canon MG5750
template:
- icon_info
- generique
styles:
card:
- padding: 12px
type: custom:button-card
item2:
card:
type: custom:bar-card
name: BK
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: black
entities:
- entity: sensor.canon_mg5700_series_black_bk
style: |
bar-card-currentbar{
border: 0.01rem solid rgb(226,226,226);
}
bar-card-backgroundbar{
display: none;
}
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item3:
card:
type: custom:bar-card
name: B
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: black
entities:
- entity: sensor.canon_mg5700_series_black_pgbk
style: |
bar-card-currentbar{
border: 0.01rem solid rgb(226,226,226);
}
bar-card-backgroundbar{
display: none;
}
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item4:
card:
type: custom:bar-card
name: 'Y'
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: rgb(250,179,0)
entities:
- entity: sensor.canon_mg5700_series_yellow
style: |
bar-card-currentbar{
border: 0.01rem solid rgb(226,226,226);
}
bar-card-backgroundbar{
display: none;
}
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item5:
card:
type: custom:bar-card
name: M
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: rgb(248,75,122)
entities:
- entity: sensor.canon_mg5700_series_magenta
style: |
bar-card-currentbar{
border: 0.01rem solid rgb(226,226,226);
}
bar-card-backgroundbar{
display: none;
}
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item6:
card:
type: custom:bar-card
name: C
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: rgb(66,126,222)
entities:
- entity: sensor.canon_mg5700_series_cyan
style: |
bar-card-currentbar{
border: 0.01rem solid rgb(226,226,226);
}
bar-card-backgroundbar{
display: none;
}
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px 16px 16px;
}
animation:
state: 'off'
Right Card
type: custom:button-card
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 0px
grid:
- grid-template-areas: '"item1" "item2" "item3" "item4" "item5" "item6"'
- grid-template-columns: 1fr
- grid-template-rows: min-content
custom_fields:
item1:
card:
entity: sensor.canon_mg5700_series
name: Canon MG5750
template:
- icon_info
- generique
styles:
card:
- padding: 12px
type: custom:button-card
item2:
card:
type: custom:bar-card
name: BK
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: black
entities:
- entity: sensor.canon_mg5700_series_black_bk
style: |
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item3:
card:
type: custom:bar-card
name: B
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: black
entities:
- entity: sensor.canon_mg5700_series_black_pgbk
style: |
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item4:
card:
type: custom:bar-card
name: 'Y'
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: rgb(250,179,0)
entities:
- entity: sensor.canon_mg5700_series_yellow
style: |
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item5:
card:
type: custom:bar-card
name: M
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: rgb(248,75,122)
entities:
- entity: sensor.canon_mg5700_series_magenta
style: |
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item6:
card:
type: custom:bar-card
name: C
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: rgb(66,126,222)
entities:
- entity: sensor.canon_mg5700_series_cyan
style: |
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px 16px 16px;
}
animation:
state: 'off'
11 Likes
paddy0174
August 21, 2021, 10:13pm
221
Please do not cross post over different threads! Stay in the one you asked the question first. People have already answered there and it is cluttering the threads more than it is useful.
Despite that mostly the same people will try to answer your question and spreading information over different threads makes answering more difficult!
Thank you!
EDIT: Here we go:
How to correctly read attribute state from entity in JSTemplate.
I try like this but not working:
- template:
- ventilo_buttons
variables:
entity: fan.haos_vir_balcony_light_n_fan
entity_light: light.haos_vir_balcony_light_n_fan
name: Balkon
type: custom:button-card
[[[
if (entity.state == 'off'){
return 'Off' + ' • ' + …
1 Like
lpt2007
August 22, 2021, 9:49am
222
Sorry for that.
Later I was thinking that this question is more suitable for this thread, because if I put entity out of variables card is not working. Probably not the right way to put entity in variables, but card is working. Only problem that I have, I can not read states and attributes from entity if entity is in variables, or I am doing something wrong in JSTemplate. JSTempling is relatively new to me and I am still learning.
steinis
August 22, 2021, 5:42pm
223
Have you changed something in the icon_info_bg template regards the binary_input to show automatic light status? I get the following error when I try to add this card:
ButtonCardJSTemplateError: TypeError: Cannot read property 'state' of undefined in 'return entity.state === 'off' ? 'Active' : 'Ikke active''
paddy0174
August 22, 2021, 11:47pm
224
Small note:
If you use the light-slider , DO NOT UPDATE your ha-slider-card
I’ll make a short issue with the author, for now my recommendation is to stay with the “old” version of ha-slider-card . I’ll update this post and/or make a new one, if all seems to be resolved.
1 Like
filikun
August 23, 2021, 10:16am
225
Is there a way to add these without changing to YAML mode? Adding /lovelace/button_card_templates/button_card_templates.yaml as Stylesheet to dashboard > resources did not help
EDIT: Also, would it be to much work to add these as cards in HACS? Somewhat like this DBuit/Homekit-panel-card: Homekit panel card for home assistant (github.com)
And of course well done! This looks really really great!
bms
August 23, 2021, 11:03am
226
@filikun It should be possible but you will need to add the template file as yaml somewhere in your configuration and then include it in your configuration by using the ui.
In the case of your example:/lovelace/button_card_templates/button_card_templates.yaml
create a folder in your configuration:lovelace with a folder inside with name button_card_templates
Put the templates file inside of this folder
Edit your dashboard
Go to raw configuration editor (3 dots upper right)
Add the following line (at the top of the file should be fine):
Save
Now you should be able to use the templates in UI mode
Let me know if you run into more problems
1 Like
Depechie
August 23, 2021, 8:53pm
227
Should we also do something with the resources.yaml file and themes files too? ( for getting this working with only UI mode )@tben maybe you can extend the github page with some more details? ( sorry not knowing what to do with all the files in UI mode - non yaml mode )
1 Like
bms
August 24, 2021, 7:36am
228
The resources should be automatically included when you use HACS.configuration.yaml (see here )
Hi tben, thanks for this nice theme.
Dimmed light on:
Thanks for the advice in advance
Seems as it isn’t using the correct theme.
Thanks Dylan,
That was the option I didn’t checked yet, thought this was fixed in the yaml setup as well.
Another question I have is the difference in spacing, which is better visible in the dark theme.
I’m using the edge at the beginning and the end of each block.
- template: edge
type: 'custom:button-card'
Is that’s what it’s used for or is it for something else still?
So the difference in width seems to be the caused by mixing a grid and a horizontal grid card
- type: grid
columns: 2
square: false
cards:
using the grid like above gives a nice layout
jompa68
August 25, 2021, 7:18pm
233
How many chips can i show in mobile view?
lpt2007
August 25, 2021, 8:40pm
234
I have a problem with buttons no alway on same place during on / off.
Here is code:
widget_temperature:
tap_action:
action: toggle
color: var(--google-grey-500)
show_icon: false
show_name: false
show_label: true
size: 20px
label: |-
[[[
var current_temperature = entity.attributes.current_temperature;
var temperature = entity.attributes.temperature;
if (entity.state == 'off') {
var temperature = current_temperature;
}
return temperature + '°C'
]]]
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: 'rgba(var(--couleur-theme),0)'
- border-radius: 14px
- place-self: center
- height: 42px
grid:
- grid-template-areas: '"l"'
label:
- color: 'rgba(var(--couleur-theme),0.9)'
########################################################################################################
# #
# HEATING #
# #
########################################################################################################
heating:
tap_action:
action: more-info
icon: |
[[[
if (entity.state =='auto') {
return 'mdi:robot-industrial';
} else if (entity.state =='heat') {
return 'mdi:radiator';
}
return 'mdi:radiator-off';
]]]
label: >-
[[[
if (entity.state =='off') {
return "Izključeno";
} else if (entity.state =='heat') {
return "Gretje";
} else if (entity.state =='auto') {
return "Auto";
}
return entity.state;
]]]
state:
- operator: template
value: >
[[[
return entity.state != 'off';
]]]
styles:
icon:
- color: 'rgba(var(--couleur-rouge),1)'
img_cell:
- background-color: 'rgba(var(--couleur-rouge),0.2)'
template:
- red
####################################################
# #
# HEATING WITH BOUTONS #
# #
####################################################
heating_buttons:
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
template: list_items_favorite
type: custom:button-card
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: >
[[[
if (variables.name == null) {
return variables.entity;
}
return variables.name;
]]]
tap_action:
action: more-info
template:
- icon_info
- heating
type: 'custom:button-card'
item2:
card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
icon: mdi:power
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: '[[[ return variables.entity ]]]'
hvac_mode: 'heat'
type: custom:button-card
template: widget_icon
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
icon: mdi:power-off
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: '[[[ return variables.entity ]]]'
hvac_mode: 'off'
type: custom:button-card
template: widget_icon
item2:
card:
template: list_items
type: 'custom:button-card'
custom_fields:
item1:
card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
icon: 'mdi:minus'
tap_action:
action: call-service
service: script.decrease_heating_temperature
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: 'custom:button-card'
template: widget_icon
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
icon: 'mdi:home-thermometer-outline'
tap_action:
action: none
type: 'custom:button-card'
template: widget_icon
item2:
card:
icon: 'mdi:temperature-celsius'
tap_action:
action: none
type: 'custom:button-card'
template: widget_temperature
entity: '[[[ return variables.entity ]]]'
item3:
card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
icon: 'mdi:minus'
tap_action:
action: call-service
service: script.increment_heating_temperature
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: 'custom:button-card'
template: widget_icon
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
icon: 'mdi:home-thermometer-outline'
tap_action:
action: none
type: 'custom:button-card'
template: widget_icon
jompa68
August 26, 2021, 6:18am
235
Hello @Mariusthvdb
- type: 'custom:button-card'
template: edge
- type: 'custom:button-card'
template: chips_temperature
This is my swipe-card setup
- type: custom:swipe-card
parameters:
spaceBetween: 8
freeMode: true
cards:
- !include /config/lovelace/includes/chip_temperature.yaml
Never mind, i nail it
