Template Example: Weather Binding

Apps & Services HABPanel
48

Try this… I have the same problem with occasional UNDEF (undefined items). The reason they do not render correctly on screen (or just display UNDEF) is the formatting functions that error when they do not receive a number or date, as input that they expect.

Note: this code used the numeric Condition_IDn icon names discussed above. If you want to use the icons as originally supplied replace these with Condition0 etc.

Sorry for being a bit slow to respond… been busy trying to take over the authoring of the TiVo binding. Another learning curve :wink:

Hope this helps… Andy

<div ng-init="ServerPath='../static'; IconSet='flat_colorful'">
<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'">{{itemValue('ObservationTime1') | date:'EEEE'}}</td>
		<td ng-if="itemValue('ObservationTime1')=='UNDEF'">--</td>
		<td ng-if="itemValue('ObservationTime2')!='UNDEF'">{{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>

LOL and while I was writing this, my own config went wrong… so here is a pic of what you get when an item is Undefined (UNDEF) :slight_smile: