Template Example: Weather Binding

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!

why mine like this?

None of your items are being populated with the data from the weather binding. For example, next to “My Weather” you should have the date of the last update, but this is shown as NULL (in upper case).

All the other items are showing the errors as these are formatted in some way by the sprintf function. However as these are also NULL the function fails and the statement is shown. To address this I posted a version of the code above (see https://community.openhab.org/t/template-example-weather-binding/15869/48?u=andymb). This handles any NULL values and replaces them with a double hyphen --.

While this will tidy up the format, your real issue would appear to be that you need to check the configuration of the Weather binding and make sure you have this configured correctly. Once you see in the logs that this is successfully getting the data you should be good.

Regards, Andy

1 Like

Ive modified the great work of @AndyMB with an animated climacon based version which is pulling data from BOM XML files thanks to @davoque (with a few more tweaks from me) - its pretty customised, specific to BOM and has quite a few moving parts but if any Aussies want me to share let me know.

2 Likes

Thats a nice display you have there, I would be interested in combining it into my OH2, and feed a switch to turn of the retic, or reduce the percentage time it is on if rain is likely. Do you think it possibl with your code if I tweak it a bit?

Cheers

Chris in miserable (weather) Perth.

It is driven off oh items so if you don’t need the pretty display you should be able to do what you want based on the excellent discussion in this forum

Hello

I am new to OH having switched from a different home automation system. I want to 1st thank all of the contributors to this project for all their efforts!

I am having a problem with “ng-if”. Not sure if this is the correct location to post this but it does not appear to work. Below is a snippet of the widget.

My code:

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

<div id="weather-location-name" >
		<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>
</div>

Can someone shed some light on this? I am new to AngularJS so it could be obvious.

Thanks

@sbcarp Hi Jim,

I think there is a basic problem with the HTML, but can’t be 100% with only the section you have provided. You have specified two table columns, without defining the table and its rows, looks like you have used the <div> tag instead.

In the original:

<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>

etc....

If you want to use <div> the you should be able to change the <td> to another <div> etc.

The function of ng-if is basically to selectively display a section of HTML (defined by the boundaries of the tag) when the condition is true. In your case this logic has failed as the HTML itself has problems, so the bowser has defaulted to render both bits of text.

I do sympathise, at times it took hours to spot a single character error } and ) substitution being my favourite typo of choice.

Let me know if this helps or post your full HTML if you are still stuck.

Regards, Andy

Kiwi here, but would be interested to see your code for this. Looks great with the animated icons.

Hey @Andrew_Pawelski that looks awesome. Would you mind sharing it? Looking at the other topic it does appear to have a few bits to get it working.

Have you found a way to simplify all the bits required to make this work, or have just implemented all of them?

Thanks,

Theo

@AndyMB Hi Andy

You were right. Not sure why it ended up as a table cell. Changed that and worked perfect. Thanks!

@pahansen Hi Paul

Below is my code. I am getting the icons from Wunderground through the OH2 channel.
Let me know if you need anything more.

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

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

<table id="weather-table">
	<tr>
		<td rowspan="3"><img id="weather-icon" src="{{itemValue('WeatherInformation_Current_WeatherIconURL')}}"/></td>
		<td id="weather-temp" >{{'%.1f' | sprintf:itemValue('Weather_TemperatureF')}}</td>
		<td id="weather-temp-sign">°F</td>
	</tr>
	<tr>
		<td colspan="2">
			<table id="weather-table-details">
				<tr>
					<td>Humidity:</td>
					<td>{{itemValue('WeatherInformation_Current_RelativeHumidity')}} %</td>
				</tr>
				<tr>
					<td>Pressure:</td>
					<td>{{'%.0f' | sprintf:itemValue('Pressure_Inches')}} in</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>
		<td>{{itemValue('ObservationTime3') | date:'EEEE'}}</td>
	</tr>
	<tr>
    <td/>
		<td>
			<img src="{{itemValue('WeatherInformation_ForecastToday_WeatherIconURL')}}"/>
			<p>{{itemValue('WeatherInformation_ForecastToday_ForecastConditions')}}</p>
		</td>
		<td>
			<img src="{{itemValue('WeatherInformation_ForecastTomorrow_WeatherIconURL')}}"/>
			<p>{{itemValue('WeatherInformation_ForecastTomorrow_ForecastConditions')}}</p>
		</td>
		<td>
			<img src="{{itemValue('WeatherInformation_ForecastDay2_WeatherIconURL')}}"/>
			<p>{{itemValue('WeatherInformation_ForecastDay2_ForecastConditions')}}</p>
		</td>
		<td>
			<img src="{{itemValue('WeatherInformation_ForecastDay3_WeatherIconURL')}}"/>
			<p>{{itemValue('WeatherInformation_ForecastDay3_ForecastConditions')}}</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')}} °F</td>
		<td class="col-xs-4" style="color:red">{{'%.0f' | sprintf:itemValue('Temp_Max1')}} °F</td>
		<td class="col-xs-4" style="color:red">{{'%.0f' | sprintf:itemValue('Temp_Max2')}} °F</td>
		<td class="col-xs-4" style="color:red">{{'%.0f' | sprintf:itemValue('Temp_Max3')}} °F</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')}} °F</td>
		<td class="col-xs-4" style="color:#0db9f0">{{'%.0f' | sprintf:itemValue('Temp_Min1')}} °F</td>
		<td class="col-xs-4" style="color:#0db9f0">{{'%.0f' | sprintf:itemValue('Temp_Min2')}} °F</td>
		<td class="col-xs-4" style="color:#0db9f0">{{'%.0f' | sprintf:itemValue('Temp_Min3')}} °F</td>
	</tr>
