Haze
January 24, 2024, 11:05pm
1
I have an input select entity defined, and started working on a nice frontend view of it so I can control it. I am not a fan of the standard drop down, and created the following:
- card:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: |
[[[ return states["input_select.scene_landscaping"].state ]]]
secondary: ''
icon: mdi:trees
icon_color: |-
{% if is_state('input_select.scene_landscaping','Off') %}
green
{% endif %}
layout: vertical
tap_action:
action: call-service
service: input_select.select_next
target:
entity_id: input_select.scene_landscaping
data:
option: All
entity: input_select.scene_landscaping
I can see the state change to All when I click on it.
I am trying to get the label to be the actual state, so ultimately as I cycle through it, I can see the label change to the state so I can visually see it.
I also added the tap_action to go to select_next. I assume it would cycle through the options, but it is not working.
Is this the best representation of a input_select entity? I am using it to trigger a node red flow and setup the right lighting for the landscaping based on the option.
I will add a delay on node-red to account for the clicking until a selection holds for 2 sec as an exampole. Not there yet, but trying to give context for my use case.
type: custom:mushroom-template-card
primary: '{{ states(entity) }}'
secondary: ''
icon: mdi:home
entity: input_select.scene_landscaping
icon_color: |-
{% if is_state(entity,'Off') %}
green
{% endif %}
layout: vertical
tap_action:
action: call-service
service: input_select.select_next
target:
entity_id: input_select.scene_landscaping
data:
cycle: true
hold_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.scene_landscaping
data:
option: All
Haze
January 24, 2024, 11:37pm
3
I came across this and adapted it to what I want.
Nice. The custom button card also supports templates. You define all the common parameters in a template file at the top of your Lovelace config then call the template and only add the different options. Like so:
Template
button_card_templates:
binary_sensor_button:
aspect_ratio: 4/3
hold_action:
action: none
label: |
[[[ entity.last_changed ]]]
show_last_changed: true
show_name: true
show_state: true
state:
- styles:
icon:
…
Here is the code for the template modified.
input_select_button:
#aspect_ratio: 4/3
hold_action:
action: none
label: |
[[[ entity.last_changed ]]]
show_last_changed: true
show_name: true
show_state: true
state:
- styles:
icon:
- color: var(--paper-item-icon-active-color)
state:
- color: var(--paper-item-icon-active-color)
value: >
[[[ return states["input_select.scene_landscaping"].state ]]]
- styles:
state:
- color: var(--secondary-text-color)
value: 'off'
- icon: 'mdi:alert'
styles:
card:
- border: 'solid 1px #7f7f7f'
- box-shadow: none
icon:
- color: '#ff0000'
- opacity: 0.4
label:
- color: '#7f7f7f'
name:
- color: '#7f7f7f'
value: unavailable
styles:
card:
- box-shadow: none
- border-radius: 10px
- padding: 6px 6px 6px 6px
- margin: 0% 0% 0% 0%
- '--paper-card-background-color': 'rgba(0, 0, 0, 0)'
grid:
- grid-template-areas: '"n n n" "i s s" "l l l"'
- grid-template-rows: auto 33% auto
- grid-template-columns: 33% auto auto
icon:
- width: 28px
- padding: 0px 0px 0px 0px
- margin: 0% 0% 0% 0%
label:
- justify-self: left
- font-size: 12px
- padding: 0px 0px 0px 0px
- color: var(--secondary-text-color)
name:
- justify-self: left
- font-size: 14px
- padding: 0px 0px 0px 0px
- color: var(--primary-text-color)
state:
- justify-self: left
- font-size: 12px
- padding: 0px 0px 0px 3px
- color: var(--secondary-text-color)
tap_action:
action: call-service
service: input_select.select_next
target:
entity_id: input_select.scene_landscaping
double_tap_action:
action: more-info
Now just need to do some customization on my front end to fix the icons, etc.