Template Example: Weather Binding

Hi All,

I’m new to all this, so I thought this would be a great starting position for me but I seem to be falling down somewhere.

I’ve run through all of the above and believe I have copied it all. I’ve had to create the default.items file with the details in.

I’ve configured my weather.cfg to look like the following

and used the HTML code in the widget

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

<div id="weather-location-name" >
	My Weather {{itemValue('ObservationTime0') | date:'short'}} 
</div>

<table id="weather-table">
	<tr>
		<td rowspan="2"><img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition0').replace(' ','-') | lowercase }}.png"/></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">
				<tr>
					<td>Humidity:</td>
					<td>{{itemValue('Humidity')}} %</td>
				</tr>
				<tr>
					<td>Pressure:</td>
					<td>{{'%.0f' | sprintf:itemValue('Pressure') / 1000}} MPa</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
<p/>
<table id="weather-forecast-table">
	<tr>
		<td/>
		<td>Today</td>
		<td>{{itemValue('ObservationTime1') | date:'EEEE'}}</td>
		<td>{{itemValue('ObservationTime2') | date:'EEEE'}}</td>
	</tr>
	<tr>
		<td/>
		<td>
			<img src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition0').replace(' ','-') | lowercase }}.png"/>
			<p>{{itemValue('Condition0')}}</p>
		</td>
		<td>
			<img src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition1').replace(' ','-') | lowercase }}.png"/>
			<p>{{itemValue('Condition1')}}</p>
		</td>
		<td>
			<img src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition2').replace(' ','-') | lowercase }}.png"/>
			<p>{{itemValue('Condition2')}}</p>
		</td>
	</tr>
	<tr>
		<td class="col-xs-4" style="color:red">Max</td>
		<td class="col-xs-4" style="color:red">{{'%.0f' | sprintf:itemValue('Temp_Max0')}} °C</td>
		<td class="col-xs-4" style="color:red">{{'%.0f' | sprintf:itemValue('Temp_Max1')}} °C</td>
		<td class="col-xs-4" style="color:red">{{'%.0f' | sprintf:itemValue('Temp_Max2')}} °C</td>
	</tr>
	<tr>
		<td class="col-xs-4" style="color:#0db9f0">Min</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>
	</tr>
</table>

But I end up with this:

Any help will be greatly appreciated!

Hi Nathan,

I can’t see anything wrong with the configuration (but sometimes this is hard as a single character error is all it takes sometimes). Based on your screenshots I think that the template is working (you would usually loose something of the ‘structure’ of the template if there was an error in the HTML). In your image the structure is OK, just all the data is missing :frowning:

As you will see from my previous post, there is a new set of HTML that “hides” the error codes when data is not being returned by the binding (in the logs these come back as UNDEF). I would suggest that you use that. If you see double hyphens everywhere then all of your items are UNDEF (Undefined).

First, this would then point to the configuration of your weather.cfg.

I would also look at the frequency 5 is low and you may have exceeded the limit on the number of queries permitted per day. I don’t use that provider but the other two I have tried have limits.

BTW, you may want to hide your API key as this is usually personal to you (you can edit your post). If the number of queries are limited, it would be frustrating to find out someone else was using them all up :wink:

You could also try another provider. Yahoo is free etc. See if you get anything different.

Check for the initialisation of the binding in the openHAB logs. You should look for something like this (not real API)

2017-01-17 10:53:41.730 [INFO ] [eather.internal.common.WeatherConfig] - ProviderConfig[providerName=WORLDWEATHERONLINE,apiKey=000000000000000000]
2017-01-17 10:53:41.734 [INFO ] [eather.internal.common.WeatherConfig] - LocationConfig[providerName=WORLDWEATHERONLINE,language=gb,updateInterval=20,latitude=00.0000,longitude=-0.0000,woeid=00000,locationId=Stevenage,name=Stevenage]

After that scan for some items being set or any errors / warnings. They should point you in the right direction.

