Design your SVG floorplan or dashboard for HABPanel with Inkscape

It will :smiley:

Okay, Okay.

Guilty as charged :frowning:

I couldn’t resist, so I SSHd into the box from my phone and edited the SVG file in Nano.

The answer is…

The double negative works perfectly :slight_smile:

I can crack on and do the remaining 56 items…

Thanks @RolfV

Thats awesome… Even though I hardly use any click-able functions on my svg dashboard, as the main purpose is for monitoring only, its always good to learn something new regarding this svg/javascript/angular (or whatever its called). I wish there were a full list somewhere with lots of examples to use with openhab.

1 Like

Oh give it a try, there are some great tricks

I know… But when I need to click/push something, I try to you my voice insted :smiley:

1 Like

It’s true, itemState (same as itemValue) will always return a string.

Remember you can always open the dev tools in any browser and use the console to figure out those JavaScript oddities.

image

1 Like

Thanks to EVERYONE :smile:

In a very short time, I have managed to transfer an entire multi boiler / zoned heating system from one platform to openHAB2.

It took me weeks and weeks (and a lot of money) to get the first system up and running, so for it to fail was heartbreaking.

I put openHAB2 in for them, as I thought they would be able to cope with a change of layout.
It turned out that I was wrong, so I have had to recreate the “old” layout in openHAB2.

Thanks to InkScape, SVG and your help with the coding, they now have this…

For all three areas of their building.

(the brief was “Chips or Mash?”, no bells or whistles, just keep it simple)

If anyone is interested, I have zipped up the Things, Items, Rules, floorplan.css and SVG files here
There is even a Lockout for each day, so if the Second ON time is before the First OFF time, the First OFF is ignored.

It works when the Things, Items and Rules files are loaded, which were inspired by this Thread.

3 Likes

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

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”

<g
     inkscape:groupmode="layer"
     id="layer4"
     inkscape:label="First-floor-controls"
     transform="translate(-5.7877409,-18.364461)">
    <use
       id="use96614"
       style="display:inline;opacity:1;fill:#000000;stroke:none"
       xlink:href="#torch-on"
       x="0"
       y="0"
       width="100%"
       height="100%"
       transform="matrix(1.2030676,0,0,1.3575058,33.597554,-11.938516)"
       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" />
  </g>
</svg>

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.
svg-size-problem

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.

Thanks,

Andy

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.

cheers
Stefan

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

5 Likes

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.

2 Likes

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:

2 Likes

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 ???