you can use this one:
https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_input_boolean/
Thanks, I was more thinking of an actual drop-down box with an action button to start the script/automation.
1 Like
Hey guys!
As is successfully failed a few weeks agoā¦ Someone already tried to merge the ānoctis themeā colors to this awesome project? 
Could this be added to the repository ? I absolute love this card !
2 Likes
You need to create a sensor to count the total number of devices/lights/switch āONā in a room.
Below is an example of a sensor that counts all the lights and switches that are ON in my Living room.
- platform: template
sensors:
lights_on_livingroom:
unit_of_measurement: 'on'
value_template: >
{% set lights = [
states.switch.sonoff_100136948d_1,
states.switch.sonoff_100136948d_2,
states.switch.sonoff_100136948d_3,
states.switch.sonoff_livingroom_fan,
states.switch.tv_power,
states.switch.spare_socket,
states.light.livinroom_balcony_light,
] %}
{{ lights | selectattr('state','eq','on') | list | count }}
Once the sensor is created it will look like this āsensor.lights_on_livingroomā. Take this sensor and add it to your button card.
In my case i wanted the lights that are on to show up in my rooms card, hence I created a custom navigate card that displays the total lights on in a room by adding the sensor via a variable āulm_card_total_device_on_sensorā.
**### Custom Card Navigate Code ###**
custom_card_navigate:
template:
- "icon_info_bg"
- "yellow"
- "ulm_language_variables"
tap_action:
action: "navigate"
navigation_path: "[[[ return variables.ulm_card_navigate_path; ]]]"
label: "[[[ return variables.ulm_card_navigate_title; ]]]"
icon: "[[[ return variables.ulm_card_navigate_icon; ]]]"
variables:
ulm_card_total_device_on_sensor:
triggers_update: "all"
label: |-
[[[
if (variables.ulm_card_total_device_on_sensor !== null) {
return states[variables.ulm_card_total_device_on_sensor].state + " ā¢ " + "Devices";
} else {
return entity.state;
}
]]]
UI Card Code:
- type: custom:button-card
template: custom_card_navigate
variables:
ulm_card_navigate_path: /ui-lovelace-minimalist/1
ulm_card_navigate_title: Bedroom
ulm_card_navigate_icon: mdi:bed
ulm_card_total_device_on_sensor: sensor.lights_on_bedroom
This is how my rooms card look showing the lights/switch ON in my rooms.
1 Like
that is my final goal, but not knowing how to code is a real bummer!
lots of trial and error!
did you read where I need help?
- almost working!
- still need help to do this.
- is working! no help needed.
Newbie-Question incoming
Is it possible to show a sensor state in the label of the title card?
I tried some variants. But none of them are working.
This at least gives me a result in the template tool:
{{ states('sensor.octoprint_print_file') }}
But it is not working in the yaml. As have seen [[]] these brackets in some templates i also tried it. But still not working:
- type: custom:button-card
template: card_title
name: Print Status
label: [[ states('sensor.octoprint_print_file') ]]
Any ideas?
Thank you 
thanks. your card looks great!
about the the count;
my aim is to not make many sensors etc. but try in the code it self to find a solution.
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?
You could define it with a variable like this:
- background-image: "[[[ return url(${variables.image_path}) ]]]"
Almost there 
Try:
label: "[[[ return states[sensor.octoprint_print_file].state ]]]"
Template tool works for jinja-type of code while button-card uses Javascript
1 Like
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 ]]]"
Sorry, my bad!
The right syntax is:
label: "[[[ return states[sensor.octoprint_print_file].state ]]]"
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
your input for the right syntax combined with some googling brought the final working result
Once i used your code I had no error message but also the whole card was missing in the UI
- type: custom:button-card
template: card_title
name: Print Status
label: '[[[ return states["sensor.octoprint_print_file"].state ]]]'
Thank you so much!!
1 Like
Where do you have your images stored?
My images are in: config/www/images/
So I have to use /local/images/xxxx.jpeg as path.
edit:
Also you did not defined it as a javascript template.
So it can not read the variables you have defined
all my personal the images are in my_images folder.
smb://raspberrypi/config/my_images/bedroom_1_full.jpg
edit:
āAlso you did not defined it as a javascript templateā I have no clue how? please guide me.
learning a lot here! thanks
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 
with this card not showing at-all!
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!
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)' : '' ]]]"