Examples of HABPanel Solutions

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

I used this to setup mine :

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

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

Thanks
Nic

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

Lets vote (with like) for the best one ?

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.

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 1
1 and the ather Informations are 1*1

Can anyone help me ?

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.

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

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.

Latest addition, still in progress though.

3 Likes

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:

4 Likes

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

7 Likes

Are those knobs custom?

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

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

@zbot473

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
2 Likes

Cool!

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


4 Likes

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