Displaying a loop of generated images

[ExpertAlmost]

Good morning!

I have some simple test code (below) that generates a random image of 100x100 pixels. I have a loop to generate a new image 25 times. I want to see each of those 25 runs. But this code only shows what may be the last image. What did I do wrong?

How can I automatically update newly generated images in PHP?

Thank you for your expertise!

<?php
header ("Content-type: image/png");
$ImageSize = 100;
$Img = imagecreatetruecolor($ImageSize, $ImageSize);
for ($Runs = 0; $Runs < 25; $Runs++) {
   for ($XVal = 0; $XVal < $ImageSize; $XVal++) {
      for ($YVal = 0; $YVal < $ImageSize; $YVal++) {
         $RedVal = rand(0, 255); $GreenVal = rand(0, 255); $BlueVal = rand(0, 255); 
         $PixelClr = imagecolorallocate($Img, $RedVal, $GreenVal, $BlueVal);
         imagesetpixel($Img, $XVal, $YVal, $PixelClr);
         imagecolordeallocate($Img, $PixelClr);
         }
      }
      imagepng($Img);
      imagedestroy($Img);
}
?>

[Weedpacket]

You can only return one image per response. What's the browser supposed to do with twenty five image streams when it only asks for one?

If you want to see them all at once you could create a new large image and copy all the generated images into it.

Or you could do something with saving them and linking to them.

Or, since these images are all just uniformly random, just generate and display one image at a time because the end result would look the same anyway.

[ExpertAlmost]

Thank you for the kindness of your reply Weedpacket!

Perhaps a more detailed description of what I am trying to do is in order. Rather than show 25 images (in a row or column formation), or one big composite image containing the 25 images -- I want to see in one location on one page, a graphic changing 25 times, once for each iteration of generation. Perhaps thinking of it as an animation makes more sense? If the loop is too fast, I can always put in a delay.

Perhaps it is impossible to do this in PHP and all I can do is 25 images in a line?

Thanks again to all of you ExpertsAlready for your help!

[johanafm]

Use the javascript function window.setTimeout. Assign a function that changes the src value of one single image element.

If you need to create the images on the fly, then just set the src to a php script which serves up ONE image, for the reason stated by Weedpacket. The one image returned by the script can very well change with the query string passed along to the image src.

[ExpertAlmost]

Thank you Johanafm for your reply.

By suggesting a javascript solution, you are saying that it is NOT possible in PHP?

As to the second paragraph, I have done almost nothing in HTLM, just some PHP. Does that include a java solution? If not, could I impose upon you to send me a code snippet for the HTLM and links to PHP?

Thanks!

[Weedpacket]

First, it's HTML, not HTLM; second, it's JavaScript, not Java. Third,

<img src="http://www.example.com/randomimage.php" height="100" width="100"/>

will give you one image; fourth, yes it has to be done in JavaScript because it's something you want the client (the browser) to do and PHP runs on the [man]server[/man].

[johanafm]

First off, I said to use setTimeout before, and while it can be handle by that, what you want is setInterval.

Generally, you run php scripts either through CLI (command line interface) from which any output to screen is text, or through a browser by sending a request to a web server, from which the type of output may vary, so an image is just one of many possibilities.

The way a browser handles images is they either
1. Get an image resource directly in the adressabar (e.g. somplace/someimage.jpg), and it reasonably expects to get just one image.
Or
2. It reads (X)HTML, finds an <img src="someplace/someimage.jpg"> element, then sends a new get request to the webserver for this image (just as it would have done in the first case), and reasonably still expects one image.

Best stop for javascript documentation in my opinion.
All things (X)HTML, CSS etc

Add an id attribute to your img element, and starting inside the head element:

<script type="application/javascript">
function setSrc() {
	var d = document;
	var t = new Date();
	t = t.valueOf();
	var i = d.getElementById('yourImageId');
	i.src = 'http://www.example.com/randomimage.php?t';
}
</script>
</head>
<body onload="window.setInterval('setSrc();', 1000);">

[ExpertAlmost]

Thank you Johanafm! That is very helpful. I will look into the SetInterval and the javascript resources your recommend.

Gratefully,
EA