madir
February 21, 2022, 1:39pm
1560
thanks. your card looks great!
about the the count;
I have been tinkering in the markdown card to do this. I found a way;
in Bedroom 1, currently **{{ expand(area_entities('Bedroom 1')) | selectattr('domain','eq','light') | selectattr('state','eq','on') | list | count }}** lights are on.
I get the answer:
in Bedroom 1, currently 0 lights are on.
which is correct!
now I do not know how to the translate this in the custom_card_room code?
Bedroom 1 can be easily be a variable.
I have no idea how the syntax will work??
this where in the code I need to implement this. any Ideas?
basbrus
February 21, 2022, 1:39pm
1561
madir:
still need help to do this.
You could define it with a variable like this:- background-image: "[[[ return url(${variables.image_path}) ]]]"
basbrus
February 21, 2022, 1:41pm
1562
Almost there label: "[[[ return states[sensor.octoprint_print_file].state ]]]"
Template tool works for jinja-type of code while button-card uses Javascript
1 Like
sorted
February 21, 2022, 1:48pm
1563
First of all thank you for the answer within just a few seconds after my post!
But somehow there still is an issue:
This is the part of the code belonging to this error message:
template: card_title
name: Print Status
label: '[[[ return states(''sensor.octoprint_print_file'').state ]]]'
state: []
And this is my code in the lovelace-ui.yaml
- type: custom:button-card
template: card_title
name: Print Status
label: "[[[ return states('sensor.octoprint_print_file').state ]]]"
basbrus
February 21, 2022, 1:53pm
1564
Sorry, my bad!label: "[[[ return states[sensor.octoprint_print_file].state ]]]"
madir
February 21, 2022, 1:56pm
1565
Hi, basbrus,
not yet! what is wrong?
this is my code in the UI card:
###### room card bedroom 1
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: custom_card_room
name: Bedroom 1
entity: climate.thermostat_bedroom_1
icon: mdi:bed-king-outline
tap_action:
action: navigate
navigation_path: '/lovelace-myhome/011_bedroom_1_full'
variables:
room_image_path: '/my_images/bedroom_1_light.jpg'
entity_1:
entity_id: switch.area_presence_hold_bedroom_1
templates:
- green_on
tap_action:
action: toggle
entity_5:
entity_id: climate.thermostat_bedroom_1
templates:
- red_on
- green_off
tap_action:
action: toggle
this is my (part) code in the custom_card_room:
---
custom_card_room:
template:
- "ulm_language_variables"
variables:
room_card_label: true
room_image_path: "your area image url"
color: "var(--google-grey-500)"
show_icon: false
show_name: true
show_label: true
triggers_update: "all"
# size: "100%"
# aspect_ratio: "2.5/1"
# entity_picture: "[[[ return variables.room_card_area ]]]"
# addition
# show_entity_picture: "[[[ return variables.room_card_area_use_entity_picture ]]]"
# entity_picture: >
# if (variables.room_card_area_use_entity_picture == true){
# return states[variables.room_card_area_id].attributes.entity_picture;
# } else{
# return null;
# }
# ]]]
label: |-
[[[
if (variables.room_card_label) {
return '<ha-icon icon="mdi:thermometer" style="width: 16px; height: 16px;"></ha-icon>' + (entity.attributes.current_temperature || entity.attributes.temperature || entity.state || '-') + '°C' + ' | '
+ '<ha-icon icon="mdi:water-percent" style="width: 18px; height: 18px;"></ha-icon>' + (entity.attributes.current_humidity || entity.attributes.humidity || entity.state || '-') + '%' + ' | '
+ '<ha-icon icon="mdi:lightbulb-on" style="width: 16px; height: 16px;"></ha-icon>' + ' count ' + (entity.attributes.current_humidity || entity.attributes.humidity || entity.state || '-') + '%';
} else if (entity.state == "on") {
return variables.ulm_on
} else if (entity.state == "off") {
return variables.ulm_off
} else {
return entity.state
}
]]]
state:
- styles:
custom_fields:
notification:
- border-radius: "50%"
- border: "2px solid var(--card-background-color)"
- width: "24.5px"
- height: "24.5px"
- position: "absolute"
- left: "50%"
- top: "50%"
- transform: "translate(-50%,-50%)"
- margin-top: "35%"
- margin-left: "-35%"
- line-height: 0
- display: "grid"
- background-color: >
[[[
return "rgba(var(--color-blue),1)";
]]]
value: "unavailable"
styles:
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
# - background-image: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.8) 100%), url("http://madirhome.duckdns.org:8123/api/image/serve/6716c58546027ba3dac01b58a4013d24/512x512")
- background-image: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.8) 100%), url(${variables.room_image_path})
- background-size: "cover"
- background-repeat: "no-repeat"
- background-position-y: "0px"
and the result:
2 Likes
sorted
February 21, 2022, 2:06pm
1566
your input for the right syntax combined with some googling brought the final working result
- type: custom:button-card
template: card_title
name: Print Status
label: '[[[ return states["sensor.octoprint_print_file"].state ]]]'
Thank you so much!!
1 Like
basbrus
February 21, 2022, 2:09pm
1567
Where do you have your images stored?config/www/images//local/images/xxxx.jpeg as path.
edit:
madir
February 21, 2022, 2:13pm
1568
all my personal the images are in my_images folder.
smb://raspberrypi/config/my_images/bedroom_1_full.jpg
edit:
basbrus
February 21, 2022, 2:15pm
1569
So maybe try
- background-image: "[[[ return "linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.8) 100%), url(${variables.room_image_path})" ]]]"
Also see this page to learn about using javascript within custom:button-card
madir
February 21, 2022, 2:22pm
1570
basbrus:
- background-image: "[[[ return "linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.8) 100%), url(${variables.room_image_path})" ]]]"
with this card not showing at-all!
madir
February 21, 2022, 2:33pm
1571
also tried this;
- background-image: >
[[[
return "linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.8) 100%), url(${variables.room_image_path})";
]]]
with this card is showing with gradient etc. but the image not showing up!
madir
February 21, 2022, 3:05pm
1573
my plan was to use the HA areas entity_picture: as the background;
make variable, as an example: room_area_id
then call the attribute ‘entity_picture’ connected to the area. I have all the room setup in the HA
define the background-image
I have tried this but did not manage with my level of knowledge!
my inspiration was:
---
### Card Media Player With Control ###
card_media_player_art:
template:
- "card_media_player"
styles:
label:
- opacity: "0.6"
icon:
- color: "rgba(var(--color-theme),0.2)"
img_cell:
- background-color: "rgba(var(--color-theme),0.05)"
card:
- background-blend-mode: "multiply"
- background: "[[[ return states[entity.entity_id].attributes.entity_picture != null ? 'center / cover url(' + states[entity.entity_id].attributes.entity_picture\
\ + ') rgba(0, 0, 0, 0.15)' : '' ]]]"
basbrus
February 21, 2022, 3:13pm
1574
Thanks for that
- background-image: >
[[[
return 'linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.8) 100%), url('+ variables.image_path +')'
]]]
Did work in my test_card, so I hopes it works in yours too
madir
February 21, 2022, 3:55pm
1575
Thanks for being so helpful!
strange! but no image…
I have done;
moved the images exactly like you have
checked many times the code…
Please see if you find any mistake!!
my card UI
title: testing room card
theme: minimalist-mobile-tapbar
type: custom:vertical-layout
cards:
###### room card bedroom 1
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: custom_card_room
name: Bedroom 1
entity: climate.thermostat_bedroom_1
icon: mdi:bed-king-outline
tap_action:
action: navigate
navigation_path: '/lovelace-myhome/011_bedroom_1_full'
variables:
image_path: /local/images/bedroom_1_light.jpg
entity_1:
entity_id: switch.area_presence_hold_bedroom_1
templates:
- green_on
tap_action:
action: toggle
entity_5:
entity_id: climate.thermostat_bedroom_1
templates:
- red_on
- green_off
tap_action:
action: toggle
entity_6:
entity_id: light.hanging_lamp_bedroom_1
templates:
- yellow_on
tap_action:
action: toggle
entity_7:
entity_id: light.standing_lamp_bedroom_1
templates:
- yellow_on
tap_action:
action: toggle
entity_8:
entity_id: light.bedroom_1_lights
templates:
- pink_on
tap_action:
action: toggle
hold_action: # not woring!
action: more_info
###### room card living room
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template:
- custom_card_room
name: Living room
entity: climate.thermostat_living_room
tap_action:
action: navigate
navigation_path: '/lovelace-myhome/011_bedroom_1_full'
variables:
image_path: '/local/images/bedroom_1_light.jpg'
entity_1:
entity_id: switch.area_presence_hold_living_room
templates:
- green_on
tap_action:
action: toggle
entity_5:
entity_id: climate.thermostat_living_room
templates:
- green_on
- green_off
entity_6:
entity_id: light.hanging_lamp_living_room
templates:
- yellow_on
tap_action:
action: toggle
tap_action:
action: toggle
entity_7:
entity_id: light.standing_lamp_living_room
templates:
- yellow_on
tap_action:
action: toggle
entity_8:
entity_id: light.living_room_lights
templates:
- pink_on
tap_action:
action: toggle
my custom_room_card
---
custom_card_room:
template:
- "ulm_language_variables"
variables:
room_card_label: true
image_path: "your area image url"
color: "var(--google-grey-500)"
show_icon: false
show_name: true
show_label: true
triggers_update: "all"
label: |-
[[[
if (variables.room_card_label) {
return '<ha-icon icon="mdi:thermometer" style="width: 16px; height: 16px;"></ha-icon>' + (entity.attributes.current_temperature || entity.attributes.temperature || entity.state || '-') + '°C' + ' | '
+ '<ha-icon icon="mdi:water-percent" style="width: 18px; height: 18px;"></ha-icon>' + (entity.attributes.current_humidity || entity.attributes.humidity || entity.state || '-') + '%' + ' | '
+ '<ha-icon icon="mdi:lightbulb-on" style="width: 16px; height: 16px;"></ha-icon>' + ' count ' + (entity.attributes.current_humidity || entity.attributes.humidity || entity.state || '-') + '%';
} else if (entity.state == "on") {
return variables.ulm_on
} else if (entity.state == "off") {
return variables.ulm_off
} else {
return entity.state
}
]]]
state:
- styles:
custom_fields:
notification:
- border-radius: "50%"
- border: "2px solid var(--card-background-color)"
- width: "24.5px"
- height: "24.5px"
- position: "absolute"
- left: "50%"
- top: "50%"
- transform: "translate(-50%,-50%)"
- margin-top: "35%"
- margin-left: "-35%"
- line-height: 0
- display: "grid"
- background-color: >
[[[
return "rgba(var(--color-blue),1)";
]]]
value: "unavailable"
styles:
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
- background-image: >
[[[
return 'linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.8) 100%), url('+ variables.image_path +')'
]]]
- background-size: "cover"
- background-repeat: "no-repeat"
- background-position-y: "0px"
grid:
- grid-template-areas: "'n n n n n n n n' 'l l l l l l l l' 'i1 i2 i3 i4 i5 i6 i7 i8'"
- grid-template-columns: " 1fr minmax(0px, 0.5fr) minmax(0px, 0.5fr) . 1fr 1fr 1fr 1fr 1fr"
- grid-template-rows: "min-content 2.5fr 1fr"
- justify-items: "center"
- gap: "0em 0.5em"
name:
- justify-self: "start"
- align-self: "start"
- font-weight: "bold"
- color: "white"
- font-size: "1.4em"
- margin-left: "6px"
label:
- justify-self: "start"
- align-self: "start"
- font-weight: "bold"
- color: "white"
- font-size: "0.7em"
# - filter: "opacity(70%)"
- margin-left: "6px"
state:
- justify-self: "start"
- font-weight: "bold"
- font-size: "14px"
- filter: "opacity(40%)"
- margin-left: "6px"
custom_fields:
i1:
- justify-self: "start"
- align-self: "start"
- border-radius: "50%"
- width: "42px"
- height: "42px"
- display: "grid"
i2:
- justify-self: "start"
- align-self: "start"
- border-radius: "50%"
- width: "0px"
- height: "42px"
- display: "grid"
i3:
- justify-self: "end"
- align-self: "end"
- border-radius: "50%"
- width: "0px"
- height: "42px"
- display: "grid"
i4:
- justify-self: "end"
- align-self: "end"
- border-radius: "50%"
- width: "42px"
- height: "42px"
- display: "grid"
i5:
- justify-self: "end"
- align-self: "end"
- border-radius: "50%"
- width: "42px"
- height: "42px"
- display: "grid"
i6:
- justify-self: "end"
- align-self: "end"
- border-radius: "50%"
- width: "42px"
- height: "42px"
- display: "grid"
i7:
- justify-self: "end"
- align-self: "end"
- border-radius: "50%"
- width: "42px"
- height: "42px"
- display: "grid"
i8:
- justify-self: "end"
- align-self: "end"
- border-radius: "50%"
- width: "42px"
- height: "42px"
- display: "grid"
custom_fields:
# notification: >
# [[[
# if (entity.state =='unavailable'){
# return `<ha-icon icon="mdi:exclamation" style="width: 50%; height: 50%; color: var(--primary-background-color);"></ha-icon>`
# }
# ]]]
i1:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_1?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_1.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_1; ]]]"
entity: >
[[[
if (variables.entity_1.entity_id) {
return variables.entity_1.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_1; ]]]"
styles:
card:
- display: "none"
i2:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_2?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_2.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_2; ]]]"
entity: >
[[[
if (variables?.entity_2?.entity_id) {
return variables.entity_2.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_2; ]]]"
styles:
card:
- display: "none"
i3:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_3?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_3.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_3; ]]]"
entity: >
[[[
if (variables?.entity_3?.entity_id) {
return variables.entity_3.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_3; ]]]"
styles:
card:
- display: "none"
i4:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_4?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_4.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_4; ]]]"
entity: >
[[[
if (variables?.entity_4?.entity_id) {
return variables.entity_4.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_4; ]]]"
styles:
card:
- display: "none"
i5:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_5?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_5.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_5; ]]]"
entity: >
[[[
if (variables?.entity_5?.entity_id) {
return variables.entity_5.entity_id;
}
]]]
# state:
# - operator: "template"
# value: "[[[ return !variables.entity_5; ]]]"
# styles:
# card:
# - display: "none"
state:
- operator: "template"
value: >
[[[
return (entity.attributes.hvac_action == 'cooling' ||entity.attributes.hvac_action == 'idle' || entity.attributes.hvac_action == 'heating')
]]]
styles:
icon:
- icon: "mdi:cube-outline"
- color: "rgba(var(--color-red),1)"
img_cell:
- background-color: "rgba(var(--color-red),0.2)"
i6:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_6?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_6.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_6; ]]]"
entity: >
[[[
if (variables?.entity_6?.entity_id) {
return variables.entity_6.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_6; ]]]"
styles:
card:
- display: "none"
i7:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_7?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_7.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_7; ]]]"
entity: >
[[[
if (variables?.entity_7?.entity_id) {
return variables.entity_7.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_7; ]]]"
styles:
card:
- display: "none"
i8:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_8?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_8.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_8; ]]]"
entity: >
[[[
if (variables?.entity_8?.entity_id) {
return variables.entity_8.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_8; ]]]"
styles:
card:
- display: "none"
widget_icon_room:
variables:
tap_action:
action: "toggle"
hold_action:
action: "none"
tap_action:
action: >
[[[ if (variables?.tap_action?.action) return variables.tap_action.action; else return 'none'; ]]]
entity: "[[[ return variables.tap_action.entity; ]]]"
navigation_path: "[[[ return variables.tap_action.navigation_path; ]]]"
url_path: "[[[ return variables.tap_action.url_path; ]]]"
service: "[[[ return variables.tap_action.service; ]]]"
service_data: "[[[ return variables.tap_action.service_data; ]]]"
hold_action:
action: >
[[[ if (variables?.hold_action?.action) return variables.hold_action.action; else return 'none'; ]]]
entity: "[[[ return variables.hold_action.entity; ]]]"
navigation_path: "[[[ return variables.hold_action.navigation_path; ]]]"
url_path: "[[[ return variables.hold_action.url_path; ]]]"
service: "[[[ return variables.hold_action.service; ]]]"
service_data: "[[[ return variables.hold_action.service_data; ]]]"
show_icon: true
show_name: false
styles:
grid:
- grid-template-areas: "'i'"
card:
- height: "100%"
- box-shadow: "none"
- padding: "0px"
- border-radius: "50%"
icon:
- width: "50%"
- height: "50%"
- line-height: "0"
- color: "rgba(var(--color-theme),0.2)"
img_cell:
- border-radius: "50%"
- background-color: "rgba(var(--color-theme),0.05)"
# size: "15px"
color: "var(--google-grey)"
basbrus
February 21, 2022, 4:01pm
1576
You changed the path from your previous code snippets. Did you change the location of your images? Otherwise try your old path.
Proche72
February 21, 2022, 4:56pm
1577
Hey, I just updated and all my custom_cards stopped working. I did read breaking changes - I had cover cards and updated them but my paddy welcome, paddy waste collection and shumijo car card just stopped working.
madir
February 22, 2022, 12:04pm
1579
Hi D0doooh ,
I am trying to get status of climate entity as an alert (small icons on top left to the main icon).
I can learn from it how you did it!
madir
February 22, 2022, 9:09pm
1580
Hi there,
finally sorted out the image url problem!
I will keep you posted on the progress!!
1 Like
