Which weather data provider do you choose? ForecastIo or Openweathermap?
i would like to use these items as well (white flat).
how do you extract the english name of the weather condition? is there a distinction between night/day?
i tried with “condition” (wunderground), but there’s only “Mostly Cloudy” - and now i’m seeing a sun icon in the middle of the night/evening…
cheers
Hi @narf27,
I just extract it using a API request to wunderground directly.
All information can be found in ma post above (post 150).
hmm… most probably i just don’t get the JSON thing.
i don’t even get WHAT should be transformed…
i have an (JSON) url and then there’s items. but i don’t see where there’s a connection between url and items…
Alright, let’s see…
I have some items:
Weather_Curr_Icon
Weather_Icon_0
...
Which are set by my rule. You just need to set your wunderground API Key and the location for the weather forecast.
I guess with this it should be manageable 
rule "Retrieve weather icon names"
when
Time cron "10 0/30 * * * ?" or //every 30 Minutes at Second 10
Item Weather_Current changed or
Item Weather_Nighttime changed
then
Thread::sleep(2000)
val String json = executeCommandLine("curl -s http://api.wunderground.com/api/YOUR_API_KEY_HERE/conditions/forecast10day/lang:DL/q/Germany/YOUR_PREFERRED_LOCATION_HERE.json", 5000)
var String current_tmp = ""
var String icon_0_tmp = ""
var String icon_1_tmp = ""
var String icon_2_tmp = ""
var String icon_3_tmp = ""
var String icon_4_tmp = ""
var String icon_5_tmp = ""
var String icon_6_tmp = ""
// check day or night to choose the right icons for now and forecast 0
if(Weather_Nighttime.state == ON) {
icon_0_tmp = transform("JSONPATH", "$.forecast.txt_forecast.forecastday.[1]icon", json)
logInfo("weather.rules", "Weather Icon_0 updated (Night).")
}
if(Weather_Nighttime.state == OFF) {
icon_0_tmp = transform("JSONPATH", "$.forecast.txt_forecast.forecastday.[0]icon", json)
logInfo("weather.rules", "Weather Icon_0 updated (Day).")
}
current_tmp = transform("JSONPATH", "$.current_observation.icon", json)
// Forecast icon 0 is checked for day / night mode (see above)
icon_1_tmp = transform("JSONPATH", "$.forecast.txt_forecast.forecastday.[2]icon", json)
icon_2_tmp = transform("JSONPATH", "$.forecast.txt_forecast.forecastday.[4]icon", json)
icon_3_tmp = transform("JSONPATH", "$.forecast.txt_forecast.forecastday.[6]icon", json)
icon_4_tmp = transform("JSONPATH", "$.forecast.txt_forecast.forecastday.[8]icon", json)
icon_5_tmp = transform("JSONPATH", "$.forecast.txt_forecast.forecastday.[10]icon", json)
icon_6_tmp = transform("JSONPATH", "$.forecast.txt_forecast.forecastday.[12]icon", json)
Weather_Curr_Icon.postUpdate(Weather_Icon_Path.state+current_tmp+".svg")
Weather_Icon_0.postUpdate(Weather_Icon_Path.state+icon_0_tmp+".svg")
Weather_Icon_1.postUpdate(Weather_Icon_Path.state+icon_1_tmp+".svg")
Weather_Icon_2.postUpdate(Weather_Icon_Path.state+icon_2_tmp+".svg")
Weather_Icon_3.postUpdate(Weather_Icon_Path.state+icon_3_tmp+".svg")
Weather_Icon_4.postUpdate(Weather_Icon_Path.state+icon_4_tmp+".svg")
Weather_Icon_5.postUpdate(Weather_Icon_Path.state+icon_5_tmp+".svg")
Weather_Icon_6.postUpdate(Weather_Icon_Path.state+icon_6_tmp+".svg")
// sendTelegram("weather.rules", "Weather_Curr_Icon updated: " + Weather_Curr_Icon.state.toString)
endI just finished putting together a Widget. This is my first try but it works for me. The text will automatically adjust to fill the space which hopefully will spark that addition the all the widgets. Unzip and drop the files into your html folder. I use this with the WeatherUnderground binding in Openhab 2.2. When you edit the widget you will see the names of my items that are the default. Thank to everyone’s code to help put this together.
html.7z.xml (160.9 KB)
1 Like
Thanks for putting it together. Any chance you can upload an image of the widget in use so we can see what it should look like?
Yeah guess that would help. This is from my phone and it looks the same on my TV, like I said it automatically adjust to fit the container.
2 Likes
Thanks for this @jcf6288.
I’m extremely new to openhab and not a webdev but I’ve nearly got there.
Having used paperUI for the channels, I can’t see the forecastTime one, so am not getting the day?
For anyone else looking at it, you do need to change the server in the widget (and temperature to C if you use metric)
Fixed the days to just pull them directly and added the ability to select units and the site will update. If you have more suggestions I will continue to tweak it. If others would like different units just let me know.
Update: Added climacon option and fixed much of the formatting.
@jcf6288
Thanks for doing that mate. Can I just check about the dates again, think I’m being dense.
I can still see the time options in the widget settings
But I don’t have any time options in the paperui channel options for the weatherunderground thing. Did you manually add them in an *.items file? It’s looking better in that I’ve got N/A now
FYI - check installation of the widget. I just imported it from the open hab settings.
Are you using the latest revision to the widget that I posted? The channel should be listed, if you don’t see it in paperui then you may have to select “show more” to see it. Plus the latest widget allows the end user to change the units.
The first version compared the names so you would manually have to set that, I changed it to format the item to just the first 3 letters of the day. Can you try the latest and let me know if it works.
Ahh, thank you - it was the ‘show more’ on the item, hadn’t noticed that.
Very happy with it! thanks for bearing with me and all the hard work
Just to note that I think there’s a slight error in the days, but it’s easy enough to fix
e.g.
Hi,
your weather widget looks great!
Where can i get the latest version?
Just finished it up, when you add it you have to ensure you cycle whether you want climacons or not to get the regular icons or climicons to show up. If you squeeze it height wise it won’t auto adjust the table to fit entirely. Maybe I could get a few pointers on how to get the forecast table to auto hide if it won’t fit. I will clean it up and add notes so people can follow what I did and maybe create some of their own to share. This is how I built this one was gathering elements from others.Weather&Forecast-autotext-variables.widget.json (21.5 KB)
Hi. ng-FitText.js is required. Can you share it?
1 Like
Hi it works really nice, however icons seems to not be displayed correctly in relation to conditions given by wunderground
Hi,
can someone help me? I get no data. And I guess the code for the Layout is not correct
My weather.cfg
location.home.woeid=12836187
location.home.provider=Yahoo
location.home.language=de
location.home.updateInterval=10
My weather.items
Number Temperature "Temperature [%.2f °C]" {weather="locationId=home, type=temperature, property=current"}
Number Humidity "Humidity [%d %%]" {weather="locationId=home, type=atmosphere, property=humidity"}
Number Pressure "Pressure [%.2f mb]" {weather="locationId=home, type=atmosphere, property=pressure"}
DateTime ObservationTime0 "Observation time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]" {weather="locationId=home, forecast=0, type=condition, property=observationTime"}
DateTime ObservationTime1 "Observation time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]" {weather="locationId=home, forecast=1, type=condition, property=observationTime"}
DateTime ObservationTime2 "Observation time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]" {weather="locationId=home, forecast=2, type=condition, property=observationTime"}
Number Temp_Min0 "Temperature min [%.2f °C]" {weather="locationId=home, forecast=0, type=temperature, property=min"}
Number Temp_Max0 "Temperature max [%.2f °C]" {weather="locationId=home, forecast=0, type=temperature, property=max"}
Number Temp_Min1 "Temperature min [%.2f °C]" {weather="locationId=home, forecast=1, type=temperature, property=min"}
Number Temp_Max1 "Temperature max [%.2f °C]" {weather="locationId=home, forecast=1, type=temperature, property=max"}
Number Temp_Min2 "Temperature min [%.2f °C]" {weather="locationId=home, forecast=2, type=temperature, property=min"}
Number Temp_Max2 "Temperature max [%.2f °C]" {weather="locationId=home, forecast=2, type=temperature, property=max"}
String Condition0 "Condition [%s]" {weather="locationId=home, forecast=0, type=condition, property=text"}
String Condition1 "Condition [%s]" {weather="locationId=home, forecast=1, type=condition, property=text"}
String Condition2 "Condition [%s]" {weather="locationId=home, forecast=2, type=condition, property=text"}
<div ng-init="ServerPath='http://192.168.178.199:8080/static'; IconSet='flat_white'">
<link rel="stylesheet" type="text/css" href="{{ServerPath}}/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>{{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>
Just asking the obvious, did you install the weather binding in the addons section? I also found I had better success using the http binding and weatherunderground rather than yahoo.
This template is very nice. It inspired me to learn how to create my own template, there were a few things I wanted changed so I learn’t a lot just from modifying your template. This also taught me a lot about the items, and how OpenHab works since I am new to this, it was a huge learning curve, well worth the effort
You did a great job.
One thing I wanted was a clock on the page which I have now done.