OpenWeatherMap widget for HABPanel

NCO · February 15, 2019, 7:07am

Mine looks like this:

The layout did not fit my screen either, so I arranged the code within habpanel editor.

You don’t see it, but the icons are even animated
see here:

My habpanel code for the upper part of th weather widget:
Please note: I habe changed the image syntax to match the animated icons - the original syntax is included in the commented lines (

<!-- For more information goto: https://github.com/BasvanH/habpanel-widget-openweathermap -->

<link rel="stylesheet" type="text/css" href="{{ config.html_path == NULL ? '/static/openweathermap' : config.html_path}}/weather-icons-master/css/weather-icons.css">

<style>
@media (min-width: 992px) {
.col-sm-border:not(:last-child) {
border-right: 1px solid #d7d7d7;
}
.col-sm-border + .col-sm-border {
border-left: 1px solid #d7d7d7;
margin-left: -1px;
}
  .owm-to-upper:first-letter {
text-transform: uppercase;
}
  .owm-condition {
  height: 1em;
 }
  .owm-row-current {
  margin: 1em 0em 2em;
 }
   .owm-row-forecast {
  margin-bottom: 0em;
 }
}
</style>

<div id="container">
  <div class="row owm-row-current">
  <div class="col-xs-4">
  <h3 class="text-left owm-to-upper">{{itemValue('W_OWM_Condition')}}</h3>
  <h5 class="text-left owm-to-upper">{{itemValue('W_OWM_ObservationTime') | date: 'HH:mm'}}</h5>
</div>
  <div class="col-xs-4">
  <img style="filter: invert(72%) sepia(79%) saturate(447%) hue-rotate(29deg) brightness(94%) contrast(87%);-webkit-filter: invert(72%) sepia(79%) saturate(447%) hue-rotate(29deg) brightness(94%) contrast(87%);" src="/icon/climacon?iconset=climacons&format=svg&state={{itemValue('W_OWM_ConditionId_Form')}}"></img>
<!--       <i class="wi wi-owm-{{itemValue('W_OWM_ConditionId')}}" ng-style="{ 'color' : (config.icon_color_current == NULL) ? primary-color : config.icon_color_current, 'font-size' : (config.icon_size_current == NULL) ? '5em' : config.icon_size_current + 'em' }"></i> -->
   </div>
  <div class="col-xs-4">
<h4 class="text-right"> {{'%.1f' | sprintf:itemValue('W_OWM_Temperature').split(' ')[0]}} {{itemValue('W_OWM_Temperature').split(' ')[1]}}</h4>
  <h5 class="text-right"> <img style="height:16px;" src="{{ config.html_path == NULL ? '/static/openweathermap' : config.html_path}}/images/humidity.png"/> {{itemValue('W_OWM_Humidity')}}</h5>
  <h5 class="text-right owm-to-upper"> <img style="height:16px;" src="{{ config.html_path == NULL ? '/static/openweathermap' : config.html_path}}/images/wind.png"/> {{'%.1f' | sprintf:itemValue('W_OWM_Wind_Speed').split(' ')[0]}} {{itemValue('W_OWM_Wind_Speed').split(' ')[1]}}</h5>
   </div>
  </div>

NCO · February 15, 2019, 7:12am

Please check out my post to @powerpolly

I have created 3 columns - see code below:
<div class="col-xs-4">

This actually means that the full width of 12 is separated into 3 columns with a width of 4).
See also here:

I don’t know this stuff either
But after messing around a while, it’s not that difficult anymore.

maddmax1976 · February 15, 2019, 10:05am

Thank you so much, I managed to configure it.

The fact that you tell me NULL for Sunday and Monday forecasts is due to the restrictions of the free account, right?

Have a nice day

ahnyerkeester · February 15, 2019, 4:44pm

Thank you @NCO, I spent time last night looking through the code and at w3schools.com trying to figure it out. I didn’t see the grid system link you mentioned so I’ll take a peek.

I really appreciate the help.

maddmax1976 · February 15, 2019, 5:41pm

Fixed, I had only badly configured the hours and days and I had not created links to things. Now everything works!

Thanks and congratulations again for the good work done!

ahnyerkeester · February 15, 2019, 5:57pm

Could someone please post the code from HABPanel? I seem to have messed it up BEFORE I copied it.

bastiaan_van_h · February 15, 2019, 9:19pm

Just re-import the .json file

bastiaan_van_h · February 15, 2019, 9:26pm

It’s nearly impossible to build a widget that looks great on all kinds of different screen sizes. Making it tailor fit for your need and learning some basic html5 / angular / css / bootstrap coding a long the way is a bonus. Great to see you guys going into the source code

ahnyerkeester · February 15, 2019, 9:30pm

@bastiaan_van_h, I considered that but was afraid it would undo what I’ve done so far.