I would also just test using a simple, dummy widget for say Temperature in HABpanel. In simple terms as soon as you can get one item working then getting the rest should be easy.

Sorry can’t pinpoint it in one. Hope this helps, Andy

1 Like

In what directory did you put the weather. Html ?

Edit: Forget it, I missed that the question was concerning habpanel.

1 Like

@Nathan_Wilcox: I had the same problem. My solution: rewrite the item values. For example “{{itemValue(‘Humidity’)}}” to “{{itemValue(config.Humidity)}}”.

1 Like

@AndyMB could please please post a consistent zip containing all data, icons, templates etc. This makes it much more easier to get a clean setup. Copying partly peaces of this post “guarantees” that something is copied wrong. I also struggle to find the correct setup for German, even using the ID concept. Many thanks in advance, Markus
by the way: I’m using OH2RC1 - is there any way to get more debugging on a OH2 with Weather 1.9?

Markus, sorry, I wont be providing a download because:

  • the original icons are part of someone else’s work and I would not feel comfortable repackaging them
  • the effort to cut / paste from screen is the same as to do the same cut / paste operations from file. I would always suggest using a PC/MAC to do this rather than a tablet or mobile device though.
  • there are so many different permutations and languages to support I could be updating forever (unless you are offering to pay me to do it ?? ;))

The first post has been updated many times with (hopefully) all of the changes / improvements that people have suggested. If I missed something good you only have to shout!

This excludes the language changes, simple because we only have a “dirty” solution right now.

Having said that here is the template HTML code with language support for German days:

<div ng-init="ServerPath='../static'; IconSet='flat_colorful'; daynames={'Sunday': 'Sonntag', 'Monday': 'Montag', 'Tuesday': 'Dienstag', 'Wednesday': 'Mittwoch', 'Thursday': 'Donnerstag', 'Friday': 'Freitag', 'Saturday': 'Samstag', 'Sunday': 'Sonntag'}">
<link rel="stylesheet" type="text/css" href="{{ServerPath}}/layouts/example.css" />
</div>

<table id="weather-table">
	<tr>
		<td colspan="4" ng-if="itemValue('ObservationTime0')!='UNDEF'">My Weather {{itemValue('ObservationTime0') | date:'short'}}</td>
		<td colspan="4" ng-if="itemValue('ObservationTime0')=='UNDEF'">My Weather --/--/----</td>
	</tr>
	<tr>
		<td rowspan="2" colspan="2" ng-if="itemValue('Condition0')!='UNDEF'"><img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition_ID0').replace(' ','-') | lowercase }}.png"/></td>
		<td rowspan="2" colspan="2" ng-if="itemValue('Condition0')=='UNDEF'"><img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/></td>
		<td colspan="2" id="weather-temp"  align="left" ng-if="itemValue('Temperature')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temperature')}}<font id="weather-temp-sign">°C</font></td>
		<td colspan="2" id="weather-temp"  align="left" ng-if="itemValue('Temperature')=='UNDEF'">--</td>
	</tr>
	<tr>
		<td colspan="2">
			<table id="weather-table-details">
				<tr>
					<td>Humidity:</td>
					<td ng-if="itemValue('Humidity')!='UNDEF'">{{itemValue('Humidity')}} %</td>
					<td ng-if="itemValue('Humidity')=='UNDEF'">-- %</td>
				</tr>
				<tr>
					<td>Pressure:</td>
					<td ng-if="itemValue('Pressure')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Pressure') / 1000}} MPa</td>
					<td ng-if="itemValue('Pressure')=='UNDEF'">-- MPa</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr colspan="4">
	 <td height="20"></td>
	</tr>
	<tr>
		<td/>
		<td>Today</td>
		<td ng-if="itemValue('ObservationTime1')!='UNDEF'">{{daynames[(itemValue('ObservationTime1') | date:'EEEE')]}}</td>
		<td ng-if="itemValue('ObservationTime1')=='UNDEF'">--</td>
		<td ng-if="itemValue('ObservationTime2')!='UNDEF'">{{daynames[(itemValue('ObservationTime2') | date:'EEEE')]}}</td>
		<td ng-if="itemValue('ObservationTime2')=='UNDEF'">--</td>
	</tr>
	<tr>
		<td/>
		<td ng-if="itemValue('Condition_ID0')!='UNDEF'">
			<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition_ID0').replace(' ','-') | lowercase }}.png"/>
			<p> {{itemValue('Condition0')}} </p>
		</td>
		<td ng-if="itemValue('Condition_ID0')=='UNDEF'">
			<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/>
			<p>--</p>
		</td>
		<td ng-if="itemValue('Condition_ID1')!='UNDEF'">
			<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition_ID1').replace(' ','-') | lowercase }}.png"/>
			<p> {{itemValue('Condition1')}} </p>
		</td>
		<td ng-if="itemValue('Condition_ID1')=='UNDEF'">
			<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/>
			<p>--</p>
		</td>
				<td ng-if="itemValue('Condition_ID2')!='UNDEF'">
			<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition_ID2').replace(' ','-') | lowercase }}.png"/>
			<p> {{itemValue('Condition2')}} </p>
		</td>
		<td ng-if="itemValue('Condition_ID2')=='UNDEF'">
			<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/>
			<p>--</p>
		</td>
	</tr>
	<tr>
		<td class="col-xs-4" style="color:red">Max</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max0')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Max0')}} °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max0')=='UNDEF'">-- °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max1')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Max1')}} °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max1')=='UNDEF'">-- °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max2')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Max2')}} °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max2')=='UNDEF'">-- °C</td>
	</tr>
	<tr>
		<td class="col-xs-4" style="color:#0db9f0">Min</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min0')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Min0')}} °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min0')=='UNDEF'">-- °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min1')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Min1')}} °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min1')=='UNDEF'">-- °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min2')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Min2')}} °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min2')=='UNDEF'">-- °C</td>
	</tr>
