First idea was to use some javascript library. But everything I found was either faulty and/or killing the client browser.

Most obvious way to do this on the server side would be to create black and white version of all images and “desaturated” css files to use when the grieve is on. The disadvantage of this solution is it would require to edit all templates and would be non re-usable at all.

The idea we got was to create a simple php script that would be able to process all css files and images on the server side without even touching the site backend / framework / templates etc. It is not the best solution but it is really quick to implement so maybe someone would find it useful.

Pre requirements:

• your templates and/or HTML files are not using colours in inline CSS
• your images and CSS files are regular files served by apache.
• performance is not your highest priority. ( script is able to cache desaturated images but still needs some resources to process new ones as it does so pixel by pixel with libGD. And even with all files cached apache needs to invoke php for every image/css request so with large number of files and requests this can add some extra load to your web server. )

Concept:

• all CSS files and images are rewrited to “desaturate.php?file=path” script with .htaccess
• desaturate.php is using regular expressions to desaturate styles and libGD to desaturate images and outputs them

Installation (can be also found in desaturate.php):

• Place desatureate.php on your web server.
• Add following rewrite rules to your .htaccess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*)\.(jpeg|jpg|gif|bmp|png|css)$ desaturate.php?type=$2&file=$1.$2 [L]

• (optional but recommended) edit desaturate.php and point CACHE_DIR constant to writeable directory
• (optional) If you dont want to edit .htaccess to enable/disable desaturation each time you can edit desaturate.php and make DESATURATE constant be read from a database or so.

Client cache problem

urls to CSSes and images are not changing so if the client previously visited non-desaturated site he might see files cached by his browser and will have to reload the page to see it fully desaturated. If this is a problem for you the only solution I can think of would be to add “?desaturated” and “?notdesaturated” to urls in your templates.

Download:

Here is a git repo with this thing:

https://github.com/fsw/desaturate.php

credit goes to my mate vent for helping with the concept

I challenged a task of creating a weather forecast on a website. After researching few weather APIs I decided that Google’s is best for my needs. Others are either non-free or too complicated.

Google’s Weather API was created for iGoogle. It is very simple and clear however it’s usage is risky as it is not supported and not documented anywhere. You can read more here.

It is easy to find some PHP/CURL usage examples. This was not satisfying for me as weather forecast on website I was working on was supposed to be just a tiny, optional addition working in the background and risking CURL delays with this unsupported API was unacceptable.

Getting data from other domains is outside the AJAX concept and most browsers are blocking such requests for security reasons. Best way to avoid this is to create a simple PHP proxy on our web server. If your web service will use finite set of locations to check weather in, you can extend this proxy easily to buffer the results in a database.

<?php

/**
Simple CURL Proxy for google weather service to be used with AJAX
**/

// secret Google API params
$weather = (@$_GET['weather']?$_GET['weather']:'New York');
$hl = (@$_GET['hl']?$_GET['hl']:'en');

$session = curl_init('http://www.google.com/ig/api?weather='.urlencode($weather).'&hl='.urlencode($hl));

//we will need header to convert encoding
curl_setopt( $session, CURLOPT_HEADER, true );
curl_setopt( $session, CURLOPT_RETURNTRANSFER, true );

$response = curl_exec($session);
$curl_info = curl_getinfo($session);

// split response into header and content
$headers_size = $curl_info[header_size];
$headers = substr($response, 0, $headers_size);
$content = substr($response, $headers_size);

// search for encoding in headers
$e_start = strpos( $headers, "charset=" );
$e_end = strpos( $headers, "\n", $e_start + 1 );
$encoding = substr( $headers, $e_start+8, $e_end-$e_start-9 );

// we convert encoding to UTF8 to avoid problems in javascript
header('Content-Type: text/xml; charset=UTF-8');
echo mb_convert_encoding( $content, 'UTF-8', $encoding );

curl_close( $session );

?>

Simple JavaScript function will use our proxy and add formatted results to HTML element.

/*

Shows weather forecast in element.
Requires gwproxy.php to be present on webserver
container is a jQuery element or selector
locale and location are strings.
location could be whatever google accepts like
'New York' or ',,,22500000,31000000' to get weather for lat=22.5 and long=31

*/

function showWeather(container,location,locale){

        $(container).text('Please wait. Loading weather...');

        $.get( 'gwproxy.php?weather=' + encodeURI(location) + '&hl='+encodeURI(locale), function(xml) {

                function addForecastDiv( day, condition, temp, icon ){

                        daydiv = $("<div class='day'></div>");
                        daydiv.append( "<img src='" + icon + "' />" );
                        daydiv.append( "<div class='name'>" + day + "</div>" );
                        daydiv.append( "<p class='condition'>" + condition + "</p>" );
                        daydiv.append( "<p class='temp'>" + temp + "</p>");
                        $(container).append(daydiv);

                }

                $(container).text('');

                var t_unit = '&deg;F';

                if( $(xml).find('forecast_information').find('unit_system').attr('data') == 'SI' )
                        t_unit = '&deg;C';

                addForecastDiv(
                        'Now',
                        $(xml).find('current_conditions').find('condition').attr('data') + '<br/>' +
                        $(xml).find('current_conditions').find('humidity').attr('data') + '<br/>' +
                        $(xml).find('current_conditions').find('wind_condition').attr('data'),
                        $(xml).find('current_conditions').find('temp_f').attr('data') + '&deg;F, ' +
                        $(xml).find('current_conditions').find('temp_c').attr('data') + '&deg;C',
                        $(xml).find('current_conditions').find('icon').attr('data')
                );

                $(xml).find('forecast_conditions').each(function(){
                        addForecastDiv(
                                $(this).find('day_of_week').attr('data'),
                                $(this).find('condition').attr('data'),
                                $(this).find('low').attr('data') + t_unit + ' - ' +
                                $(this).find('high').attr('data') + t_unit,
                                $(this).find('icon').attr('data')
                        );
                });

        },'xml');

}

CSS for the element. Sorry it is ugly. Modify for your needs.

div#weatherdisplay {
        overflow: auto;
        padding: 10px;
        margin: 10px;
        background: #ccc;
}

div#weatherdisplay div.day {
        font-family: Verdana;
        float: left;
        border: 1px dashed #777;
        background: #bbf;
        width: 150px;
        margin: 5px;
        padding: 5px;
}

div#weatherdisplay img {
        float: left;
        height: 32px;
}

div#weatherdisplay div.name {
        font-weight: bold;
        height: 24px;
        padding: 4px 4px 4px 40px;
}

div#weatherdisplay .condition {
        font-size: 12px;
        padding: 0;
        margin: 5px 0;
        text-align: center;
        height: 58px;
        overflow: hidden;
}

div#weatherdisplay .temp {
        padding: 0;
        margin: 0;
        text-align: center;
}

Complete HTML with usage example.

<html>
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="weather.js"></script>

<script type='text/javascript'>

$(document).ready( function() {
        showWeather($('#weatherdisplay'),'Paris','fr');
} );

</script>

<link rel='stylesheet' href='weather.css' type='text/css' />

</head>
<body>

<h1>Weather API Test</h1>

<div>
location: <input id='weather' type='edit' name='weather' value='Paris' />
language: <input id='hl' type='edit' name='hl' value='fr' />
<input type='button' value='check weather' name='submit'
onClick="showWeather($('#weatherdisplay'),$('#weather').val(),$('#hl').val())" />
</div>

<div id='weatherdisplay'></div>

</body>
</html>

And this is how it should look like:

weather thingie screenshot

download all files: