Weather Underground widget with forecast

widgetgallery
weatherunderground
Tags: #<Tag:0x00007f0147551a78> #<Tag:0x00007f0147551910>

(Bastiaan van Haastrecht) #1

Hello all,

I would like to make my contribution to the Openhab community. I have created an Weather widget which uses the OH2 Weather Underground binding. Please note that you need the Weather Underground binding as of build version #1212, otherwise the iconKey channel wont work. The binding is packed in the latest snapshot version from 12’th of februari. The widget is multi-language, it follows the language settings made in the Thing together with the localisation settings of Openhab.

Screenshot (Dutch language)
image

The widget and images: weather-underground.widget.json

Download the icons: weather-underground-icons

Steps

  • Install the Weather Underground binding via PaperUI.
  • Configure the Thing: Local Weather (You can set your preferred language).
  • If you havent done already, change your locality of Openhab in Paperui / Configuration / System / Regional Settings and restart Openhab and clear your browsers cache. This way the Widget will follow the locallity with transforming the dates.
  • Import the downloaded widget to your HABpanel.
  • The ‘weather-underground-icons’ folder should be stored in your ‘/conf/html/’ folder.
  • Set the ‘ServerPath’ variable in the widget to ‘/static/weather-underground-icons-master/dist’ (default).
  • Place the three .png images in your ‘/conf/html/weather-underground-icons/dist/images’ folder.

The complete structure would look like this:

  • /conf/html
    • /weather-underground-icons
      • /css
      • /js
      • /dist
        • wu-icons-style.css
        • wu-icons-style.min.css
        • /icons <= this is where the different icon theme’s are stored
        • /images
          • feel.png
          • humidity.png
          • wind.png

Your ServerPath variable in the widget would look like this:

<div ng-init="ServerPath='/static/weather-underground-icons-master/dist'; IconSet='white'">

You can set the IconSet to one of the following options:

  • black
  • solid-black
  • solid-white
  • white

Add and configure these items:

// Weather Underground binding
Number		Weather_Temperature			"Temperature [%.2f °C]"			{channel="weatherunderground:weather:local:current#temperature"}
Number		Weather_Humidity			"Humidity [%d %%]"				{channel="weatherunderground:weather:local:current#relativeHumidity"}
Number		Weather_Wind_Speed			"Windspeed [%.2f km/h]"			{channel="weatherunderground:weather:local:current#windSpeed"}
String		Weather_Station_Name		"Station Name [%s]"				{channel="weatherunderground:weather:local:current#stationId"}
Number		Weather_Temperature_Feel	"Temperature feel [%.2f °C]"	{channel="weatherunderground:weather:local:current#feelingTemperature"}
DateTime	Weather_ObservationTime		"Observation time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]"		{channel="weatherunderground:weather:local:current#observationTime"}
String		Weather_Condition			"Condition [%s]"				{channel="weatherunderground:weather:local:current#conditions"}
String		Weather_ConditionId			"ConditionId [%s]"				{channel="weatherunderground:weather:local:current#iconKey"}

Number		Weather_Temp_Min0		"Temperature min [%.2f °C]"		{channel="weatherunderground:weather:local:forecastToday#minTemperature"}
Number		Weather_Temp_Max0		"Temperature max [%.2f °C]"		{channel="weatherunderground:weather:local:forecastToday#maxTemperature"}
Number		Weather_Temp_Min1		"Temperature min [%.2f °C]"		{channel="weatherunderground:weather:local:forecastTomorrow#minTemperature"}
Number		Weather_Temp_Max1		"Temperature max [%.2f °C]"		{channel="weatherunderground:weather:local:forecastTomorrow#maxTemperature"}
Number		Weather_Temp_Min2		"Temperature min [%.2f °C]"		{channel="weatherunderground:weather:local:forecastDay2#minTemperature"}
Number		Weather_Temp_Max2		"Temperature max [%.2f °C]"		{channel="weatherunderground:weather:local:forecastDay2#maxTemperature"}
Number		Weather_Temp_Min3		"Temperature min [%.2f °C]"		{channel="weatherunderground:weather:local:forecastDay3#minTemperature"}
Number		Weather_Temp_Max3		"Temperature max [%.2f °C]"		{channel="weatherunderground:weather:local:forecastDay3#maxTemperature"}

DateTime	Weather_Forecast_Time0		"Forecast time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]"		{channel="weatherunderground:weather:local:forecastToday#forecastTime"}
DateTime	Weather_Forecast_Time1		"Forecast time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]"		{channel="weatherunderground:weather:local:forecastTomorrow#forecastTime"}
DateTime	Weather_Forecast_Time2		"Forecast time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]"		{channel="weatherunderground:weather:local:forecastDay2#forecastTime"}
DateTime	Weather_Forecast_Time3		"Forecast time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]"		{channel="weatherunderground:weather:local:forecastDay3#forecastTime"}

String		Weather_Condition0		"Condition [%s]"		{channel="weatherunderground:weather:local:forecastToday#conditions"}
String		Weather_Condition1		"Condition [%s]"		{channel="weatherunderground:weather:local:forecastTomorrow#conditions"}
String		Weather_Condition2		"Condition [%s]"		{channel="weatherunderground:weather:local:forecastDay2#conditions"}
String		Weather_Condition3		"Condition [%s]"		{channel="weatherunderground:weather:local:forecastDay3#conditions"}