</table>

This version uses the Condition IDn (where n is the forecast day number 0,1,2 etc) format, so the icons will display whatever language you select in the weather binding. Remember to rename the icons from the condition name format to a number (see my previous post).

The weather binding configuration file will need the following added / changed to translate the weather ‘Condition…’ items (the words) into German.
location.<locationId1>.language=de

To use this code for another language you only need to amend the first line and change:
daynames={'Sunday': 'Sonntag', 'Monday': 'Montag', 'Tuesday': 'Dienstag', 'Wednesday': 'Mittwoch', 'Thursday': 'Donnerstag', 'Friday': 'Freitag', 'Saturday': 'Samstag', 'Sunday': 'Sonntag'}'

Replacing the German day names with the language of your choice.

Other than these two changes, the rest of the instructions in the first post should get you to a working solution.

Hope this helps.

Sorry not aware of any way to do this (others may know this). It may not be possible as it was developed for the previous version of OH etc. I did not develop this, so I can’t help very much with general questions about the binding.

I hope someone out there is working on a v2.0. But right now I’m struggling to get the TiVo binding, that I have adopted working… so no time to even thing about that :wink:

Good luck and do let us know how you get on. It’s always helpful when other people confirm that stuff works as there are so many ways this can be configured and I only have my one English :wink: setup to test with.

Andy

1 Like

Hi Ben, Are you planning on sharing this code, very interested in your weather widget!

Hi! Great post!

Unfortunately my data is showing as “Light snow (1–2 cm.) throughout the day.” Any way to strip that do do something so it works nice with the icons??

thanks!!

