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