OH3 custom icons for floorplan

igm · January 22, 2021, 6:24am

I’m running OH3 (openhabian 1.6) on RPi4.
When creating a floorplan, I’d like to use custom icons for various markers.
I have successfully tried icons from openhab: and f7: sets; however, custom icons do not work for me.
I’ve uploaded my icons to $conf/icons/classic folder as both png and svg.

Let’s say I have an icon: $conf/icons/classic/myicon.svg. Then I create a marker:

markers:
  - component: oh-plan-marker
    config:
      name: MyLight
      coords: 500,500
      item: mylight_switch
      icon: myicon
      iconColor: '=(items.mylight_switch.state === "ON") ? "green" : "gray"'
      action: toggle
      actionItem: mylight_switch
      actionCommand: ON
      actionCommandAlt: OFF
    slots:
      default: []

The marker does show neither in Run mode nor in live page.
I may be doing something wrong: could please someone show me a working example?

rlkoshak · January 22, 2021, 4:26pm

openHAB Icons are specified as oh:iconname. And iconColor only works with f7 icons.

Vradatta · January 22, 2021, 4:36pm

you could add two version of the icon, one green and one Grey and name them:
myicon-on.svg myicon-off.svg and a default/stateless version called myicon.svg

Than configure oh:myicon

This works for my custom icons.

igm · January 22, 2021, 4:55pm

@rlkoshak do you suggest that I should prepend also custom icons with oh: prefix, as in oh:myicon ?
I’ve tried that just now and sadly, it didn’t help.
I’ve used myicon, oh:myicon and openhab:myicon respectively and neither one succeeded.
However, http://openhab-host:8080/icon/myicon renders just fine.

rlkoshak · January 22, 2021, 5:06pm

Yes, I would expect that custom icons would need oh prefix.

It might be the case that custom OH icons are not supported in Pages. I’ve not tried to use them. But if they are supported, they would almost certainly need to have the oh:prefix.

igm · January 22, 2021, 5:08pm

I see. Nevertheless, the oh:myicon (in my case it is oh:lght) works not.
For the record, i have lght, lght-on and lght-off present both in png and svg and, as I wrote previously, they are readable and recognized when addressed directly. Just in Pages, namely floorplan, they do not appear.

RGroll · January 22, 2021, 5:14pm

Hey @igm

as @rlkoshak already said, you need to use the oh: prefix here.

Have you refreshed the page after saving your changes - it seems that it doesn’t do it automatically on map pages for unknown reasons.

igm · January 22, 2021, 5:39pm

Yes, I have refreshed. I even restarted the entire host just to be sure, to no avail though.

RGroll · January 22, 2021, 5:53pm

Ok, just to be sure, this is how your oh-plan-marker component looks right now, correct?

  - component: oh-plan-marker
    config:
      name: MyLight
      coords: 500,500
      item: mylight_switch
      icon: oh:myicon
      iconColor: '=(items.mylight_switch.state === "ON") ? "green" : "gray"'
      action: toggle
      actionItem: mylight_switch
      actionCommand: ON
      actionCommandAlt: OFF

Will the icon show up in the configuration page, where you add your markers?

igm · January 22, 2021, 6:54pm

This is entire floorplan page:

config:
  label: test
markers:
  - component: oh-plan-marker
    config:
      name: MyLight
      item: mylight_switch
      coords: 500,500
      icon: oh:lght
      iconUseState: false
      action: toggle
      actionItem: mylight_switch
      actionCommand: ON
      actionCommandAlt: OFF
    slots:
      default: []

I omitted the iconColor attribute, as I’ll probably use dynamic icons if this ever works.
In design view the Markers section looks like this:

No icon visible there.

igm · January 22, 2021, 6:56pm

@RGroll can you please share what is the code for your example, with the custom orange icon?

Terra · January 22, 2021, 10:50pm

Just to confirm, your icon is named „lght“ and not „light“?

igm · January 23, 2021, 3:47am

Yes, lght it is, to avoid any name clash with potential built-in icons named light

RGroll · January 23, 2021, 8:43am

config:
  imageUrl: /static/files/1.jpg
  label: testpage
  sidebar: true
markers:
  - component: oh-plan-marker
    config:
      icon: oh:cpu
      name: custom icon test
    slots:
      default: []

I assume, that won’t help you, as I did nothing special here. But the system can’t find your icon, as you can see in the Markers overview (it should show up there)

If you inspect the element where your icon should be, what path is shown?

igm · January 23, 2021, 10:38am

<img onload="this.classList.remove('no-icon')" onerror="this.classList.add('no-icon')" style="width: 32px; height: 32px;" src="/icon/lght?format=svg&amp;anyFormat=true">

Funny thing is that http://192.168.2.3:8080/icon/lght (that’s my openhabian host IP) resolves to the icon, i.e. I see the icon image rendered.
But: when trying to access http://192.168.2.3:8080/icon/lght?format=svg&anyFormat=true, nothing shows up.
It looks like there is some problem with the svg version of the icon.
I’ll try to recreate it and will get back here soon.

igm · January 23, 2021, 2:24pm

Turns out the problem was within the files I used.
I have successfully created a new icon with Inkscape (svg) and converted it to png via Photoshop.
With these new icons, everything works as expected.
However, this thread has not been pointless, as I discovered only here that even custom icons should be prefixed with oh:.

@RGroll, @rlkoshak, thank you very much for your assistance, you’ve lead me in the correct direction.

lukics · October 26, 2021, 5:03am

Just another possible reason SVG not showing up:

I created some icons on boxy-svg.com, and these did not show up. What I did wrong is making them too small and not using the whole canvas. This is vector stuff, so the canvas is the limit.
Additionally, the filenames need to be small letters only.