Examples of HABPanel Solutions

(Andrew Pawelski) #313

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

(Gaël Grasset) #314

I used this to setup mine :

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

(Nic P) #315

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


(G) #316

@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.

(Ahmad Yazan Tibi) #317

Lets vote (with like) for the best one ?

(Rob Pope) #318

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.

(David Starke) #319

I need Help

This is the Pic :

The Code :

.ecobee-table {
  width: 100%;
  height: 100%;
  padding: 0px;
  border: 0px;
.ecobee-table td {
  border: 2px solid white;
<table class="ecobee-table">
    <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',
          <ui-knob value="knob.value" options="knob.options" ng-click="sendCmd(config.Regler_Heizung, knob.value)"/>
    <td><table class="ecobee-table">
    <td> Es ist {{StringValue(config.Ist_Heizung)}} °C </td>

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

Can anyone help me ?

(G) #320

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.

(Martin St-Pierre) #321

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

(G) #322

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.

(G) #323

Latest addition, still in progress though.

(Niklas) #324

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.


And here’s a screenshot:

(G) #325

A few new css tweaks, really loving how it’s starting to look.

(Mihir Patil) #326

Are those knobs custom?

(G) #327

@zbot473 No they’re standard, with the Tron skin setting.

(Mihir Patil) #328

Can I see the settings for the color temperature ones? Those are pretty cool. Thanks.

(G) #329


Set it to the Tron skin, and enable ranges, then set the following hex for each.

  • 0-10 = #cbfbff
  • 10-20 = #d4fcfe
  • 20-30 = #e7ffff
  • 30-40 = #f7ffff
  • 40-50 = #ffffff
  • 50-60 = #fff9e6
  • 60-70 = #fff7da
  • 70-80 = #fee9a6
  • 80-90 = #ffe083
  • 90-100 =#fed967

(Mihir Patil) #330


(Cyanide 4c) #331

Awesome panels, here is my first attempt, still working out some things.

(Rob Pope) #332

I love your audio screen. What resolution is your screen? Do you use it on a laptop or tablet?