oneufus
July 17, 2024, 12:57pm
1
Hi everyone,
I created an Input Select Helper with 3 options to control the volume of my Sonos System. I created 3 scripts for every volume option. (low, medium, high)
Now I want to have three buttons on my dashboard were I can toggle between these 3 options. I manage to add the buttons and to activate the scripts via an automation.
The only thing I have not yet managed to do is show the status of the switches. Apparently that is only possible when the action is: toggle. In my case the action is: call service
This is my yaml code:
type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: button
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id:
- input_select.sonos_volume
data:
option: Low
icon: mdi:volume-low
show_state: false
hold_action:
action: none
- show_name: false
show_icon: true
type: button
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id:
- input_select.sonos_volume
data:
option: Medium
icon: mdi:volume-medium
show_state: true
hold_action:
action: none
- show_name: false
show_icon: true
type: button
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id:
- input_select.sonos_volume
data:
option: High
icon: mdi:volume-high
show_state: true
hold_action:
action: none
If it is an limitation of the card, you could think of using a different card like the Mushroom Template Card .
You can template a text to show, or chane icon color based on a Jinja2 template.
An alternative can be using Card-mod to change the card based on some variables.
1 Like
One thing you could do is create a template binary sensor for each of the three states (high, medium, and low) and add those sensors as the entity for each button. I’m pretty sure this would work with the button cards you are using.
I do something similar with some custom-button-cards (I had other ways in which I wanted to control the style, which is why I’ve used those cards). Here’s an edited version of my cards (superfolous styles, etc have been removed).
type: horizontal-stack
cards:
- type: custom:button-card
name: 🎶
entity: binary_sensor.sonos_den_grouped_to_lounge
color_type: card
show_icon: false
state:
- value: 'on'
color: var(--accent-color)
tap_action:
action: call-service
service: script.sonos_join_child_to_parent
service_data:
parent: media_player.sonos_lounge
child: media_player.sonos_den
- type: custom:button-card
name: 📺
entity: binary_sensor.sonos_den_grouped_to_den
color_type: card
show_icon: false
state:
- value: 'on'
color: var(--accent-color)
tap_action:
action: call-service
service: script.sonos_join_child_to_parent
service_data:
parent: media_player.sonos_den
child: media_player.sonos_den
oneufus
July 18, 2024, 10:01am
4
Thanks for your help. I finally got it working. The buttons do what they’re supposed to do. There’s still one thing I can’t get done. The color. I want the color of the logo to change to orange when active. Any ideas? This is my code:
type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: button
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id:
- input_select.sonos_volume
data:
option: Low
icon: mdi:volume-low
show_state: true
hold_action:
action: none
- show_name: false
show_icon: true
type: button
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id:
- input_select.sonos_volume
data:
option: Medium
icon: mdi:volume-medium
show_state: true
hold_action:
action: none
- show_name: false
show_icon: true
type: button
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id:
- input_select.sonos_volume
data:
option: High
icon: mdi:volume-high
show_state: true
hold_action:
action: none
You could use custom-button-card, which I linked to, or you could use card-mod, which Timmuhhh linked to.
oneufus
July 18, 2024, 1:59pm
6
I am sorry, I don’t have enough knowledge how to do that.
Can you use my code and past that back in a way that it should work? I like to learn, but I don’t know were to go.
Haze
October 9, 2024, 2:32am
7
in case anyone is wondering about implementation, I needed the same function. Now the color changes based on the state of the input_select.
- type: custom:button-card
icon: mdi:bullseye
name: ALL
entity: input_select.area_name
styles:
card:
- background-color: >-
[[[
if (states['input_select.area_name'].state == 'All')
return 'blue';
else
return 'red';
]]]
- box-shadow: none
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id:
- input_select.area_name
data:
option: All
hold_action:
action: none
Now working on the rest, but wanted to share given I started off based on the code above.
Haze
October 9, 2024, 3:53am
8
now trying to transger this code to a button template so I can use it for multiple buttons with a short call.
button_area_link:
color_type: icon
show_name: true
show_state: false
icon: '[[[ return variables.icon ]]]'
entity: '[[[ return variables.entity ]]]'
name: '[[[ return variables.name ]]]'
styles:
card:
- width: 100px
- height: 100px
- background-color: transparent
- box-shadow: none
- background-color: >-
[[[
if (parseFloat(states['input_select.area_name'].state) == 'variables.name' )
return 'var(--primary-color)';
else
return 'var(--ha-card-background)';
]]]
icon:
- width: 100px
- height: 100px
name:
#Capitalize does not work
- text-transform: capitalize
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id:
- input_select.area_name
data:
option: '[[[ return variables.name ]]]'
hold_action:
action: none
This is the call:
- type: custom:button-card
template: button_area_link
variables:
icon: mdi:car-multiple
entity: input_select.area_name
name: Gallery
Much shorter in my dashboard file.
if (parseFloat(states['input_select.area_name'].state) == 'variables.name' )
I also tried it without the parseFloat (got that from some of my google searches)
if (states['input_select.area_name'].state == 'variables.name' )
Any idea what’s wrong. The cde I posted earlier works, so it is something with the comparison of the strings, or the retrieval of the variables.name…either way, not sure how to debug it because I can’t use the Developer->Template
Haze:
== 'variables.name' )
Have not checked all code but this is wrong, variables should not be in quotes.
Haze
October 9, 2024, 10:57am
10
I removed the quotes but still not workng. For completion, this is the code in the main yaml. I am only working the template development on a single button to test. This is the non-template code that works as expected.
- type: custom:button-card
template: button_area_link
icon: mdi:garage-variant
name: Garage
show_name: true
entity: input_select.area_name
styles:
card:
- text-transform: capitalize
- background-color: >-
[[[
if (states['input_select.area_name'].state == 'Garage')
return 'var(--primary-color)';
else
return 'var(--ha-card-background)';
]]]
- box-shadow: none
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id:
- input_select.area_name
data:
option: Garage
hold_action:
action: none
(not sure why the code above does not have the proper spacing when pasted)
All code seems to work. The template code works as expected except the background color change. I mean when clicked, it changes the input_select variable to the right value, just not the color.
Haze
October 10, 2024, 10:04am
11
For whatever reason, I this morning, tried it again, and it worked.
- background-color: >-
[[[
if (states['input_select.area_name'].state == variables.name)
return 'var(--primary-color)';
else
return 'var(--ha-card-background)';
]]]
Ltek
February 22, 2025, 2:14pm
12
@Haze did you complete this? Would love to see the final code with the entire button row. I would like to do the same thing, your code would save me a ton of time. thx
Haze
February 22, 2025, 4:09pm
13
Sure. Here is the code for the Filter selection area. You need an input select helper to select using the buttons:
#Filter view
- type: "custom:layout-card"
layout_type: "custom:grid-layout"
layout: !include layouts/layout-live-tile.yaml
view_layout:
grid-column-start: 1
grid-column-end: -1
cards:
- type: "custom:button-card"
template: header_card_no_link
variables:
name: FILTERS
view_layout:
grid-column-start: 1
grid-column-end: -1
- type: custom:button-card
template: button_area_link
variables:
icon: mdi:bullseye
entity: input_select.area_name
name: ALL
- type: custom:button-card
template: button_area_link
variables:
icon: mdi:home-floor-1
entity: input_select.area_name
name: HOUSE-F1
- type: custom:button-card
template: button_area_link
variables:
icon: mdi:home-floor-2
entity: input_select.area_name
name: HOUSE-F2
- type: custom:button-card
template: button_area_link
variables:
icon: mdi:home-floor-g
entity: input_select.area_name
name: GUEST SUITE
- type: custom:button-card
template: button_area_link
variables:
icon: mdi:car-multiple
entity: input_select.area_name
name: GALLERY
- type: custom:button-card
template: button_area_link
variables:
icon: mdi:pool
entity: input_select.area_name
name: CABANA
- type: custom:button-card
template: button_area_link
variables:
icon: mdi:garage-variant
entity: input_select.area_name
name: GARAGE
- type: custom:button-card
template: button_area_link
variables:
icon: mdi:parking
entity: input_select.area_name
name: CARPORT
- type: custom:button-card
template: button_area_link
variables:
icon: mdi:home-group
entity: input_select.area_name
name: GROUNDS
Then in the conditional section:
#Details View
- type: custom:state-switch
entity: input_select.area_name
states:
ALL:
type: horizontal-stack
view_layout:
grid-column-start: 1
grid-column-end: -3
cards:
- type: markdown
card_mod:
style: |
ha-card {
background: darkred !important;
color: wheat;
font-size: 1.5em;
}
content: >
Select an Area
HOUSE-F1:
type: "custom:layout-card"
layout_type: "custom:grid-layout"
layout: !include layouts/layout-page-columns.yaml
view_layout:
grid-column-start: 1
grid-column-end: -1
cards:
# [Column] Living Room
- type: "custom:layout-card"
layout_type: "custom:grid-layout"
layout:
margin: -1
cards:
- type: "custom:button-card"
template: header_card_no_link
variables:
name: LIVING ROOM
- type: "custom:layout-card"
layout_type: "custom:grid-layout"
layout: !include layouts/layout-live-tile.yaml
cards: !include collection/lights-living-room.yaml
You’ll need to modify the formatting to fit your theme with the Button Card Templates and Layouts. Hope this helps gets you going.
button_area_link:
color_type: icon
show_name: true
show_state: false
icon: "[[[ return variables.icon ]]]"
entity: "[[[ return variables.entity ]]]"
name: "[[[ return variables.name ]]]"
styles:
card:
- width: 100px
- height: 100px
- background-color: transparent
- box-shadow: none
- background-color: >-
[[[
if (states[variables.entity].state == variables.name)
return 'var(--primary-color)';
else
return 'var(--ha-card-background)';
]]]
icon:
- width: 100px
- height: 100px
name:
#Capitalize does not work
- text-transform: capitalize
-
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id:
- "[[[ return variables.entity ]]]"
data:
option: "[[[ return variables.name ]]]"
hold_action:
action: none
button_room_link:
template: button_area_link
styles:
card:
- width: 100px
- height: 75px
- font-size: 0.75em
- font-weight: 400
icon:
- height: 50px
Here is the final result:
