Weather widget example

Tutorials & Examples
1

Here’s an example of a weather widget I put together. I use yahoo and darksky/ForecastIo together, since yahoo doesn’t provide all the data I want. ForecastIo apparently gives you 1000 API calls for free per day.

image
image.png1194×386 55.5 KB

Download weather icons here: https://github.com/manifestinteractive/weather-underground-icons
For the 3 additional little icons under the “current conditions”, I got them here:
https://icons8.com/icon/set/wind/all
https://icons8.com/icon/set/humidity/all
https://icons8.com/icon/set/umbrella/all

You will need to rename some of the images to match the icons in the folders that come with Weather Binding

Be aware that there are some items I’m not using in the weather.items file below.

Number   Temp_Min         "Temperature min [%.2f °C]"   {weather="locationId=home, forecast=1, type=temperature, property=min"}
Number   Temp_Max         "Temperature max [%.2f °C]"   {weather="locationId=home, forecast=1, type=temperature, property=max"}

Number   Temperature       "Temperature [%.2f °C]"      {weather="locationId=home, type=temperature, property=current"}
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"}
DateTime ObservationTime3  "Observation time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]"   {weather="locationId=home, forecast=3, type=condition, property=observationTime"}
DateTime ObservationTime4  "Observation time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]"   {weather="locationId=home, forecast=4, type=condition, property=observationTime"}

Number   Temp_Min0         "Temperature min [%.2f °C]"  {weather="locationId=home, forecast=0, type=temperature, property=min"}
Number   Temp_Max0         "Temperature max [%.2f °C]"  {weather="locationId=home, forecast=0, type=temperature, property=max"}
Number   Temp_Min1         "Temperature min [%.2f °C]"  {weather="locationId=home, forecast=1, type=temperature, property=min"}
Number   Temp_Max1         "Temperature max [%.2f °C]"  {weather="locationId=home, forecast=1, type=temperature, property=max"}
Number   Temp_Min2         "Temperature min [%.2f °C]"  {weather="locationId=home, forecast=2, type=temperature, property=min"}
Number   Temp_Max2         "Temperature max [%.2f °C]"  {weather="locationId=home, forecast=2, type=temperature, property=max"}
Number   Temp_Min3         "Temperature min [%.2f °C]"  {weather="locationId=home, forecast=3, type=temperature, property=min"}
Number   Temp_Max3         "Temperature max [%.2f °C]"  {weather="locationId=home, forecast=3, type=temperature, property=max"}
Number   Temp_Min4         "Temperature min [%.2f °C]"  {weather="locationId=home, forecast=4, type=temperature, property=min"}
Number   Temp_Max4         "Temperature max [%.2f °C]"  {weather="locationId=home, forecast=4, type=temperature, property=max"}

Number  Precip_Probability0     "Precip probability [%.2f %]"   {weather="locationId=home2, forecast=0, type=precipitation, property=probability"}
Number  Precip_Probability1     "Precip probability [%d %%]"    {weather="locationId=home2, forecast=1, type=precipitation, property=probability"}
Number  Precip_Probability2     "Precip probability [%d %%]"    {weather="locationId=home2, forecast=2, type=precipitation, property=probability"}
Number  Precip_Probability3     "Precip probability [%d %%]"    {weather="locationId=home2, forecast=3, type=precipitation, property=probability"}
Number  Precip_Probability4     "Precip probability [%d %%]"    {weather="locationId=home2, forecast=4, type=precipitation, property=probability"}

String   Condition0        "Condition [%s]"             {weather="locationId=home, forecast=0, type=condition, property=commonId"}
String   Condition1        "Condition [%s]"             {weather="locationId=home, forecast=1, type=condition, property=commonId"}
String   Condition2        "Condition [%s]"             {weather="locationId=home, forecast=2, type=condition, property=commonId"}
String   Condition3        "Condition [%s]"             {weather="locationId=home, forecast=3, type=condition, property=commonId"}
String   Condition4        "Condition [%s]"             {weather="locationId=home, forecast=4, type=condition, property=commonId"}

String   TCondition0        "Condition [%s]"             {weather="locationId=home, forecast=0, type=condition, property=text"}
String   TCondition1        "Condition [%s]"             {weather="locationId=home, forecast=1, type=condition, property=text"}
String   TCondition2        "Condition [%s]"             {weather="locationId=home, forecast=2, type=condition, property=text"}
String   TCondition3        "Condition [%s]"             {weather="locationId=home, forecast=3, type=condition, property=text"}
String   TCondition4        "Condition [%s]"             {weather="locationId=home, forecast=4, type=condition, property=text"}

