Design your SVG floorplan or dashboard for HABPanel with Inkscape

floorplan
svg
inkscape
Tags: #<Tag:0x00007f01490dc2c0> #<Tag:0x00007f01490dc158> #<Tag:0x00007f01490de318>

(Kim Andersen) #103

You could also load the svg into notepad++ or anything simular editor. Then you´ll be able to see the code , which is readable.


(E. Gerland) #104

Got it - thanks, Jörg.


(E. Gerland) #105

I make good progress - thanks to your help.
thanks for sharing - it’s greatly appreciated.


(E. Gerland) #106

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?


(shane kevin) #107

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


(Eric Zenz-Matzl) #109

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


(Kim Andersen) #110

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


(Eric Zenz-Matzl) #111

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) #112

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) #113

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 Höhn) #114

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.


(Stuart Hanlon) #116

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. :slightly_frowning_face: 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 :smile:

.opacity1 {
	opacity: 1 !important;
}

.opacity0 {
	opacity: 0 !important;
}

But still can’t get the ng.show or ng.hide options to work :frowning_face:


(Makerkaos1) #117

in the console not show any change of state plz help :frowning:


(Stuart Hanlon) #118

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) #119

is the same problem, the console not show any change of state :sob:

<?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 Jaganathan) #120

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


(Johan Potgieter) #121

HI Dhanasekar,

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


(Dhanasekar Jaganathan) #122

Sorry for late reply,

This is my code,

I have attached the screen shot, Please view it,

Thanks,
Dhanasekar


(Dhanasekar Jaganathan) #123

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


(Paul Huizinga) #124

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.