I’m trying to get this working as a package, as suggest by @Mariusthvdb
It seems to validate in Studio code, but when checking config yaml I get the error:
Configuration invalid!
expected dict for dictionary value @ data['packages']['hue_scene_selector']['type']
Can anyone help me?
I believe you have the wrong information in that file. That’s the configuration for an Entities card with several custom card enhancements.
What belongs in that file is shown in the second half of Mariusthvdb’s post (the part describing the “necessary back-end code”).
Thanks, I got it working!
Can you go in a bit more detail? If appreciate it!
I get the following trying to recreate your steps above:
fwiw, Ive since then changed my backend code a bit:
##########################################################################################
# Automations
##########################################################################################
automation:
- id: auto_populate_hue_group_input_select
mode: restart
trigger:
platform: event
event_type: delayed_homeassistant_start
action:
service: input_select.set_options
target:
entity_id: input_select.hue_group
data:
options: >
{{expand(integration_entities('Philips Hue 1'),
integration_entities('Philips Hue 3'))
|selectattr('attributes.is_hue_group','defined')
|selectattr('attributes.is_hue_group','eq',true)
|map(attribute='name')|list}}
- id: auto_populate_hue_dynamic_scene_input_select
mode: restart
trigger:
platform: state
entity_id: input_select.hue_group
action:
service: input_select.set_options
target:
entity_id: input_select.hue_dynamic_scene
data:
options: >
{% set hue_group = states('input_select.hue_group') %}
{{states.scene
|selectattr('attributes.group_name','defined')
|selectattr('attributes.group_name','eq',hue_group)
|selectattr('attributes.is_dynamic','eq',true)
|map(attribute='name')|list}}
remember this is inside a package. meaning, if you have another hierarchy/organization of files you should adapt the main keys config keys (automation:, or the - alias)
I captured all the scene gallery icons from the hue app here:
Prerequisites:
Installation
homeassistant:
packages:
hue_scene_selector: !include hue_scene_selector.yaml
input_select:
# need at least 1 option for the config check, which will be overwritten during startup
hue_group:
name: Select Hue group
options:
- Alarm
# initial: Alarm
hue_dynamic_scene:
name: Hue Dynamic scene
options:
- 'Alarm - Tyrell'
input_number:
hue_dynamic_scene_speed:
name: Hue scene speed
min: 0
max: 100
step: 10
hue_dynamic_scene_brightness:
name: Hue scene brightness
min: 0
max: 255
step: 10
template:
binary_sensor:
- unique_id: selected_hue_group_active_scene
name: Selected Hue group active scene
state: >
{% set select = states('input_select.hue_group')|slugify %}
{% set group ='light.' + select %}
{{is_state_attr(group,'dynamics',true)}}
- unique_id: selected_hue_group_has_active_scenes_available
name: Selected Hue group has active scenes available
state: >
{% set hue_group = states('input_select.hue_group') %}
{{states.scene
|selectattr('attributes.group_name','eq',hue_group)
|selectattr('attributes.is_dynamic','eq',true)|list|length != 0}}
- unique_id: hue_groups_dynamic_scening
name: Hue groups dynamic scening
state: >
{{states.light|selectattr('attributes.dynamics','eq',true)|list|length != 0}}
# {% set select = states('input_select.hue_group') %}
# {% set group = states.light
# |selectattr('attributes.friendly_name','eq',select)
# |map(attribute='entity_id')|join %}
# {{is_state_attr(group,'dynamics',true)}}
script:
activate_hue_dynamic_scene:
alias: Activate Hue dynamic scene
mode: restart
icon: mdi:power
sequence:
- condition: >
{{is_state('binary_sensor.selected_hue_group_active_scene','off')}}
# first record current state of lights in the selected group
- service: scene.create
data:
scene_id: before_dynamic_scene
snapshot_entities:
- >
{% set select = states('input_select.hue_group')|slugify %}
{% set group ='light.' + select %}
{{group}}
- service: hue.activate_scene
data:
dynamic: true
speed: >
{{states('input_number.hue_dynamic_scene_speed')|int}}
brightness: >
{{states('input_number.hue_dynamic_scene_brightness')|int}}
target:
entity_id: >
{% set select = states('input_select.hue_dynamic_scene')|slugify %}
{{'scene.' + select}}
# {% set select = states('input_select.hue_dynamic_scene')%}
# {{states.scene
# |selectattr('attributes.friendly_name','eq',select)
# |map(attribute='entity_id')|join}}
deactivate_hue_dynamic_scene:
alias: Deactivate Hue dynamic scene
mode: restart
icon: mdi:power-off
sequence:
- condition: >
{{is_state('binary_sensor.selected_hue_group_active_scene','on')}}
- service: hue.activate_scene
data:
dynamic: false
target:
entity_id: >
{% set select = states('input_select.hue_dynamic_scene')|slugify %}
{{'scene.' + select}}
# reset the lights to the state before the dynamic scene activation
- service: scene.turn_on
target:
entity_id: scene.before_dynamic_scene
automation:
- alias: Auto populate Hue group input select
id: Auto populate Hue group input select
mode: restart
trigger:
platform: event
event_type: delayed_homeassistant_start
action:
service: input_select.set_options
target:
entity_id: input_select.hue_group
data:
options: >
{{states.light
|selectattr('attributes.is_hue_group','eq',true)
|map(attribute='name')|list}}
- alias: Auto populate Hue dynamic scene input select
id: Auto populate Hue dynamic scene input select
mode: restart
trigger:
- platform: event
event_type: delayed_homeassistant_start
- platform: state
entity_id: input_select.hue_group
action:
service: input_select.set_options
target:
entity_id: input_select.hue_dynamic_scene
data:
options: >
{% set hue_group = states('input_select.hue_group') %}
{{states.scene
|selectattr('attributes.group_name','eq',hue_group)
|selectattr('attributes.is_dynamic','eq',true)
|map(attribute='name')|list}}
type: entities
title: Set Hue scenes
show_header_toggle: false
card_mod:
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
ha-card {
margin: 0px 0px 16px 0px; /* create space before next card in view*/
}
entities:
- input_select.hue_group
- type: custom:fold-entity-row
card_mod:
style: |
#measure {
max-height: 300px;
overflow-x: hidden;
overflow-y: scroll;
}
head:
type: section
label: Regular scenes
card_mod:
style: |
.label {
margin-left: 0px;
}
padding: 0
no_animation: true
entities:
- type: custom:auto-entities
card:
type: entities
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 0px -16px;
}
show_empty: false
filter:
template: |
{% set hue_group = states('input_select.hue_group') %}
{% set ns = namespace(scenes=[]) %}
{%- for s in states.scene
if hue_group == s.attributes.group_name and
s.attributes.is_dynamic != true %}
{% set ns.scenes = ns.scenes + [{'entity':s.entity_id,
'name': s.object_id.split(hue_group|slugify +'_')[1]|capitalize|replace('_',' ') }] %}
{%- endfor %}
{{ns.scenes}}
- type: conditional
conditions:
- entity: binary_sensor.selected_hue_group_has_active_scenes_available
state: 'on'
row:
type: custom:fold-entity-row
head:
type: section
label: Dynamic scenes
card_mod:
style: |
.label {
margin-left: 0px;
}
padding: 0
no_animation: true
entities:
- type: custom:auto-entities
card:
type: entities
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 0px -16px;
}
.card-content {
max-height: 250px;
overflow-y: scroll;
}
filter:
template: |
{% set hue_group = states('input_select.hue_group') %}
{% set ns = namespace(scenes=[]) %}
{%- for s in states.scene
if hue_group == s.attributes.group_name and
s.attributes.is_dynamic == true %}
{% set ns.scenes = ns.scenes + [{'entity':s.entity_id,
'name': s.object_id.split(hue_group|slugify +'_')[1]|capitalize|replace('_',' ') }] %}
{%- endfor %}
{{ns.scenes}}
- input_select.hue_dynamic_scene
- input_number.hue_dynamic_scene_speed
- input_number.hue_dynamic_scene_brightness
- type: conditional
conditions:
- entity: binary_sensor.selected_hue_group_active_scene
state: 'off'
row:
entity: script.activate_hue_dynamic_scene
icon: mdi:play
action_name: play
- type: conditional
conditions:
- entity: binary_sensor.selected_hue_group_active_scene
state: 'on'
row:
entity: script.deactivate_hue_dynamic_scene
icon: mdi:stop
action_name: stop
- type: conditional
conditions:
- entity: binary_sensor.hue_groups_dynamic_scening
state: 'on'
row:
type: custom:fold-entity-row
head:
type: section
label: Currently scening group
card_mod:
style: |
.label {
margin-left: 0px;
}
padding: 0
no_animation: true
entities:
- type: custom:auto-entities
card:
type: entities
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 0px -16px;
}
show_empty: false
filter:
include:
- attributes:
dynamics: true
- type: conditional
conditions:
- entity: binary_sensor.hue_groups_dynamic_scening
state: 'on'
row:
type: custom:fold-entity-row
head:
type: section
label: Currently scening lights
card_mod:
style: |
.label {
margin-left: 0px;
}
padding: 0
no_animation: true
entities:
- type: custom:auto-entities
card:
type: entities
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 0px -16px;
}
show_empty: false
filter:
include:
- attributes:
dynamics: dynamic_palette
- type: custom:template-entity-row
entity: |
light.{{states('input_select.hue_group')|slugify}}
secondary: >
{% set x = ['unknown','unavailable'] %} {% if
states('input_select.hue_group') not in x %} {% set object =
states('input_select.hue_group')|slugify %} {% set group = 'light.' +
object %}
{% set bri = state_attr(group,'brightness') %}
{% set rgb = state_attr(group,'rgb_color') %}
{% if states(group) == 'on' %} Bri: {{bri}}, Rgb: {{rgb}}
{% else %} Off
{% endif %} since {{relative_time(states[group].last_changed) if (states[group]
and states[group].last_changed not in x) else 'Initializing....'}}
{% else %} Not yet set {% endif %}
toggle: true
- type: custom:fold-entity-row
head:
type: section
label: Automations
card_mod:
style: |
.label {
margin-left: 0px;
}
padding: 0
no_animation: true
entities:
- entity: automation.auto_populate_hue_group_input_select
secondary_info: last-triggered
- entity: automation.auto_populate_hue_dynamic_scene_input_select
secondary_info: last-triggered
If you want the scene icons from the hue app like in this post by @Mariusthvdb, then:
homeassistant:
customize_glob:
scene.*adrift:
entity_picture: /local/hue_scene_icons/adrift.png
scene.*amber_bloom:
entity_picture: /local/hue_scene_icons/amber_bloom.png
scene.*amethyst_valley:
entity_picture: /local/hue_scene_icons/amethyst_valley.png
scene.*arctic_aurora:
entity_picture: /local/hue_scene_icons/arctic_aurora.png
scene.*autumn_gold:
entity_picture: /local/hue_scene_icons/autumn_gold.png
scene.*beginnings:
entity_picture: /local/hue_scene_icons/beginnings.png
scene.*blood_moon:
entity_picture: /local/hue_scene_icons/blood_moon.png
scene.*blossom:
entity_picture: /local/hue_scene_icons/blossom.png
scene.*blue_lagoon:
entity_picture: /local/hue_scene_icons/blue_lagoon.png
scene.*blue_planet:
entity_picture: /local/hue_scene_icons/blue_planet.png
scene.*bright:
entity_picture: /local/hue_scene_icons/bright.png
scene.*cancun:
entity_picture: /local/hue_scene_icons/cancun.png
scene.*chinatown:
entity_picture: /local/hue_scene_icons/chinatown.png
scene.*concentrate:
entity_picture: /local/hue_scene_icons/concentrate.png
scene.*cool_bright:
entity_picture: /local/hue_scene_icons/cool_bright.png
scene.*crocus:
entity_picture: /local/hue_scene_icons/crocus.png
scene.*dimmed:
entity_picture: /local/hue_scene_icons/dimmed.png
scene.*disturbia:
entity_picture: /local/hue_scene_icons/disturbia.png
scene.*dreamy_dusk:
entity_picture: /local/hue_scene_icons/dreamy_dusk.png
scene.*emerald_flutter:
entity_picture: /local/hue_scene_icons/emerald_flutter.png
scene.*emerald_isle:
entity_picture: /local/hue_scene_icons/emerald_isle.png
scene.*energize:
entity_picture: /local/hue_scene_icons/energize.png
scene.*fairfax:
entity_picture: /local/hue_scene_icons/fairfax.png
scene.*first_light:
entity_picture: /local/hue_scene_icons/first_light.png
scene.*forest_adventure:
entity_picture: /local/hue_scene_icons/forest_adventure.png
scene.*frosty_dawn:
entity_picture: /local/hue_scene_icons/frosty_dawn.png
scene.*galaxy:
entity_picture: /local/hue_scene_icons/galaxy.png
scene.*golden_pond:
entity_picture: /local/hue_scene_icons/golden_pond.png
scene.*hal:
entity_picture: /local/hue_scene_icons/hal.png
scene.*hazy_days:
entity_picture: /local/hue_scene_icons/hazy_days.png
scene.*honolulu:
entity_picture: /local/hue_scene_icons/honolulu.png
scene.*horizon:
entity_picture: /local/hue_scene_icons/horizon.png
scene.*ibiza:
entity_picture: /local/hue_scene_icons/ibiza.png
scene.*lake_mist:
entity_picture: /local/hue_scene_icons/lake_mist.png
scene.*lake_placid:
entity_picture: /local/hue_scene_icons/lake_placid.png
scene.*lily:
entity_picture: /local/hue_scene_icons/lily.png
scene.*magneto:
entity_picture: /local/hue_scene_icons/magento.png
scene.*majestic_morning:
entity_picture: /local/hue_scene_icons/majestic_morning.png
scene.*memento:
entity_picture: /local/hue_scene_icons/memento.png
scene.*meriete:
entity_picture: /local/hue_scene_icons/meriete.png
scene.*miami:
entity_picture: /local/hue_scene_icons/miami.png
scene.*midsummer_sun:
entity_picture: /local/hue_scene_icons/midsummer_sun.png
scene.*midwinter:
entity_picture: /local/hue_scene_icons/midwinter.png
scene.*misty_ridge:
entity_picture: /local/hue_scene_icons/misty_ridge.png
scene.*moonlight:
entity_picture: /local/hue_scene_icons/moonlight.png
scene.*motown:
entity_picture: /local/hue_scene_icons/motown.png
scene.*mountain_breeze:
entity_picture: /local/hue_scene_icons/mountain_breeze.png
scene.*narcissa:
entity_picture: /local/hue_scene_icons/narcissa.png
scene.*nebula:
entity_picture: /local/hue_scene_icons/nebula.png
scene.*nightlight:
entity_picture: /local/hue_scene_icons/nightlight.png
scene.*ocean_dawn:
entity_picture: /local/hue_scene_icons/ocean_dawn.png
scene.*orange_fields:
entity_picture: /local/hue_scene_icons/orange_fields.png
scene.*osaka:
entity_picture: /local/hue_scene_icons/osaka.png
scene.*painted_sky:
entity_picture: /local/hue_scene_icons/painted_sky.png
scene.*palm_beach:
entity_picture: /local/hue_scene_icons/palm_beach.png
scene.*pensive:
entity_picture: /local/hue_scene_icons/pensive.png
scene.*precious:
entity_picture: /local/hue_scene_icons/precious.png
scene.*read:
entity_picture: /local/hue_scene_icons/read.png
scene.*relax:
entity_picture: /local/hue_scene_icons/relax.png
scene.*resplendant:
entity_picture: /local/hue_scene_icons/resplendant.png
scene.*rest:
entity_picture: /local/hue_scene_icons/rest.png
scene.*rio:
entity_picture: /local/hue_scene_icons/rio.png
scene.*rolling_hills:
entity_picture: /local/hue_scene_icons/rolling_hills.png
scene.*ruby_glow:
entity_picture: /local/hue_scene_icons/ruby_glow.png
scene.*savanna_sunset:
entity_picture: /local/hue_scene_icons/savanna_sunset.png
scene.*scarlet_dream:
entity_picture: /local/hue_scene_icons/scarlet_dream.png
scene.*soho:
entity_picture: /local/hue_scene_icons/soho.png
scene.*spring_blossom:
entity_picture: /local/hue_scene_icons/spring_blossom.png
scene.*spring_lake:
entity_picture: /local/hue_scene_icons/spring_lake.png
scene.*starlight:
entity_picture: /local/hue_scene_icons/starlight.png
scene.*still_waters:
entity_picture: /local/hue_scene_icons/still_waters.png
scene.*sunday_morning:
entity_picture: /local/hue_scene_icons/sunday_morning.png
scene.*sundown:
entity_picture: /local/hue_scene_icons/sundown.png
scene.*sunflare:
entity_picture: /local/hue_scene_icons/sunflare.png
scene.*tokyo:
entity_picture: /local/hue_scene_icons/tokyo.png
scene.*tropical_twilight:
entity_picture: /local/hue_scene_icons/tropical_twilight.png
scene.*tyrell:
entity_picture: /local/hue_scene_icons/tyrell.png
scene.*valley_dawn:
entity_picture: /local/hue_scene_icons/valley_dawn.png
scene.*vapor_wave:
entity_picture: /local/hue_scene_icons/vapor_wave.png
scene.*warm_embrace:
entity_picture: /local/hue_scene_icons/warm_embrace.png
scene.*winter_beauty:
entity_picture: /local/hue_scene_icons/winter_beauty.png
scene.*winter_mountain:
entity_picture: /local/hue_scene_icons/winter_mountain.png
Thank you so much for the tutorial and thanks to the original creator. More people need to know about this, works well and will finally allow me to ditch the Hue app.
Indeed, thanks to @Mariusthvdb for all his efforts in putting this code together.
Building on his work, I mashed up a scene selector suited for the T6E android panels that I use around the house:
It’s pretty ugly, don’t copy/paste this, use it as a basis to make your own.
Here’s the gist of it:
type: custom:swipe-card
parameters:
shortSwipes: false
pagination:
el: .swiper-scrollbar
spaceBetween: 10
effect: coverflow
coverflowEffect:
rotate: 30
slideShadows: false
cards:
- type: custom:auto-entities
card:
type: grid
columns: 4
card_param: cards
filter:
template: |-
{% set hue_group = 'guestbed1' %}
{% for s in states.scene
if hue_group == s.attributes.group_name and
s.attributes.is_dynamic == true -%}
{% if loop.index0 >= 0 and loop.index0 < 12 -%}
{{
{
'type': 'custom:button-card',
'entity': s.entity_id,
'aspect_ratio': 1/1,
'show_state': false,
'show_entity_picture': true,
'name': s.object_id.split(hue_group|slugify +'_')[1]|capitalize|replace('_',' '),
}
}},
{%- endif %}
{%- endfor %}
Then you’d repeat the auto-entities section, adjusting as necessary for your setup. Would probably be better suited to a macro.
I tried to do this with just the swiper card and one auto-entities template, but swiper card doesn’t seem to handle the grid capabilities of swiper.js.
Couldn’t ever figure out how to get this to work. I was able to find an alternative in homebridge.
This is great work. Well done @mattmon and @Mariusthvdb. If it ever makes sense to merge the hass-hue-icons repo into this and create a one stop shop, please let me know. Life hasn’t afforded me the time to be as hands on as I’d like with this recently.
Hey all! I have tried to get this to work and I think I’m on the right path but missing something. I have created the hue_scene_selector.yaml file, uploaded the scene icons to /www/hue_scene_icons , appended the yaml file with the scene icon locations. After that I ran the 2 generated automations. But after no luck and rebooting HA, my scene icons are just blank:
Any suggestions?
you should define what ‘this’ is…
my original setup, or the piggyback guideline by @mattmon ?
If the latter , please open a another topic on the matter, because it is only confusing to mix the two here.
if you want your scenes to show an image, all you have to do is customize_glob like I posted in one of the first posts
Looks like you’re almost there.
Can you isolate the icon problem to either the path or configuration?
Check in your web console and see if HA is trying to load the icons.
What do you see?
I’d like to think that my guide to installing your code makes thing LESS confusing, haha 
Though, the swiper UI modification, while building upon your work, definitely muddies the water a bit.
If you’re just getting started with this, start with running @Mariusthvdb’s code. Once you understand that, my example mod will be much more helpful to you.
tbh, you’re contradicting yourself here, but I’lll leave it be…
Not sure if you should guide people into using the buggy and neglected Swiper card at all really, it has proven to be rather a tricky thing in various configs.
I’ll ask again, if you want your own instructions to be the center of discussion, please open a separate thread, because now, you’re really confusing things, and not helping anyone.
in fact the only thing of real importance was understanding the various templates and how they get instantiated.
the rest is mere frontend sparkle, and to each their own.
Marius,
I appreciate your work with this as it’s great for any Hue user, but the guide you made was not helpful in getting this up and working, especially someone with less HA knowledge like myself at that point a few months ago. mattmon’s guide was key in me getting it working. I’m currently using his original guide that he posted on September 5th.
Yep, that’s exactly how I feel as well
well, ofc you’re free to copy anything you like, but my advice would really be to actually finally start understanding the things that are happening.
In the end, it is as simple as saving the backend file somewhere in your backend configuration and the frontend files in your Dashboard setup.
the rest is automatic. (so any instruction to ‘run’ your automations is just silly, because that is what automations do)
put this way, the user has 2 things to do:
copying anyones, mine or Matt’s, configuration blindly wont help you achieve that. as I suggested before: start with the templating, and understand what that does. Ive tried to document the whole development from the first template I made atop, to the later changes that became possible with HA templating developments and card evolutions.
Templating is the crux of this card, because that is not only used in backend, but here, brought to the Frontend by means of the auto-entities card.
Keep up with the HA developments: I’ve moved all of my helpers to the UI, which allows for in UI editing and is safer in the end. less yaml, more secure and robust.
as a matter of fact, only last week have I changed my templates to incorporate new developments.
I hope you get what you want, but keep in mind: HA changes constantly, you need to grasp what that means for (y)our configs, or you wont be able to keep it working long term.
Well said.
I’d also add that each use case is different, so what works well in one installation may be unnecessary or not work at all on the next.
For example, lighting automation isn’t important to me. Eye candy and touch friendliness are.
Sure, the slider card might be problematic, but it works great for my narrow use case.
And you’re right; after diving into the templates, I quickly realized that I didn’t really need any of the automation stuff.
Doesn’t mean I’m any less appreciative of your code leading me down the right path 
From what I can tell, a big part of what makes the HA project such a success is how the HA community can build upon one another’s accomplishments.
