Weather Underground widget with forecast

bastiaan_van_h · February 18, 2018, 9:39pm

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)

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.

ysc · February 19, 2018, 1:23am

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?
The widget gallery integrated into HABPanel cannot import widgets hosted in a GitHub repository unless they are in the root folder
Thanks in advance!

bastiaan_van_h · February 19, 2018, 7:48am

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

KidSquid · February 20, 2018, 5:55am

@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_h · February 20, 2018, 6:58am

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

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.

KidSquid · February 20, 2018, 7:01am

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_h · February 20, 2018, 7:09am

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.

KidSquid · February 20, 2018, 7:13am

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

bastiaan_van_h · February 20, 2018, 7:46am

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 · February 20, 2018, 8:51am

Hi,

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

DennisVonDerBey · February 20, 2018, 12:36pm

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

KidSquid · February 20, 2018, 1:52pm

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_h · February 20, 2018, 3:02pm

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

KidSquid · February 20, 2018, 3:06pm

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_h · February 20, 2018, 3:15pm

@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

KidSquid · February 20, 2018, 3:48pm

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_h · February 20, 2018, 7:27pm

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

KidSquid · February 20, 2018, 7:44pm

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_h · February 20, 2018, 9:02pm

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

KidSquid · February 20, 2018, 10:17pm

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!