You could also load the svg into notepad++ or anything simular editor. Then you´ll be able to see the code , which is readable.
Got it - thanks, Jörg.
I make good progress - thanks to your help.
thanks for sharing - it’s greatly appreciated.
My floorplan is almost done:
In the upper left area I would like to show an openstreetmap based on the map widget (from @ysc):
What would be the easiest way to do so?
1 Like
Hi @jh1777 Joerg, Nice work!
How to add a “touch effect” when click/touch the ngshow item?(maybe a glow, or a outline glow something like that?) Currently I have no idea if item is being currectly pressed(or being touched)? Do you know how to make this? I would like to make a keypad be able to enter a pin code to unlock the door, but like I said, I need to see a “pop-up-outlike-glow” effect when a single code is correctly touched(eg. the number 1 icon), do you think it is possible to make such effect? Thanks
I’m now finished with my SVG-Habpanel UI.
All Lights, plugs, shutters, the television and the garage door are clickable.
The doors, fans, the garage door and the shutters are animated. (maybe i will post a GIF later on)
Next step is to build the garden and mount a tablet on a wall to show everybody^^
5 Likes
Looks awesome, Eric! I wish I could learn this stuff…
It wasn’t that complex as i expected.
The tutorial at the beginning of this thread was very helpful. You only have to understand how Inkscape is working (was a little bit confusing for me but after some time of experimentation i got it).
Then most of the work was the drawing (every yellow/grey stone in the upper picture are a own object^^ ).
But after you got your first light working, it’s just copy/paste.
So take some time and try it.
Inkscape is indeed my worse problem. I dont get it.
I cant draw in it (I dont know how to). Insted I had a drawing from another program which I imported into Inkscape and made it a vector drawing. After that, I ran into serious problems inserting links as descriped at the top of this thread. My links dissapeared after saving and loaded the very same SVG file into Inkscape. Since then I gave up… But yes, indeed I have to learn this. I think it makes alot more sense rather than using BasicUI or standard HABPanel.
hi, im so noob with this but i need help
This is my .svg
`<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="500"
height="500"
viewBox="0 0 132.29166 132.29167"
version="1.1"
id="svg3741"
inkscape:version="0.92.3 (2405546, 2018-03-11)"
sodipodi:docname="Test.svg">
<metadata
id="metadata4530">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3735" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.98994949"
inkscape:cx="273.95441"
inkscape:cy="139.44371"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1001"
inkscape:window-x="-9"
inkscape:window-y="-9"
inkscape:window-maximized="1"
units="px" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(1.0108452,0,0,0.79079681,-0.04919072,-129.61822)"
cursor="pointer"
ng-class="{'light-on': itemState('test1') == 'on' }"
ng-click="sendCmd('test1', (itemState('test1') == 'on') ? 'off' : 'on')">
<rect
id="rect3743"
width="123.22024"
x="4.5357156"
y="167.73215"
height="127.75595"
style="stroke-width:0.26458332"
ng-class="{'light-on': itemState('test1') == 'on' }"
ng-click="sendCmd('test1', (itemState('test1') == 'on') ? 'off' : 'on')"
ng-bind="'test1'" />
</g>
</svg>`
---------.css-------
.light-on {
fill: #ffe600 !important;
}
--------Widget-------
<div oc-lazy-load="'/static/Test.css'">
<div ng-include="'/static/Test.svg'"></div>
</div>
my problem is that not change the color by clicking on habpanel
I use a different approach
I define the CSS as
.lightOn {
opacity: 1 !important;
}
Then I create something additionally (for example a circle ) which I color (e.g. yellow) in inkscape and lay it over the actual item (the bulb) . With the visibility attribute I hide or show it (see ng-class).
<circle
cursor="pointer"
r="5"
cy="151.91571"
cx="26.82074"
id="path16598-8-5-8-73"
style="fill:#808080;fill-opacity:1;fill-rule:evenodd;stroke-width:0.58333331"
ng-class="{'lightOn': itemState('F1_Dimmer_Living_Side_Switch') == 'ON' }" />
-
btw, I haven’t checked if it makes a difference to the value being upper or lower case (ON vs on) - you may want to check that and to be sure, go for the upper case version.
-
Another hint would be to open the developer tools in the browser. You might be surprised but the svg in the source code of the browser is fully available and you can look into what is actually changing in real time based on what openhab sends to the browser. Especially the console is helpfull as it logs state changes.
2 Likes
Hi
Has anyone got the ng-show or ng-hide to work?
I’ve managed to get ng.class, ng.click and ng.bind to work based around these commands
ng.class
{"green-on" : itemState('LoungeGreenSocket') == 'ON' }
ng.click
sendCmd('LoungeGreenSocket', (itemState('LoungeGreenSocket') == 'ON') ? 'OFF' : 'ON')
But I just can’t get ng.show or ng.hide to work.
I assumed I’d need to enter something like
ng.show
{itemState('LoungeGreenSocket') == 'ON' }
Just for reference, I have managed to load a gif into the SVG file, so I’m trying to hide it until a switch is ON or a value is above a set level.
I’ve tried the opacity tip, but I couldn’t get it to work. 
Post #114 @stefan.hoehn
<image
sodipodi:absref="../static/ani4.gif"
xlink:href="../static/ani4.gif"
y="1114.807"
x="1632.0905"
id="image5345"
preserveAspectRatio="none"
height="64.621849"
width="109.85715"
style="opacity:1" />
@stefan.hoehn
It looks like my css syntax was wrong.
this now works for me 
.opacity1 {
opacity: 1 !important;
}
.opacity0 {
opacity: 0 !important;
}
But still can’t get the ng.show or ng.hide options to work 
in the console not show any change of state plz help 
I think your issue is fairly simple.
Try using capitals for the state
{'light-on': itemState('test1') == 'ON' }" ng-click="sendCmd('test1', (itemState('test1') == 'ON') ? 'OFF' : 'ON')"
I use this to change a state of an element when a number item is above a level
{"red-on": itemState('gCanvasJS_switch_count') > '8' }
is the same problem, the console not show any change of state 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="500"
height="500"
viewBox="0 0 132.29166 132.29167"
version="1.1"
id="svg3741"
inkscape:version="0.92.3 (2405546, 2018-03-11)"
sodipodi:docname="test.svg">
<metadata
id="metadata4530">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3735" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4"
inkscape:cx="248.35546"
inkscape:cy="262.43045"
inkscape:document-units="mm"
inkscape:current-layer="svg3741"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1001"
inkscape:window-x="-9"
inkscape:window-y="-9"
inkscape:window-maximized="1"
units="px" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(1.0108452,0,0,0.79079681,-0.04919072,-129.61822)"
cursor="pointer"
ng-class="{'light-on': itemState('test1') == 'ON' }"
ng-click="sendCmd('test1', (itemState('test1') == 'ON') ? 'OFF' : 'ON')">
<rect
id="rect3743"
width="123.22024"
x="2.1560972"
y="167.73215"
height="127.75595"
style="stroke-width:0.26458332" />
</g>
</svg>Hi All,
I am trying to display sample floorplan svg in HABPanel. I have created template widgets and added the corresponding code in that.
When run HABPanel, Floorplan is not displayed inside widgets and it is displayed outside bounders of widgets. Even I am getting partial floorplan only not full one.
I have tried to change width and height but it is not working.
Some one please help me on this. I am new to OH .
Thanks,
Dhanasekar
1 Like
HI Dhanasekar,
Please post your template code and a screen shot of the output you getting.
Sorry for late reply,
This is my code,
I have attached the screen shot, Please view it,
Thanks,
Dhanasekar
I have attached the required docu. Is there any mistake in my files. Please let me know.
Here is what I’ve been working on lately. It’s a first proof of concept, but the possibilities are awsome!
I would like some more coloring and a bit more clean lay-out. My SVG doesn’t cover the whole screen (iPad on the wall) so I can add some HABPanel buttons and functions as wel. All the lights are buttons and switch the corresponding groups. If the lights are off, a simple white background is shown and if on it turns yellow(ish).
Cam views are there for a test; don’t know yet if I want these in the overview as they consume lots of (limited) space in this way.
2 Likes