Hello, congratulations for the great widget.
Can I ask for some clarification? Frankly I do not find myself with the path. In / etc / openhab2 / I have no conf, also in the zip of the icons I can not find any images folder containing the PNGs but only the svg. I can not find the HTML where to enter the id of my item.
I’m a beginner with openHAB I guess I miss some basic notion. Could you give me a little more basic instructions on how to make the widget work? At the moment I only have a square full of N / A
/etc/openhab2 IS the conf folder.
So you need to unpack the zip into:
/etc/openhab2/html/openweathermap
additionally sou need the images from the top of the github site:
my screensize is 1024*768.
I tried col-sm and col-xs but both don’t seem to change anything…
changing the fontsize via h4 etc. lowers the fontsize but then it looks like that:
how can one move the condition icon below the condition text?
I’d like to do that also, but my more pressing problem is the current conditions on the right side. They don’t quite fit in the space allowed.
The ºF is on the second line. I tried shrinking the font size and it didn’t look good and it didn’t work. How can I adjust the width of that column? Just moving it a few pixels should do it, I think.
I’ve put in a PR for this functionality. There is a config item to allow custom date formats. Don’t think it’s been pulled though.
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>
2 Likes
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.
1 Like
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
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.
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!
Could someone please post the code from HABPanel? I seem to have messed it up BEFORE I copied it. 
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 
1 Like
@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:
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>
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.
1 Like
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
Me too but it doesn’t look like OpenWeatherMap makes them available.
Indeed, not availeble from OWM API, so not availeble to the binding.
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.