OH3 custom icons for floorplan

Setup, Configuration and Use Items & Sitemaps
, ,
#1

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?

#2

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

#3

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.

#4

@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.

#5

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.

1 Like
#6

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.

#7

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.

#8

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

#9

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?

image
image755×147 2.33 KB

#10

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:

floorplan_test
floorplan_test732×125 3.38 KB

No icon visible there.

#11

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

#12

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

#13

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

#14 
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?
image

image
image1089×54 3.5 KB

1 Like
#15 
<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.

#16

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.

#17

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.