Examples of HABPanel Solutions

Matt_Foreman · August 31, 2018, 3:54am

This is awesome! Can I ask what you are using to display your calendar events? I want to do that with my google cal but struggling to find a workaround?

Cheers!

Matt_Foreman · August 31, 2018, 4:22am

Please share the script

Klimbim · September 2, 2018, 2:51pm

Hey @der_optimist: Could you share how you do you´re weather warning box? I am thinking of having one central element which collects all warnings in the last 24 hours (weather, sensors not working or the like)…

Thanks in advance, looks great your panel!

der_optimist · September 3, 2018, 8:01pm

Hi @Klimbim, I posted something here:

please also see the following posts there as there was some discussion about it. If you need further information, please feel free to ask.

davorf · September 7, 2018, 10:20am

Hello!

Few of my panels - still work in progress. I took screenshots on a desktop PC, so, it doesn’t look/fit exactly the same as it does on tablet, and I did some image cropping to remove scrollbars (because, on tablet, there aren’t any scrollbars visible).

I haven’t posted unfinished panels - not much to show yet.

Best regards,
Davor

Adrian_Rinnus · September 11, 2018, 8:38pm

Hi Jochen,
your panel looks really great
Would you please share you widgets for your call list as well as the widet for the weather forecast on the right side?
Thank you
BR
Adrian

Adrian_Rinnus · September 13, 2018, 9:04pm

Ok i found your call list widget in the call list thread. Thank you very much

lindberg · October 1, 2018, 5:40pm

Hi Peter

I have some issues regarding your code / widget, maybe you want to help me?

I have total 5 Nest protects, and i would like to add all of them, is there a easy way?

The one I have already added, is showing OK in red, Where to add the pictures to the nest?

<div ng-init="ServerPath='/static'; IconSet='nest'"></div>

<table style="width: 100%; border-collapse: separate; border-spacing: 4px;">

  <tr>
    <td colspan=3 style="padding: 0;"><h4 style="color: #00afd8; line-height: .1em;">Nest Protect Bryggers</h3></td>
  </tr>

  <tr>
    <td style="border: 2px solid #76899e; border-radius: 10px;">
      <table style="width: 100%;">
        <tr>
          <td rowspan="4" style="padding: 0px; padding-top: 0px; padding-bottom: 0px"><img id="nest-icon" height="80" width="80" src="{{ServerPath}}/images/{{IconSet}}/nest-protect-glow-blue.png"/></td>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px">Røg:</td>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px" ng-style="{ color: itemValue('nest_bryggers_smoke')=='ok' ? 'green' : 'red' }">{{itemValue('nest_bryggers_smoke')}}</td>
        </tr>
        <tr>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px">CO2:</td>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px" ng-style="{ color: itemValue('nest_bryggers_co2')=='ok' ? 'green' : 'red' }">{{itemValue('nest_bryggers_co2')}}</td>
        </tr>
        <tr>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px">Sidst online:</td>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px">{{itemValue('nest_bryggers_lastconnection') | date:'dd-MM-yyyy HH:mm'}}</td>
        </tr>
        </tr>


      </table>
    </td>
  </tr>
</table>

Hope you can help me

Peter

oklona · October 19, 2018, 11:11am

Hello. Since some of you have kitchen screens and other dashboards, has anyone found a good way to control the screen, to turn it on and off? I would like the screen to light up whenever someone is moving close to it, but stay dark otherwise.

-Or rather, stay on if there is light in the room, but if it is dark, only turn on if movement is detected.

I have bought a new 23 inch touch screen that I will use, connected to a Raspberry Pi. OS would then be either Linux (Ubuntu Mate or Raspbian), or Windows 10 IoT core. My current idea is to connect a motion sensor (and maybe a light sensor as well) to the GPIO pins on the Raspberry Pi.

Pezay · October 19, 2018, 11:39am

I see that Linux/Windows is your OS-alternatives. Check out this video that has a guide to use the Android-camera as motion detector. Maybe there is something similar available for your OS of choise?

oklona · October 19, 2018, 11:49am

Thanks. For Android, there is also the option to use HabPanelViewer, which also uses the Android camera for motion detection.

I believe I can get motion detection working, using a regular PIR detector. I think my challenge will be to turn the screen on and off “at will”, but I have no idea. Maybe it is dead simple I have seen some Linux commands that should be able to do it. I was mostly asking, to hear if anybody has done anything like this, and have som experience to share.

andrelung · October 20, 2018, 11:01am

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:

#!/bin/sh
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)

oklona · October 22, 2018, 9:03am

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.

kevinshane · October 30, 2018, 8:10am

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

davorf · October 30, 2018, 9:10am

Hello!

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,
Davor

NOTORIOUS_VR · October 30, 2018, 10:57pm

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

KidSquid · October 31, 2018, 5:03am

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.

Mailbox Delivery - Will show once mail has been delivered.
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.

Gad_Ofir · October 31, 2018, 5:53am

very cool!

Beec · November 4, 2018, 12:15pm

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

KidSquid · November 4, 2018, 4:51pm

@Beec

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.

'http://user:pass@10.x.x.xx/ISAPI/Streaming/channels/201/picture/'

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

Squid