String   WCondition0        "Condition [%s]"             {weather="locationId=home2, forecast=0, type=condition, property=text"}
String   WCondition1        "Condition [%s]"             {weather="locationId=home2, forecast=1, type=condition, property=text"}
String   WCondition2        "Condition [%s]"             {weather="locationId=home2, forecast=2, type=condition, property=text"}
String   WCondition3        "Condition [%s]"             {weather="locationId=home2, forecast=3, type=condition, property=text"}
String   WCondition4        "Condition [%s]"             {weather="locationId=home2, forecast=4, type=condition, property=text"}

Number  Wind_Speed      "Windspeed [%.2f km/h]" <wind>  (Weather)       {weather="locationId=home2, type=wind, property=speed"}
String  Wind_Dir        "Wind direction [%s]"   <wind>  (Weather)       {weather="locationId=home2, type=wind, property=direction"}

String  WU_Cond_des             "Condition [%s]"                <sun_clouds>    (Weather)       {weather="locationId=home2, type=condition, property=text"}
String  WU_Cond_id         "Condition [%s]"                <sun_clouds>    (Weather)       {weather="locationId=home2, type=condition, property=commonId"}

services/weather.cfg file:

location.home2.name=Home2
location.home2.latitude=XXXXXXXX
location.home2.longitude=XXXXXXX
location.home2.language=en
location.home2.updateInterval=30
location.home2.provider=ForecastIo

location.home.name=Home
location.home.woeid=XXXX
location.home.provider=Yahoo
location.home.language=en
location.home.updateInterval=30

Here’s the widget info (Add widget > Template > paste the settings below). Images downloaded from GitHub were put into an “underground” folder I created:

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

<table border=0>
<tr>
<td>
<table id="weather-table" border=0>
  <tr>
    <td colspan="3" align="center">Current Conditions</td>
  </tr>
	<tr>
		<td rowspan="2"><img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('WU_Cond_id').replace(' ','-') | lowercase }}.png"/><br>{{itemValue('WU_Cond_des')}}</br></td>
		<td id="weather-temp">{{'%.1f' | sprintf:itemValue('Temperature')}}</td>
		<td id="weather-temp-sign">°C</td>
	</tr>
	<tr>
		<td colspan="2">
			<table id="weather-table-details" border=0 align="left">
				<tr>
					<td align="left"><img src="{{ServerPath}}/images/{{IconSet}}/humidity.png"/></td>
					<td align="left">&nbsp;{{'%.0f' | sprintf:itemValue('Humidity')}} %</td>
				</tr>
        <tr>
          <td align="left"><img src="{{ServerPath}}/images/{{IconSet}}/umbrella.png"/></td>
          <td align="left">&nbsp;{{'%.0f' | sprintf:itemValue('Precip_Probability0')}} %</td>
        </tr>
        <tr>
          <td align="left"><img src="{{ServerPath}}/images/{{IconSet}}/wind.png" height="32" width="32"/></td>
          <td align="left">&nbsp;{{'%.0f' | sprintf:itemValue('Wind_Speed')}} Km</td>
        </tr>
			</table>
		</td>
	</tr>
