Problem statement
Light control of brightness and temperature is OK, but there is a good opportunity to make it feel a lot more intuitive and user-centric than with the current slider system - a dual axis card that represents both.
This is a small bet but its already been designed and POC by @mbb365 in OpenHomeFoundation/ux-design#7 so we know it works.
Its goal its not to replace current Lights management, but to help make multiple lights control more approachable, when configuring light and color.
Scope & Boundaries
In scope
It has a vibe coded approach but probably needs to be reworked to some extent, since the frontend has several glitches in movement. But the end result is really good.
I finally had a chance to test this properly as a custom card, and it works wonderfully. Its linked in the design ticket, but shortcut here https://github.com/mbb365/dual-axis-controller
Not in scope
- Future changes and redesigns
Foreseen solution
What I am yet to fully nail down is how they are represented - that is either going to be a toggle or a button.
Group and Individual Interaction Modes
1. Group Control
aka 'make all lights match'
Definition
Group Control treats the selected lights as one shared lighting unit. Any change made on the Dual Axis Controller is applied to every light in the group using the same final value.
Interaction
When the user drags on the controller, all selected lights move to the same brightness and color / temperature position.
Example
If the user sets the controller to 70% brightness and warm white, every light in the group becomes 70% brightness and warm white.
Use when
The user wants the whole room, area, or group to feel consistent.
⸻
2. Group Relative Control
aka 'adjust all lights while preserving differences'
Definition
Group Relative Control changes all selected lights together while preserving the differences between them.
Instead of forcing every light to the same value, the controller applies a relative adjustment to each light based on its current state.
Interaction
When the user drags brighter, all lights become brighter by a similar amount. When the user drags warmer or cooler, all lights shift in that direction, but their individual differences remain.
Example
If one light is at 30% brightness and another is at 60%, increasing brightness by 20% moves them to roughly 50% and 80%. They do not both become the same value.
Use when
The user has already created a balanced lighting scene and wants to adjust the overall feeling without flattening it.
⸻
3. Individual Controls Within a Group
aka 'adjust one light inside the group'
Definition
Individual Controls allow the user to select and adjust a single light inside a group without leaving the group context.
The group remains visible, but the controller temporarily targets one selected light.
Interaction
The user selects a light from the group, then uses the Dual Axis Controller to adjust only that light’s brightness and color / temperature. Other lights in the group are not changed.
Example
In a living room group, the user selects only the floor lamp and makes it warmer and dimmer. The ceiling lights and table lamp stay unchanged.
Use when
The user wants to fine-tune one light while still understanding it as part of the larger room or group.
⸻
Base rule
The Dual Axis Controller should always make clear what it is currently targeting be it a -
- One light
- A whole group as one shared value
- A group using relative adjustment
- A single light within a group
Community signals
Not from the active community, but this would help a lot make Home Assistant feel less techy if the light controls can be done in a matrix and groups can be controlled like that.
Risks & open questions
No response
Appetite
Small - just adding the matrix to current light card.
Execution issues
No response
Decision log
| Date |
Decision |
Outcome |
| 8/6 |
Design finalized |
Scoped inside a "light" option instead of its own card, and no multiple visualization options (matrix etc). Ready for implementation. |
Problem statement
Light control of brightness and temperature is OK, but there is a good opportunity to make it feel a lot more intuitive and user-centric than with the current slider system - a dual axis card that represents both.
This is a small bet but its already been designed and POC by @mbb365 in OpenHomeFoundation/ux-design#7 so we know it works.
Its goal its not to replace current Lights management, but to help make multiple lights control more approachable, when configuring light and color.
Scope & Boundaries
In scope
It has a vibe coded approach but probably needs to be reworked to some extent, since the frontend has several glitches in movement. But the end result is really good.
I finally had a chance to test this properly as a custom card, and it works wonderfully. Its linked in the design ticket, but shortcut here https://github.com/mbb365/dual-axis-controller
Not in scope
Foreseen solution
What I am yet to fully nail down is how they are represented - that is either going to be a toggle or a button.
Group and Individual Interaction Modes
1. Group Control
aka 'make all lights match'
Definition
Group Control treats the selected lights as one shared lighting unit. Any change made on the Dual Axis Controller is applied to every light in the group using the same final value.
Interaction
When the user drags on the controller, all selected lights move to the same brightness and color / temperature position.
Example
If the user sets the controller to 70% brightness and warm white, every light in the group becomes 70% brightness and warm white.
Use when
The user wants the whole room, area, or group to feel consistent.
⸻
2. Group Relative Control
aka 'adjust all lights while preserving differences'
Definition
Group Relative Control changes all selected lights together while preserving the differences between them.
Instead of forcing every light to the same value, the controller applies a relative adjustment to each light based on its current state.
Interaction
When the user drags brighter, all lights become brighter by a similar amount. When the user drags warmer or cooler, all lights shift in that direction, but their individual differences remain.
Example
If one light is at 30% brightness and another is at 60%, increasing brightness by 20% moves them to roughly 50% and 80%. They do not both become the same value.
Use when
The user has already created a balanced lighting scene and wants to adjust the overall feeling without flattening it.
⸻
3. Individual Controls Within a Group
aka 'adjust one light inside the group'
Definition
Individual Controls allow the user to select and adjust a single light inside a group without leaving the group context.
The group remains visible, but the controller temporarily targets one selected light.
Interaction
The user selects a light from the group, then uses the Dual Axis Controller to adjust only that light’s brightness and color / temperature. Other lights in the group are not changed.
Example
In a living room group, the user selects only the floor lamp and makes it warmer and dimmer. The ceiling lights and table lamp stay unchanged.
Use when
The user wants to fine-tune one light while still understanding it as part of the larger room or group.
⸻
Base rule
The Dual Axis Controller should always make clear what it is currently targeting be it a -
Community signals
Not from the active community, but this would help a lot make Home Assistant feel less techy if the light controls can be done in a matrix and groups can be controlled like that.
Risks & open questions
No response
Appetite
Small - just adding the matrix to current light card.
Execution issues
No response
Decision log