Weather Underground widget with forecast

TexasGreg · June 25, 2018, 12:45pm

The images did end up syncing and the “feels like” temperature got closer to right. Thanks for your help.

TexasGreg · June 27, 2018, 10:07pm

I noticed most screenshot examples in this thread the large conditions image didn’t match up with the conditions text. I ended up changing this line:

<i class="wu wu-{{IconSet}} wu-256 wu-{{itemValue('Weather_ConditionId')}} current-icon pull-right"></i>  to  <i class="wu wu-{{IconSet}} wu-256 wu-{{itemValue('Weather_ConditionId0')}} current-icon pull-right"></i>

I added a zero to Weather_ConditionId to get the image to match up with the conditions text.
weather

lsiepel · July 27, 2018, 1:14pm

Because wu is no longer distributing free api keys and i like this widget, i used it in combination with the weather binding (openweathermap). And i only had to switch the items channels. Works excellent. Except… these images

The weather condition images won’t show up. The widget json construct a css class based on the conditionID. For example it constructs a css class wu-800 for clear weather (see https://openweathermap.org/weather-conditions for conditionid table)

When i look into the CSS file wu-icons-style.css this class doesn’t exist. It uses the class wu-clear. But that is not the conditionId, it is the conditionText.

I can fix this easily by changing the classnames in the wu-icons-style.css file. But it is a bit strange that nobody notices this problem with wundergroudn binding. Can somebody confirm that the channel="weatherunderground:weather:local:forecastDay2#iconKey returns a number or what am i missing?

david · July 27, 2018, 3:47pm

The icon key returns a string such as “clear” not a number.

david · July 27, 2018, 3:57pm

You can see where how the keys map to the cons on this page.

lsiepel · July 27, 2018, 6:17pm

github.com

BasvanH/habpanel-widget-weatherunderground/blob/master/weather-underground.widget.json

{
    "template": "<!-- Download: https://github.com/manifestinteractive/weather-underground-icons -->\n<!-- And place icons somewhere in your /conf/html folder structure -->\n<div ng-init=\"ServerPath='/static/weather-underground-icons/dist'; IconSet='white'\">\n</div>\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"{{ServerPath}}/wu-icons-style.min.css\">\n \n<style>\n@media (min-width: 992px) {\n    .col-md-border:not(:last-child) {\n\t\t\tborder-right: 1px solid #d7d7d7;\n    }\n    .col-md-border + .col-md-border {\n\t\t\tborder-left: 1px solid #d7d7d7;\n\t\t\tmargin-left: -1px;\n    }\n  \t.day:first-letter {\n    \ttext-transform: uppercase;\n\t\t}\n  \t.current-icon {\n\t\t\twidth: 14em !important;\n  \t\theight: 14em !important;\n  \t\tmargin-top: -1em;\n\t\t}\n  \t.condition {\n  \t\theight: 2em;\n \t\t}\n}\n</style>\n\n<div id=\"container\">\n  <div class=\"row\">\n  \t<div class=\"col-md-9\">\n      <i class=\"wu wu-{{IconSet}} wu-256 wu-{{itemValue('Weather_ConditionId')}} current-icon pull-right\"></i>\n      <h2 class=\"text-left\">{{itemValue('Weather_Condition')}}</h2>\n    </div>\n    <div class=\"col-md-3 text-right\">\n      <h2 style=\"margin-bottom:1em;\">{{'%.1f' | sprintf:itemValue('Weather_Temperature')}} °C</h2>\n      <h5><img style=\"height:16px;\" src=\"{{ServerPath}}/images/humidity.png\"/> {{itemValue('Weather_Humidity')}} %</h5>\n      <h5><img style=\"height:16px;\" src=\"{{ServerPath}}/images/wind.png\"/> {{itemValue('Weather_Wind_Speed')}} km/h</h5>\n      <h5><img style=\"height:16px;\" src=\"{{ServerPath}}/images/feel.png\"/> {{itemValue('Weather_Temperature_Feel')}} °C</h5>\n      <h5>{{itemValue('Weather_ObservationTime') | date: 'H:mm'}}</h5>\n   \t</div>\n  </div>\n\t<div class=\"row\" style=\"margin-top: 1em;\">\n\t\t<div class=\"col-md-3 col-md-border\">\n      <h4 class=\"day\">{{itemValue('Weather_Forecast_Time0') | date:'EEEE'}}</h4>\n      <i class=\"wu wu-{{IconSet}} wu-64 wu-{{itemValue('Weather_ConditionId0')}}\"></i>\n      <h5 class=\"condition\">{{itemValue('Weather_Condition0')}}</h5>\n      <h4><b>{{'%.0f' | sprintf:itemValue('Weather_Temp_Max0')}}</b> / {{'%.0f' | sprintf:itemValue('Weather_Temp_Min0')}} °C</h4>\n    </div>\n    <div class=\"col-md-3 col-md-border\">\n      <h4 class=\"day\">{{itemValue('Weather_Forecast_Time1') | date:'EEEE'}}</h4>\n      <i class=\"wu wu-{{IconSet}} wu-64 wu-{{itemValue('Weather_ConditionId1')| lowercase }}\"></i>\n      <h5 class=\"condition\">{{itemValue('Weather_Condition1')}}</h5>\n\t\t\t<h4><b>{{'%.0f' | sprintf:itemValue('Weather_Temp_Max1')}}</b> / {{'%.0f' | sprintf:itemValue('Weather_Temp_Min1')}} °C</h4>\n    </div>\n    <div class=\"col-md-3 col-md-border\">\n      <h4 class=\"day\">{{itemValue('Weather_Forecast_Time2') | date:'EEEE'}}</h4>\n      <i class=\"wu wu-{{IconSet}} wu-64 wu-{{itemValue('Weather_ConditionId2')| lowercase }}\"></i>\n      <h5 class=\"condition\">{{itemValue('Weather_Condition2')}}</h5>\n      <h4><b>{{'%.0f' | sprintf:itemValue('Weather_Temp_Max2')}}</b> / {{'%.0f' | sprintf:itemValue('Weather_Temp_Min2')}} °C</h4>\n    </div>\n    <div class=\"col-md-3 col-md-border\">\n      <h4 class=\"day\">{{itemValue('Weather_Forecast_Time3') | date:'EEEE'}}</h4>\n      <i class=\"wu wu-{{IconSet}} wu-64 wu-{{itemValue('Weather_ConditionId3')| lowercase }}\"></i>\n      <h5 class=\"condition\">{{itemValue('Weather_Condition3')}}</h5>\n      <h4><b>{{'%.0f' | sprintf:itemValue('Weather_Temp_Max3')}}</b> / {{'%.0f' | sprintf:itemValue('Weather_Temp_Min3')}} °C</h4>\n    </div>\n\t</div>\n</div>\n",
    "name": "Weather Underground",
    "author": "Bastiaan van Haastrecht",
    "description": "Local Weather, use with Weather Underground binding OH2-SNAPSHOT 2.3.0 from build 1212 - https://github.com/BasvanH"
}

Shows:
<i class=“wu wu-{{IconSet}} wu-64 wu-{{itemValue(‘Weather_ConditionId2’)| lowercase }}”>

‘Weather_ConditionId2’ is mapped to {channel=“weatherunderground:weather:local:forecastDay2#iconKey”}

Thanks for making it clear undergroundweather is providing a string id. Fine by me, but i tought there was some kind of standard across all weather provider for this conditionId, seems not.

Anyhow, i got this working with the weather binding (openweathermap, i just had to change the channels to corresponding weather binding channels and change the CSS-stylesheet: wu-icons-style.min.css (30.2 KB)

POB21 · July 31, 2018, 1:49am

I apologize that my technical skills are a bit limited. I just started using HABpanel, found this widget (awesome work), but I am also missing the condition icons and weekday names. Could you give me some additional guidance on applying your fix? much thanks

KingCrab · August 2, 2018, 5:03pm

I tried your modified css with the weather binding and yahoo as provider, but still dont have any luck showing the icons.
On my sidemap I see condition id is 32, but icon is always N/A. Any ideas what I could have misconfigured?

lsiepel · August 2, 2018, 7:39pm

@POB21 Are you using the weather binding with openweathermap as provider or weather underground binding from the OP? In both cases, could you try to use the Chrome developer tools (F12) to examin the icon html/css classes?

@KingCrab
It looks like the yahoo conditionId’s are different compared to the openweathermap conditionid’s great, i hoped this binding would have normalized it but no

Anyway, what you could do is rename the conditionids used in the .css file. For example you use your favorite text editor and find and replace ‘.wu-800’ (clear) for ‘.wu-32’ (Sunny). That is what i did for mapping weather underground to openweathermap

ian.illingworth · August 2, 2018, 8:30pm

I have been trying for days to understand the sprintf issue and why I get the error expecting number but found string. I have set it up using PaperUI and can get everything working and understand the logic, but this has me beaten!

lsiepel · August 2, 2018, 8:47pm

Probably the item declaration is different (capitals?) then the item name used in the widget. Could you check these are the same names?
The console error shouldn’t be a problem, i had them too and it worked. I did change the widget to get rid of this console error, just beause i don’t like errors

replace:
{{‘%.0f’ | sprintf:itemValue(‘Weather_Temp_Max1’)}}
with:
{{itemState(‘Weather_Temp_Max1’) | number:0}}

do that for all items containing sprintf.

If i can find some time i could make a pull request adding support for weatherbinding and fix these js errors, but mwah.

ian.illingworth · August 2, 2018, 9:30pm

When you say you changed the widget? Which did you use? Is it possible also to share your widget code? Much appreciate the help.

lsiepel · August 2, 2018, 10:07pm

At the screen from your screenshot you posted, go to tab ‘Code’ and:
replace:
{{’%.0f’ | sprintf:itemValue(‘Weather_Temp_Max1’)}}
with:
{{itemState(‘Weather_Temp_Max1’) | number:0}}

find other sprintf occurences and change the lines occording to the above example. Not able to provide the widget at the moment, maybe later.

evansnp · August 3, 2018, 2:08pm

I created a MAP file, to convert the WU nomenclature to OpenWeather … works fine!

KingCrab · August 3, 2018, 2:43pm

@lsiepel

it is a pity to see that everyone is doing it there own way, but I have modified the css like:

.wu-white.wu-800, .wu-white.wu-32 { background: url(icons/white/svg/clear.svg); }

giving me still no image on the dashboard

lsiepel · August 3, 2018, 3:08pm

When using the F12 developers tool in Chrome, you could inspect the icon and check if the right CSS class is attached to the HTML element, the CSS class is affecting the HTML class and last if the SVG has been loaded.

Can i browse this url to check ? Or could you construct some screenshots (with developer tools and the icon element visible?) You can PM me if you don’t want to share url on the forum.

KingCrab · August 3, 2018, 3:11pm

<div class="col-md-9">
       <i class="wu wu-white wu-256 wu-N/A current-icon pull-right"></i>
       <h2 class="text-left ng-binding">Sunny</h2>
     </div>

Not sure, but wu-N/A looks suspicious

lsiepel · August 3, 2018, 3:20pm

Bingo! I don’t know anything about the yahoo weather api and don’t know much about the weather binding, so i can’t tell you why it is n/a. Maybe try openweathermap?

KingCrab · August 3, 2018, 3:37pm

Though I doublechecked the items, but didn’t. Turns out that I used ID instead of Id

ToDos for me:

Change css
Find a way to translate the yahoo output to my language

@lsiepel Thanks for holding my hand…

ian.illingworth · August 4, 2018, 7:32am

I got it working with your advice, thankyou ! have a great day !

It’s a work in progress - ignore the other stuff…the light is a Tasmota ‘Sonoff’ I have a bunch of those to work on now the Weather issue that has ‘bugged’ me for weeks is done

Next some Arduino based sensors …