Examples of HABPanel Solutions

(Craig) #104

Aw man that's a sweet setup.

I'm about to try set up my media player panel although I am using Kodi. Any chance of seeing how you set up your music panel? It looks very good :slight_smile:

(Ra) #105

My music widget designed to control iTunes. I am using exec binging to run custom script for iTunes control. Sure I can share my setup, but it will be useless if you don't use iTunes. For TV channels I also use custom php script to control Kodi - change pvr channels, get what is playing info.

(neo) #106

Hi @r27
Nice work in progress. I'd be interested to see how your doing this with itunes also.

(Kevin Gottsman) #107


I really like your design. Would you mind sharing your templates?

(LarsK) #108


Sure. Which part are you interested exactly?

The weather is a slightly modified version from Kuba Wolanin:
bigger-current-weather.widget.json (3.0 KB)

The forcast is done by myself:
weather-forecast.widget.json (4.8 KB)

The date and clock combinations is a template using a string item formated by openHAB (as habpanel does currently not support German date formats):

<!DOCTYPE html>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <style type="text/css">

      #date_field {
    font-size: 2em;
    border-radius: 0px;
    margin-top: 8%;
  	text-align: center;

  #time_field {
    font-size: 12em;
    !font-weight: bold;
    top: -40px;
    position: relative;
    text-align: center;

<div id="date_field">{{itemValue('Tablet_Date')}}</div>
<div id="time_field" ng-init="timemodel={
  <widget-clock ng-model="timemodel"/>

(Claus Blaabjerg Hansen) #110

Hi r27

Look great. Can you share the json file?



(Robert) #111

HI, sorry I'm new here, been using MQTT and Blynk for my projects around the house but have recently started Openhab and am looking to do something very similar.

Would you mind sharing your traffic widget? Actually... :slight_smile: your temp and humidity widget at the top right is also amazing.

(Future Cow) #112

My Temp/Hum widget is already 2 post under my picture. The Traffic is a bit complicated. I'm using TomTom api and a PHP script to get a JSON. And the information is then pushed to a item inside OpenHAB.

The widget is quite simple:

<div class="row">
  <div class="col-xs-12"><span style="color: white; font-size: 14pt">Naar werk:</span></div>
<div class="row">
  <div class="col-xs-12"><span style="color: cyan; font-size: 20pt">{{itemValue('Verkeer_Werk_Tijd')}}</span></div>
<div class="row">
  <div class="col-xs-12"><span style="color: red; font-size: 14pt">+ {{itemValue('Verkeer_Werk_Vertraging')}} min</span></div>
<hr style='margin-top:10px; margin-bottom:0' />
<div class="row">
  <div class="col-xs-12"><span style="color: white; font-size: 14pt">Naar huis:</span></div>
<div class="row">
  <div class="col-xs-12"><span style="color: cyan; font-size: 20pt">{{itemValue('Verkeer_Thuis_Tijd')}}</span></div>
<div class="row">
  <div class="col-xs-12"><span style="color: red; font-size: 14pt">+ {{itemValue('Verkeer_Thuis_Vertraging')}} min</span></div>

(Robert) #113

Appreciate the tip, I've managed to get the json from the Google API, should be able to use the widget data to get it to display.

(Robert) #114

Last Request, can you share the items command for "Verkeer_Thuis_Tijd"?

(Robert) #115

My Habpanel is still very rough, I'm still trying to get all the widgets etc working the way i would like and will then work on the design part to make it look better.

(Robert) #116

Sorted, used a python script to parse the JSON response from the Google API and post the values I need to MQTT, from there it was easy to get it into HabPanel.

Added a Cron Job to run every 5 minutes, api allows for 2500 calls per day on the free plan thus 5 minute updates will only generate around 288 calls per day.

Will work on adding my other controls and home status values on the weekend and post to finished json on Monday.

(James Hiscott) #117

@Bobbo_SA can you share your python script that gets the info from google and posts to MQTT? That sounds very useful.

(Robert) #118


Not Perfect but it works, the "print status" and "print time" were only there for troubleshooting.

