Design your SVG floorplan or dashboard for HABPanel with Inkscape

Thank you for replying. I have tried several different icons. On my first ones, the color doesn‘t change when I click on a different color in Inkscape. But on others it does work.

Here is what I do:

  • Import an icon into Inkscape
  • Select the imported icon
  • Change color in Inkscape, e.g. from black to grey. In the XML editor a style atribute appears with the new color and the icon changes.
  • Copy and paste the Insert working ng-class for my item from the working rectangle to the newly important icon

Result: No color change when item is ON in Habpanel.

Hi again,

Your thought actually brought me on the right track. I clicked down to the bottom layer of the graphics and now it works.

Thank you!

@ysc thank you for you great tutorial!

one additional question Can be output numbers somehow formatted as in OH?
I mean

itemState('Workroom_Humidity') + '%'

can produce something like


Which is indeed in OH solved by

Number  Workroom_Humidity       "Humidity [%.0f %%]"

But how to do the same in SVG?

edit: nevermind, I found it

(itemValue('item') | number:0) + " °C"

@lzaman not sure if it will help but possibly you can extract the code you need from this thread in the forum:
(Show Current Sun Position and Shadow of House (Generate SVG))

have you solved this issue somehow?
Your suggested method does not work in chrome and safari and this:

    animation: rotate 5s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
@keyframes rotate {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }

code above does rotate it properly, but at upper left top corner of the habpanel (where name of the dashboard is) so it’s out of SVG. Which I’m now trying to solve to stay at original place indeed.
Not sure why it is shifting self tho

edit: ah so it does look like it’s an issue with symbols. Simple rectangle works as expected… damn
edit2: solved by converting symbol to path and then it works … cheers

Hi Steve,

You sparked an idea here: I can try to modify the module to use a base reference design as SVG (i.e. the habpanel floorplan i design in inkscape) in which I foresee an xml element (a space) to inject the svg data into…
Food for thought…


I hope it works for you,
You could also consider storing them in a data base as influxdb.
That being said I think an xml file would be a better option.

Hi …
well, beside the first little problems with the right names, a missing symbol, … the way to add the floorplan was really amazingly easy. Even to add new colors, …

I ask myself, how I can add actions to the buttons, like opening a new webpage. For example to open the page of the 3D-Printer-Control or others.

Regards, Birgit

@lzaman If you find a way to inject the data from the shadow.pi file into a .xml file I would be very interested in how you did it.
Thank you in advance for any help you can provide.


Would this be done in a rule? or possibly another .py file.
Please excuse my previous comment .pi … I must be hungry and I was thinking of pie.

Hi Steve,
I have not managed it yet but my thought is like this:
You use inkscape to design your floorplan.
This file should contain a tag which will be replaced by the shadow SVG code.
The python file then dynamically opens the inkscape svg, looks for the tag, calculates the shadows and injects them in that tag… saving it back to the finally used svg file.
This file will be updated dynamically through the Sunset_Azimuth item update…

But like I said, havent been able to implement it yet.

Best regards

Hi Dome,
can you explain a bit more, how the Dashboard-Item should be defined. I don’t have any idea, how to do that?

Thanks, Birgit

So I have finally got a modification done. Now my floorplan is updated via this python script which will take a base file and dynamically add the shadow to the floorplan. The only issue though is that the shadow basically relies on a dynamic url (object with {{itemState}} trigger) to refresh the svg and the floorplan layout uses ng-include to inject the item-stream via angular. I have no knowledge of both of these systems so I’m kind off stuck with a floorplan that has the shadow when initially loading the habpanel page, but only updates the other items (not the shadow as the svg itself is not refreshed)

Any thoughts on how this could be solved?

Best regards
Lenny Zaman


I’m really having fun recreating a UI with SVG.

There is just one thing that I’m struggling with.

In a Widget, it is possible to read an itemValue and add to it.

For example, read a value of 10, add 5 and update the Item.

<button class="btn-pad btn-lg.round" ng-click="sendCmd(TheHour, +itemValue(TheHour)+5)"><i class="glyphicon glyphicon-chevron-up"></i></button>

Taken from the widgets used here - Individual Alarm clock for each Day of week, with adjustable duration

If I try a similar code in the SVG file, the Item value is appended, rather than added.


Pressing the button a few times results in


Rather than updated values of :


Have any of you got an idea of what I can try?

**** update ****

This works as expected…


Which gives this


But changing it back to + just appends it like a string

I havn´t tried myself. But maybe this makes sense?

I saw that too.

I don’t understand why - (minus) works, but + appends
(But in that example, + behaves with numbers as you’d expect)

Thats is odd. I have no idea how to then.
In that case I guess the solution is to use another item, and then use a openhab rule for adding to the exsisting item. A bit ackward solution, but + (plus) doesnt seem to behave as it should.

1 Like

I could…

But there are quite a few to do…
And why of why does it work properly in a widget, but not an SVG?

Well, it basically is just Javascript logic. In Javascript the plus sign ( + ) is also what you use to concatenate strings, so "abc" + "d" = "abcd". So apparently, itemValue() returns a string by default. And then you do "1234"+4, and as "1234" is a string, Javascript guesses that you want to concatenate two strings. So that results in "12344".
The thing about the minus ( - ) is that the minus is not an operator that can work on strings. "abc"-"d" will probably give you a NaN, so not a number. So Javascript figures that you probably are trying to do something with numbers (as you can tell from the NaN already), and "1234"-4 will give you 1230.

So, now for a solution:
If you know that the item will always return an integer, you can use parseInt(itemValue(...)) + 4, if you would like to be able to deal with floats, you can use parseFloat() the same way.
Another, maybe more “dirty” way is to subtract a negative number instead of adding a positive number:
itemValue('Church1ON_ALARM_SUN_M')- -5
Then Javascript just figures out what it needs to do by itself. Do note that you need to put a space between the two minus signs, because a double minus is a different operator altogether and definitely will error out.


What a great answer :slight_smile:

Thanks, I’ll give it a try when I’m back at my PC.

Unless it keeps me awake tonight, in which case I’ll get out of bed and try it