Topic: Change Background Image depending upon Wx conditions? - SOLVED

[Phlerb]

Good Day!

I continue to push towards a more unique web site, and I was wondering if anyone had a script that would change the background of the Saratoga Templates css depending upon the reported weather conditions?

Ultimately I would have about 14 different images to choose from. 7 night time ones and 7 day time for:
Sunny/Clear
Rainy
Windy
Snowy
Cloudy
Thunderstorms
Foggy

This page seems to be a start, but it uses yahoo weather and is about 5 years old and I bet it no longer works that way, and we already gather that information to display on the front page in the summary temperature section.

http://css-tricks.com/using-weather-data-to-change-your-websites-apperance-through-php-and-css/

Any hints or clues on how to do this would be super!

Thanks
Phil

[txweather.org]

Get in contact with Win on this forum. He is the creator of the Leuven template and it does exactly what you are trying to archive.

[Ian.]

Phil,

Check out http://www.clevedonweather.co.uk/station/banner.php it changes the header so might be of use.

Ian

[Phlerb]

Thanks redpis.

I looked at the code, and it is using clientraw, which I think is a Weather Display file, and I use cumulus. He also was using % solar, which I do not have as I have a Davis Vue, and no Solar Rad measurement..

xcom: Thank you! This is closer to what I was looking at. I did not determine the code, but I have reached out to the Leuven team via their website and hope to hear back.

[kocher]

I know another way to create a dynamic banner.
On my site, I use it for some time and it works very well.
Detects day, night, fog, rain, snow, frost etc ....
You do not need a solar sensor.
Depending on weather conditions, automatically changes the image of our banner ..

     http://kocher.es/index.php

The idea came from here (it's a script thought, in principle, to stations Davis Vantage ):

    http://www.meteoelche.com/download.php

You have to download the archive metoActual.rar

It contains two very easy to understand PDF files (one with images).

This program gives us 3 icons:

1) Current Weather (curweather.php)

2) Moon Phase (fasmoon.php)

3) Trend of time (preweat.php)

These icons can see on our website.

The only thing left is to replace (equivalently) the images in the folder i by images of our banner.
I duplicate the folder i (original icons) with another if (our images)

    http://kocher.es/curweat.php
    http://kocher.es/curbannerweat.php

[Phlerb]

Thank you Kocher.

Unfortunately I don't know Spanish, and I am using Cumulus and not weatherlink. And as far as I can tell now you cannot use both at the same time.

Wim did reply to me, but essentially the Saratoga Templates and his are completely different and there is no easy way to convert his solution to the Saratoga Template.



Thanks for taking the time everyone!

I have a feeling it may need to use the WeatherUnderground API to get the needed info, and then a script to pass to the various css files which image to use.

[kocher]

What a shame!, Because it works very well.

Greetings from San Sebastián

[Phlerb]

So, Looking more into it, the API call is this for php  (http://www.wunderground.com/weather/api/d/docs?d=data/index)

<?php $json_string = file_get_contents("YOUR API"); ?>

(I changed the API)

And in this there is a "weather" return that has the current conditions...

So, it would seem that you would just need to have the css page query the API and then see what the conditions are, and then map the conditions to an image...

So, I made a quick php page, and added this code:

Code: [Select]

<?php $json_string = file_get_contents("YOUR API"); 
$parsed_json = json_decode($json_string); 
$weather = $parsed_json->{'current_observation'}->{'weather'}; 
echo "${weather}\n"; ?>
And it returns right now

Mostly Cloudy

You can see it here

http://www.deadcowz.com/wuapicall.php

So, now, how to use this data to select the correct image....

Getting closer...

[Dr Obbins]

While it doesn't change my background, I use the cloudbase script to change my banner. Just saved a copy in a new folder cloudbase2. Really not much to do except make the new jpg pics and change the x,y coordinates on a few items. This keeps the banner current with the weather conditions.


It looks like you banner needs changing anyway - it is showing a school bus out in the snow! LOL! 

[CNYWeather]

While it doesn't change my background, I use the cloudbase script to change my banner. Just saved a copy in a new folder cloudbase2. Really not much to do except make the new jpg pics and change the x,y coordinates on a few items. This keeps the banner current with the weather conditions.


It looks like you banner needs changing anyway - it is showing a school bus out in the snow! LOL! 

Where did you change the script to make the image larger?

[Phlerb]

I ended up using a php job to check the wunderground, then some if / elseif to copy a file to be named current.jpg every 20 minutes with a cron job, and then updated the css files to point to /images/current/current.jpg... so every 20 minutes current.jpg will reflect the weather as reported by weather underground.

Next is to add logic for day versus night, but that is for after dinner!
(API changed)

Code: [Select]

<?php $json_string = file_get_contents("YOUR API"); 
$parsed_json = json_decode($json_string); 
$weather = $parsed_json->{'current_observation'}->{'weather'}; 

if (in_array($weather, array('Mostly Cloudy', 'Cloudy', 'Partly Cloudy', 'Overcast')))
{
copy("/kunden/homepages/17/d554858752/htdocs/DEADCOWZdomainroot/images/current/cloudy.jpg", "/kunden/homepages/17/d554858752/htdocs/DEADCOWZdomainroot/images/current/current.jpg");
}

elseif (in_array($weather, array('Sunny', 'fair')))
{
copy("/kunden/homepages/17/d554858752/htdocs/DEADCOWZdomainroot/images/current/sunny.jpg", "/kunden/homepages/17/d554858752/htdocs/DEADCOWZdomainroot/images/current/current.jpg");
}
elseif (in_array($weather, array('thundershowers', 'isolated thunderstorms', 'scattered thunderstorms', 'isolated thundershowers')))
{
copy("/kunden/homepages/17/d554858752/htdocs/DEADCOWZdomainroot/images/current/thunderstorm.jpg", "/kunden/homepages/17/d554858752/htdocs/DEADCOWZdomainroot/images/current/current.jpg");
}
elseif (in_array($weather, array('showers', 'rain', 'mixed rain and hail', 'scattered showers', 'mixed rain and snow', 'freezing rain')))
{
copy("/kunden/homepages/17/d554858752/htdocs/DEADCOWZdomainroot/images/current/rainy.jpg", "/kunden/homepages/17/d554858752/htdocs/DEADCOWZdomainroot/images/current/current.jpg");
}
elseif (in_array($weather, array('snow', 'heavy snow', 'snow flurries', 'light snow showers', 'blowing snow')))
{
copy("/kunden/homepages/17/d554858752/htdocs/DEADCOWZdomainroot/images/current/snow.jpg", "/kunden/homepages/17/d554858752/htdocs/DEADCOWZdomainroot/images/current/current.jpg");
}
?>

[Dr Obbins]

Where did you change the script to make the image larger?

The size is controlled by the size of your pictures. There is no setting for the pic size, however this is where the x,y coordinates come into play for the location of the sun/moon/windsock. The banner I used is a bunch of the cloudbase pics merged together. Attached are some of the pics needed and the PHP file. The file size was too big for all of them zipped, but if you PM you email I can send them to you if your are interested.

[Jáchym]

OK first Im not sure it is a good idea to use his API key, he shoulnd't have posted it here at all.

And with regards to the link, try changing http to https