Examples of HABPanel Solutions

(Michael Chilson) #210


My Weather {{itemValue('ObservationTime0') | date:'short'}}
{{'%.1f' | sprintf:itemValue('Temperature_F')}} °F
Humidity: {{itemValue('Humidity')}} %
Pressure: {{'%.0f' | sprintf:itemValue('Pressure') / 1000}} MPa

Today {{itemValue('ObservationTime1') | date:'EEEE'}} {{itemValue('ObservationTime2') | date:'EEEE'}}




Max {{'%.0f' | sprintf:itemValue('Temp_Max0_F')}} °F {{'%.0f' | sprintf:itemValue('Temp_Max1_F')}} °F {{'%.0f' | sprintf:itemValue('Temp_Max2_F')}} °F
Min {{'%.0f' | sprintf:itemValue('Temp_Min0_F')}} °F {{'%.0f' | sprintf:itemValue('Temp_Min1_F')}} °F {{'%.0f' | sprintf:itemValue('Temp_Min2_F')}} °F

(Michael Chilson) #211

Weather Service .ctg

The apikey for the different weather providers, at least one must be specified

Note: Hamweather requires two apikeys: client_id=apikey, client_secret=apikey2


location configuration, you can specify multiple locations


#location..latitude= (not required for Yahoo provider)
#location..longitude= (not required for Yahoo provider)
#location..woeid= (required for Yahoo provider)

(Michael Chilson) #212

Weather Items.ctg

Number Temperature_F “Temperature [%.2f °F]” {weather=“locationId=home, type=temperature, property=current, unit=fahrenheit”}
Number Humidity “Humidity [%d %%]” {weather=“locationId=home, type=atmosphere, property=humidity”}
Number Pressure “Pressure [%.2f mb]” {weather=“locationId=home, type=atmosphere, property=pressure”}

DateTime ObservationTime0 “Observation time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]” {weather=“locationId=home, forecast=0, type=condition, property=observationTime”}
DateTime ObservationTime1 “Observation time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]” {weather=“locationId=home, forecast=1, type=condition, property=observationTime”}
DateTime ObservationTime2 “Observation time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]” {weather=“locationId=home, forecast=2, type=condition, property=observationTime”}

Number Temp_Min0_F “Temperature min [%.2f °F]” {weather=“locationId=home, forecast=0, type=temperature, property=min, unit=fahrenheit”}
Number Temp_Max0_F “Temperature max [%.2f °F]” {weather=“locationId=home, forecast=0, type=temperature, property=max, unit=fahrenheit”}
Number Temp_Min1_F “Temperature min [%.2f °F]” {weather=“locationId=home, forecast=1, type=temperature, property=min, unit=fahrenheit”}
Number Temp_Max1_F “Temperature max [%.2f °F]” {weather=“locationId=home, forecast=1, type=temperature, property=max, unit=fahrenheit”}
Number Temp_Min2_F “Temperature min [%.2f °F]” {weather=“locationId=home, forecast=2, type=temperature, property=min, unit=fahrenheit”}
Number Temp_Max2_F “Temperature max [%.2f °F]” {weather=“locationId=home, forecast=2, type=temperature, property=max, unit=fahrenheit”}

String Condition0 “Condition [%s]” {weather=“locationId=home, forecast=0, type=condition, property=text”}
String Condition1 “Condition [%s]” {weather=“locationId=home, forecast=1, type=condition, property=text”}
String Condition2 “Condition [%s]” {weather=“locationId=home, forecast=2, type=condition, property=text”}

(Michael Chilson) #213

Will display weather data but will not display Icons from the HTML folder.

(Lorenzo Giordano) #214

you posted an incomplete html code : there are just text.
Please share the html code withing a code fences (icon “</>” on the message editor) otherwise it is impossible to understand the issue.

Bye Lorenzo

(Shorty707) #215

could you share the json?

(Shorty707) #216

When I try to setup a page as “jumppage” like it looks in the Docs…
I use widget Button to navigate to other dashboards…
however I can only choose “custom icon url” and a picture is only very faint in the background

looks like:

want I want :smiley:

(Daniel Humphreys) #217

Hi Just wanted to share my habpanel look

the sensors are currently not connected i plan on using the MiHome door and Temperature sensors.

hope you guys like the look

(Lorenzo Giordano) #218

