Topic: PHP for GRLevel3 website radar type selection/JavaScript animation

[saratogaWX]

I've had a JavaScript animator for my GRLevel3 images for quite a while.  Tim at Walker, MI Weather did a static selection list and I thought what a nice thing to apply to the GRLevel3 images on my site.

This PHP (after a simple config) will allow the display of all the types of radar images your GR3 is routinely uploading, and automatically filters out 'stale' images.

It also works to display the latest image (by type) if JavaScript is not enabled in the browser .. no animation there, however.

Script demo and free download available at http://saratoga-weather.org/scripts-GR3radar.php#GR3radar

Best regards,
Ken

[saratogaWX]

I've done a minor rev to the script (to V1.01) to better support IIS servers (which tend to not have $_SERVER['DOCUMENT_ROOT'] set up).  If you're trying to use the script on an IIS server, please upgrade to the V1.01 version .. you'll probably have better success in making it work.
Apache servers .. no need to update the script.

Best regards,
Ken

[WeatherBeacon]

Thanks for this script, Ken!

I have two questions:

• Is there a way to decrease the delay between images (for faster image changes)?
• Is there a way to increase the delay between the last and the first image?

I've looked at the php script, but I can't see anything that stands out as obvious to me.

Thanks again!

Regards,

Kevin...

[saratogaWX]

Hi Kevin!

The time is controlled by

Code: [Select]

var g_dwTimeOutSec=1; and the line

Code: [Select]

window.setTimeout("Tick()", g_dwTimeOutSec*1000);
As shown, it's a 1 second pause between images.  There is no extra 'at end' or 'before restart' pause.. just a 1 second time.

The actual display time is really controlled by the speed of image load to the browser, then a 1 second delay after loading an image to fetch the next one.

If you change to

Code: [Select]

window.setTimeout("Tick()", g_dwTimeOutSec); and set

Code: [Select]

var g_dwTimeOutSec=750; that would be 3/4s of a second (750 milliseconds) and you could tweak the value to get the desired speedy result

Sorry about the no pause between loop restarts...

Best regards,
Ken

[WeatherBeacon]

Thanks a lot, Ken! That did it!

Regards,

Kevin...

p.s.  Thanks again for your continued generosity in sharing your scripts!

[saratogaWX]

You're very welcome Kevin!  Coding is my hobby (and passion) .. I'm very pleased that others find my efforts useful for their weather hobby too.

Best regards,
Ken

[WeatherBeacon]

You're very welcome Kevin!  Coding is my hobby (and passion) .. I'm very pleased that others find my efforts useful for their weather hobby too.

Best regards,
Ken

Well (he he!), perhaps until you get needy people like me.

I have another question about the script. Let me just explain what I'm seeing.

For the sake of simplicity let's suppose the images are time stamped in 5 minute increments, say at 1:00, 1:05, 1:10, ..., 1:45.

Suppose all 10 images are being played by the script animation, and I leave the computer to do something else. (I may even change the page in the browser first.) I return to look at the radar a little before 2:30, and it's still showing the "old" images. I click "Refresh" hoping to update the images, but I notice that only the latest image is updated. So the images that are played by the animation turn out to be from 1:00, 1:05,..., 1:40, 2:25. That is, refreshing the browser page updates only the latest (10th) image.

When I look directly at the images in my control panel on my server, they are the images from 1:40, 1:45, ..., 2:20, 2:25 as they should be. So what I'm seeing in my browser are images that are cached, but a page Refresh updates only the latest image. So the only way to update all 10 images in the browser animation is to: 1) clear the browser's cache, and 2) then click Refresh.

Is that how the script works, or am I missing something? Ideally one would want all the images to update in the browser automatically (in the right sequence) so it would be seemless to the visitor. Is there a way to force an update of all images?

Is there an easy fix to this?

Thanks, Ken!

Regards,

Kevin...

[saratogaWX]

Kevin,
I think what you're seeing is the result of the browser cacheing the images.  I put the following PHP snippet at the top of the page to try and suppress that (goes before the <!DOCTYPE at the start of the page)

Code: [Select]

<?php
//------------------------------------------------
header("Cache-Control: no-cache,no-store,  must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
$NOWdate = gmdate("D, d M Y H:i:s", time());
header("Expires: $NOWdate GMT");
header("Last-Modified: $NOWdate GMT");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Best regards,
Ken

[WeatherBeacon]

Thanks, Ken! I'll give that a try.

Regards,

Kevin...

[WeatherBeacon]

I'm sorry, Ken. It's still behaving as before. Here's what I have at the top of my calling php file:

Code: [Select]

<?php
//------------------------------------------------
header("Cache-Control: no-cache,no-store,  must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
$NOWdate = gmdate("D, d M Y H:i:s", time());
header("Expires: $NOWdate GMT");
header("Last-Modified: $NOWdate GMT");
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Burton, MI and Davison, MI Weather - Mid Michigan Radar</title>
</head>
<body>
  . . . . . .

Right now there's a 34 minute gap between the 9th and 10th images. All other images are spaced roughly 5 minutes apart. A page refresh merely loads the latest image (the 10th) without cascading that change to the other images downstream.

I just cleared the browser cache and refreshed the browser, and the images are now properly spaced again. So it's still doing what it was doing before.

Any thoughts? I'd appreciate it.

Here's my radar page:

   http://www.wxbeacon.com/GRLevel3/beacon_radar.php

Thanks!

Kevin...

[saratogaWX]

Well shoot!  Try adding in the META tags in the <head> section of the calling page

Code: [Select]

<meta http-equiv="Refresh" content="300" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" /> and removing the blank line between the closing ?> and the <!DOCTYPE .. it's the only changes I can suggest (It's what I have on my pages and I don't have the issue).

Best regards,
Ken

[WeatherBeacon]

I'll give it a try.

As always, thanks TONS, Ken! I can't tell you enough how much I appreciate your generosity! You graciously offer your scripts (freely!) and graciously and patiently offer your time and assistance!

Thank you!!!!!!

Kevin...

[saratogaWX]

   Thanks Kevin!  You're very welcome!!

I've got one more trick to make sure the images aren't cached.. add a query string (that changes) to the URLs.  Browsers don't cache queries

Change in GR3-radar-inc.php

Code: [Select]

  $ttype = '.' . $GR3img;
  for ($i=$GR3cnt-1;$i >= 0;$i--) {
    print 'g_ImageTable[g_imax++] = new Array ("' . $tname . $i . $ttype . '", "");' . "\n";
  } to

Code: [Select]

  $ttype = '.' . $GR3img;
  $noCache = '?t=' . time();
  for ($i=$GR3cnt-1;$i >= 0;$i--) {
    print 'g_ImageTable[g_imax++] = new Array ("' . $tname . $i . $ttype . $noCache . '", "");' . "\n";
  }and it will put a ?t=nnnnnnnnnnnn timestamp on the images requested.  The nnnnnnnnn is the unix timestamp and guaranteed to change with each request.  That should bust the image cache on the browser for good

Best regards,
Ken