Page 1 of 1

Displaying dynamically created png images as an animation

Posted: Wed Feb 02, 2005 7:40 am
by NCAnnie
I have 8 buttons (with images) on a page generated by a php script. The buttons control an animation of 24 images dynamically created on the server and downloaded using another php script, invoked 24 times. The first time the display page is called, the window status bar shows '8 items remaining' and the animation and buttons are blank until the 24 animation images are loaded. The button images then appear and the animation starts. This is what I want.

The problem is that when I go to this page again, for new images, the button images appear immediately, the status bar this time shows '24 items remaining'. Now, the downloading is frequently BUT NOT ALWAYS! unsuccessful on one or more of the images. So my animation shows blanks. The problem is solved on refreshing the page, and if I clear the cached button images. I have sent session_cache_limiter('no-cache') in an effort to get back to the first visit state, but it makes no difference. The images always appear in the temp files, and I may or may not get blanks in the animation. the buttons have .png static images. The animation are .png created dynamically.

Problem is very frequent in IE6+XP, also seen in IE6+W2K, but I don't remember it with IE5.5
It seems to be an IE threading problem???

Posted: Wed Feb 02, 2005 11:35 am
by Jerryscript1
Sounds more like a cache issue, regardless of the cache_limiter statement. Another method to prevent images with the same URL from being cached is to add a query string with either a random number or a time-stamp. This causes the browser to treat each call to the image as unique.

Code: Select all

$revitalizer=rand();
print "<img src='IMAGE_URL?$revitalizer'<";

Posted: Thu Feb 03, 2005 4:04 am
by NCAnnie
That did help a bit, thanks! it gets me back to the initial state each time, and my downloads are successful on XP SP1+IE6. I hoped this would solve the problem, even though I didn't understand why, but it seems just to slow the download down enough to handle the animation images. On another machine (XP SP2 IE6) the problem remains.
The images are being corrupted during the download I now believe, as sometimes status bar shows 'Done' but images are still missing.
I have never seen the problem on W2K, (where I did the development!)

I use a display page (animateweather.php), a javascript page (animate.js)to load the animation, and animateimage.php to do the socket stuff. Here is the code

Code: Select all

//animate.js
window.onerror = doNothing;
function doNothing()&#123;
return true;
&#125;
//I found this on some forum, can't remember why it was important!

preloader();

var maps =
&#1111;
    preLoad("/tc_animateimage.php?hour=0"),
    preLoad("/tc_animateimage.php?hour=1"),
    preLoad("/tc_animateimage.php?hour=2"),
    preLoad("/tc_animateimage.php?hour=3"),
    preLoad("/tc_animateimage.php?hour=4"),

...
    preLoad("/tc_animateimage.php?hour=23")
]
var begin = true;

var messages = new Array("Loading : Please Wait",
                         "Loading : Please Wait.",
                         "Loading : Please Wait..",
                         "Loading : Please Wait...",
                         "Loading : Please Wait....",
                         "Loading : Please Wait...",
                         "Loading : Please Wait..",
                         "Loading : Please Wait.");

var counter = 0;
var homer;

function preloader()&#123;
  if(begin==true)
    document.getElementById("msgholder").innerHTML = "<font color="red">"+messages&#1111;counter]+"</font>";
  counter++;
  if(counter==8)&#123;
  counter = 0;
  &#125;homer = setTimeout("preloader()",200);
&#125;

function preLoad(src,width,height)
&#123;
    var temp = new Image(width,height);
    temp.src = src ;
    return temp;
&#125;

window.onload = function()
&#123;
    var cont = document.getElementById("container");
    for(var k=0;k<maps.length;k++) &#123;
        cont.appendChild(maps&#1111;k]);
    &#125;
    document.getElementById("msgholder").visibility = "hidden";
    animate(maps);
&#125;

etc etc.
//animate maps just shows them one by one using the visibility property.//
//end animate.js
animateimage.php does the work of getting the image from the server:

Code: Select all

<?php

session_start();
include ('tc_utilities.php');

$timeoffset = (isset($_GET&#1111;'hour']))? $_GET&#1111;'hour'] : '0';
//$downloadXML retrieved from $_SESSION
...
$_PORT = $port;
$_ADDRESS = $serveraddress;


$Headers = Protocol and server stuff
$Headers .= "Content-Length: ".strlen ($downloadXML).chr(13).chr(10).chr(13).chr(10);
$SendStr = $Headers.$downloadXML;

error_reporting (E_ALL);

/* Get the port for the WWW service. */
$service_port = $_PORT; //getservbyname ('www', 'tcp');

/* Get the IP address for the target host. */
$address = gethostbyname ($_ADDRESS);

/* Create a TCP/IP socket. */
$socket = socket_create (AF_INET, SOCK_STREAM, 0);
if ($socket < 0) &#123;
    //echo "socket_create() failed: reason: " . socket_strerror ($socket) . "<BR>";
&#125; else &#123;
    //echo "create OK<BR>";
&#125;

$result = socket_connect ($socket, $address, $service_port);
if ($result < 0) &#123;
    //echo "socket_connect() failed.\nReason: ($result) " . socket_strerror($result) . "<BR>";
&#125; else &#123;
    //echo "connect OK<BR>";
&#125;

$result = socket_write ($socket, $SendStr, strlen ($SendStr));
if ($result < 0) &#123;
    //echo "socket_write() failed.\nReason: ($result) " . socket_strerror($result) . "<BR>";
&#125; else &#123;
    $pngstr = '';
    while ($out = socket_read ($socket, 2048)) &#123;
      $pngstr .= $out;
    &#125;
&#125;


header("Content-Type: image/png".chr(13).chr(10));
header("Content-Length: ".strlen($pngstr).chr(13).chr(10).chr(13).chr(10));
echo $pngstr;

socket_close ($socket);
exit();
?>
I am not sure about the header() function. seems there are an infinity of things I could throw in there!
Any help gratefully received!