Examples of HABPanel Solutions

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!

Please share the script :slight_smile:

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!

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.

1 Like

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

8 Likes

Hi Jochen,
your panel looks really great :slight_smile:
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 :slight_smile:
BR
Adrian

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

1 Like

Hi Peter

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

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

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.

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?

2 Likes

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

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)

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!

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

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

4 Likes

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.

20 Likes

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

@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

2 Likes