Sure. Note, 90% of the below is only necessary if you want to ‘cycle’ through scenes with physical buttons etc. or otherwise display which scene is active. If you don’t care about that, you can just implement the button second from the end.
First, I defined the scenes i wanted in scenes.yaml:-
# Living room scenes
- name: Living Room Day
# icon:
entities:
light.paper_lamp:
state: "on"
brightness: 255
color_temp: 250
light.kitchen_table_overhead_2:
state: "on"
brightness: 255
color_temp: 250
light.living_room_overhead:
state: "on"
brightness: 255
color_temp: 250
Repeat until all scenes defined.
I then set up an input_select in configuration.yaml:-
# input_select to use switch to cycle through scenes
input_select:
living_room_scene_select:
options:
- scene.living_room_day
- scene.living_room_afternoon
- scene.living_room_evening
- scene.living_room_night
- scene.living_room_off
Notice the names in input select are the same as the scene name. This is important.
I then set up an automation that would trigger when the input_select changed state - i.e., when I’ve changed scene:-
- alias: 'Send Living room scene'
trigger:
- platform: state
entity_id: input_select.living_room_scene_select
condition:
- condition: template
value_template: "{{ trigger.to_state != trigger.from_state }}"
action:
service: scene.turn_on
data_template:
entity_id: >
{{ states('input_select.living_room_scene_select') }}
Notice in the condition value_template it’s basically saying ‘has the input_select been changed to a new state’. If so, the action section then uses a scene.turn_on call and templates the input_select state - this is why the input_select options have to be the same as the name of the scenes).
So, putting this in a button in ui-lovelace.yaml:-
cards:
- type: button
name: Day
show_name: false
icon: 'mdi:white-balance-sunny'
show_state: true
state_color: true
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.living_room_scene_select
option: scene.living_room_day
In my example, this is the icon you would click on. It sends the command to change input_select, whcih then triggers the previously defined automation. If you don’t care about cycling through scenes or displaying which one is active you could just use the above button but change the action_service to ‘action.scene_on’ as per the HA scene action definition.
Next, the bar underneath the icon is actually a custom resource. It monitors the input_select state and changes colour based on it:-
cards:
- type: custom:button-card
entity: input_select.living_room_scene_select
aspect_ratio: 16/1
color_type: card
show_name: false
triggers-update:
- input_select.living_room_scene_select
styles:
card:
- background-color: >
[[[
if (states['input_select.living_room_scene_select'].state == "scene.living_room_day")
return "var(--paper-item-icon-active-color)";
return "var(--paper-card-background-color)";
]]]
The important bits in that are the triggers-update entry and the background color ‘if’ condition under styles. That’s what changes the colour of it depending on input_select state.
I put this mish-mash together based on some google-fu and shameless plagarism of other’s code and suggestions, so kudos go to them.