Ok, forecastio/opensky api uses long descriptions on all forecasts except current so that’s my issue… Is their a fix or do i need to change providers is the question now… ;(

Hi Jay,

I sympathise, it’s become incresingly apparent that the named icons are problematic even before we get into multiple language support. Hindsight is a wonderful thing.

In the original solution, a transformation .map file was provided. This would have been the obvios location to normalise the names to match the icon file names. Sadly not an option right now with HABpanel.

Before looking for something more complex, I would see if the Condition ID fields are populated. If so, then the code above that uses these numbers and the icons renamed as numbers would be the path of least resistance.

Alternatively you could simply copy the icons to match each of the new names that happen over time, tedious but low tech :wink: Depends on how complex the condition names they supply turns out to be.

You could also use the technique used in the day mapping code / language translation above. Could get complicated but that again depends on how complex the descrptions turn out to be.

If all else fails, then maybe another provider would be the way to go.

Let us know how you get on.

Regards, Andy

I forgot i already had a wunderground api key set with Forecastio also. I just switched to wunderground instead and all is fixed.

Has anybody using Wunderground as their source managed to use the Condition ID format for icons? I always seem to get undef as my value.

I was struggling with icons all the time myself. The condition names are different by provider and are also different by language. But the condition ID’s would also be different by provider.
I am now using the Weather Underground 2.0 binding, which is not in the distribution yet, but you can find a link in this PR #2748. It contains a channel providing a link to the weather condition icon from Wunderground. I use that icon in the template. It may not look quit as nice, but it works perfectly well for me.

You will need to have the corresponding items in the panel definition below. I set them all up through PaperUI.

Here is my dashboard code:

<div ng-init="ServerPath='../static/weather-data'; IconSet='flat_colorful'">
<link rel="stylesheet" type="text/css" href="{{ServerPath}}/layouts/example.css" />
</div>

<div ng-init="daysnames={'Sunday': 'Zondag', 'Monday': 'Maandag', 'Tuesday': 'Dinsdag', 'Wednesday' : 'Woensdag', 'Thursday' : 'Donderdag', 'Friday' : 'Vrijdag', 'Saturday' : 'Zaterdag'}">
</div>

<table id="weather-table">
	<tr>
		<td colspan="9" id="header" align="center" ng-if="itemValue('WeatherInformation_Current_ObservationTime')!='UNDEF'"><b>Weersvoorspelling van {{itemValue('WeatherInformation_Current_ObservationTime') | date:'d/M/yy H:mm'}}</b></td>
		<td colspan="9" id="header" align="center" ng-if="itemValue('WeatherInformation_Current_ObservationTime')=='UNDEF'"><b>Weersvoorspelling van --/--/----</b></td>
	</tr>
	<tr colspan="9">
	 <td height="10"></td>
	</tr>
	<tr>
	  <td rowspan="2" colspan="3" ng-if="itemValue('Condition')!='UNDEF'"><img id="weather-icon" src="{{itemValue('WeatherInformation_Current_WeatherIconURL')}}"/></td>
    <td rowspan="2" colspan="3" ng-if="itemValue('Condition')=='UNDEF'"><img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/></td>
		<td colspan="3" id="weather-temp"  align="center" ng-if="itemValue('Temperature')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temperature')}}<font id="weather-temp-sign">°C</font></td>
		<td colspan="3" id="weather-temp"  align="center" ng-if="itemValue('Temperature')=='UNDEF'">--</td>
	</tr>
	<tr>
		<td>
			<table id="weather-table-details">
				<tr>
					<td align="left">Luchtvochtigheid:</td>
				</tr>
				<tr>
					<td align="left">Luchtdruk:</td>
				</tr>
			</table>
		</td>
		<td>
			<table id="weather-table-details">
				<tr>
					<td align="right" ng-if="itemValue('Humidity')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Humidity')}} %</td>
					<td align="right" ng-if="itemValue('Humidity')=='UNDEF'">-- %</td>
				</tr>
				<tr>
					<td align="right" ng-if="itemValue('Pressure')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Pressure')}} hPa</td>
					<td align="right" ng-if="itemValue('Pressure')=='UNDEF'">-- hPa</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr colspan="9">
	 <td height="20"></td>
	</tr>
	<tr>
		<td/>
		<td>Vandaag</td>
    <td>Morgen</td>
		<td ng-if="itemValue('ObservationTime3')!='UNDEF'">{{daysnames[(itemValue('ObservationTime2') | date:'EEEE')]}}</td>
		<td ng-if="itemValue('ObservationTime2')=='UNDEF'">--</td>
		<td ng-if="itemValue('ObservationTime3')!='UNDEF'">{{daysnames[(itemValue('ObservationTime3') | date:'EEEE')]}}</td>
		<td ng-if="itemValue('ObservationTime3')=='UNDEF'">--</td>
		<td ng-if="itemValue('ObservationTime4')!='UNDEF'">{{daysnames[(itemValue('ObservationTime4') | date:'EEEE')]}}</td>
		<td ng-if="itemValue('ObservationTime4')=='UNDEF'">--</td>
		<td ng-if="itemValue('ObservationTime5')!='UNDEF'">{{daysnames[(itemValue('ObservationTime5') | date:'EEEE')]}}</td>
		<td ng-if="itemValue('ObservationTime5')=='UNDEF'">--</td>
		<td ng-if="itemValue('ObservationTime6')!='UNDEF'">{{daysnames[(itemValue('ObservationTime6') | date:'EEEE')]}}</td>
		<td ng-if="itemValue('ObservationTime6')=='UNDEF'">--</td>
		<td ng-if="itemValue('ObservationTime7')!='UNDEF'">{{daysnames[(itemValue('ObservationTime7') | date:'EEEE')]}}</td>
		<td ng-if="itemValue('ObservationTime7')=='UNDEF'">--</td>
	</tr>
	<tr>
		<td/>
		<td ng-if="itemValue('Condition0')!='UNDEF'">
			<img id="weather-icon" src="{{itemValue('WeatherInformation_ForecastToday_WeatherIconURL')}}"/>
		</td>
		<td ng-if="itemValue('Condition0')=='UNDEF'">
			<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/>
		</td>
		<td ng-if="itemValue('Condition1')!='UNDEF'">
			<img id="weather-icon" src="{{itemValue('WeatherInformation_ForecastTomorrow_WeatherIconURL')}}"/>
		</td>
		<td ng-if="itemValue('Condition1')=='UNDEF'">
			<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/>
		</td>
		<td ng-if="itemValue('Condition2')!='UNDEF'">
			<img id="weather-icon" src="{{itemValue('WeatherInformation_ForecastDay2_WeatherIconURL')}}"/>
		</td>
		<td ng-if="itemValue('Condition2')=='UNDEF'">
			<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/>
		</td>
		<td ng-if="itemValue('Condition3')!='UNDEF'">
			<img id="weather-icon" src="{{itemValue('WeatherInformation_ForecastDay3_WeatherIconURL')}}"/>
		</td>
		<td ng-if="itemValue('Condition3')=='UNDEF'">
			<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/>
		</td>
		<td ng-if="itemValue('Condition4')!='UNDEF'">
			<img id="weather-icon" src="{{itemValue('WeatherInformation_ForecastDay4_WeatherIconURL')}}"/>
		</td>
		<td ng-if="itemValue('Condition4')=='UNDEF'">
			<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/>
		</td>
		<td ng-if="itemValue('Condition5')!='UNDEF'">
			<img id="weather-icon" src="{{itemValue('WeatherInformation_ForecastDay5_WeatherIconURL')}}"/>
		</td>
		<td ng-if="itemValue('Condition5')=='UNDEF'">
			<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/>
		</td>
		<td ng-if="itemValue('Condition6')!='UNDEF'">
			<img id="weather-icon" src="{{itemValue('WeatherInformation_ForecastDay6_WeatherIconURL')}}"/>
		</td>
		<td ng-if="itemValue('Condition6')=='UNDEF'">
			<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/>
		</td>
		<td ng-if="itemValue('Condition7')!='UNDEF'">
			<img id="weather-icon" src="{{itemValue('WeatherInformation_ForecastDay7_WeatherIconURL')}}"/>
		</td>
		<td ng-if="itemValue('Condition7')=='UNDEF'">
			<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/3200.png"/>
		</td>
	</tr>
	<tr>
		<td class="col-xs-4" style="color:red">Max</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max0')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Max0')}} °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max0')=='UNDEF'">-- °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max1')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Max1')}} °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max1')=='UNDEF'">-- °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max2')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Max2')}} °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max2')=='UNDEF'">-- °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max3')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Max3')}} °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max3')=='UNDEF'">-- °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max4')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Max4')}} °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max4')=='UNDEF'">-- °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max5')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Max5')}} °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max5')=='UNDEF'">-- °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max6')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Max6')}} °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max6')=='UNDEF'">-- °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max7')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Max7')}} °C</td>
		<td class="col-xs-4" style="color:red" ng-if="itemValue('Temp_Max7')=='UNDEF'">-- °C</td>
	</tr>
	<tr>
		<td class="col-xs-4" style="color:#0db9f0">Min</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min0')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Min0')}} °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min0')=='UNDEF'">-- °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min1')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Min1')}} °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min1')=='UNDEF'">-- °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min2')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Min2')}} °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min2')=='UNDEF'">-- °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min3')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Min3')}} °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min3')=='UNDEF'">-- °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min4')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Min4')}} °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min4')=='UNDEF'">-- °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min5')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Min5')}} °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min5')=='UNDEF'">-- °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min6')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Min6')}} °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min6')=='UNDEF'">-- °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min7')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Temp_Min7')}} °C</td>
		<td class="col-xs-4" style="color:#0db9f0" ng-if="itemValue('Temp_Min7')=='UNDEF'">-- °C</td>
	</tr>
	<tr>
		<td class="col-xs-4">Neerslag</td>
		<td class="col-xs-4" ng-if="itemValue('Precip_Prob0')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Precip_Prob0')}} %</td>
		<td class="col-xs-4" ng-if="itemValue('Precip_Prob0')=='UNDEF'">-- %</td>
		<td class="col-xs-4" ng-if="itemValue('Precip_Prob1')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Precip_Prob1')}} %</td>
		<td class="col-xs-4" ng-if="itemValue('Precip_Prob1')=='UNDEF'">-- %</td>
		<td class="col-xs-4" ng-if="itemValue('Precip_Prob2')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Precip_Prob2')}} %</td>
		<td class="col-xs-4" ng-if="itemValue('Precip_Prob2')=='UNDEF'">-- %</td>
		<td class="col-xs-4" ng-if="itemValue('Precip_Prob3')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Precip_Prob3')}} %</td>
		<td class="col-xs-4" ng-if="itemValue('Precip_Prob3')=='UNDEF'">-- %</td>
		<td class="col-xs-4" ng-if="itemValue('Precip_Prob4')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Precip_Prob4')}} %</td>
		<td class="col-xs-4" ng-if="itemValue('Precip_Prob4')=='UNDEF'">-- %</td>
		<td class="col-xs-4" ng-if="itemValue('Precip_Prob5')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Precip_Prob5')}} %</td>
		<td class="col-xs-4" ng-if="itemValue('Precip_Prob5')=='UNDEF'">-- %</td>
		<td class="col-xs-4" ng-if="itemValue('Precip_Prob6')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Precip_Prob6')}} %</td>
		<td class="col-xs-4" ng-if="itemValue('Precip_Prob6')=='UNDEF'">-- %</td>
		<td class="col-xs-4" ng-if="itemValue('Precip_Prob7')!='UNDEF'">{{'%.0f' | sprintf:itemValue('Precip_Prob7')}} %</td>
		<td class="col-xs-4" ng-if="itemValue('Precip_Prob7')=='UNDEF'">-- %</td>
	</tr>
	<tr>
		<td class="col-xs-4"></td>
		<td class="col-xs-4" ng-if="itemValue('RainFallMm0')!='UNDEF'">{{'%.0f' | sprintf:itemValue('RainFallMm0')}} mm</td>
		<td class="col-xs-4" ng-if="itemValue('RainFallMm0')=='UNDEF'">-- mm</td>
		<td class="col-xs-4" ng-if="itemValue('RainFallMm1')!='UNDEF'">{{'%.0f' | sprintf:itemValue('RainFallMm1')}} mm</td>
		<td class="col-xs-4" ng-if="itemValue('RainFallMm1')=='UNDEF'">-- mm</td>
		<td class="col-xs-4" ng-if="itemValue('RainFallMm2')!='UNDEF'">{{'%.0f' | sprintf:itemValue('RainFallMm2')}} mm</td>
		<td class="col-xs-4" ng-if="itemValue('RainFallMm2')=='UNDEF'">-- mm</td>
		<td class="col-xs-4" ng-if="itemValue('RainFallMm3')!='UNDEF'">{{'%.0f' | sprintf:itemValue('RainFallMm3')}} mm</td>
		<td class="col-xs-4" ng-if="itemValue('RainFallMm3')=='UNDEF'">-- mm</td>
		<td class="col-xs-4" ng-if="itemValue('RainFallMm4')!='UNDEF'">{{'%.0f' | sprintf:itemValue('RainFallMm4')}} mm</td>
		<td class="col-xs-4" ng-if="itemValue('RainFallMm4')=='UNDEF'">-- mm</td>
		<td class="col-xs-4" ng-if="itemValue('RainFallMm5')!='UNDEF'">{{'%.0f' | sprintf:itemValue('RainFallMm5')}} mm</td>
		<td class="col-xs-4" ng-if="itemValue('RainFallMm5')=='UNDEF'">-- mm</td>
		<td class="col-xs-4" ng-if="itemValue('RainFallMm6')!='UNDEF'">{{'%.0f' | sprintf:itemValue('RainFallMm6')}} mm</td>
		<td class="col-xs-4" ng-if="itemValue('RainFallMm6')=='UNDEF'">-- mm</td>
		<td class="col-xs-4" ng-if="itemValue('RainFallMm7')!='UNDEF'">{{'%.0f' | sprintf:itemValue('RainFallMm7')}} mm</td>
		<td class="col-xs-4" ng-if="itemValue('RainFallMm7')=='UNDEF'">-- mm</td>
	</tr>
