I’ve been experimenting with custom icons for the past couple of weeks, creating a floor plan-based UI in OH3 that my wife will tolerate. We have a lot of smart lights, and one of my goals was to help her (and me) find the right lamp quickly without relying on tooltips and text prompts. This is especially important for rooms where there is a cluster of lights close together.
My first rev was just some custom icons for each light type (which you can download from GitHub, though this is still a work in progress). But I wanted more. Namely, could I make the icons match the color of the light?
The answer to that, strictly speaking, is “no”. But…you can get really close if you are crazy, don’t mind having directories with thousands of files, and are willing to work with lengthy-ish expressions in the UI. Here’s what that looks like:
My solution was to auto-generate icons with hue variations in 30-degree increments, from 0 to 360 (360 is needed for rounding), each with saturation variations in 25% steps and brightness levels in 10% steps. For those doing the math at home, that means each base icon has 780 variations. I named them “iconxHxSxB.svg” and then used an expression in the UI to set the icon dynamically:
This gives each icon a reasonably accurate representation of the color of the light itself. It’s not perfect, but it works and looks great (or I think it does). As long as you don’t mind the aforementioned inconveniences.
This started somewhat as a thought exercise, and now I’m kinda addicted to it. There are still some tweaks to be made, but when I have things to a point where I’m confident they will work, I’ll be sharing the color icons, too, along with quick instructions on how to use them.
Thanks, @rbuurveld. Hopefully I’ll be ready to release when you are ready to try things out. The delay on my end is 1) making sure there’s not a better/easier way to do this in the UI (the less work and complexity on the UI end the better), and 2) updating icons so that they will still be visible when a light goes white, which will mean putting a thin border around those lights that don’t currently have one.
Did you look into using the f7 icons and expressions to control the color of the icon? Then you wouldn’t need to create/save so many icons. What I don’t know is if one can define a custom color or have to use one of the defaults.
I tried to get F7 icons to work with arbitrary colors but neither hex syntax or rgb() syntax worked. The only thing that did work was their default set of color names.
But beyond that, the F7 icon selection is very generic. The question I got from my wife was, “Which one is the lamp?”
Also, drawing the icons is fun. And I wrote a Python script to generate the color variations so once an icon is created it takes all of 5 seconds to build them out. The ext3 and ext4 filesystems don’t have any perf losses when you are referencing a file by name in a large directory, so there haven’t really been issues so far.
It would be nice if OH supported subdirectories for icons, though, as it would help keep things organized.
One feature of the markers that is not too obvious is that you can use a combination of useTooltipAsLabel, tooltipPermanent and tooltipStyles to pretty much “write” anything you want on the floorplan, and apply CSS in the process.
coords: 266.41878600484523,877.2325880647344
useTooltipAsLabel: true
tooltipPermanent: true
tooltip: ⬮
tooltipStyles:
textShadow: 0 0 2px black
fontSize: 20px
color: yellow
The thing here is that openHAB color items are HSV and CSS colors only accept HSL - it’s not too hard to convert from one to the other but in an expression it’s still quite tedious. There are util functions in f7 to help with that but they are not part of the expression scope (yet).
This is one of the first ideas I tried, but ran into exactly the issue you describe: transforming hsb to rgb or hsl with inline expressions ranges from ugly to really ugly.
CSS support for HWB is proposed for CSS4. But now I am addicted to icons, so…
You can use the style attribute and then use any CSS color you like for your icons
Now that I have a proof of concept, I am exploring options for using CSS to selectively colorize the SVG icons. That moves the load to the client which I am not super-excited about, but it would eliminate the need for pregens and give you the full color range…provided you are willing to do the HSV→HSL conversion (which is easy, but a bit of a hassle as an inline expression).
First of all, nice work! It seems to be very ambitious project if I have a look at the dozens of images in your github repo - I like your passion!
Don’t know if it’s ‘easier’, but there might be ways to reduce the complexity if the other extreme would be to creating thousands of icons
It should work with css styles, besides the ones that the config parameter color has to offer (which is indeed limited to the f7-colorset) as Thomas mentioned.
Fully agree with you (and your wife) here - it would make your UI easier to handle and also a bit more unique.
Another example of how passionate you are with this.
I do similar things in my setup right now and this would be the solution I would recommend here.
What I had in mind would be to combine the possibility that Yannick mentioned. Reusing the always visible tooltip-window to apply your svg and changing its elements colors with the help of expressions inside that svg - which could look something like this (I used your Hue Iris image as an example here):
I did not apply any hsv2hsl conversion as it’s just a quick shot, but it should be possible and maybe the mentioned f7 util functions will be implemented at some point, which would make this a lot easier & cleaner.
This is what the plan-marker component would look like:
Some things you have to be aware of with this solution:
You have to escape the quotation marks inside the encoded svg to make the whole background-image a valid expression.
The name of the item you want to control inside the background-image expression have to be hardcoded, as it’s not possible to reuse the parameters of other widgets or set property parameters on the floor pages itself right now (afaik).
You can manipulate the size of the image with the ‘iconSize’ config parameter
I’m curious to see your final solution. Keep up the good work!
Wow! You have saved me a lot of time here, and the result looks terrific! And it’s pretty fun seeing my Iris image lit up using this method.
I can use a script to automate the embedded SVG, including the quoting and the item name substitution. That will eliminate accidents and speed up entry. It’s also something I can include in my GitHub archive, and give people the option of pregens or on-the-fly coloration.
There are a couple of compact representations of HSV->HLS conversion that should be good enough/close enough for this purpose.
I need to go over my SVG drawings again and make sure they are as compact as possible. Just for sanity’s sake.
Can’t thank you enough for your help and input. It is much appreciated!
You created pretty nice representations of the real-world objects - so it’s also beautiful to look at.
If you’re into scripting, this sounds like an awesome idea and would make it much easier for other people recreating something similar.
Yes, think so too. But still the easiest and maybe cleanest way without concatenating calculations would be the f7 function. You might also save some lines of code with that.
They seems to be thought out well already without that much room for optimizations.
In regards of saving some bytes of code, you could…
…group the elements that the color should be assigned to and apply the fill style to that group instead of the individual element, which would reduce the needed expressions from 3 to 1 (in this case).
P.S. All of this could be done also in the layout pages with the benefit that you could use props inside the svg to assign different items dynamically to the image.
Adobe Illustrator did the SVG export and like any automated process it can only optimize so much. Now that I have most of these drawings where I want them, I can tweak the SVG by hand. I won’t have as much time to poke at this in the coming week or two, but I will keep at it. There are some great suggestions in here.