With @NCO’s encouragement (and a good website link) I have actually been able to figure it out. Here’s where I stand now:
32%20PM

I did it by splitting the current weather conditions into three <div>s with the icon and weather condition in their own rather than sharing one. I then fidgeted with the size of each one till I got it right.

Then I commented out the condition text for the forecast to save space and I bumped the font size down for the temp.

It all fits on my RPi 7" Touch Screen now!
In case anyone else is trying, here’s my code for the widget:

<!-- For more information goto: https://github.com/BasvanH/habpanel-widget-openweathermap -->

<link rel="stylesheet" type="text/css" href="{{ config.html_path == NULL ? '/static/openweathermap' : config.html_path}}/weather-icons-master/css/weather-icons.css">

<style>
@media (min-width: 992px) {
    .col-sm-border:not(:last-child) {
			border-right: 1px solid #d7d7d7;
    }
    .col-sm-border + .col-sm-border {
			border-left: 1px solid #d7d7d7;
			margin-left: -1px;
    }
  	.owm-to-upper:first-letter {
    	text-transform: uppercase;
		}
  	.owm-condition {
  		height: 2em;
 		}
  	.owm-row-current {
  		margin: 1em 0em 2em;
 		}
   	.owm-row-forecast {
  		margin-bottom: 1em;
 		}
}
</style>

<div id="container">
  <div class="row owm-row-current">
    <div class="col-sm-4">
      <h2 class="text-left owm-to-upper">{{itemValue('Weather_OWM_Condition')}}</h2>   
    </div>
  	<div class="col-sm-3">
      <i class="wi wi-owm-{{itemValue('Weather_OWM_ConditionId')}} pull-center" ng-style="{ 'color' : (config.icon_color_current == NULL) ? primary-color : config.icon_color_current, 'font-size' : (config.icon_size_current == NULL) ? '10em' : config.icon_size_current + 'em' }"></i>
    </div>
	  <div class = "col-sm-5 text-right">
      <h2>{{'%.1f' | sprintf:itemValue('Weather_OWM_Temperature').split(' ')[0]}} {{itemValue('Weather_OWM_Temperature').split(' ')[1]}}</h2>
      <h5><img style="height:16px;" src="{{ config.html_path == NULL ? '/static/openweathermap' : config.html_path}}/images/humidity.png"/> {{itemValue('Weather_OWM_Humidity')}}</h5>
      <h5><img style="height:16px;" src="{{ config.html_path == NULL ? '/static/openweathermap' : config.html_path}}/images/wind.png"/> {{'%.1f' | sprintf:itemValue('Weather_OWM_Wind_Speed').split(' ')[0]}} {{itemValue('Weather_OWM_Wind_Speed').split(' ')[1]}}</h5>
      <h5>{{itemValue('Weather_OWM_ObservationTime') | date: 'HH:mm'}}</h5>
   	</div>
  </div>
	<div class="row owm-row-forecast">
		<div class="col-sm-3 col-sm-border">
      <h4 class="owm-to-upper">{{itemValue('Weather_OWM_Forecast_Time0') | date:'EEE'}}</h4>
      <i class="wi wi-owm-{{itemValue('Weather_OWM_ConditionId0')}}" ng-style="{ 'color' : (config.icon_color_forecast == NULL) ? primary-color : config.icon_color_forecast, 'font-size' : (config.icon_size_forecast == NULL) ? '3em' : config.icon_size_forecast + 'em' }"></i>
<!--      <h5 class="owm-condition owm-to-upper">{{itemValue('Weather_OWM_Condition0')}}</h5> -->
      <h6><b>{{'%.1f' | sprintf:itemValue('Weather_OWM_Temp0').split(' ')[0]}} {{itemValue('Weather_OWM_Temp0').split(' ')[1]}}</b></h6>
    </div>
    <div class="col-sm-3 col-sm-border">
      <h4 class="owm-to-upper">{{itemValue('Weather_OWM_Forecast_Time1') | date:'EEE'}}</h4>
      <i class="wi wi-owm-{{itemValue('Weather_OWM_ConditionId1')}}" ng-style="{ 'color' : (config.icon_color_forecast == NULL) ? primary-color : config.icon_color_forecast, 'font-size' : (config.icon_size_forecast == NULL) ? '3em' : config.icon_size_forecast + 'em' }"></i>
<!--      <h5 class="owm-condition owm-to-upper">{{itemValue('Weather_OWM_Condition1')}}</h5> -->
			<h6><b>{{'%.1f' | sprintf:itemValue('Weather_OWM_Temp1').split(' ')[0]}} {{itemValue('Weather_OWM_Temp1').split(' ')[1]}}</b></h6>
    </div>
    <div class="col-sm-3 col-sm-border">
      <h4 class="owm-to-upper">{{itemValue('Weather_OWM_Forecast_Time2') | date:'EEE'}}</h4>
      <i class="wi wi-owm-{{itemValue('Weather_OWM_ConditionId2')}}" ng-style="{ 'color' : (config.icon_color_forecast == NULL) ? primary-color : config.icon_color_forecast, 'font-size' : (config.icon_size_forecast == NULL) ? '3em' : config.icon_size_forecast + 'em' }"></i>
