Design your SVG floorplan or dashboard for HABPanel with Inkscape

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.

stefan.hoehn · December 1, 2018, 2:00pm

When you are in edit mode, on the lower right corner there is a triangle that allows you to resive the grey panel to the required size.

grafik

Dhanasekar_Jaganatha · December 3, 2018, 7:11am

I have tried that. But it is not working. SVG image is not fitting in to panel window. SVG image should adjust his size depend on HAB Panel size which is set by use.

RULSHID_MUHAMMED · December 4, 2018, 4:38am

#The dimmer button opens a popup with a slider that allows me to dim the dining room lamp.
i want to implement the same system , i.e to open / popup system widget while pressing icon in svg file , i dont know how to connect icon with a particular widget
can u please help me to solve this !!

Jostein89 · December 4, 2018, 5:49am

Try to open the .svg file in text editor and do as mentioned above in post 33.

Dhanasekar_Jaganatha · December 4, 2018, 6:08am

After making below changes in .SVG file, I am getting below output.

 width="100%"
   height="100%"

Jostein89 · December 4, 2018, 6:25am

How many pixels have you set up in the editor your svg should be? When I played with this I used 1024x768 and it seemd fine. Do you have any items outside the box that shows what area you have to play with?

Dhanasekar_Jaganatha · December 4, 2018, 6:27am

This is my SVG code.

<svg
   xmlns:serif="http://www.serif.com/"
   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="100%"
   height="100%"
   viewBox="0 0 1024 768"
   version="1.1"
   id="SVGRoot"
   inkscape:version="0.92.3 (unknown)"
   sodipodi:docname="floorplan_test5.svg">
  <metadata
     id="metadata3758">

Jostein89 · December 4, 2018, 6:30am

All of the Items are placed in the view box? Or can there be an invisable label or something hiding far out on the right side?

RULSHID_MUHAMMED · December 4, 2018, 7:18am

how to connect my svg file icon with system widgets ? ,i.e i want to use the slider widget when a particular icon on the svg get pressed
is it possible to popup slider widget while clicking dimmer icon on the svg floor plan!!

Dhanasekar_Jaganatha · December 4, 2018, 8:14am

Jostein,

Yes, all the items are placed in the view box only.I am new to SVG and Inkscape. I don’t know the right method to implement size of SVG. Please provide your suggestion for displaying SVG in HABPanel in better way.

Jostein89 · December 4, 2018, 8:36am

I am running out of ideas how you can solve this. Anyone else have a suggestion?

stefan.hoehn · December 4, 2018, 6:45pm

Can you show how your template looks like?
Do you have any experience with CSS? You need to adapt the styles with CSS. There is no magic that the widget centers the SVG but you need to do some styling to achieve that.

Dhanasekar_Jaganatha · December 6, 2018, 5:50am

Stefan,

Below, I have pasted my template. I dont have experience with CSS and I am learning.


<div oc-lazy-load="'/static/floorplan_test5.css'">
  <div class="logo-wrapper"      
  ng-include="'/static/floorplan_test5.svg'" >   
  </div>
  </div>

stefan.hoehn · December 6, 2018, 6:26am

And what exactly is in the css file?