I don’t understand what you have in the picture.
it seems you have the background over the picture itself… just uncheck/check the background option on the widget.

As alternative just use a Template instead of the widget.
It is very simple to create just a jump “button” with background image and a TexT as in your screenshot


(Tomibeck) #219

He Box.

In the second Picture the weather Part can you actually selsct the different days and it shows the details then ? if so how did you do it?

(Daniel Humphreys) #220

Hi Yes you can select the different days I’m using a iframe provided by meteoblue then i changed the HTML size tags to fit the kindle display size.

(Marius) #221

That’s my Panel so far it’s more an infoboard than a control board :sweat_smile:
With a click or touch on the left it shows the Weather, with a click on the right it shows the temperaturegraph and with a click in the middle it’s going to the controlboard.

(Jerome) #222

Hey Marius

Is this a webview provided by Deutsche Bahn?

Looks quite interesting.

(Tommy Sharp) #223

Hey there, could you share you code to get the web cam carousel going with the auto refresh?

(James Hiscott) #224

@marius3012 do you have the code for your weather screen, its very clean. I know a few examples are on this board already but yours is nice and aligned etc.

(Marius) #226

Weather Binding and a custom widget which loads the css and the icons (http://www.danvierich.de/weather/)



:root {--box-bg: rgba(0, 0, 0, 0.0);}

  #wrapper {
  	color: #FFF !important;
  	font-weight: bold;
  display: flex;
	justify-content: center;
	align-items: center;
  	font-size: 32px;
	margin-bottom: 50px;
  margin-bottom: 35px;
  .forecast-img img {width:84px;}
  .forecast-condition {
  	margin-bottom: 35px;
	font-size: 20px;
  .forecast-temp-min {
  	font-size: 32px;

Custom Widget

<div ng-init="ServerPath='http://192.168.0.xxx:8080/static'; IconSet='simple'">
  <link rel="stylesheet" type="text/css" href="{{ServerPath}}/layouts/start.css" />

<div id="wrapper">
  <div id="forecast">
      <div class="forecast-day">{{daysnames [(itemValue('_ObservationTime1') | date:'EEEE')] }}</div>
      <div class="forecast-img"><img src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('_ConditionId1').replace(' ','-') | lowercase }}.png"/></div>
      <div class="forecast-condition">{{itemValue('_Condition1')}}</div>
      <div class="forecast-temp-max">{{'%.0f' | sprintf:itemValue('_Temp_Max1')}} °C</div>
      <div class="forecast-temp-min">{{'%.0f' | sprintf:itemValue('_Temp_Min1')}} °C</div>

(SiLeX) #227

Sure! Here you go:

<uib-carousel ng-init="
                         { url: 'http://chilehaus.dnsalias.net/record/current.jpg', 			name: 'Speicherstadt', 		refresh: 300 },
                         { url: 'http://www.mundsburgtower.de/webcam.jpg', 								name: 'Mundsburg Tower', 	refresh: 301 }, 
                         { url: 'http://www.hansemerkur.de/webcam/current.jpg', 					name: 'Binnenalster', 		refresh: 302 }
  <uib-slide index="$index" ng-repeat="image in images">
    <p ng-if="image.name">{{ image.name }}</p>
    <widget-image ng-model="image"></widget-image>

Every 7000 milliseconds the uib carousel will advance to the next slide.
Every 300, 301 and 302 seconds respectively the image widget will refresh the picture. Whether or not it is visible. It doesn’t know and we don’t care. I chose different intervals to balance the load when refreshing.

(SiLeX) #228

I really like it. If you really display this on a panel, that is some incredible resolution! Diffusing the background when there are widgets in front of it would look awesome and create a nice glassy effect. But I assume that is nothing that even CSS3 can do, can it?

(SiLeX) #229

@marius3012 In the temperature graph. Is the forecast (“Vorhersage”) provided by a weather service or is it something you forecasted programmatically with a holt_winters or other algorithms?

I’m kind of interested in forecasting the inside temperature while taking outside temps and weather conditions into account.

(Marius) #230

Hey, thanks I display it on a 10" Touchscreen attached to a raspbery 3 on which also OpenHAB runs.
The 10" Touchscreen is activated by a motion detector.


the forecast is provided by OpenWeatherMap and my outside temeprature comes from a ds18b20 which is attached to an esp8266 together with a dth22 for the inside temperature. it sends the data via mqtt every 5 minutes.