Examples of HABPanel Solutions

Yoinkz · February 23, 2018, 12:24pm

Is it possible you perhaps could share your PIR Widget?
How does it work? I have Xioami Motions / Window - Door sensors and would like to have something like you.

gman · February 23, 2018, 5:39pm

New to OH, what a learning curve, but I love it, here is my lighting screen.

Network screen, not sure where I’m going with this one yet.

Music screen also in progress. All the buttons are pure css, animated, and dynamic depending what’s happening.

Rob_Pope · February 23, 2018, 8:26pm

That is a thing of beauty

TommySharp · February 23, 2018, 10:37pm

Looks awesome @gman!

On the whole we need to continue working towards a point where people can setup HABPanel like that without having to be a web developer… Because I’m not and it makes me sad seeing these panels which people have obviously put a lot of custom code into to get looking so good.

Andrew_Pawelski · February 24, 2018, 1:09am

Can anyone point me to a tutorial to set up grafana graphs on a raspberry pi 3 from start to finish with influxdb persistence and anonymous access I’ve found one for x64 in the oh community but nothing like this for the Pi (and trying to mod that guide I didn’t get any results

gael.grasset · February 24, 2018, 4:07am

I used this to setup mine :

Post 84 (linked from the 1st post) describes the specific instructions for a Raspberry.

Nic_P · February 25, 2018, 4:37am

@gman, can you share the color temperature widgets? Im assuming thats what they are below the siders.

Thanks
Nic

gman · February 25, 2018, 4:47am

@Nic_P , It’s just the standard Knob widget set to Tron skin in settings, I just spent some time customising it, a lot of time, probably.

a.tibi · February 25, 2018, 5:05am

Lets vote (with like) for the best one ?

Rob_Pope · February 25, 2018, 8:45am

I know CSS, but that’s not my problem. My issue is artistic flair (and lack there of). I see a lot of examples which are functional but aren’t pleasing to the eye (mine included). What @gman has done is not gone over the top with CSS and laid everything out in a clean manner with just the items they need and as a result it doesn’t look too cluttered.

Sefina · February 25, 2018, 2:54pm

I need Help

This is the Pic :
problem

The Code :

<style>
.ecobee-table {
  width: 100%;
  height: 100%;
  padding: 0px;
  border: 0px;
}
.ecobee-table td {
  border: 2px solid white;
}
  </style>
<table class="ecobee-table">
  <tr>
    <td><div ng-init="knob = {
                    value: itemValue(config.Regler_Heizung) ,
                    options: {
                      scale: {
                        enabled: true,
                        type: 'dots',
                        color: 'gray',
                        width: 2,
                        spaceWidth: 10,
                        quantity: 5,
                        height: 8
                      },
                      skin: {
                        type:	'tron',
                        width:	5,
                        color: 'orange',
                        spaceWidth: 5
                      },
                      trackWidth: 30,
                      barWidth: 30,
                      step: 1,
                      startAngle: 20,
                      endAngle: 340,
                      trackColor: 'rgba(52,152,219,.1)',
                      barColor: 'rgba(52,152,219,.5)',
                      textColor: 'white',
                      
                    }
                   };">
      </div>
      <div>
          <ui-knob value="knob.value" options="knob.options" ng-click="sendCmd(config.Regler_Heizung, knob.value)"/>
      </div></td>
    <td><table class="ecobee-table">
  <tr>
    <td>{{config.Name}}</td>
  </tr>
  <tr>
    <td> Es ist {{StringValue(config.Ist_Heizung)}} °C </td>
  </tr>
      <tr>
    <td>{{itemValue(config.An_Heizung)}}</td>
  </tr>
</table></td>
  </tr>
</table>

The Knob Item is to big, I Cant give him a fix width.
The Finish Widget ist 12 Fields big,
The Knob have 11 and the ather Informations are 1*1

Can anyone help me ?

gman · February 25, 2018, 7:24pm

I recommend Chrome DevTools, it makes it easier to inspect an element and then make live changes and see the instant result, when you’re happy with the changes, you can save them to the Additional stylesheet.

Web design is my thing, so I’m happy OH is running in the browser so I can have a tinker.
My heads bursting with ideas for future panels.

Darklock · March 1, 2018, 3:18pm

Hi There,
your habpanel looks awesome, would you mind sharing your settings more in details ?
I am new to OH, and by looking at examples how they are structured, is the way i learn .
It would be great if you would share your Json file.
Thank you

gman · March 2, 2018, 5:46pm

No custom Json files, these are mostly the built in widgets with just me changing some options, track colours, ranges, and so forth.
Appearance changes I made with css. I tweaked the css in Chrome Dev Tools, and then saved them in the additional css file.
I’m happy to help with more detail on specific css changes if you let me know which bit you want to know about.

gman · March 4, 2018, 3:26am

Latest addition, still in progress though.

Pezay · March 5, 2018, 8:14am

Here’s a video of my bathroom HABpanel for controlling the Sonos One-speaker we have in there. It´s connected to a USB-outlet behind the mirror, so when switching the lights on, the panel starts charging and screen is turned on. The device is an old Samsung Tab2 7" running Android 4.1.2.

https://www.instagram.com/p/Bf3ohUOF5Ke

And here’s a screenshot: