Clevedon Weather

Personal Weather Station

Live Weather conditions from Clevedon, North Somerset, UK

Weather Dependent page headers

 

Introduction
To add some local indentity to the site I thought it would look good to have a page banner of a local scene from the sea front at Clevedon including the famous Clevedon Pier. My original photo was taken on a sunny day and looked good but I wanted something more than just a sunny picture. I decided to develop a PHP script and CSS to display different views of the same scene dependent on the time of day and weather conditions. I ended up with six different banner images, three daytime and three night time. The night time banner images are purely controlled by the time of day and were all taken on a clear evening.

Page banner Images
The first of the night time banners pictures is displayed during the time of "Civil Twilight", the time the sun is between 0° and 6° below the horizon. At my latitude this picture is displayed just after sunset and before sunrise for about 40 to 50 minutes depending on the time of year.
Civil Twilight Banner Image
The second banner of the night time banner pictures is displayed during the time of "Nautical Twilight", the time the sun is between 6° and 12° below the horizon. At my latitude this picture is displayed just after evening Civil Twilight and before morning Civil Twilight for about 40 to 50 minutes depending on the time of year.
Nautical Twilight Banner Image
The final night time banner is displayed the rest of the night time period while the sun is more than 12° below the horizon.
Night time banner image
The day time pictures are displayed between sunrise and sunset and are varied by the solar radiation expressed at a percentage of a calculated maximum. The sunny image is displayed when the level is greater then 74% when there is generally little or no cloud.
Sunny Banner image
The cloudy image is displayed when the percentage of solar radiation is below 74% but above 30%
Cloudy banner image
The final daytime image is display at very overcast time when the percentage solar radiation is below 30%
Overcast banner image

Requirements
This script requires the following, a weather station with a solar radiation sensor and using Weather Display software with PHP version 5. I have a Davis VP2 with a Davis solar radiation sensor but should work with any solar radiation sensor that Weather Display supports .

PHP Code
The PHP script is quire simple and I sure it could be improved by anyone with more knowledge of PHP than me. The script makes use of two functions, one inbuilt and the other a uset function. The user function "get_client()" was found on the great web site for weather related scripts,Tnet Weather the home of many useful PHP scripts for weather station operators. This function can be found at "Parsing WD Clientraw data files" . When this function is provided with the location the "clientraw.txt" file Weather Display produces, the function reads all the values into an array. My script only makes use location 34, solar reading percentage of calculated maximum,
The inbuilt PHP function used in my script is "date_sun_info()". This function requires three parameters, the date as a timestamp, the Latitude in degrees and the Longitude in degrees. This function returns an array containing the following times, sunrise, sunset, transit, civil_twilight_begin, civil_twilight_end, nautical_twilight_begin, nautical_twilight_end, astronomical_twilight_begin and stronomical_twilight_end.
<?php

include_once("c:wamp/www/wdisplay/testtags.php");


$solar=$VPsolar; //$clientraw[127];
$banner_icon=$iconnumber; //$clientraw[48];
$solar_percent=$currentsolarpercent; //$clientraw[34];



echo '<p><br/></p>';

$sun_info = date_sun_info(strtotime(date('Y-m-d')),51.4311981,-2.8517001);

if (time()<$sun_info['nautical_twilight_begin']) { // Night
    echo '<div id="banner6">';
    }
elseif (time()>$sun_info['nautical_twilight_end']) { // Night
    echo '<div id="banner6">';    
    }
elseif (time()<$sun_info['civil_twilight_begin']) { //Twilight
    echo '<div id="banner5">';
    }    
elseif (time()>$sun_info['civil_twilight_end']) { // Twilight
    echo '<div id="banner5">';    
    }
elseif (time()<$sun_info['sunrise']) { // Dawn
    echo '<div id="banner4">';
    }
elseif (time()>$sun_info['sunset']) { // Dusk
    echo '<div id="banner4">';
    }
elseif ($solar_percent < 30) { // Very Cloudy
    echo '<div id="banner3">';
    }
