Examples of HABPanel Solutions

I got the wake-up working for an official pi 7" display, but I could not get the motion detection working so far. As a backup, I use just the presence detection on the network to see if somebody is home. This is my approach for waking up the display:

DISPLAY=:0 xset s reset 
DISPLAY=:0 xset dpms force on

Since the dashboard and openhab run on different PIs, I run the script via this call:
executeCommandLine('ssh pi@displaypi /home/pi/wakeup.sh', 5000)

Thanks! That is real useful information! I really appreciate it. I also have the panel and OpenHab on different computers, but plan to just use local motion detection, so run the screen on/off via script, completely independent of OpenHab. -The script could then possible use mosquitto_pub / mosquitto_sub to check for / update status on MQTT.

wow~~ that’s looking relly nice! Could you please share your codes? I really like the design, thanks!


What do you mean by “share your codes”? All I did is adjust some widgets via css, and other via regular widget settings. I can share my css file, if that’s what you mean by codes.

Best regards,

Just starting out with HABPanel… but so far so good!


Thought I would share mine with the group…In this use case, I am using HABPanel for a status board for the home.

This content is displayed on a 32" display which hangs over our door to the garage - near the kitchen. With one quick look we can make sure we are on top of everything.

All of the statuses appear in green when they are reporting good information, if there is a fault or something needs attention - the staus appears in red.

The display pulls content from:

Google Calendar
Autelis Binding
Wemo Binding (Coffee Maker)
ZWave Sensors (Garage+Front Gate)
EcoBee Binding (HVAC)
CCTV System
Custom Pool Pressure Sensor

I have a couple of widgets that I am finishing up and plan to get on the display soon.

  1. Mailbox Delivery - Will show once mail has been delivered.
  2. Commute Travel Time - Pulling data from Waze will show the to and from drive time to the office.

I stuck with a fairly simple design. I guess my next rev would include more time in the design phase.

Would love to hear anyone’s comments or suggestions for improvement.


very cool!

Look nice :+1:t2:
How did you implement the camera ? I’ve Some IP camera’s from Dahua but could not get the live stream in openHAB panel


Thank you!

The CCTV images are pulled from my NVR using a direct URL (most NVR’s and IP Cams have this feature)

The issue I ran into was the way my NVR (and most others) handled authentication. The username and password are included in the URL string which most browsers no longer support.


When I first started out I would get authentication pop ups constantly which ruined the status board. I ended up using Firefox with a browser plug-in that was able to maintain the authentication and allowed the images to rotate freely.

In HABPanel I’m using an image carousel to rotate through the image from each of my selected cameras

<div class="cctv">
  <div uib-carousel active="0" interval="5000" no-wrap="false">
    <div uib-slide index="0" ng-init="model1 = { 'url':'http://user:pass@10.x.x.xx/ISAPI/Streaming/channels/101/picture/', 'refresh': 5 }">
      <widget-image ng-model="model1" style="margin:auto;"/>
    <div uib-slide index="1" ng-init="model2 = { 'url':'http://user:pass@10.x.x.xx/ISAPI/Streaming/channels/201/picture/', 'refresh': 5 }">
      <widget-image ng-model="model2" style="margin:auto;"/>
    <div uib-slide index="2" ng-init="model3 = { 'url':'http://user:pass@10.x.x.xx/ISAPI/Streaming/channels/301/picture/', 'refresh': 5 }">
      <widget-image ng-model="model3" style="margin:auto;"/>
    <div uib-slide index="3" ng-init="model4 = { 'url':'http://user:pass@10.x.x.xx/ISAPI/Streaming/channels/501/picture/', 'refresh': 5 }">
      <widget-image ng-model="model4" style="margin:auto;"/>

Let me know if I can answer any more questions.



You can get 1 FPS using this binding as some of the Dahua cameras may not support anything other than DIGEST auth.

