Hello Nduzi,
your panel looks fine. Could you tell me, how you implemented it?
It is a bit mixed up😁 I will have to review then I’ll share, It is various
codes that I’ve picked up there and there, But I will share
Hello,
Welcome to the openHAB community forum. Please post in English only!
Thank you!
Hello,
I also played a little bit around…
At the moment it is only a demo (and by the way that’s not my house)!
So that’s the result of my experiment (based @Dim #s exapmle and @ysc 's example and iconset):
4 Likes
Hello NB
can you pls explain how you achieved this?
How did you get the pictures in the background of your switches? Are the switches still in the pattern?
This looks like a alternative to a floorplan, which also would be great.
THX
Daniel
I assume all 6 pics are different dashboards, or are they frames? Im new to habpanel…
As I said it was an experiment, but in my eyes it looks very nice (provided your home is tidy), so I will try to describe it next week,
At this time i only can say that is one dashboard, the 6 picture are all own templates and it’s really based on the examples (@Dim already linked them and as he said you have to get your hands dirty with HTML and CSS)!
Its beautiful. Ive stayed away from habpanel, really liked rotini, but…so here i am. Not a programmer though
Not to bother, but when might you write up a tutorial?
1 Like
Sorry for the delay!
I’ll give you a brief descritpion based on the garage button in the template of the housefront in the upper left corner.
- create a new dashboard
- add a new template, resize and positioning it on the dashboard
- edit the template
- check on “No background”
- insert the following
divelement for the background image:
<div style="position:absolute;
top: 0px; bottom: 0px; left: 0px; right: 0px;
background: url('/static/image/housefront.jpg');
background-size:cover;
background-repeat: no-repeat;">
(the background image “housefront.jpg” has to be stored in your opanhab conf folder under html/image)
- now you have to insert a
divfor the button:
<div ng-init='HF_Garage_1={"name": "HF_Garage_1", "item": "HF_Garage_1", "hidelabel": true, "hideonoff": true, "iconset": "smarthome-set", "icon": "garage" }'>
<widget-switch size="32"
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 10px;
top: 240px; left: 220px;
width: 50px; height: 50px"
ng-model="HF_Garage_1"
/>
</div>
- The difficult is to positioning the button on the background image. Because there is no WYSIWYG editor you have to play around with the parameters “top” and “left” by increasing or decreasing them, run the dashboard and control the position of the button on the dashboard … I promise you that will be a lot of try and error.
- repeat step 6 and 7 for each button you want to have
- and repeat the steps 2 to 6 for each room you want to have on the dashboard
3 Likes
If only there was a Visual Dashboard Builder (like Divi or Elementor for Wordpress) for HABPanel… 
That would be a major breakthrough… another level of convenience and the ultimate HABPanel setup (@ysc)
I spend hours also positioning with top & left my buttons on my dashboard 
But after I created it… I use it all the time and there no need to update it.
widget code...needs cleanup but works. Big thanx to @ysc !
<div style="position: absolute;
top: 0;
bottom: 0;
left: -10px; right: -10px;
background: url('../static/HomeR/Ground_Floor.png');
background-size: cover;
background-repeat: no-repeat;">
<div ng-init='P01_Exterior_Light={"name": "P01 Exterior Light", "item": "P01_Exterior_Light", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 23%; left: 56%;
width: 60px; height: 60px"
ng-model="P01_Exterior_Light" />
</div>
<div ng-init='P03_Wh_Light={"name": "P03 Wh. Light", "item": "P03_Wh_Light", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 52%; left: 76%;
width: 60px; height: 60px"
ng-model="P03_Wh_Light" />
</div>
<div ng-init='P04_LED={"name": "P04 LED", "item": "P04_LED", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 37%; left: 62%;
width: 60px; height: 60px"
ng-model="P04_LED" />
</div>
<div ng-init='P04_Mirror={"name": "P04 Mirror", "item": "P04_Mirror", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 37%; left: 58%;
width: 60px; height: 60px"
ng-model="P04_Mirror" />
</div>
<div ng-init='P05_Light={"name": "P05 Light", "item": "P05_Light", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 44%; left: 68%;
width: 60px; height: 60px"
ng-model="P05_Light" />
</div>
<div ng-init='P06_Small_LED={"name": "P06 Small LED", "item": "P06_Small_LED", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 60%; left: 55%;
width: 60px; height: 60px"
ng-model="P06_Small_LED" />
</div>
<div ng-init='P06_Large_LED={"name": "P06 Large LED", "item": "P06_Large_LED", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 60%; left: 60%;
width: 60px; height: 60px"
ng-model="P06_Large_LED" />
</div>
<div ng-init='P07_Small_LED={"name": "P07 Small LED", "item": "P07_Small_LED", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 70%; left: 67%;
width: 60px; height: 60px"
ng-model="P07_Small_LED" />
</div>
<div ng-init='P07_Large_LED={"name": "P07 Large LED", "item": "P07_Large_LED", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 70%; left: 72%;
width: 60px; height: 60px"
ng-model="P07_Large_LED" />
</div>
<div ng-init='P08_LED={"name": "P08 LED", "item": "P08_LED", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 25%; left: 30%;
width: 60px; height: 60px"
ng-model="P08_LED" />
</div>
<div ng-init='P08_Light={"name": "P08 Light", "item": "P08_Light", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 25%; left: 37%;
width: 60px; height: 60px"
ng-model="P08_Light" />
</div>
<div ng-init='P08_Ventilator={"name": "P08 Ventilator", "item": "P08_Ventilator", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 33%; left: 33%;
width: 60px; height: 60px"
ng-model="P08_Ventilator" />
</div>
<div ng-init='P08_Terrace_Small_LED={"name": "P08 Terrace Small LED", "item": "P08_Terrace_Small_LED", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 25%; left: 22%;
width: 60px; height: 60px"
ng-model="P08_Terrace_Small_LED" />
</div>
<div ng-init='P08_Terrace_Large_LED={"name": "P08 Terrace Large LED", "item": "P08_Terrace_Large_LED", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 15%; left: 25%;
width: 60px; height: 60px"
ng-model="P08_Terrace_Large_LED" />
</div>
<div ng-init='P09_Light={"name": "P09 Light", "item": "P09_Light", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 14%; left: 40%;
width: 60px; height: 60px"
ng-model="P09_Light" />
</div>
<div ng-init='P10_Light={"name": "P10 Light", "item": "P10_Light", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 23%; left: 48%;
width: 60px; height: 60px"
ng-model="P10_Light" />
</div>
<div ng-init='P11_Light={"name": "P11 Dining Light", "item": "P11_Light", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 45%; left: 30%;
width: 60px; height: 60px"
ng-model="P11_Light" />
</div>
<div ng-init='P11_Small_LED={"name": "P11 Small LED", "item": "P11_Small_LED", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 65%; left: 20%;
width: 60px; height: 60px"
ng-model="P11_Small_LED" />
</div>
<div ng-init='P11_Large_LED={"name": "P11 Large LED", "item": "P11_Large_LED", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 65%; left: 25%;
width: 60px; height: 60px"
ng-model="P11_Large_LED" />
</div>
<div ng-init='mP3_03_01_O={"name": "Overhead Lamp", "item": "mP3_03_01_O", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 65%; left: 30%;
width: 60px; height: 60px"
ng-model="mP3_03_01_O" />
</div>
<div ng-init='P11_Terrace_Light={"name": "P11 Terrace Light", "item": "P11_Terrace_Light", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 80%; left: 37%;
width: 60px; height: 60px"
ng-model="P11_Terrace_Light" />
</div>
<div ng-init='WDim01_Dim={"name": "P02 LED Staircase", "item": "WDim01_Dim", "hidelabel": true, "hideonoff": true, "step": 10, "precision": 0 }'>
<widget-slider
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 58%; left: 44%;
width: 100px; height: 60px"
ng-model="WDim01_Dim" />
</div>
<div ng-init='P11_J1={"name": "P11 J1", "item": "P11_J1", "hidelabel": true, "hideonoff": true, "step": 10, "precision": 0, "vertical": true, "inverted": true }'>
<widget-slider
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 62%; left: 38%;
width: 60px; height: 100px"
ng-model="P11_J1" />
</div>
<div ng-init='P11_J2={"name": "P11 J2", "item": "P11_J2", "hidelabel": true, "hideonoff": true, "step": 10, "precision": 0, "vertical": true, "inverted": true }'>
<widget-slider
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 81%; left: 31%;
width: 60px; height: 100px"
ng-model="P11_J2" />
</div>
<div ng-init='P11_J3={"name": "P11 J3", "item": "P11_J3", "hidelabel": true, "hideonoff": true, "step": 10, "precision": 0, "vertical": true, "inverted": true }'>
<widget-slider
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 47%; left: 21%;
width: 60px; height: 100px"
ng-model="P11_J3" />
</div>
<div ng-init='P06_J4={"name": "P06 J4", "item": "P06_J4", "hidelabel": true, "hideonoff": true, "step": 10, "precision": 0, "vertical": true, "inverted": true }'>
<widget-slider
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 69%; left: 53%;
width: 60px; height: 100px"
ng-model="P06_J4" />
</div>
<div ng-init='P07_J5={"name": "P07 J5", "item": "P07_J5", "hidelabel": true, "hideonoff": true, "step": 10, "precision": 0, "vertical": true, "inverted": true }'>
<widget-slider
style="position: absolute;
background: rgba(147,189,238,0.5);
border-radius: 20px;
top: 82%; left: 65%;
width: 60px; height: 100px"
ng-model="P07_J5" />
</div>
</div>
1 Like
Thank you very much!
4 Likes
This looks nice! Do you use the official CALDAV binding?
Could you please share code for the template, items and binding config?
Yes using the CalDAV binding
Got it working with ICloud you can read here [SOLVED] Apple icloud CalDav connection
I used a modified CSS from the awesome work of @pmpkk Custom Theme in HabPanel 2.1 Example
I will share via a widget but I have found experience varies - if there is no place on an event the binding crashes everything and the sitemaps wont load which is a real shame
Heres the custom widget page any more info please let me know
Custom Widget: Up Next Calendar
Thank you for this code, looks awesome on my computer. Problem is now that it doesn’t scale to phone size. How might I allow it to do this? Also, can you explain what should be changed to match my items, ive pakyed a bit, but cant figure it out, i have no knowledge of html…for example, the “name” i assume is the name of the thing. “Item” i assume is the name of the item itself. I coukd be wring in my assumption, as i have entered my own stuff in those areas, but cannot get it to work.
Also, this would be awesome if it were responsive. Do you know how, and can you help? Id like to use your example as its exactly the dashboard i want to use.