no. it’s just a bit of yaml 
To someone new, it is a lot and not super clear what needs to be done to use it.
1 Like
I tried asking ChatGPT to infer the instructions from this post and it also failed 
).
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!
- place the backend YAML; either in a package or in each appropriate config file
- place the frontend YAML in a custom lovelace card
- run the auto populate automation(s)
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:
3 Likes
Prerequisites:
- A hue bridge (I use diyHue). Must have at least one room configured with a scene saved to the bridge.
- HA Hue integration connected to that bridge. Hue scenes should already exist within your HA instance.
- These dependencies from HACS: card-mod, fold-entity-row. auto-entities, template-entity-row
Installation
- Add the following to your configuration.yaml:
homeassistant:
packages:
hue_scene_selector: !include hue_scene_selector.yaml
- Create a new file named hue-scene-selector.yaml, with the following contents:
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}}
- Add a card to any dashboard, choose the “Manual” card type with the following contents:
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
- Go to Settings → Automations and run the two automations to populate the front end lists.
If you want the scene icons from the hue app like in this post by @Mariusthvdb, then:
- Create a new directory within www named “hue_scene_icons”
- Download the scene icons and put them in there
- Append the following to your hue_scene_selector.yaml:
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
1 Like
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.
2 Likes
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.
2 Likes