Hey community and a big THANK YOU for the great OH3 update!
I’m currently playing around with the new widgets and I want to include own icons.
Unfortunately I can’t make it work. The icons are not displayed in the Main UI. I named my icons according to the documentation https://www.openhab.org/docs/configuration/items.html#icons
I placed my icons in the folder
icons/clasic/ and also tried to place it into
icons/. Both ways didn’t work.
I didn’t make it work in a widget. So I tried to use my own icon in a Cell in the Layout Page designer. There I also had the same problem.
My sample YAML configuration (generated through the visual configuration panel) of the cell in the layout page:
component: oh-cell config: header: Header-TEXT icon: wassertropfen footer: Footer-TEXT subtitle: Subtitle-TEXT title: Title-TEXT
Thank you all in advance!
This text will be hidden
In the Summary above is the original post is included.
Below I would like to describe my solution and maybe it can support other community members.
1. Create your own icon
To create icons I use the free tool https://app.diagrams.net/ or also known as https://draw.io
With this tool you can make really good vector based graphics <=> resolution of the graphic is independent if graphic is zoomed. So that is really good
In the screenshot above you can see, I created three different color schemas for an valve icon:
- Green icon: state of the switch “ON”
- Red icon: state of the switch “OFF”
- Black icon: base state or UDEF state of switch
2. Export your icons
The mentioned program above has some good options for exporting drawn shapes. My workflow is as follows:
2.1: Only select the shape or the groups of shapes, which should be in ONE custom icon. In the example below I selected only the green icon of my valve
2.2: Now click in the main menu of the mentioned program: => File => Export as => SVG
2.3: A small popover window will be displayed. In this window one can select the export options. I prefer to export with transparent background and I don’t include a copy of my diagram. This will make the SVG file unnecessary big! Store your diagram in the native way!
Important ist to select “Selection only” and “Crop”. This will produce an SVG file, which is only big enough to hold your custom icon!
2.4: After clicking Export a window will pop up of your operating system to ask you where to store the exported file. Store the SVG custom icon file in the standard folder of openHAB. The directory structure is shown below.
For my green valve icon I chose following file name:
The file name follows the naming schema presented in the openHAB documentation: Items | openHAB
I extended this naming schema for my personal use with an prefix “water_”. I call this prefix “DOMAIN”. So everything what belongs to the domain “WATER” I prefix with “water_”. Other possible domains would be for example “heating_”, “light_”, or what ever you like to have!
The dash or minus symbol after “magneticvalve” is to indicate possible state relevant icons. If the switch item is in the state “ON” the green custom icon will be selected by the openHAB UI.
+ openhab_conf/ | + icons/ | | | + classic/ | | +--- YOUR CUSTOM ICON.svg | | +--- <DOMAIN>_<ICONNAME>.svg | | +--- <DOMAIN>_<ICONNAME>-<STATE>.svg | + html/ and all the other standard folders
2.5: Repeat steps 2.1 till 2.4 for every state you wish to have. In my case or in the given example I created following file:
+ icons/ | | | + water_magneticvalve.svg | + water_magneticvalve-ON.svg | + water_magneticvalve-OFF.svg |
3. Configure your custom icons in your main UI
To make the icon state dependent (if valve is OFF => red icon; if valve is ON => green icon) then I needed to active the option “show advanced” or you can choose to edit it directly in the YAML format.
component: oh-label-card config: title: Toggle the Magnetic Valve item: Main_Magnetic_Valve action: toggle icon: oh:water_magneticvalve actionCommand: ON actionCommandAlt: OFF label: Magnetic Vavle iconUseState: true
Important: if you want state dependent icons don’t use the icon name with the given state! (in the example ON or OFF). Choose the basic icon with no file type! (in the example - no “.svg”). Also add the prefix “oh:” in the YAML configuration at the setting “item:”. Without this prefix, openHAB will not find your custom icon. (Thanks to @Vradatta for pointing out this! )
With the setting described, you get the following results:
Item is switched OFF
Item is switched ON
As you can see, the color of the custom icon changes from red to green. For illustration purposes I also added a basic “oh-toggle-card” to show the reader the state change of the linked switch item.
I hope my basic attempt to describe these steps can help other community members!
Have fun with creating your own icons
Disclaimer: If you find any personal information of myself in the presented screenshots, please point this out to me. I will update the corresponding screen shots.Thank you!
Hint to myself: Never think your documented workflow is finished in the first draft