</table>
</td>
<td>
<table id="weather-forecast-table" border=0>
	<tr>
		<td/>
		<td>Today</td>
		<td>{{itemValue('ObservationTime1') | date:'EEEE'}}</td>
		<td>{{itemValue('ObservationTime2') | date:'EEEE'}}</td>
    <td>{{itemValue('ObservationTime3') | date:'EEEE'}}</td>
    <td>{{itemValue('ObservationTime4') | date:'EEEE'}}</td>
	</tr>
	<tr>
		<td/>
		<td>
      <img src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition0').replace(' ','-') | lowercase }}.png"/>
			<p>{{itemValue('TCondition0')}}</p>
		</td>
		<td>
			<img src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition1').replace(' ','-') | lowercase }}.png"/>
			<p>{{itemValue('TCondition1')}}</p>
		</td>
		<td>
			<img src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition2').replace(' ','-') | lowercase }}.png"/>
			<p>{{itemValue('TCondition2')}}</p>
		</td>
    <td>
			<img src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition3').replace(' ','-') | lowercase }}.png"/>
			<p>{{itemValue('TCondition3')}}</p>
		</td>
    <td>
			<img src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition4').replace(' ','-') | lowercase }}.png"/>
			<p>{{itemValue('TCondition4')}}</p>
		</td>
  </tr>
	<tr>
		<td style="text-align:right">&nbsp;&nbsp;&nbsp;&nbsp;High</td>
		<td class="col-xs-4" style="color:tomato">{{'%.0f' | sprintf:itemValue('Temp_Max0')}} °C</td>
		<td class="col-xs-4" style="color:tomato">{{'%.0f' | sprintf:itemValue('Temp_Max1')}} °C</td>
		<td class="col-xs-4" style="color:tomato">{{'%.0f' | sprintf:itemValue('Temp_Max2')}} °C</td>
    <td class="col-xs-4" style="color:tomato">{{'%.0f' | sprintf:itemValue('Temp_Max3')}} °C</td>
    <td class="col-xs-4" style="color:tomato">{{'%.0f' | sprintf:itemValue('Temp_Max4')}} °C</td>
	</tr>
	<tr>
		<td style="text-align:right">&nbsp;&nbsp;&nbsp;&nbsp;Low</td>
		<td class="col-xs-4" style="color:#0db9f0">{{'%.0f' | sprintf:itemValue('Temp_Min0')}} °C</td>
		<td class="col-xs-4" style="color:#0db9f0">{{'%.0f' | sprintf:itemValue('Temp_Min1')}} °C</td>
		<td class="col-xs-4" style="color:#0db9f0">{{'%.0f' | sprintf:itemValue('Temp_Min2')}} °C</td>
    <td class="col-xs-4" style="color:#0db9f0">{{'%.0f' | sprintf:itemValue('Temp_Min3')}} °C</td>
    <td class="col-xs-4" style="color:#0db9f0">{{'%.0f' | sprintf:itemValue('Temp_Min4')}} °C</td>    
	</tr>
</table>
</td>
</tr>
</table>```
12 Likes
2

hello! thanks for example but i have some questions…

have you installed any binding? like yahoo weather binding or anything else…??
i cannot understand where to put downloaded zip file for icons…can you write the full path?

thanks a lot!

3

Thanks.
Can you put the code in fences for better readability please.

4

Answer to my questions: yes weather binding needed.
Icons can be placed in /html/underground folder.
i had to place there also the conditions icons: sunny, partlycloudy…
in the widget code, there no need to use the line

<link rel="stylesheet" type="text/css" href="{{ServerPath}}/layouts/example.css" />

and at the bottom remove: ```

last, in my case, i had to replace the “localhost” to ip address of RPI.

attached the json file of widget ready for import. italian version.
Weather.widget.json (4.1 KB)

5

hi

I am able to get this work except the image is not showing.

habpanel_weather
habpanel_weather.PNG1125×532 24.4 KB

I have limited knowledge on coding.

I place the image folder here.

wea_image_folder
wea_image_folder.PNG725×434 32.5 KB

This is the widget json code. weather.json (3.6 KB)

any help will be much appreciated.

thanks

6

I’ll try to take a look at this later this week. I’ve been totally swamped lately.

7

Hi,
I now have the same problem as Krishnan, the icons are not displayed.
Has anyone found a solution for this?

Thanks in advance

8

Same here, after logging in to my openhabpi I discovered I have been slacking on updates. So I decided to run the updates and now I cannot access any pictures from the static html folder or images folder… A static HTML file will load though inside of the static html folder but the moment I place an image in there it does not load just shows a small square box instead of the image. Thus leaving my weather widget without any condition images.

Anyone have a way to resolve it not loading image files from the html folder or sub folders?

Thanks!

9

I had to place my icons in Html/images/underground/(png’s go here)

I had to rename a few to get them to match.

10

Done

11

Hi Guys

Wondering if anyone is using a nice weather widget for mobile devices? My weather displays fine on PC/Tablet but too many forecasted days fails on a Phone.

Cheers

12

can someone post their config files as i am trying to get this to work and not having luck

Here is what i get

weather
weather.PNG1563×340 30.1 KB 

#Weather.cfg 
weather:apikey.ForecastIo=3aa5c7aaXXXXXXXXXXXX
location.home2.name=Home2
location.home2.latitude=XX.9941938
location.home2.longitude=-XX.2922996
location.home2.language=en
location.home2.updateInterval=30
location.home2.provider=ForecastIo

location.home.name=Home
location.home.woeid=249XXXX
location.home.provider=Yahoo
location.home.language=en
location.home.updateInterval=30

Other files are the same as the OP posted.
I added the yahoo binding that is it.

13

issue solved. I found that yahoo wont work without an api key.

14

Does this widget work with the dark sky binding?