elseif ($solar_percent < 74) { // Cloudy
    echo '<div id="banner2">';
    }
else {
    echo '<div id="banner1">'; // Sunny
    }
?>

    <h1>Clevedon Weather</h1>
    <h2>Personal Weather Station</h2>
    <h3>Live Weather conditions from Clevedon, North Somerset, UK</h3>
    
<?php

$uri=$_SERVER['REQUEST_URI'];
/*
echo $uri;
 */
if(strpos($uri,"php/")>10){
header('Location: http://www.clevedonweather.co.uk/');

exit();
}

?>

    
</div>

CSS
#banner1 {
    margin: auto;
    background-image: url('../images/banners/1.jpeg');
    height: 180px;
    width: 890px;
}
#banner1 h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 60px;
    font-weight: bold;
    position: relative;
    left: 30px;
    width: 550px;
}
#banner1 h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-large;
    color: #FFFFFF;
    position: relative;
    bottom: -50px;
    left: 30px;
    width: 550px;
    font-weight: bold;
}
#banner1 h3 {
    color: #FFFFFF;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    left: 30px;
    bottom: -50px;
    width: 550px;
    font-weight: bold;
}
#banner2 {
    margin: auto;
    background-image: url('../images/banners/2.jpeg');
    height: 180px;
    width: 890px;
}
#banner2 h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 60px;
    font-weight: bold;
    position: relative;
    left: 30px;
    width: 550px;
    color: #33CCCC;
}
#banner2 h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-large;
    color: #0000FF;
    position: relative;
    bottom: -50px;
    left: 30px;
    width: 550px;
    font-weight: bold;
}
#banner2 h3 {
    color: #0000FF;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    left: 30px;
    bottom: -50px;
    width: 550px;
    font-weight: bold;
}
#banner3 {
    margin: auto;
    background-image: url('../images/banners/3.jpeg');
    height: 180px;
    width: 890px;
}
#banner3 h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 60px;
    font-weight: bold;
    position: relative;
    left: 30px;
    width: 550px;
    color: #33CCCC;
}
#banner3 h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-large;
    color: #0000FF;
    position: relative;
    bottom: -50px;
    left: 30px;
    width: 550px;
    font-weight: bold;
}
#banner3 h3 {
    color: #0000FF;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    left: 30px;
    bottom: -50px;
    width: 550px;
    font-weight: bold;
}
#banner4 {
    margin: auto;
    background-image: url('../images/banners/4.jpeg');
    height: 180px;
    width: 890px;
}
#banner4 h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 60px;
    font-weight: bold;
    position: relative;
    left: 30px;
    width: 550px;
    color: #FFFF99;
}
#banner4 h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-large;
    color: #FFFF99;
    position: relative;
    bottom: -50px;
    left: 30px;
    width: 550px;
    font-weight: bold;
}
#banner4 h3 {
    color: #FFFF99;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    left: 30px;
    bottom: -50px;
    width: 550px;
    font-weight: bold;
}
#banner5 {
    margin: auto;
    background-image: url('../images/banners/5.jpeg');
    height: 180px;
    width: 890px;
}
#banner5 h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 60px;
    font-weight: bold;
    position: relative;
    left: 30px;
    width: 550px;
    color: #FFFF99;
}
#banner5 h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-large;
    color: #FFFF99;
    position: relative;
    bottom: -50px;
    left: 30px;
    width: 550px;
    font-weight: bold;
}
#banner5 h3 {
    color: #FFFF99;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    left: 30px;
    bottom: -50px;
    width: 550px;
    font-weight: bold;
}

 

Never base important decisions on this or any weather information obtained from the Internet.

Valid HTML 4.01 Transitional UK - WEATHER STATION TOPSITES - UK
Home | Weather Related Links | Detailed Weather Summary | Daily Reports | Live Weather Cam |
Weather Forecasts | Live Weather | About my Personal Weather Station | My Photos
Contact Webmaster
Last modified: April 25 2022 09:37:12.