Design your SVG floorplan or dashboard for HABPanel with Inkscape

Tags: #<Tag:0x00007f0146015a88> #<Tag:0x00007f0146015948> #<Tag:0x00007f01460157b8>

(Stefan Höhn) #125

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


(Paul Huizinga) #126

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

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 :slight_smile: )

The approach sounds interesting …

(Paul Huizinga) #128

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 Jaganathan) #129

Hi Johan,

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

(Stefan Höhn) #130

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 and added manually to the addons folder.

Thanks, anyway, Paul.

(Stefan Höhn) #131

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.


(Dhanasekar Jaganathan) #132

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

#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 !!

(Jostein) #134

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

(Dhanasekar Jaganathan) #135

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


(Jostein) #136

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 Jaganathan) #137

This is my SVG code.

   viewBox="0 0 1024 768"
   inkscape:version="0.92.3 (unknown)"

(Jostein) #138

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

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 Jaganathan) #140


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.

(Jostein) #141

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

(Stefan Höhn) #142

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 Jaganathan) #143


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

(Stefan Höhn) #144

And what exactly is in the css file?