</table>
1 Like

Did anyone adapt this to Forecast.io? I think the icons are wrong

Not sure if I missed it but did you ever paste the code for it? Looks pretty nice

Thank you for this nice widget!

Would it be possible to change the format of the observation time string? I would like to display it in a 24h format. I tried to replace the ‘short’ declaration but I cant find anything suitable. I hoped that my locale could have had some influence but it was sadly not that easy. I defined my locale in the PaperUI settings, but perhaps with the wrong locale code …

<td colspan="4" ng-if="itemValue('ObservationTime0')!='UNDEF'">My Weather {{itemValue('ObservationTime0') | date:'short'}}</td>

Also, does anyone know how to change pressure units to hPa? Now I got some kind of strange unit which I can’t understand. I use Yahoo and the atmosphere/pressure value.

Thanks!

For the date, you can use date formatting to get what you want. For example:

{{itemValue('Weather_ObservationTime0') | date:'dd/MM/yy HH:mm:ss'}}

That will give you the day/month/year in 2 digit format, with 24h hour, then minute and second. If you want all the letters available, look at the source code here.

For the pressure, if you use metric measurements, you should get temperature in Celsius, and pressure as millibars (hPa). If you have already selected metric, and are still getting values you don’t expect, then yahoo is for some reason giving you the numbers in psi instead of hPa. You can convert the numbers youself, just by multiplying by 68.9476.

