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!
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
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.
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!
Hi @asdfasf_adfas,
The answers to your other queries are also already in this post 
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
Hi Andy,
The problem I am having is that my Forecast condition of tomorrow is telling me “Chance of Rain” When the .replace is kicking in it is changing the condition to show the following:
And when opening the image in a new tab:
HTTP ERROR: 404
Problem accessing /static/images/colorful/chance-of%20rain.png. Reason:
Not Found3
Therefore it is not finding an icon called
chance-of%20rain.png
If this now makes sense?
Thanks
Hey
I’m new to openHab and Linux as a Whole.
I’ve managed to write the HTML files to the custom Widget Code Section,But my Putting the directory on the server, I’m not sure how that Goes
I’m using Ubuntu: 16.04
And the Server is hosted on the same PC
Could you please help me on how to Upload the Pics on the Server…
Thanks