Template Example: Weather Binding

template
Tags: #<Tag:0x00007fd3143c2d48>

(Peter) #166

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


(E. Gerland) #167

Hi @narf27,

I just extract it using a API request to wunderground directly.
All information can be found in ma post above (post 150).


(Peter) #168

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…
:confused::confused::confused:


(E. Gerland) #169

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

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

(Fastcar550) #170

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


(Paul Hansen) #171

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?


(Fastcar550) #172

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.


(AH) #173

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?
Capture
For anyone else looking at it, you do need to change the server in the widget (and temperature to C if you use metric)


(Fastcar550) #174

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.


(AH) #175

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

FYI - check installation of the widget. I just imported it from the open hab settings.


(Fastcar550) #176

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.


(AH) #177

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


(karl) #179

Hi,
your weather widget looks great!
Where can i get the latest version?


(Fastcar550) #180

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)


(Bogumil J.) #181

Hi. ng-FitText.js is required. Can you share it?


(Fastcar550) #182

(Bogumil J.) #183

Hi it works really nice, however icons seems to not be displayed correctly in relation to conditions given by wunderground


(Nicolas) #184

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>

(Ian) #185

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.


(Nicolas) #186

Hi, guys,
can someone tell me how to query the attribute “Icon” of forecast. io as an item?
I want to use this answer to use the correct icon.

Look here