e.g:

{{'%.2f' | sprintf:itemValue('Weather_Pressure) * 68.9476}}

(Note: If those numbers still don’t make sense, it could be that yahoo is reporting in inches of mercury, in which case you can convert by multiplying by 33.8638816… it really shouldn’t though, as the docs on the Yahoo site say it will report as either hPa or psi)

1 Like

Thank you! Now I’m almost at a stage where I will mount my tablet on the wall.

I guess I’m getting the inch pressure value although when I scale it to hPa the resulting value is still not matching whats presented at the Yahoo site. There is something else at play here. Perhaps I’ll use Wunderground for this value instead. I initially used Wunderground but as they use a different condition ID structure compared to Yahoo I found it advantageous to use Yahoo instead.

I successfully extracted your digital clock widget code from another thread and I’m quite happy with it. I added both weekday and month in “full text”. Could you please give me some hints in how I can translate weekdays and month? I guess its possible doing it in a similar way as described here regarding “daynames” but in this clock widget case we are not actually referring to an item.

<style>
#clock-table {
   border-spacing: 0px;
   border: 0px;
   padding: 0px;
   width: 100%;
   height: 100%;
}

#clock-table-date {
   padding: 0px;
   text-align: center;
   height: 10px;
   line-height: .8em;
}

#clock-table-time {
   padding: 0px;
   color: #FFAA00;
   text-align: center;
   line-height: 1em;
}
</style>
// Could this be a good start? :) 
<div ng-init="monthnames={'Ja ##nuary': 'januari', 'February': 'februari', 'March': 'mars', 'April': 'april', 'May': 'maj', 'June': 'juni', 'July': 'juli', 'August': 'augusti', 'September': 'september', 'October': 'oktober', 'November': 'november', 'December': 'december'}">
<div ng-init="clockmodel1={'mode':'digital','font_size':12,'digital_format':'EEEE - d MMMM'}"></div>
<div ng-init="clockmodel2={'mode':'digital','font_size':32,'digital_format':'H:mm:ss'}"></div>