String		Weather_ConditionId0		"ConditionId [%s]"		{channel="weatherunderground:weather:local:forecastToday#iconKey"}
String		Weather_ConditionId1		"ConditionId [%s]"		{channel="weatherunderground:weather:local:forecastTomorrow#iconKey"}
String		Weather_ConditionId2		"ConditionId [%s]"		{channel="weatherunderground:weather:local:forecastDay2#iconKey"}
String		Weather_ConditionId3		"ConditionId [%s]"		{channel="weatherunderground:weather:local:forecastDay3#iconKey"}

You may change the code to your liking, please drop a post if you are using it. Any questions/requests, post them below.


Template Example: Weather Binding
Template Example: Weather Binding
[Bounty] Custom Widget for OWM
Template Example: Weather Binding
(Yannick Schaus) #2

that’s really cool @bastiaan_van_h!
widgetgallery tag added!

Edit: @bastiaan_van_h could you arrange your repository so that the .widget.json files are in the root folder? :wink:
The widget gallery integrated into HABPanel cannot import widgets hosted in a GitHub repository unless they are in the root folder :wink:
Thanks in advance!


(Bastiaan van Haastrecht) #4

Hi @ysc, I’ve created a new repository. The widget JSON is now in the root folder.


(The Squid) #5

@bastiaan_van_h

Hello, nice widget. This is my first foray into HabPanel so I apologize if this is something simple I missed.

I have installed the widget, and downloaded the icon files and set things up according to your instructions.

When I view the widget:

all of the weather data populates as expected, the images however do not load.

If I look at the string that’s calling the image:

http://10.x.x.xx:8080/static/local-weather/weather-underground-icons-master/dist/images/humidity.png 

I see the image as intended.

The three small PNG icons as well as all of the other weather icons do not load.

Any suggestions?


(Bastiaan van Haastrecht) #6

Hi @KidSquid, no worries. Nice to see people using my work :+1:

Perhaps a better explanation of the icon an image placement is required.

The ‘weather-underground-icons’ folder should be stored in your ‘/conf/html/’ folder.
The three .png images should be stored within that icons ‘/dist/images’ folder.

The complete structure would look like this:

  • /conf/html
    • weather-underground-icons
      • css
      • js
      • dist
        • wu-icons-style.css
        • wu-icons-style.min.css
        • icons <= this is where the different icon theme’s are stored
        • images
          • feel.png
          • humidity.png
          • wind.png

Your ServerPath variable in the widget would look like this:

<div ng-init="ServerPath='/static/weather-underground-icons-master/dist'; IconSet='white'">

You can set the IconSet to one of the following options:

  • black
  • solid-black
  • solid-white
  • white

The location of your ‘/conf/html’ folder depends on your Openhab installation.


(The Squid) #7

Thanks for the quick response.

That’s exactly how I am set up. I’m running on a Windows machine if that makes any difference.

Any other thoughts?

Squid


(Bastiaan van Haastrecht) #8

When you place an .html or image file in your /conf/html folder, can you view it by going to ‘http://10.x.x.xx:8080/static/file.html

If not, somethings off with your ‘/conf/html’ folder and/or webserver.


(The Squid) #9

Yes, I can see the image as mentioned above by calling the URL directly


(Bastiaan van Haastrecht) #10

I see you have ‘local-weather’ folder name in your html root, then your ServerPath should be ‘/static/local-weather/weather-underground-icons-master/dist’.


(fandy) #11

Hi,

Where do i set the ServerPath? i dont see anything editable in the widget except its name


(Dennis Von Der Bey) #12

You have to edit it in the source code of the widget.


(The Squid) #13

I followed the default server path that was in the widget as downloaded, no changes have been made.


<div ng-init="ServerPath='/static/local-weather/weather-underground-icons-master/dist'; IconSet='white'">
</div>

<link rel="stylesheet" type="text/css" href="{{ServerPath}}/wu-icons-style.min.css">
 

(Bastiaan van Haastrecht) #14

You need to adjust the ‘ServerPath’ to your situation. I have updated the widget so the path is same as described in the documentation.


(The Squid) #15

OK, I’m very confused…

If this line of code is in the widget:

<div ng-init="ServerPath='/static/local-weather/weather-underground-icons-master/dist'; IconSet='white'">
</div>

Is that not the server path the widget is using?

And am I correct in assuming that:

href="{{ServerPath}}/wu-icons-style.min.css"

is inheriting the ServerPath from the line above?


(Bastiaan van Haastrecht) #16

@KidSquid

You probably need to set it to:

<div ng-init="ServerPath='/static/weather-underground-icons/dist'; IconSet='white'">
</div>

‘/conf/html/’ = ‘/static/’ in HABpanel


(The Squid) #17

Ok, but when I placed the files on the sever I re-created your ServerPath and have a local-weather folder.

That’s why I’m confused…the physical server path equals the ServerPath set in code.

Here’s the path on the server:

Squid


(Bastiaan van Haastrecht) #18

If you say a single file in html can be browsed, is see no reason the widget won’t work. Browser cache perhaps.


(The Squid) #19

I will clear the cache again, just to be on the safe side.

Just to make sure are there any version requirements on OH or the Binding I need to make sure I’m at? Could this be an issue?

Squid


(Bastiaan van Haastrecht) #20

Yes there are version/build restrictions, look at the first post. But you wrote the .png images didn’t show as well.


(The Squid) #21

Sorry to keep going back and forth on this…

This really isn’t making sense…

From the browser:

But it won’t load through the widget!