Forecast IO 5 Day - Partially Cloudy Day, Pointing to, Partially Cloudy Night

I have a 5 day forecast showing one of the days as being partially cloudy and therefore should be the variable cloudy.std-sprite-partly-cloudy-day{…

However the .std-sprite2-partly-cloudy-night{… is what it seems to be set to. If I change the icon coordinates for .std-sprite2-partly-cloudy-night{… The icon changes.

All the days on the 5 Day Forecast should be only day time conditions, correct??

partly-cloudy-night or partly-cloudy-day is the attribute name returned by the Forecast API, which is then appended in the template using [wicon].

If you hit the request forecast tab you should be able to see what is being returned by the API - I suspect it is returning “night”.

I am not sure why it would be returning day instead of night…

Dan,

I am not sure what was going on. Today it is back to normal.

Well was… Till it was evening again.

I did try the request forecast. But it just changes to predefined data. I can not see the raw data.

Edit: I closed out and went back in, raw data shows

{"id":"ID","value":"TITLE","main":"<link href='http:\/\/fonts.googleapis.com\/css?family=Poiret+One' rel='stylesheet' type='text\/css'>\n<div class=\"container\">\n  <div class=\"container-table\">\n\n    <div class=\"currently\"><div class=\"currently-cell\"><div class=\"icon std-sprite-[icon]\"><\/div><div class=\"currently-text\">CURRENTLY<\/div>[temperatureFloor]\u00b0<\/div><\/div>\n\n    <div class=\"daily-forecast\">[dailyForecast]<\/div>\n  <\/div>\n<\/div>","daily":"<!--    <hr class=\"day-icon-seperator\">\n    <div class=\"weekday\">[time|EEEE]<\/div> -->\n<!--   <div class=\"day-icon\"><i class=\"wi [wicon]\"><\/i><\/div>-->\n\n\n\n\n<div class=\"day\">\n  <div class=\"currentDay\">\n    <div class=\"day-icon\"><div class=\"icon std-sprite2-[icon]\"><\/div><\/div>\n    [temperatureMaxFloor]<\/span>\u00b0<span class=\"unitTemp\">F<\/span>\n    <div class=\"weekday-short\">[time|EEE]<\/div>\n  <\/div> \n<\/div>","css":"body {\n\tfont-family:Arial;\n\tmargin:0;\n\tpadding:0;\n}\n.container {\n\ttext-align: left;\n\theight: 100%;\n\tfont: bold 64px \"Poiret One\",Verdana,Arial,Sans-serif;\n\tcolor: #FFFFFF;\n\tmargin:0;\n\tpadding:0;\n}\n\n.container-table{\n\tdisplay: table;\n\twidth: 100%;\n\theight: 540px;\n\tfont: normal 26px\/36px \"Poiret One\",Verdana,Arial,Sans-serif;\n\tmargin:0;\n\tpadding:0;\n}\n\n\n.currently{\n\tdisplay: table-cell;\n\theight: 360px;\n\twidth: 360px;\n\tmargin: 0px;\n\tpadding: 10px 0px 0px 0px;\n\tvertical-align: top;\n\ttext-align: center;\n\talign: center;\n}\n\n.currently-cell{\n\theight: 440px;\n\twidth: 440px;\n\tmargin: 0px 40px 40px 0px;\n\tvertical-align:top;\n\ttext-align: center;\n\tbackground-color: rgba(31,77,202,0.25);\n\tborder-radius: 440px;\n\tdisplay: inline-block;\n\tpadding: 0;\n\tfont-weight: 900;\n\tfont-size: 120px;\n\tline-height: 100px;\n}\n\n.currently-text{\n\tfont-size: 72px;\n\tpadding: 10px;\n}\n\n.day {\n\tdisplay: table-cell;\n\tmargin-top: 0px;\n\tpadding:0;\n\tvertical-align:bottom;\n\ttext-align:bottom;\n\twidth: 150px;\n\theight: 500px;\n\tdisplay:inline-block;\n\toverflow: hidden;\n}\n\n.currentDay {\n\tmargin-top: 280px;\n\tpadding:0;\n\ttext-align:center;\n\tfont-weight:900;\n\tfont-size: 54px;\n\tline-height: 38px;\n}\n\n.day-icon {\n\tfont-size: 72px;\n\/*\tvertical-align:top;*\/\n\tmargin-top: 20px;\n\tmargin-bottom: 20px;\n}\n\n.weekday-short {\n\tmargin-top: 20px;\n}\n\n.icon{\ndisplay: inline-block;\nbackground-attachment: fixed;\nbackground-position: -60px;\n    background: url([[ICONS]]);\n}\n\n.std-sprite-clear-day{ background-position: 930px 10px; width: 250px; height: 170px; } \n.std-sprite-clear-night{ background-position: 930px -155px; width: 250px; height: 170px; }\n.std-sprite-cloudy{ background-position: 930px -330px; width: 250px; height: 170px; } \n.std-sprite-lightning{ background-position: 930px -515px; width: 250px; height: 170px; } \n.std-sprite-partly-cloudy-day{ background-position: 930px -695px; width: 250px; height: 170px; }\n.std-sprite-partly-cloudy-night{ background-position: 930px -880px; width: 250px; height: 170px; }\n\n.std-sprite-rain{ background-position: 700px 15px; width: 220px; height: 170px; } \n.std-sprite-sleet{ background-position: 700px -160px; width: 220px; height: 170px; } \n.std-sprite-snow-night{ background-position: 700px -340px; width: 220px; height: 170px; } \n.std-sprite-snow{ background-position: 700px -520px; width: 220px; height: 170px; } \n.std-sprite-wind{ background-position: 700px -690px; width: 220px; height: 170px; } \n\n\n.std-sprite2-clear-day{ background-position: 470px -5px; width: 150px; height: 100px; } \n.std-sprite2-clear-night{ background-position: 470px -120px; width: 150px; height: 100px; }\n.std-sprite2-cloudy{ background-position: 470px -235px; width: 150px; height: 100px; } \n.std-sprite2-lightning{ background-position: 470px -350px; width: 150px; height: 100px; } \n.std-sprite2-partly-cloudy-day{ background-position: 470px -475px; width: 150px; height: 100px; }\n.std-sprite2-partly-cloudy-night{ background-position: 470px -605px; width: 150px; height: 100px; }\n\n\n.std-sprite2-rain{ background-position: 310px 5px; width: 150px; height: 100px; } \n.std-sprite2-sleet{ background-position: 310px -110px; width: 150px; height: 100px; } \n.std-sprite2-snow-night{ background-position: 310px -235px; width: 150px; height: 100px; } \n.std-sprite2-snow{ background-position: 310px -360px; width: 150px; height: 100px; } \n.std-sprite2-wind{ background-position: 310px -480px; width: 150px; height: 100px; } "}

Edit again, sorry: The first instance of what should be Partially Cloudy shows up as night, the second shows up as daytime partially cloudy…??

Isn’t that right? It’s showing you that Sunday evening/night will be cloudy (since you’re already part way through Sunday) and that the remainder of the week will be partially cloudy or sunny in the day?

Hi Alex,

In that particular example it would appear so. I thought someone would catch that. Maybe I have been staring too long. :dizzy_face:

Yesterday it showed Saturday as sunny and Sunday as cloudy/night.

I will see if I can find another example.

Edit: Alex you may have a very good point on the first day of the week. I am not sure how to verify if the forecast does work like that.

It changes to the live data for the current day and the first of the 5 day forecast.

The data you have posted is only shown for super admins and is the current template represented as it would need to be for saving as a template file - not anything to do with the forecast data. I think we should hide that behind some “click to show” thingy.

Found an example of what I was trying to show the first time. It shows Tuesday, Wednesday, Saturday , and Monday as partially cloudy. But why is Thursday partially cloudy at night?

I wonder if it’s to do with when the maximum temperature is reached or something like that.

I know all we’re doing is showing what the Forecast API is returning to us, so I think probably it would need to be referred to the folks at Forecast for a definitive answer.

That might be the only option actually - the data returned is rendered as-is without us modifying the name of the weather condition.

On a side note, it looks like you’ve made some great changes to the template - if you fancied contributing those then we’d be happy to include it!

Dan,

I am not sure where exactly to contact Forecast.io about this. I don’t seem to find a good place to ask anything. Everything I think would take me to somewhere to ask keeps bring me back to the Dark Sky Forecast IO Api page.

I would be glad to contribute the changes to the template, however it would need a new Icon set, as the one I am using is licensed. If someone is interested in making a new icon set that has three different sized icons, please contact me.

@Dan

…the data returned is rendered as-is without us modifying the name of the weather condition

Are you sure this is also true for the 5 day forecast template that uses the png files? I may be completely wrong here in trying to put this together on how it works.

From what I can tell the names are re-defined. it looks like the Return Forecast returns something like this for the daily wicon: “Daily wicon wi-day-cloudy”. I am assuming that the day-cloudy part is what is getting passed along in the 5 day forecast template. In the template code I see that wi-day-cloudy is somehow translated to “.std-sprite-cloudy”. If I cut that down a bit “day-cloudy” translates to “cloudy”.

Am I totally wrong on this?

The only alteration to the information provided by forecast is to add another property called wicon (in addition to the icon property that already exists). That is done here:

https://github.com/xibosignage/xibo-cms/blob/develop/modules/forecastio.module.php#L694

You can see from that array how the original icons will remain set as they are from the forecast IO. The original icon strings are appended to the .st.sprite class tag in the template itself (not in the main code)

Thank you Dan,

I have looked through the raw data sent back from Forecast.io and finally found the problem. It is in what is being sent back from Forecast.io.

Seems I do get incorrect data.

“Partly cloudy overnight.”,“icon”:“partly-cloudy-night”

“Mostly cloudy starting in the evening.”,“icon”:“partly-cloudy-night”,

Maybe I should just strip “-night” from the 7 day foreast return? It would still leave the description as being paritally incorrect.

Someone is going to wack me if I keep responding to my own post.

I think my problem is my idea of what the information is, that is being returned. If I re-examine what forecast.io is sending back, it starts to become clear. I am seeing night icons because the description is telling me the main weather difference of the day and when. So if the clouds come in at night I see a weather icon on that day that corresponds with clouds and night. If the clouds come in during the day, I see clouds and day.

I think that I might need to write a different kind of 5 day, for me 7 day, template here. Question is how.

In response to my original question:

All the days on the 5 Day Forecast should be only day time conditions, correct??

No, they are not. :neutral_face:

FYI

I heard back from Jay at Forecast IO, here is a cut down version of the question and answer:

Hi Jay,

I have a seven day forecast, pretty simple one, however it is returning some night time icons. Is there an easy way to get just day time conditions and icons? Currently I am unable to figure out how to do that, as the general call to the api returns some descriptions and and icons for night. Would I need to query for a designated time for each day during the day to do this?

Hi Colin,

There is not, at present, any way to get a forecast for anything other than a full day: that is, there is no specific “daytime” forecast.

However, there’s a workaround. Our forecasts are pessimistic, returning the “most important” condition observed in a given period. The only nighttime icon we ever return is “partly-cloudy-night”; if you ever see that icon, it means that the weather is clear during the day. So, in that case, you can simply treat the weather as if you received a “clear-day” icon.

Hope that helps,

Jay LaPorte of The Dark Sky Company, LLC

You could certainly write a conditional statement in the module that transposed those two states - if we were to include it in the main product we would have to have it as an option and have to word it so that it could be clearly understood.

Although you could argue that it would be clearer with the transposed states in place by default!

…Agreed!..(Must have 20 Characters)

1 Like

Done, implemented and tested (in May)

I’ll close this topic now.