</table>

Hello guys.

I have a problem with the english named images and my openWeatherMapText. The problem is, that i get the condition in german language (whats good for an austrian), but the filenames dont match of course.
The condition-strings within classic ui:

So when i copy an png named “klarer-himmel.png” to the iconset folder i use (colorful), the forecast looks like this:

Does anybody know all german names for the image files (or an download-link for them)? If its possible, i dont want to use the solution with the IDs instead of the text (but at the end it stays a solution for my “problem”, so thx for that!).

It also would be great to be able to change the forecast-day to german language (Sunday should be Sonntag).

And the third nice thing would be to change the Date from this format m/d/y to this d/m/y. So not like this is:

Last but not least:
Thank you all very much for this great examples…the core allready works fine so far and the final solition is in sight!

Found a solution for my first problem within this topic:
I use now commonId for the images and still text for the displayed strings:

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

String   ConditionText0        "Condition [%s]"    	        {weather="locationId=owm, forecast=0, type=condition, property=text"}
String   ConditionText1        "Condition [%s]"   	        {weather="locationId=owm, forecast=1, type=condition, property=text"}
String   ConditionText2        "Condition [%s]"		{weather="locationId=owm, forecast=2, type=condition, property=text"}

and in HTML:

<td>
	<img src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition0').replace(' ','-') | lowercase }}.png"/>
	<p>{{itemValue('ConditionText0')}}</p>
</td>

But maybe with the other (small) problems somebody can help?
Thank you!

1 Like

Hi @asdfasf_adfas,

The answers to your other queries are also already in this post :wink:

See post Template Example: Weather Binding - #56 by AndyMB. You may also want to check out some of the other changes suggested in some of the following posts.

To change the date format, the best source is:

For UK date format (day / month / year) you wold change {{itemValue('ObservationTime0') | date:'short'}} to {{itemValue('ObservationTime0') | date:'d/M/yyyy'}}

Be aware that as you cannot currently change the language/localisation of the HABpanel code, all the dates will come out in US English formats. So if you want to use the full month in the date, you will need to use the same “translation” trick we used to change the day names for that. Again someone has an example of that above.

Regards, Andrew

Hello Andy,

thanks for that work, i like your template very much! I hope you dont mind taking your template and adapt it to a responsive-friendly widget by me.

Wetter-Widget.widget.json (2.6 KB)

Hi Andrew, it would be great if you could share this as I was thinking of creating something similar but have never got around to it.

Hi All,

What do I need to add to the “.replace” coding below in order to fix the fact I have two spaces in a condition type ( btw I’ve changed the original icon “scattered showers” to be “chance-of-rain”)

Returned Condition Type:
Chance of Rain

Code Snippet:

<tr>
		<td rowspan="2"><img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/{{itemValue(config.Condition0).replace(' ','-') | lowercase }}.png"/></td>
	</tr>

Thanks

Hi @Nathan_Wilcox,

I’m not sure I really understand your problem, but assuming you get something like “Chance[space][space]of[space]rain” then by far the easiest way would be to rename the associated icon file to have a double hyphen where the double space occurs i.e. chance–of-rain.png.

I guess you could try the line of code:

<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition_ID1').replace('  ',' ').replace(' ','-') | lowercase }}.png"/>

where the first .replace changes two spaces to one, but I have no idea if this will work and no quick way to test this for you. If you do try the line of code and it works, let the community know as it may help others.

Sorry if this is not the problem that you are trying to solve, if you need to can you provide the source you are getting and the output you need as this may make it a bit clearer to me.

Andy