Design your SVG floorplan or dashboard for HABPanel with Inkscape

Tags: #<Tag:0x00007f61732d59e8> #<Tag:0x00007f61732d5920> #<Tag:0x00007f61732d5858>

Oh, I stand corrected. Thank You @ysc for the tutorial and howto’s! Did help to kick start my way into svg, ng tags and angular.
And @MDAR for some inspiring questions and answers, that helped to get back on track, when felt like beeing lost in the g-search :slight_smile:


Hello Ben_Geens,
I would like to realize something similar.
Could you support me a little bit?
Did you integrate the svg code into a custom widget?

I would be very happy about your tips!

Has anyone managed to get a animated knob/whell or simular into a svg, showen by the value of an openhab item?

Do you mean that is simply revealed when an Item value matches a criteria,
or the Image is adjusted according to the Item value?

(I’ve got GIF images that are revealed when Items match criteria)

Not sure how to explain, but exactly like using knobs in Habpanel, if you have ever tried that.

You’re in hunt of the holy grail then…

A Slider or Knob within an SVG

I have a row / column of elements in an SVG that set the same Item to different values, and their state / colour changes to reflect the value of an Item…

But a real slider ???

Actually I just want it to remove regarding of the value… As usual, I dont have a need of clicking/pushing anything on my floorplan… But it would be a nice feature to read a meter or something simular using a knob or like…
I´m 99% possitive its possible… It´s just a question of how… Probably by the use of a javascript, I guess.

Like the meters in this video:

1 Like

So what you want is a non-interactive Gauge, rather than Knob or Slider ??

A quick search found these…

I thought this last one was really interesting, if a little off topic when looking for a Gauge.

The sentences towards the end are most interesting;

Well, one of the peculiarities of styling SVG with CSS is that there are only certain properties we can control. If we want to change the x or y coordinates of a g for instance (without using the CSS transform property) then we’ll need to use JavaScript. What makes this even stranger if you’re unfamiliar with the SVG syntax is that CSS properties will have an affect on certain elements, but not others.

There’s a handy list of properties by the W3C that shows which property effects which SVG element

Yeah, gauge ofcouse :wink: … (I was so focused on the knob look alike, that is was the only work I did search for… stupid me)…

And as I thought, this involves some script… Now I need to figure how to javascripts as well… Damn… I´ll never learn this weird html/css/svg stuff). :cry:

1 Like

Which icon set have you used for temperatures, date, time, battery level, open windows?

Hi @Birgit_Lachner

I’m just getting caught up on this thread and somehow missed your comment.

You would define it in an items file. I don’t want to take the thread off topic so I’ll just recommend you look at the documentation page, and open a new thread if you still need some assistance!

EDIT: I may have misunderstood your question. You can either make the item a string or a number, and decide a name (or number) value for each page on your dashboard. You then set the buttons to indicate the active panel with ng-class, and use ng-click for the action of changing pages. Does that make sense?

@SilkBC sorry - I missed your comment notification. I moved and my panel looks very different at the new house, but I will try to find the old SVG.

That how I´m doing it for showing/hiding layers… Works like a charm!

1 Like

Hi All,
I was inspired by the SVG integration in OpenHab Widgets and wanted to start with a simple “winamp” like title scrolling label to able to show longer texts in a small window (smartphones).
I hope the idea is inspiring for others.
The ‘static text’ is working ok (although some more customization dreams to make it useful for larger audience (fi: colour picker etc).

Unfortunately i’m a bit stuck to make the config parameters dynamic. The idea is to adjust the duration & shift parameters based on the (dynamic) text. I’m targeting to build this in the OpenHab rules, so would like to avoid/limit usage of JavaScript (not supported?) or angularjs (not familiar with).
(general design concept is to put all my logic in the OpenHab rules)

Can you help me with the syntax or help to be able to change the duration like we can change the text?

(attached the widgets so far … and the challenge below)
dur=“itemState(’{{config.txtOpenHabSVGDuration}}’) + " s”" ==> NOT WORKING
ng-bind=“itemState(’{{config.txtOpenHabSVGString}}’)” ==> OK

Note: ideally I would like to keep all the code in the widget itself, but i’m ok to load CSS or supporting files if required.

Thanks a lot


I try to open a browser window when clicking a SVG shape embedded into a HABPanel widget. I tried setting the standard SVG onclick attribute to ““myhtmlpage”);” and it is working fine when opening the SVG file in a browser. Once this SVG is embedded in the HABPanel widget, it does not work (no error in the logs neither). I tried ng-click too, using the same script, but do not get the HTML page displayed either.

What is it I do wrong? Thanks!

Latest openHAB 2.5.2 and Safari browser

Hi All,

Meanwhile I was able to solve my little challenge with the great support from MDAR.
Happy to share the current results. Now able to update scrolling speed/length the text and colour through openhab items and dynamically adjustable through openhab rules.

It’s still not very user friendly but meeting my needs. Feel free to improve the basic code and share an advanced version.

Please find the current draft release:
AnimatedStaticLabel.widget.json (1.6 KB)

AnimatedDynamicLabel.widget.json (1.6 KB)

or Wetransfer (till 06Mar19)

1 Like


By any chance…

Have any of you any ideas how I / we can get an itemValue to affect an sodipodi:end attribute of an arc?

@Kim_Andersen and I are trying just trying to create a nice little gauge in an SVG.

There is this fabulous gauge widget for HabPanel that works perfectly, which I guess uses something similar to the rotation technique described earlier in this thread.

Which might have to be what we settle for.

EDIT: I made some adjustments and moved to the modal, as defined in this link, and it works as expected.

I swear I had this working, but… if I want to use an angular variable (as opposed to using an OpenHab switch) to activate a modal defined in the custom template, ex: <div ng-click="Item_Modal=true">clicky</div>, how would I format the ng-click on an item in the svg? Just having Item_Modal=true in the svg value doesn’t seen to do it.


I know openHAB 3 will bring many changes to the UIs, specifically, that some or all of them will be merged into a new universal UI.

Does anyone in the know have any insight into how that will affect our ability to display SVGs in a HABPanel style as we have in the past? I’m really hoping that kiosk mode will remain available.

hello, always work with lights and UP&DOWN rollershutters
I would like to intert a kind of slider for rullershutters position (read-only)
Is there an object or I’m thinking about a “line” and trasform: scaleX or scaleY on % of the roller position (itemState) : can anybody help me?

PS: I have tryed scaleX on chrome but the line moves in a strange and non-standard way