Examples of HABPanel Solutions

Tutorials & Examples HABPanel Examples
210

HTTP Code

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

{{itemValue('Condition0')}}

{{itemValue('Condition1')}}

{{itemValue('Condition2')}}
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
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

#apikey.ForecastIo=
#apikey.OpenWeatherMap=
#apikey.WorldWeatherOnline=
#apikey.Wunderground=
#apikey.Hamweather=
#apikey2.Hamweather=
#apikey.Meteoblue=

location configuration, you can specify multiple locations

location..name=Albuquerque
location..woeid=12794959
location..provider=Yahoo
location..language=en
location..updateInterval=10
location..units=us

#location..name=
#location..latitude= (not required for Yahoo provider)
#location..longitude= (not required for Yahoo provider)
#location..woeid= (required for Yahoo provider)
#location..provider=
#location..language=
#location..updateInterval=
#location..units=

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

213

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

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

215

could you share the json?

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:

image
image.jpg779×451 132 KB

want I want :smiley:

image
image.jpg816×444 110 KB

1 Like
217

Hi Just wanted to share my habpanel look

22
Screen Shot 2017-09-19 at 09.47.22.jpg2534×1360 443 KB
18
Screen Shot 2017-09-19 at 09.49.18.jpg2536×1364 372 KB
08
Screen Shot 2017-09-19 at 09.48.08.jpg2544×1388 529 KB

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

hope you guys like the look

13 Likes
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

Regards
Lorenzo

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?

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.

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.

57
Bildschirmfoto 2017-08-08 um 20.49.57.jpg2222×1328 734 KB
04
Bildschirmfoto 2017-08-08 um 20.58.04.jpg2216×1322 809 KB
21
Bildschirmfoto 2017-08-08 um 20.50.21.jpg1565×934 658 KB
52
Bildschirmfoto 2017-08-08 um 20.57.52.jpg2218×1328 988 KB
11
Bildschirmfoto 2017-08-08 um 20.50.11.jpg2220×1328 903 KB
34
Bildschirmfoto 2017-08-08 um 20.59.34.jpg2220×1330 859 KB
53
Bildschirmfoto 2017-08-08 um 20.59.53.jpg2200×1308 478 KB

8 Likes
222

Hey Marius

Is this a webview provided by Deutsche Bahn?

Looks quite interesting.

223

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

1 Like
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.

226

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

Summary

css

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

  #wrapper {
  	color: #FFF !important;
  	font-weight: bold;
  	height:100%;
  	width:100%;
  	display:block;
  	position:absolute;
  	top:0;
  	left:0;
 }
#forecast{
 position:relative;
  display: flex;
	justify-content: center;
	align-items: center;
  width:25%;
  height:100%;
  float:left;
  }
 
  .forecast-day{
  	font-size: 32px;
	margin-bottom: 50px;
  }
  .forecast-img{
  position:relative;
  width:100%;
  float:left;
  margin-bottom: 35px;
  }
  .forecast-img img {width:84px;}
  .forecast-condition {
	position:relative;
  	width:100%;
  	float:left;
  	margin-bottom: 35px;
	font-size: 20px;
	}
  
  .forecast-temp-max,
  .forecast-temp-min {
  	font-size: 32px;
  font-weight:normal;
  }
  .forecast-temp-max{font-weight:bold;}

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>



<div id="wrapper">
  <div id="forecast">
    <span>
      <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>
    </span>
  </div>
</div>
227

Sure! Here you go:

<uib-carousel ng-init="
                       images=[
                         { 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 }
                       ]" 
      				interval='7000'>
  
  <uib-slide index="$index" ng-repeat="image in images">
    <p ng-if="image.name">{{ image.name }}</p>
    <widget-image ng-model="image"></widget-image>
  </uib-slide>
</uib-carousel>

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.

3 Likes
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?

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.

230

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

...

IMG_8094
IMG_8094.jpg2840×1378 958 KB

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.

...

IMG_8095
IMG_8095.jpg2195×2635 699 KB