It will 
Okay, Okay.
Guilty as charged 
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 
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 
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.
1 Like
Thanks to EVERYONE 
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:
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="{"light-on": 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?
-
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?)
-
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.
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 
).
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 
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 ???