<table id="clock-table">
  <tr id="clock-table-date"><td><widget-clock ng-model="clockmodel1" /></td></tr>
  <tr id="clock-table-time"><td><widget-clock ng-model="clockmodel2" /></td></tr>
</table>

Perhaps I’ll show off my creation in a suitable thread soon. :slight_smile:

Hello there,
Unfortunately, I was never really happy with how much I could customize the clock widget. I got it working enough for me, but what I really wanted was something that could just return me a date value that I could then format… I never figured that out… maybe someone else can say if that is possible.

As a work around, you could use the weather items you have for the day and month. The ObservationTime0 should have the time of the most recent observation, which should be close to current time. Maybe something like this:

<div ng-init="daysnames={'Sunday': 'sunday-tr', 'Monday': 'monday-tr', ...}">
<div ng-init="monthnames={'1': 'januari', '2': 'februari', '3': 'mars', ...}" />

<div ng-init="clockmodel2={'mode':'digital','font_size':32,'digital_format':'h:mm a'}"></div>

<table id="clock-table">
  <tr id="clock-table-date"><td class="date-row">{{daysnames[(itemValue('Weather_ObservationTime0') | date:'EEEE')]}} - {{itemValue('Weather_ObservationTime0') | date:'d'}} {{monthnames[(itemValue('Weather_ObservationTime0') | date:'M')]}}</td></tr>
  <tr id="clock-table-time"><td><widget-clock ng-model="clockmodel2" /></td></tr>
</table>

You can add a section to the style for the new row:

.date-row {
  font-size: 16px;
  padding: 10px;
  padding-bottom: 30px;
}

That would give you a string you can format that should be what you want. The only downside is that the ObservationTime0 item doesn’t update every second… so for a few minutes after midnight it might be off, but since you aren’t using the minute or second values, just the day and month, it would otherwise be correct.

Sorry I can’t be more help, but that’s the only idea I can come up with.

Cheers

That’s an excellent approach, perhaps not the most beautiful but it works! I could have thought of that myself I guess but I figured that there must be a nicer solution, I’m still confident there is.

I fetch new weather data each 20 minutes and showing the wrong day/month 20 minutes passed midnight was not acceptable from my point of view. So I created a dedicated DateTime item which is updated by cron at midnight, problem solved.

Thank you!