Examples of HABPanel Solutions


(Nduduzo Ngcobo) #168

Thank You, It's a start Which I'll look into :grinning: :grin:


(Tommy Sharp) #169

Hey Patrick, your panel is looking great! Do you have any charts going yet in the same style?


(Patrick) #170

Yes, but only using Grafana. Are you using it?


(Nduduzo Ngcobo) #171

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


(Ryan Houtz) #172

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.


(Andreas Moseler) #173

Hello Nduzi,

your panel looks fine. Could you tell me, how you implemented it?


(Nduduzo Ngcobo) #174

It is a bit mixed up​:grin: 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


(George Erhan) #176

Hello,

Welcome to the openHAB community forum. Please post in English only!
Thank you!


(NB) #177

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


(Daniel) #178

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


(Angelos) #179

check @ysc’s example here:


(Branden Smale) #180

I assume all 6 pics are different dashboards, or are they frames? Im new to habpanel…


(NB) #181

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


Need for a cross platform, customizable ui
Unable to work out how to make things appear on control page
(Branden Smale) #182

Its beautiful. Ive stayed away from habpanel, really liked rotini, but…so here i am. Not a programmer though


(Branden Smale) #183

Not to bother, but when might you write up a tutorial?


(NB) #184

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.

  1. create a new dashboard
  2. add a new template, resize and positioning it on the dashboard
  3. edit the template
  4. check on “No background”
  5. insert the following div element 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)

  1. now you have to insert a div for 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>
  1. 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.
  2. repeat step 6 and 7 for each button you want to have
  3. and repeat the steps 2 to 6 for each room you want to have on the dashboard

(Angelos) #185

If only there was a Visual Dashboard Builder (like Divi or Elementor for Wordpress) for HABPanel… :slight_smile:
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 :blush: 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>

(TheCrater) #186

@AV_HomeAuto Your set up looks beautiful. Care to share? :slight_smile:


(Branden Smale) #187

Thank you very much!


(Andrew Pawelski) #188

Heres my ICloud integrated CalDAV bound calendar widget


Any beautiful calendar template/widget for habpanel OH2?