[SOLVED] Custom Icons

I read lots of posts for the last week about how to include custom icons on OH2, but still is not clear to me, and after trying many different options still I didn’t manage to do it.

Can someone please clear it…

1- Where the new icons must be stored. (I am using RPI) I read that is must be in conf/clasic/, but this folder doesn’t exist. So first question, where exactly must be stored the icons.

2- What extension? As far as I read they must be .svg

3- Now that we have the correct icons in the correct location, is there any other step to do?

4- How we call the icon in the .Items? by the file name?<icon_name>

Thanks for clear it out.

2 Likes

Hi There,

i managed to display custom icons, so here is my advice

1.) Icons should be stored in conf folder using a new folder called icons/basic or icons/classic so you could use different icon depending on the ui you are using

2.) Nope you could use svg or png. Could be configured in paperUI

3.) Use them :slight_smile:

4.) yes just the filename without the extension. Example: door.png is referenced as door id with <> in items file or with “” in sitemap file

Hope this helps a little bit

Thomas

I’ll add that icons work best if there are no spaces in their names. ‘Temp High’ should be renamed to ‘Temp_High’ to get it to work.

I think I am still having the problem, Where is the folder location on a RPI

The config folder on RPI is on etc/openhab2

I already created the folder icons/classic with all icons inside in

And add one of the icons in this folder (in my case cd.svg) to an Item

String Sal_Album  "Album [%s]"  <cd >   (AV_Salon, Sonos) channel="sonos:PLAY1:salon:currentalbum"}

But it doesn’t work.
What am I doing wrong ?

Hi,

Your directory structure looks a little odd to me as I typically use the openhab-offline-2.0.0-SNAPSHOT zip file for installation of OH2. With that zip file, the contents are extracted into a new directory I created at /opt/openhab. As Thomas stated earlier, there will be a “conf” directory already provided with the zip file which contains the items, sitemaps, rules, etc. You create the new “icons” directory inside of conf, and then a “classic” directory under icons (icons/basic never worked for me even though I use the BasicUI exclusively).

In my setup, custom icons are placed under /opt/openhab/conf/icons/classic and used as any icons. OH2 finds them at that point without me needing to do anything else.

Your Sal_Album item looks correct as far as how to specify the “cd” icon inside the < > brackets, although I would avoid the trailing space (i.e. “” instead of “”).

Hope this helps.

@kevinw

Your directory structure looks a little odd to me as I typically use the openhab-offline-2.0.0-SNAPSHOT zip file for installation of OH2

I installed OH2 using atp-get from the repository. It installs the folders in different locations.

You can see it here:
http://docs.openhab.org/installation/apt.html

service configuration: /etc/default/openhab2
site configuration: /etc/openhab2
log files: /var/log/openhab2
userdata like rrd4j databases: /var/lib/openhab2 and subdirectories
openHAB application: /usr/share/openhab2

(icons/basic never worked for me even though I use the BasicUI exclusively)

Just to try it ,I created 2 folders /basic and /classic with all icons inside, but in any of the UI I can get the icons to be displayed

Your Sal_Album item looks correct as far as how to specify the “cd” icon inside the < > brackets, although I would avoid the trailing space

In my items file there is no space, is just an error when I pasted here.

String Sal_Album  "Album [%s]"  <cd>   (AV_Salon, Sonos) {channel="sonos:PLAY1:salon:currentalbum"}

So assuming that the icons are in the right location/folders, and the item is correct, then what is the problem? I am out of options…

Hi Igor,

i use the deb packages and my conf folder is /etc/openhab2 and the all the subfolders. The (cd and then a space) looks a little wired.

Did you select the right configuration in the paper UI

You will find it under configuration-> Servies->UI

And you you post a screenshot what exactly does not work.

Thomas

Thanks Thomas,

The (cd and then a space) looks a little wired.
Forget about that space, it was a mistake when I paste the code here. in my items file there is no space and it looks like that:

String Sal_Album  "Album [%s]"  <cd>   (AV_Salon, Sonos) {channel="sonos:PLAY1:salon:currentalbum"}

My configuration for classic:

My configuration for basic:

An this is the result… no icons:

Could you try it with a bitmap icon?

Thomas

It has to be .bmp or .png also works?

