Design your SVG floorplan or dashboard for HABPanel with Inkscape

I can’t figure out why my symbols are being clipped. In inkscape, it looks like this:

Yet in habpanel the symbols don’t display correctly:

They do turn on and off the light. I’ve tried move them around, putting them in their own layer. Its aways the same. The left 2/3 rds+ is clipped. When I look at the elements in dev tools in the the browser, there is a bounding box around the whole symbol. Here is the code in the svg file for the “torch”

       ng-class="{&quot;light-on&quot;: itemState('family_room_lightPower') == 'ON' }"
       ng-click="sendCmd('family_room_lightPower', (itemState('family_room_lightPower') == 'ON') ? 'OFF' : 'ON')"
       cursor="pointer" />

Do you by any chance have a snippet of the SVG code you created for the left navigation panel that enables the layer it designed to show?

Hi Stefan,

A couple of questions, if you don’t mind?

  1. What icon set did you use for the furniture? I like the style. Can the icons be scaled automatically to the dimensions of the room (i.e., when you have defined the room dimenions, can you then edit the furniture icon’s properties and define it’s dimensions, which would then size/scale to the room it is in?)

  2. I like your solution to the “dimmer” issue. Are you able to post the code for it?

Thanks, in advance, for your input!

I’ve been struggling to get SVGs to resize. Its seems that it will not adjust for height, unless the SVG is smaller than its container. The SVG has to have a viewBox. Saving in Inkscape as an optimized SVG does the trick. I tried added style=“height:xxxx”, or height:100%, and/or width:100%. I also tried setting preserveAspectRatio=“xMinYMin meet”. However, the DOM is still coming up with the wrong height.

The layout looks like this:

<div class="box"/>
  <generic-widget />
    <widget-template />
      <div class="box-content template-container ng-scope"/>   <--- closest parent with right size
        <div class="template-contents" />                      <--- set to same height as SVG. Larger than box-content.
          <div oc-lazy-load=... />
            <div ng-include="/static/my.svg" />
              <svg ... />                                      <--- want to set style="height:{{height of box-content}}"

I can’t figure the AngularJS magic needed to set this right. As you can see from the layout, the first element with the correct size is several layers up. I think JSQuery closest() would work, but looks like AngularJS does not use that.

The SVG should be sized to fit in the square box, but its height is not being recalculated.

This is what it looks like in inkscape:

In my previous post, I said symbols were not displaying correctly. That is still the case. However it does work if you clone the symbol. That takes up more space in the file, but at least it displays. I saw something about symbols needing a viewBox too, but have not figured out how to set that.



Sorry, I only saw your message now, @SilkBC

re 1) It is actually not an icon set but an SVG drawing that I did in inkscape myself and as it is a vector format, you can scale it to any size.

re 2) As far as the dimmer solution is concerned I have to admit that only works for one specific lamp. I always intended to allow the dimmer dialog to open on a double click on any light bulb icon and forward that item to the dimmer javascript function but I never got that to work (I struggled with the double taps for a while and also the old angularjs really drove me nuts :wink: ).

Having said that I am happy to share the SVG to you if you like to use it yourself or understand how I implemented it. Just send me a private message.


Thank You @MDAR for the tutorial and howto’s! Did help to kick start my way into svg, ng tags and angular.
My first attempt with the floorplan … was afraid doing it on something real, so started with a doll house :slight_smile;)

Or a interactive on youtube here
svg floorplan and openhab;
then rules doing json api posts to WLED library;
and a WS2812 led strip split in four segments (actually five, as there is a single pixel ‘ambilight’ behind attic, showing CO2 level in room).


I’m glad to have helped in some small way.

But I’m certainly not the brains behind all this.

@ysc Yannick is the one who we should all be grateful to, for bringing this to the community.
His posts and support have made my journey much easier.


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