Page 1 of 1

display range of images on temp ?

Posted: Tue 08 May 2012 6:20 am
by Paul-G0HWC
Hi all,
I have searched the site but don't see what I am looking for.
I would like to have a set of images and dependent on the
outside temp a image would be displayed relating to that
on my website. Is there anything like this that will allow
me to have my own set of images ?

Paul

Re: display range of images on temp ?

Posted: Sun 20 May 2012 4:56 pm
by TNETWeather
If you are using PHP, it is pretty easy. You setup an array with the images you want, and then an array to match the temp zones for those images. Grab the current temp value and do a compare and the script then outputs the image file to use for the current temp zone.

Example Live Running script (NOTE that the grey would NOT be output by the script, only the image file so you can insert it into your page):

http://cumulus.tnetweather.com/test/temp_image.php

Code Snippet is below:

Code: Select all

<?php

// Code for getting the current temp not included in snippet

// Range of temps.  The second value is the highest value matched
$RANGE = array();
$RANGE[0][0] = -1;  $RANGE[0][1] = "verycold.jpg";
$RANGE[1][0] = 45;  $RANGE[1][1] = "cold.jpg";
$RANGE[2][0] = 70;  $RANGE[2][1] = "mild.jpg";
$RANGE[3][0] = 90;  $RANGE[3][1] = "warm.jpg";
$RANGE[4][0] = 100; $RANGE[4][1] = "hot.jpg";
$RANGE[5][0] = 110; $RANGE[5][1] = "smokinghot.jpg";

$found = 0;
foreach($RANGE as $key => $val) {
    if ($cur_temp >= $val) {
        $found = $key;
    }
}

echo $IMAGES[$found];
// We be done...

Re: display range of images on temp ?

Posted: Sun 20 May 2012 5:16 pm
by Paul-G0HWC
Hi Kevin,

That looks like just what I want to use but I know nothing about php :|
I guess I need to get my hear around php now.

Thanks again :clap:

Paul

Re: display range of images on temp ?

Posted: Sun 20 May 2012 6:24 pm
by mcrossley
And the equivalent client side javascript if you do not have access to PHP could be..

Code: Select all

// Range of temps (Farenhiet assumed).  The first value is the highest value matched
var range, len;
range = [
    [-999, "verycold.jpg"],
    [45, "cold.jpg"],
    [70, "mild.jpg"],
    [90,  "warm.jpg"],
    [100, "hot.jpg"],
    [110, "smokinghot.jpg"]];

for (len = range.length; len; len--) {
    if (cur_temp >= range[len][0]) {
        document.getElementById("img_id").src = range[len][0];
        break;
    }
}

Re: display range of images on temp ?

Posted: Mon 04 Jun 2012 6:28 pm
by Paul-G0HWC
I am now using the Weather Blues templates and found it has this
feture built in. I have now made my own set of Forcast images


Nice to have a bit of FUN with the weather LOL

See what you think?
http://www.g0hwc.com/weather/index.htm

Paul

Re: display range of images on temp ?

Posted: Mon 04 Jun 2012 6:32 pm
by robynfali
You sharing those lol


BRING ON SUNNY WEATHER!

Re: display range of images on temp ?

Posted: Wed 06 Jun 2012 1:08 pm
by MickinMoulden
I do a similar thing. For temp I have 6.
I do think you need to crop the pics to the right size. The rain one looked odd (although I have seen the full res version, and she is quite nice.).

Re: display range of images on temp ?

Posted: Thu 07 Jun 2012 3:42 pm
by Paul-G0HWC
MickinMoulden Looking at my pages in Firefox and IE the weather images fit the box
just right. What are you viewing my pages in ?

And

robynfali They are very easy to make, just get a bunch of images and
add the weather image over it.

Paul

Re: display range of images on temp ?

Posted: Fri 08 Jun 2012 7:35 am
by MickinMoulden
Paul-G0HWC wrote:MickinMoulden Looking at my pages in Firefox and IE the weather images fit the box
just right. What are you viewing my pages in ?

Paul
Paul, I'm viewing in IE, but your image is 211x136 but seems that it needs to be wider as there are blue bars down each side.

Re: display range of images on temp ?

Posted: Fri 08 Jun 2012 8:48 am
by TNETWeather
MickinMoulden wrote:
Paul-G0HWC wrote:MickinMoulden Looking at my pages in Firefox and IE the weather images fit the box
just right. What are you viewing my pages in ?

Paul
Paul, I'm viewing in IE, but your image is 211x136 but seems that it needs to be wider as there are blue bars down each side.
To fit properly, the image needs to be sized 219x138

That would make it "fill" the entire box used by the forecast

Re: display range of images on temp ?

Posted: Fri 08 Jun 2012 6:02 pm
by Paul-G0HWC
Hi Kevin,

I could not move the image over any more thatn I have so left a small gap each side
I ended up using:
<img src="images/meteo/<#forecastnumber>.png" style="padding: 20px 0px 10px 0px" alt="Forecast icon" title="Forecast icon" />

I did try -10px in the last but negative don't seem to work??

Maybe I should go and have another try to move it left a bit more

Paul

Re: display range of images on temp ?

Posted: Fri 08 Jun 2012 6:49 pm
by Paul-G0HWC
Just worked it out, This css is new to me.
Just going to adjust all the images


Paul