Hey everyone, I wanted to share an exciting project I’ve been working on with OpenHAB3 (OH3). Customizing the user interface has always been a passion of mine, especially when it comes to making smart home automation more intuitive for everyday use.
A few weeks ago, I set out to create a floor plan-based UI that my wife and I could easily navigate. The goal was to make it simple to find and control the right lights without relying on tooltips or text prompts, especially in rooms where multiple lights are clustered together.
My first attempt involved designing custom icons for each type of light fixture. While this was a good start, I wanted to push the envelope further. The idea struck me: what if the icons could dynamically change color to match the actual state of the lights?
After some research and experimentation, I discovered that while it’s not straightforward to have icons update in real-time, there’s a clever workaround. The solution involves generating multiple icon variations for each base icon, covering a wide range of color, saturation, and brightness combinations.
Here’s how it works:
- Color Variations: I created icons in 30-degree hue increments, from 0 to 360 degrees.
- Saturation Steps: Each hue has variations in 25% saturation increments.
- Brightness Levels: And for each saturation level, I added brightness variations in 10% steps.
This results in 780 variations per base icon! While it’s a lot of files, the payoff is worth it. Using an expression in the UI, the system dynamically selects the closest matching icon based on the light’s current state.
For example, if the kitchen lights are set to a warm yellow with 70% brightness, the UI automatically displays an icon that closely matches that color and brightness level. It’s not perfect, but it’s incredibly close and makes navigating the UI much more intuitive.
This project started as a fun experiment, but it’s quickly become something I’m really proud of. I’m still tweaking some details, like optimizing the file generation process and refining the expressions for better accuracy. Once I’m confident with the setup, I plan to share the icons and instructions with the community.
If anyone has tips or suggestions on improving this approach, I’d love to hear them! It’s been an addictively rewarding project, and I can’t wait to see how it evolves further. 
