Online Image Slideshow using PHP, GD, XML, and Javascript

Question

Hi,

I wrote some code to automatically track many objects through an 1000+ frame image sequence. The object boundaries and centers are outputted in xml by my algorithm. I am making a website to show off my results and I would like to have a navigable slideshow with the normal play, pause, forward, rewind features. I currently have a php-javascript circular frame queue set up. It works by having 10 frames contain images 1-10, then when the user wants to see images 2, change the view and load image 11 into frame 1 and so on. This circular queue style works well for normal scrolling, but I would like to change the image every 100 ms and it bogs down. Is there a better way to do this on this side?

My main source of slowdown is that my images are dynamically plotted in GD from an xml file containing a large number of data points. I am using file_get_contents and the simpleXMLELement functions to get the data into arrays and then plotting them on an image using imagepolygon. Is there a better way of doing this?

Each image is about 1400 by 900 and has anywhere from 30-500 objects in it depending on how far into the sequence it is. I have tried storing physically plotted images but since users need to be able to isolate objects 1-10 or 3,7,8-11 this is not possible due to the number of permutations.

Any input would be appreciated!

-Mike

Answer 1

I'm going to throw out a couple of brainstorming type ideas:

1. Draw the object boundaries as relatively positioned divs with height and width set. This way, you don't have to generate images for each possible combination. Object tracking can be turned on for any given object on the fly on the page. Downside is that slower clients could render 500 divs slowly.

2. Another way to reduce the need to render on the fly - render (once) all tracking frames for each object as the polygon on a transparent background (PNG or GIF). When the frame is viewed, layer all appropriate object tracking frames over the background layer. No rendering problem, just a load delay while the client loads 500 images.

3. Instead of parsing the XML file each time, create a PHP array with all the data points in an include file.

4. Get a faster processor and a lot of RAM for your server.

Like I said - random ideas. Maybe they get you thinking, maybe they were just fun for me to think about. Good luck.