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 
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.
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>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title></title>
<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;
}
</style>
<div id="date_field">{{itemValue('Tablet_Date')}}</div>
<div id="time_field" ng-init="timemodel={
'mode':'digital',
'digital_format':'HH:mm'
}">
<widget-clock ng-model="timemodel"/>
</div>
3 Likes
Hi r27
Look great. Can you share the json file?
Regards
Claus
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… your temp and humidity widget at the top right is also amazing.
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>
<div class="row">
<div class="col-xs-12"><span style="color: cyan; font-size: 20pt">{{itemValue('Verkeer_Werk_Tijd')}}</span></div>
</div>
<div class="row">
<div class="col-xs-12"><span style="color: red; font-size: 14pt">+ {{itemValue('Verkeer_Werk_Vertraging')}} min</span></div>
</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>
<div class="row">
<div class="col-xs-12"><span style="color: cyan; font-size: 20pt">{{itemValue('Verkeer_Thuis_Tijd')}}</span></div>
</div>
<div class="row">
<div class="col-xs-12"><span style="color: red; font-size: 14pt">+ {{itemValue('Verkeer_Thuis_Vertraging')}} min</span></div>
</div>
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.
Last Request, can you share the items command for “Verkeer_Thuis_Tijd”?
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.
1 Like
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.
@Bobbo_SA can you share your python script that gets the info from google and posts to MQTT? That sounds very useful.
Sure:
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(
units='metric',
origins='<insert origin GPS co-ordinates>',
destinations='<insert Destination GPS co-ordinates>',
mode='driving',
departure_time='now',
traffic_model='best_guess',
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)
print(m)
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)
client1.disconnect()
client1.loop_stop()
1 Like
I’ve done something similar. Script to get the time, calculate minutes and using the REST api to push it to a item!
Could you show me an example of one of yours please?
I’m using PHP, so the script is running outside of OpenHAB (cronjob)
I’m not a programmer, copy&pasting till it works 
<?php
$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_Aankomst",$tijd);
sendCommand("Verkeer_Werk_Vertraging",$min);
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;
}
?>
2 Likes
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.
Could you share the script for doing the calendar read out from google ?
Hello,
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 !)
