Hello,
First of all I want to say how much I love HABpanel.I appreciate all your hard work for this community.
I would love to put 3D plan of my house on the background, and then put differnt icons to control over it.
Is there anyway to get background on the page? I was looking and could not find.
Thanks,
Tadey
Thanks, glad you like it!
Currently it’s not possible, the widgets are arranged in a grid for simplicity. You can put a background image for all dashboards, not for individual dashboards. HABmin has a floorplan feature if I’m not mistaken though.
Thanks for response.
It works just great without it, but if you ever have spare development time (
spare time? what is it?) , I am sure more people would like to use this feature 
Ok, I guess it could be done, but don’t hold your breath waiting for it.
In fact if you’re willing to get your hands dirty with HTML and CSS you could sort of have it with a template.
This is very dirty code-wise but it works:
<div style="position: absolute;
top: 0;
bottom: 0;
left: -10px; right: -10px;
background: url('https://s-media-cache-ak0.pinimg.com/564x/fa/b1/17/fab117bcb2a6b2860ee64188ec3e66cc.jpg');
background-size: cover;
background-repeat: no-repeat;">
<div ng-init='model={"name": "Bedroom 1", "item": "Light_Bedroom1", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(0,0,0,0.5);
border-radius: 20px;
top: 100px; left: 100px;
width: 60px; height: 60px"
ng-model="model" />
</div>
<div ng-init='model2={"name": "Living room", "item": "Light_LivingRoom", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(0,0,0,0.5);
border-radius: 20px;
top: 200px; left: 200px;
width: 60px; height: 60px"
ng-model="model2" />
</div>
<div ng-init='model3={"name": "Bedroom 2", "item": "Light_Bedroom2", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(0,0,0,0.5);
border-radius: 20px;
top: 100px; left: 300px;
width: 60px; height: 60px"
ng-model="model3" />
</div>
<div ng-init='model4={"name": "Bedroom 3", "item": "Light_Bedroom2", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(0,0,0,0.5);
border-radius: 20px;
top: 250px; left: 400px;
width: 60px; height: 60px"
ng-model="model4" />
</div>
</div>
The undocumented trick here is that nothing prevents you from using HABPanel directives like widget-switch if you feed it the right ng-model 
Replace the item value in the ng-inits, repeat the whole div as needed and reposition the switch using top and left. Of course it assumes a fixed size for the final dashboard (or maybe using percentages instead of pixels could work).
Anyways, it’s all a little hackish and I shouldn’t have shown you how to do it, because I won’t support it 
This is great. I like hackish staff. That’s why I like open source automation.
THANK YOU!!
how do you remove the backgrohnd of a template widget ? Don’t tell me uncheck background in seting it put me a black icon instead
Hi @ysc,
Just getting started with habpanel and have a quick question for you… When I’m in advanced settings and I want to get a background image in there, what’s the proper syntax to do so? In my case it’s just an image file on my localhost machine. I’m pretty sure I’m missing something simple but can’t seem to get it to work.
Thanks!
Hi Josh,
Any URL should work (http[s]://server/path/image.jpg); if you have your image on openHAB’s server, for instance in conf/html/yourimage.jpg, then a relative URL works too - in this case: /static/yourimage.jpg.
@ysc, thanks so much for the quick reply, the relative URL did the trick, not sure why the normal server path is not working, but no bother. Couple followup questions for you.
-I’m assuming that the relative path will still function fine after I “dist” the dashboard to my wall tablets as the tablets are simply redirecting to the OH server?
-Is there a way to leave negative space at the top of the main dashboard? Basically, I have an image that I’d like to reveal a small strip of at the top of each page. It seems possible on the sub dashboards, but not on the main. Any thoughts?
Yes.
Probably an issue with the style, I’ll have a look next time I have to recompile the themes.
Hi can you do the same thing with photos taken from 360 degree camera? I mean whenever I drag the 360 picture, a new set of symbols (lights.fans,…etc) will appear and we can turn them on/off?
I watched a youtube video but unfortunately I forgot the link, there was a guy played with his tablet and the tablet’s UI had a 360-like picture window where he could drag his finger to the left or to the right. Whenever he did that the new set of icons appeared…That’s soo cool! Can you do that?
If it’s HTML/CSS based, and with enough patience, I guess, probably.
If you want 3d floor plans, you can probably do that with CSS/WebGL too, see for instance:
Or you can use http://tridiv.com to design your floor plan and copy the HTML/CSS output and adapt it.
Hi Yannick, I know you made a nice disclaimer of no support 
However, I have been struggling with dynamic icon syntax in your example for many hours, trying to find a solution. Else your template works great! My dynamic icons are also working well in habpanel dummy widget. So I believe the only issue is with the syntax.
I have custom dynamic icons in “classic” folder, named dmotion.svg, dmotion-red.svg etc.
The item definition is:
String Pir01 "PIR1 [%s]" <dmotion> (gPirs, gPirsOutside)
And the widget template is as yours above, I only adjusted the first ng-init=‘model part like this and the main issue is obviously at the end … “icon”: “dmotion”, “state”: itemState(Pir01) }’>:
<div ng-init='model={"name": "PIR01", "item": "Pir01", "hidelabel": false, "hideonoff": false, "iconset": "eclipse-smarthome-classic", "icon": "dmotion", "state": itemState(Pir01) }'>
<widget-switch
style="position: absolute;
background: rgba(0,0,0,0);
border-radius: 20px;
top: 520px; left: 500px;
width: 60px; height: 80px"
ng-model="model" />
</div>
I tried all possible versions ( “state”: itemState(‘Pir01’); “state”: “itemState(Pir01)”; “state”: itemState(“Pir01”) etc.) but no luck 
Sometimes only the main icon works but not changed acc. to itemState, sometimes obviously wrong syntax so no icon displayed at all. I would really appreciate any help…
Thanks!
If your item isn’t a switch, then you shouldn’t use <widget-switch> but <widget-dummy> instead.
There is no state property to pass to the model of those widgets, it’ll be the state of the item you configure as item.
Also there might be additional properties required to make it look good, like "icon_replacestext": true.
Try following the advice in HABPanel Development & Advanced Features: Start Here!
Instead of documenting every possible model option for every widget, here’s a trick: add your widget to a dashboard the standard way with the designer, give it an unique name to find it back easily, adjust the options as you like, then go to HABPanel’s advanced settings and click on the “Edit the local panel configuration” link. You will then have to find your widget (using its unique name) and you’ll have the complete model to pass to ng-model this way. You can leave out the row, col, sizeX, sizeY, type attributes since they’re relating to the dashboards layouts themselves - type is the type identifier to put after widget- as the node name.
Perfect! Changing the widget type from incorrect switch to correct dummy did the trick! So the complete correct widget definition where dynamic icon works perfect is:
<div ng-init='model={"name": "PIR01", "item": "Pir01", "hidelabel": false, "hideonoff": false, "iconset": "eclipse-smarthome-classic", "icon": "dmotion", "state": itemState(Pir01).toString }'>
<widget-dummy
style="position: absolute;
background: rgba(0,0,0,0);
border-radius: 20px;
top: 520px; left: 500px;
width: 60px; height: 80px"
ng-model="model" />
</div>
Thanks a lot!
And the screen print:
