Design your SVG floorplan or dashboard for HABPanel with Inkscape

Kim_Andersen · November 8, 2018, 1:15pm

Looks awesome, Eric! I wish I could learn this stuff…

Vradatta · November 8, 2018, 1:24pm

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.

Kim_Andersen · November 8, 2018, 1:37pm

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.

MAKERKAOS1 · November 11, 2018, 4:02am

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

stefan.hoehn · November 11, 2018, 11:40am

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

grafik

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

MDAR · November 11, 2018, 6:08pm

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

MAKERKAOS1 · November 11, 2018, 6:28pm

in the console not show any change of state plz help

MDAR · November 11, 2018, 8:50pm

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' }

MAKERKAOS1 · November 11, 2018, 9:33pm

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>

Dhanasekar_Jaganatha · November 17, 2018, 10:08am

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

Manbearpig73 · November 17, 2018, 10:50am

HI Dhanasekar,

Please post your template code and a screen shot of the output you getting.

Dhanasekar_Jaganatha · November 20, 2018, 5:56am

Sorry for late reply,

This is my code,

I have attached the screen shot, Please view it,

Thanks,
Dhanasekar

Dhanasekar_Jaganatha · November 21, 2018, 3:34am

I have attached the required docu. Is there any mistake in my files. Please let me know.

zagato · November 24, 2018, 8:07pm

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.

stefan.hoehn · November 25, 2018, 10:27am

Paul, how did you integrate the video streams? What camera are you using?

TIA
Stefan

zagato · November 25, 2018, 6:10pm

I’m using mostly Dahua cameras; very pleased with them after a couple of too cheap Chineese cams.
The cams are all linked to Synology Surveillance Station (SS) and I’m using an openHAB plug-in to connect with SS. From there you can choose between various ways to get the feed in your HABPanel. Using an image widget and provide the snapshot link or use the MPEG over HTML string.
The latter doesn’t seem to work at all times in my case, need to figure out what I’m doing wrong there.

stefan.hoehn · November 25, 2018, 6:30pm

Thanks Paul, can you explain a little more in detail what openhab plugin you use and how you “connect” that to the image and provide the snapshot? (sounds not too straight forward )

The approach sounds interesting …

zagato · November 25, 2018, 9:11pm

I’ve installed a Surveillance Station binding by Nils.

Once connected it reads the configuration and creates things, one per camera. From the channels in de cameras you can create items; I’ve just made an item-file and added the items there.

The items I’ve used in both by basic UI and HABPanel.

Dhanasekar_Jaganatha · November 26, 2018, 1:30pm

Hi Johan,

I have been waiting for your input. Please provide your comments

stefan.hoehn · November 26, 2018, 9:39pm

Thanks, unfortunately I run the surveillance station on QNAP, so there’s hardly a chance it would work here, I guess.

Btw, if someone else is looking for the binding: I couldn’t find iit in the standard list. I guess it has to be downloaded from the git repo https://github.com/nibi79/synologysurveillancestation/releases and added manually to the addons folder.

Thanks, anyway, Paul.