Dahua cameras, at least the one i have also has the ability to stream motion JPEG, you get near realtime video which is supported in almost all browsers. If you want to use it on iDevices beware of limitation that apple devices do not support full resolution, i think 720p is maximum resolution for mjepg (i could be wrong). You can add this stream url in basic Image widget and it will work. Tested on Mac and Windows, iPhone and iPad.


If you want any other type of stream that will be supported natively in browser from dahua camera you will have to live convert it to another format using ffmpeg or smth.

I have gone nice and simple with my screens as I have numerous tablets around my home which display what they need to for the current room context.

Screenshots from Amazon Fire 7" tablets.

Kitchen Side door:

  • Hikvision driveway camera (Stills taken from ISAPI updated every 2 seconds) Blows up to full screen when its clicked
  • Link to Kitchen Sonos
  • Weather feed
  • Hue outdoor lighting
  • Bin schedule (HTML page)

Kitchen Sonos control screen:

Internet status screen

  • PiHole
  • Speedtest CLI

They have been kept deliberately simple with big buttons so they are easy to use and as they are on all the time I stayed with the orange tree theme as its really nice :slight_smile:


Nice panels!

Can you share the widget code for the PiHole please? :slight_smile:

I’ve just one 10“ panel in the house. Here are some example
screens. I use the orangetree-style with some modified widgets and templates.


Setup standard as per Pi-Hole Integration

The template code is as follows.

<div  class="row">
      <div class="col-md-5 modgrid">
        <img data-icon="pihole" src="../icon/pihole?state=109608&amp;format=svg" height="200pt"/>
        <br />
        <span style="font-size: 20pt">{{itemValue('PiHole_Status')}}</span>
      <div class="col-md-7 modgrid">
        <span style="font-size: 14pt">DNS Queries (Last 24)</span>
        <br />
        <span style="font-size: 20pt">{{itemValue('PiHole_DnsQueriesToday') | number:0}}</span>
        <br />
        <br />
        <span style="font-size: 14pt">Served from cache</span>
        <br />
        <span style="font-size: 20pt">{{itemValue('PiHole_QueriesCached') | number:0}}</span>
        <br />
        <br />
        <span style="font-size: 14pt">Ads Blocked</span>
        <br />
        <span style="font-size: 20pt">{{itemValue('PiHole_AdsBlockedToday') | number:0}} ({{itemValue('PiHole_AdsPercentageToday') | number:1}}%) </span>
<br />
<span style="font-size: 20pt">{{itemValue('PiHole_DomainsBeingBlocked') | number:0}} Domains blocked</span>

Just in case you were wondering as well the Ads Blocked is as high as it it is as the Amazon Fire tablets are CONSTANTLY calling home even with all data sharing options disabled :rage:


That sounds interesting! How did you do that? Are you loading the full picture in a new panel (clicking links to that panel)?

Sounds less awesome when you correctly guessed the reality :rofl:

All my rooms are clusters of screens that are interactive in that group so click on cctv on main screen sends you to another panel with the full screen as the cctv image and when you click on that it takes you back to the main menu

I end up with something like

  • Kitchen Side Door
    ** Kitchen Side Door CCTV
    ** Kitchen Side Door Sonos
    ** Kitchen Side Door Weather
  • Kitchen Main
    ** Kitchen Main Sonos (Same as Kitchen Side Door Sonos but redirects to Kitchen Main when clicked)
  • Dining Room
    ** Dining Room Sonos
    ** Dining Room Lights
  • CCTV
    ** CCTV Driveway (Same as Kitchen Side Door CCTV)
    ** CCTV Garage
    ** CCTV etc…

Loads of duplication but simple for guests to use without tiny buttons or complex menu navigation

Thanks Mike!
If it’s well made it’s still awesome :grinning:

I might apply the same for my dad’s Dashboard :+1:

Here are some Screens of mine:



How did you do the weather part? Is it HTML or is it a functionality that can be done easily in HABpanel itself?