Examples of HABPanel Solutions


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

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)

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”}

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

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

could you share the json?

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:

1 Like

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


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


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?

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.

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.


Hey Marius

Is this a webview provided by Deutsche Bahn?

Looks quite interesting.

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

1 Like

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

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>

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.


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?

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

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.