<!--      <h5 class="owm-condition owm-to-upper">{{itemValue('Weather_OWM_Condition2')}}</h5> -->
      <h6><b>{{'%.1f' | sprintf:itemValue('Weather_OWM_Temp2').split(' ')[0]}} {{itemValue('Weather_OWM_Temp2').split(' ')[1]}}</b></h6>
    </div>
    <div class="col-sm-3 col-sm-border">
      <h4 class="owm-to-upper">{{itemValue('Weather_OWM_Forecast_Time3') | date:'EEE'}}</h4>
      <i class="wi wi-owm-{{itemValue('Weather_OWM_ConditionId3')}}" ng-style="{ 'color' : (config.icon_color_forecast == NULL) ? primary-color : config.icon_color_forecast, 'font-size' : (config.icon_size_forecast == NULL) ? '3em' : config.icon_size_forecast + 'em' }"></i>
<!--      <h5 class="owm-condition owm-to-upper">{{itemValue('Weather_OWM_Condition3')}}</h5> -->
      <h6><b>{{'%.1f' | sprintf:itemValue('Weather_OWM_Temp3').split(' ')[0]}} {{itemValue('Weather_OWM_Temp3').split(' ')[1]}}</b></h6>
    </div>
	</div>
</div>

ahnyerkeester · February 15, 2019, 9:32pm

It really is! You did a great job getting this set up, I just needed to come to understand bootstrap so I could make the adjustments. Thank you very much @bastiaan_van_h for the work you’ve done.

NCO · February 16, 2019, 11:39am

I absolutely agree!
Great job @bastiaan_van_h
Thank you very much!

soesas · February 18, 2019, 11:53pm

I just implemented the updated Widget. Very nice work!!
It is a decent approach to take the midday temp. I woul still like to see max and min of the day to receive a good forecast.
Also I’ll try to implement rain probability as well.
But awesome Work!! That java is genius

ahnyerkeester · February 19, 2019, 1:29am

Me too but it doesn’t look like OpenWeatherMap makes them available.

bastiaan_van_h · February 19, 2019, 7:43am

Indeed, not availeble from OWM API, so not availeble to the binding.

soesas · February 19, 2019, 8:43am

But one could take all the temp items from the hour forecast and get the highes and lowest value for min and max, don’t you think.

moodsta · February 19, 2019, 10:11pm

Hi all,

don’t want to disturb but I don’t get the widget working.
Followed the instructions plenty of times. The only thing I get is a blank frame. Not even NULLs or anything:

I tried:

corrected the weather ID
set rights for the icons

Question:
Although I have the items file, I can not see any value for these parameters in openhab log.
Furthermore I get following error when setting Hours to 96 and days to 1.
Somehow it doesn’t take the 1 and goes in “unknown” state:

2019-02-19 22:57:34.359 [hingStatusInfoChangedEvent] - 'openweathermap:weather-and-forecast:8ec80e30' changed from UNINITIALIZED (HANDLER_INITIALIZING_ERROR): Duplicate channels openweathermap:weather-and-forecast:8ec80e30:forecastHours27#time-stamp to ONLINE

Thanks in advance

bastiaan_van_h · February 20, 2019, 6:11am

Duplicate channels, looks like you have an overlap in items. The items from the v2 widget has some the same items from v1. Look into that.

moodsta · February 20, 2019, 9:34am

Thanks. Found the problem. I was reading your tutorial too stryctly and forgot to place the js file in the html folder.
Furthermore, in your items file, I had to remove the “:local”, then the items got populated with data from OWM.

Great widget!!

ps: any idea how I could change the icons to use animated climacons?

wzinet · February 20, 2019, 12:17pm

I too just got caught out by this. Took me a couple of hours as I was following the instructions directly.

It’s a great widget - thank you, but please can the instructions be updated with the following (perhaps obvious bits of instruction):

make folder conf/html/openweathermap
download/clone/etc the content of https://github.com/BasvanH/habpanel-widget-openweathermap to conf/html/openweathermap
this would populate the ‘images’ folder and the ‘owm.controller.js’ file (as well as a couple of others that aren’t strictly needed)
continue as per existing instructions.

ahnyerkeester · February 20, 2019, 10:48pm

This isn’t a problem with the widget but I thought it was funny. Look at my current weather condition!
36%20PM
I live in the Mojave desert where we do have sand but that isn’t a weather condition!

OpenWeatherMap provided this condition as you can see from my Paper UI:
18%20PM