At least it would save double declaration.
Unless I’m missing something, I don’t think styles would help in this case because it’s not the state of the entity but of an attribute of the entity that determines the colur of the icon. So I think you have to use state.
State could really do with a “default” option, I think.
The correct approach is, I think, to create a binary sensor helper using the Jinja2 template, i.e.
{{ states["remote.living_room"].attributes["current_activity"] == "Watch a Blu-Ray" }}
and use the binary sensor as the entity, which means you don’t require the state code at all.
It doesn’t matter which entity or which attribute determines the icon color. You can define what you want. Or am I on the wrong track?
Hi Community, I need your help. Here is a grid with 6 button cards. Now I would like to have the green buttons with the help of condition-cards only visible when the red button is pressed. when the red button is pressed again, they should disappear again. Kind of like a popup. It is possible if I assign the red button to a light entity, for example. However, I do not want to control the light through this. What do I have to do to make this work? Create a kind of dummy helper? I also thought about creating a dummy group, but that doesn’t seem to be the right way. I am grateful for your help
square: false
type: grid
cards:
- type: conditional
conditions: []
card:
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: conditional
conditions: []
card:
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: conditional
conditions: []
card:
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: black
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: red
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: black
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
columns: 3
This might be a very dump question but I’m struggling to set the value of a select.select_option from the entity’s list of available options.
The entity:
{{ state_attr(‘select.neff_ID_bsh_common_option_startinrelative’, ‘options’) }}
or
states[variables.var_startinrelative_slct_entity].attributes.options (in custom:button-card)
Has the following options:
[‘0:00’, ‘0:30’, ‘1:00’, ‘1:30’, ‘2:00’, ‘2:30’, ‘3:00’, ‘3:30’, ‘4:00’, ‘4:30’, ‘5:00’, ‘5:30’, ‘6:00’, ‘6:30’, ‘7:00’, ‘7:30’, ‘8:00’, ‘8:30’, ‘9:00’, ‘9:30’, ‘10:00’, ‘10:30’, ‘11:00’, ‘11:30’, ‘12:00’, ‘12:30’, ‘13:00’, ‘13:30’, ‘14:00’, ‘14:30’, ‘15:00’, ‘15:30’, ‘16:00’, ‘16:30’, ‘17:00’, ‘17:30’, ‘18:00’, ‘18:30’, ‘19:00’, ‘19:30’, ‘20:00’, ‘20:30’, ‘21:00’, ‘21:30’, ‘22:00’, ‘22:30’, ‘23:00’, ‘23:30’, ‘24:00’]
In the template I would like the “action: → service_data: → option:” to be the selected element of the dropdown list of available options.
tap_action:
action: "call-service"
service: "select.select_option"
service_data:
entity_id: "[[[ return variables.var_startinrelative_slct_entity ]]]"
option: "the selected item from 'states[variables.var_startinrelative_slct_entity].attributes.options'"
target:
entity_id: "[[[ return variables.var_startinrelative_slct_entity ]]]"
Is there a way to do it?
Many thanks!
Unrelated - but there is no need to keep both variants, leave only one working.
Guess this should be entity_id of input_select entity for which you need to select option.
The entity is a select entity, not an input_select… So it is the entity_id of the select entity… Is it right?
select, input_select - does not matter.
This code is to set some option in button-card:
- type: custom:button-card
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.test_value
option: xyz
But the initial question is unclear.
Create an input_boolean and use its state as condition for the green cards:
type: conditional
conditions:
- condition: state
entity: input_boolean.whatever
state: 'on'
Then toggle this input_boolean with the red card:
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: red
tap_action:
action: toggle
entity: input_boolean.whatever
Ok, that was much easier than I thought =) I was missing the right helper. Thank you very much, it works perfectly
I am having difficulty getting button-card to do what I want in a grid layout. Here is what I have managed to achieve:
What I would like is for the Labels to be the same height as the buttons. I think the code I have should accomplish that (“place-items: stretch stretch” in the layout section, specifically, but it doesn’t and I don’t know why. If I change it to “center stretch” the buttons appear vertically centred but do not fill the full height of the box. Any help would be appreciated.
Here is my code:
type: vertical-stack
title: Lights
cards:
- type: custom:layout-card
layout_type: grid
columns: 4
square: false
title: Lights
entities:
- entity: light.all_lights
type: custom:button-card
name: Groups
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
styles:
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: 1fr 3fr
name:
- justify-self: start
- type: custom:button-card
entity: light.downstairs_lights
name: Ground
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
styles:
width: 35px
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.downstairs_lights
- type: custom:button-card
entity: light.all_lights
name: All
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
styles:
width: 35px
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.all_lights
- type: custom:button-card
entity: script.1584181003341
name: Reset
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
styles:
width: 35px
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: script.1584181003341
- entity: light.kitchen_lights
type: custom:button-card
name: Kitchen
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
styles:
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: 1fr 3fr
name:
- justify-self: start
- type: custom:button-card
entity: light.kitchen
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
name: Main
styles:
width: 35px
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.kitchen
- type: custom:button-card
entity: light.kitchen_lights
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
name: Kitchen
styles:
width: 35px
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.kitchen_lights
- type: custom:button-card
entity: light.conservatory
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
name: Cons.
styles:
width: 35px
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.conservatory
- entity: light.hall_lights
type: custom:button-card
name: Hall
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
styles:
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: 1fr 3fr
name:
- justify-self: start
- type: custom:button-card
entity: light.hall
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
name: Door
styles:
width: 35px
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.hall
- type: custom:button-card
entity: light.hall_lights
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
name: Hall
styles:
width: 35px
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.hall_lights
- type: custom:button-card
entity: light.landing
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
name: Landing
styles:
width: 35px
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.landing
layout:
grid-template-columns: 40% 20% 20% 20%
grid-auto-rows: auto
place-items: stretch stretch
view_layout:
column: 3
Assign a height: 100% to your 3 „label“ cards.
Ok, that’s strange. I have the following card:
type: custom:button-card
aspect_ratio: 1/1
icon: mdi:volume-high
entity: media_player.living_room
tap_action:
action: call-service
service: media_player.volume_up
target:
entity_id: media_player.android_tv_192_168_178_44
styles:
card:
- border-radius: 24px
- background-color: var(--green)
icon:
- color: var(--black)
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
If I now put it in a conditional card, it becomes smaller overall. How so?
On the left is without and on the right with conditional card
Here is the code with conditional card
type: conditional
conditions: []
card:
type: custom:button-card
aspect_ratio: 1/1
icon: mdi:volume-high
entity: media_player.living_room
tap_action:
action: call-service
service: media_player.volume_up
target:
entity_id: media_player.android_tv_192_168_178_44
styles:
card:
- border-radius: 24px
- background-color: var(--green)
- height: 100% !important;
- width: 100% !important;
- max-width: 100% !important;
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
Thanks. Do you mean add:
card:
- height: 100%
to their styles section, because if so, that’s not making a difference, unfortunately.
I copied your code and only added
styles:
card:
- height: 100%
to the cards in the first column.
2 Likes
This is your code (second card with the updated code):
So there must be another reason in your layout.
@Ildar_Gabdullin , if you want to set a specific option that’s the way you do it. But my question is about how to set the select value using the dropdown directly read from the select options! There should be a way to do it, right?
I can use the entities card, but it uses too much space and it has too many gadgets (icon, text, underline, etc) and uses too much space, see the image below. And the other problem is that the dropdown list gets cut in the upper part, so you don’t see the upper values and cannot reach them ???, as shown below…
Let’s start from the 2nd question.
Fixed with “overflow: visible”.
type: custom:button-card
entity: sun.sun
layout: vertical
custom_fields:
some_card:
card:
type: entities
entities:
- entity: input_select.test_value
styles:
grid:
- grid-template-areas: '"i" "n" "some_card"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- overflow: visible
Another thing is - WTH using button-card if you can use a stack-in-card here?
As for the 1st question.
Again, not sure if I understood you properly - correct me if I am wrong:
- There is input_select.xxx. Filled with options [aaa, bbb, ccc]. The current state is “ccc”.
- There is input_select.yyy. You need to set the current option to “ccc” - i.e. to the current state of the 1st input_select.
- Step no. 2 should be executed right after the 1st input_select changes.
This is because Lovelace adds default margin to cards…
You can either turn this off globally and put this in your theme (my suggestion):
masonry-view-card-margin: "0"
or change your widths, heights and margins in your card (less ideal):
type: conditional
conditions: []
card:
type: custom:button-card
aspect_ratio: 1/1
icon: mdi:volume-high
entity: media_player.living_room
tap_action:
action: call-service
service: media_player.volume_up
target:
entity_id: media_player.android_tv_192_168_178_44
styles:
card:
- border-radius: 24px
- background-color: var(--green)
- height: 100% !important;
- width: 100% !important;
- max-width: 100% !important;
card_mod:
style: |
:host {
height: calc(100% + 12px) !important;
width: calc(100% + 8px) !important;
max-width: calc(100% + 8px) !important;
margin: -4px -4px -8px !important;
position: unset !important;
display: grid !important;
}
2 Likes