import paho.mqtt.client as mqtt  #import the client1
import json, requests
import time

url = 'https://maps.googleapis.com/maps/api/distancematrix/json'

params = dict(
    origins='<insert origin GPS co-ordinates>',
    destinations='<insert Destination GPS co-ordinates>',
    key='<your API key>'  

resp = requests.get(url=url, params=params)
data = json.loads(resp.text)

status = data['status']
time = data['rows'][0]['elements'][0]['duration_in_traffic']['text']
print status
print time

def on_connect(client, userdata, flags, rc):
    m="Connected flags"+str(flags)+"result code "\
    +str(rc)+"client1_id  "+str(client)

def on_message(client1, userdata, message):
    print("message received  "  ,str(message.payload.decode("utf-8")))

broker_address="<your broker IP here>"
client1 = mqtt.Client("<client name can be anything>")    #create new instance
client1.on_connect= on_connect        #attach function to callback
client1.on_message=on_message        #attach function to callback
client1.connect(broker_address)      #connect to broker
client1.loop_start()    #start the loop
client1.publish("<your Traffic topic that the time will be published to e.g. /topics/traffic/>",time)

(Future Cow) #119

I've done something similar. Script to get the time, calculate minutes and using the REST api to push it to a item!

(Nathan Wilcox) #120

Could you show me an example of one of yours please?

(Future Cow) #121

I'm using PHP, so the script is running outside of OpenHAB (cronjob)
I'm not a programmer, copy&pasting till it works :smile:

$xml=simplexml_load_file("https://api.tomtom.com/lbs/services/route/3/[GPS-Coordinates]/Quickest/xml?key=[API-Key]&avoidTraffic=false&includeTraffic=true&language=en&day=today&time=now&iqRoutes=2&trafficModelID=-1&avoidTolls=false&includeInstructions=false&pathPoints=6") or die("Error: Cannot create object");
$tijd = (string) $xml->summary->arrivalOverview->time;
$vert = (string) $xml->summary->totalDelaySeconds;
$min = round(($vert/60),0);
$all = (string) $xml->summary->totalTimeSeconds;
$mins = floor($all / 60 % 60);
$all2 = sprintf('%01d:%02d', $hours, $mins);
sendCommand("Verkeer_Werk_Tijd", $all2);

function sendCommand($item, $data) {
  $url = "http://[OpenHAB-IP]:8080/rest/items/" . $item;
  $options = array(
    'http' => array(
        'header'  => "Content-type: text/plain\r\n",
        'method'  => 'POST',
        'content' => (string)$data,

  $context  = stream_context_create($options);
  $result = file_get_contents($url, false, $context);

  return $result;

(Robert) #122

Mine was a little more lazy, the json response comes back as follows:

   "destination_addresses" : [ "xxxxxxx" ],
   "origin_addresses" : [ "xxxxxxxx" ],
   "rows" : [
         "elements" : [
               "distance" : {
                  "text" : "18.0 km",
                  "value" : 18040
               "duration" : {
                  "text" : "22 mins",
                  "value" : 1327
               "status" : "OK"
   "status" : "OK"

I should have used the value field that is in seconds and converted it to the time, however the text field was easier and all i really needed, the limitation is i wont be able to do any additional calculations with it later on if needed - i may change to the numerical value some day.

(Johan F) #124

Could you share the script for doing the calendar read out from google ? :slight_smile:

(arnaud schaer) #125


I'm getting quite strange results concerning background image with habpanel as you can see in the picture. I have set up translucent theme with backgroud image "https://source.unsplash.com/category/nature".

Has anyone met (and solved) this curious behaviour ? I can't find what could go wrong, but I'm pretty sure that when I started playing with habpanel, it did not repeat part of the background image in the menu. (by the way, can't upload image from Firefox oO)

I tried deleting my 2 panels, clearing my cache ... to no avail. I'm all ears

edit :
KO on firefox 52.0.2 32bits
KO on firefox android 48.0
KO on chrome android 52.0.2743.98
KO on fukky kiosk browser android (latest)
OK on chrome for windows10 57.0.2987.133 (64-bit)
OK on edge (dhooo !)