I tried with .png and same result. (I changed in UI conf from vector to bitmap)

I went ahead and performed a quick install of OH2 using apt-get method described in the docs (beta repo with “online” installation). Afterwards, I tried applying my custom icons in parallel directory to sitemaps and items (/etc/openhab2). OH2 is finding the icons in the following location for my apt-get installation image:

/etc/openhab2/icons/classic

I can see the icons properly in my (new) apt-get install with BasicUI. Here is the sitemap definition that I used…

Text item=KEYPAD_READY_LED label="Ready LED Status" icon="kw_led_green"

Icon is in the following location (I’m using vector icons)…

/etc/openhab2/icons/classic/kw_led_green.svg

I am using Intel hardware though (as opposed to RPi), but would be surprised if platform made a difference for this particular problem.

Perhaps the custom icon itself is problematic. Could you try taking one of the known good icons from github, renaming it to something unique (i.e. I put “kw_” for mine), placing it in /etc/openhab2/icons/classic and update the item definition accordingly?

Solved…

The error was that the “icons” folder was named “Icons” with capital I…

Sorry for bothering you all with such a stupid mistake, but seems that I am short of sight because I checked the folders name few times…

wow, thats murhys law. Never thought that the solution could be that simple.

Thomas

Hi,

Maybe someone can help me with this infamous icon issue.
I have a folder config->icons->basic
I put my svg icons in there

I’m trying to add it to the sitemap
Text item=remoteSensors_Ecobee_capability_temperature label=“Therm Temp [%s °F]”

I’ve tried the following:
Text item=remoteSensors_Ecobee_capability_temperature label=“Therm Temp [%s °F]”
Text item=remoteSensors_Ecobee_capability_temperature label=“Therm Temp [%s °F]”
Text item=remoteSensors_Ecobee_capability_temperature “EcoBeeTemp” label=“Therm Temp [%s °F]”
Text item=remoteSensors_Ecobee_capability_temperature label=“Therm Temp [%s °F]” "EcoBeeTemp"
I’ve also taken all of these and thrown in the .svg just for giggles; the result is the same:
They all still try to load a different icon:

The item is a “number” item. However that icon is missing and won’t load.
I thought doing this would override the default icon; however i can’t get it to work.

Thanks

Rich

Are svg icons enabled in the system config? And from your Text Items i do not see any icon definitions.

In Items the icon is specified by <scene_xmas>
In Sitemaps the icon ist specified by icon=“scene_xmas”

Thomas

Yes they are enabled in sys config.

I got a bit farther; instead of using the sitemap, i edited the items file.
I can see the request in the browser now for the right icon file
"img data-icon=“EcoBeeTemp” src="…/icon/EcoBeeTemp?state=71.2&format=svg""

I assume the …/ means one level up. Which makes no sense. I was told to put the icons under conf/icons/basic or classic.
So i created a directory under conf called “icons” and put the icons there too. I assume …/ refers to one level up from sitemap in the root of conf?

It still doesn’t show up in the browser.

Item:

Number remoteSensors_EcoBee_capability_temperature (gRemoteSensors) { ecobee="<[xxxxxxxxxxx#remoteSensors(EcoBee).capability(temperature).value]" }

To add the icon in the items definition should be something like that:

Number remoteSensors_EcoBee_capability_temperature <myiconname> (gRemoteSensors) { ecobee="<[xxxxxxxxxxx#remoteSensors(EcoBee).capability(temperature).value]" }

Thomas

yeah that’s exactly what I’m doing(not sure why it didn’t show up in the post

Number remoteSensors_EcoBee_capability_temperature (gRemoteSensors) { ecobee="<[xxxxxxxxx#remoteSensors(EcoBee).capability(temperature).value]" }

Debug in browser points to this path:
“img data-icon=“EcoBeeTemp” src=”…/icon/EcoBeeTemp?state=71.2&format=svg""

I’ve pasted the icons in almost every imaginable directly; they won’t render still

Does the state(in this case the temperature" have anything to do with the call?
The query string goes out with the following parameters:
state=73.3
format=svg

Does it look for a “state” as well per icon?
If so, how does one get around a “temperature” entry which could have hundreds of states?

It does a GET
http://192.168.1.241/icon/EcoBeeTemp?state=73.3&format=svg