Thank You, It’s a start Which I’ll look into 
Hey Patrick, your panel is looking great! Do you have any charts going yet in the same style?
Yes, but only using Grafana. Are you using it?
Hey Again
This is what I’ve done so far…
I just wanted to ask if anyone has done a satusbar for Kodi on the Habpanel…
And also for the buttons I wanted to add icons, I am familier with HTML and CSS, but what I wanted to do is to get the stock functions from the habpanel itself rather then rendering a mini page that displays a picture and sends a command
3 Likes
Hi @bwhouse
I really like the frontail showing the logs but after the install I get lost on the usage part.
Can you tell me the command to use to display the log file for just a standard install.
UPDATE
Never mind @bwhouse I figured it out. I guess it was just too easy I thought I was missing something.
Turns out I just needed to navigate to the server IP using port 9001 and it was working after the install.
UPDATE 2
I just figured out frontail is an available Optional Component in the configuration tool.
So anyone wanting to use the Log screen can install frontail from there then just enter your server IP address and port number 9001 in the web frame Url field.
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