Weather Underground widget with forecast

widgetgallery
weatherunderground
Tags: #<Tag:0x00007f015a02ff78> #<Tag:0x00007f015a02fd48>

(Greg) #166

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


(Greg) #167

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


( . ) #168

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

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) #169

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


(david) #170

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

https://www.npmjs.com/package/weather-underground-icons


( . ) #171

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)


(Paul O) #172

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


(Markus Wolters) #173

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?


( . ) #174

@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 :frowning:

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) #175

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!


( . ) #176

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

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) #177

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


( . ) #178

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.


(Nigel Evans) #179

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


(Markus Wolters) #180

@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


( . ) #181

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.


(Markus Wolters) #182
<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


( . ) #183

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?


(Markus Wolters) #184

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

ToDos for me:

  • Change css

  • Find a way to translate the yahoo output to my language

@lsiepel Thanks for holding my hand… :smile:


(Ian Illingworth) #185

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 :slight_smile: Next some Arduino based sensors …