Crossposted to the OL dev list. No luck over there.
I've been developing an application to do animation of Untiled layers,
but I'm running across a bit of a design issue.
Snippet #1 - The blinking animation
===================================
// on timestamp change event
var curLayer = objRef.oLlayers[layerName]
curLayer.mergeNewParams({"TIME":timestamp.firstChild.nodeValue});
The above calls mergeNewParams, which of course, destroys/erases the
image div, and then draws the new image with the new timestamp.
The problem is, when trying to animate, you get a pattern of:
Draw Frame 1 -> Erase Frame 1 -> Draw Frame 2.
The 'erase' step in between causes for some pretty awful flicker. So I
tried Snippet #2.
Snippet #2 - The memory leak
============================
var curLayer = objRef.oLlayers[layerName]
curLayer.tile = null;
curLayer.mergeNewParams({"TIME":timestamp.firstChild.nodeValue});
By setting the tile to null, it actually doesn't do destroy the image
div, it merely replaces the contents.
This yields:
Draw Frame 1 -> Draw Frame 2 -> Draw Frame X
This is, of course, the desired behavior, but it causes two problems:
A) Frame 1's DIV never gets destroyed/erased, causing a memory leak
B) When using transparent images, all are drawn on top of one another.
So, on to Snippet #3
==============================
/* This is Draw 1, Draw 2, Remove 1
curLayer.tile = null;
curLayer.mergeNewParams({"TIME":timestamp.firstChild.nodeValue});
var oldImageId = curLayer.tile.imgDiv.id;
var commandString = 'removeNode(\"' + oldImageId + '\")';
setTimeout(commandString, 1000);
function removeNode(oldImageId) {
var olddiv = document.getElementById(oldImageId);
var d = olddiv.parentNode;
var e = d.parentNode;
d.removeChild(olddiv);
e.removeChild(d);
}
So, here,
Draws Frame 1, Draws Frame 2, and then removeNode waits a second and
destroys Frame 1.
This solves Snippet 2, Issue A, but looks hideous for Issue B.
Basically, you can actually see Frame 1 being drawn on top of, and then
removed, which makes for an admittedly awful user experience, even with
only 5 ms of time-delay.
And, then, Snippet #4 - URL substitution
=====================
var oldImageUrl = curLayer.tile.imgDiv.src;
var newImageUrl = oldImageUrl;
newImageUrl = newImageUrl.replace(/TIME\=.*?\&/,'TIME=' +
timestamp.firstChild.nodeValue + '&');
curLayer.tile.imgDiv.src = newImageUrl;
Okay, so what we're doing here is direct regexp replacement of the URL.
This works, but with some issues.
A) It's somewhat slower than using mergeNewParams (cannot figure out
why)
B) I really don't like doing direct URL pattern substitution like this
(it strikes me as error-prone)
C) Is there a more 'OpenLayers-ish' way to do this?
So, can anyone suggest something that might be better than Snippet #4?
Thanks,
Matthew D. Diez
IEM CONFIDENTIAL INFORMATION PLEASE READ OUR NOTICE:
http://www.iem.com/e_mail_confidentiality_notice.html
Effective July 15, 2007 IEM Headquarters will have a new physical and mailing
address:
8550 United Plaza Blvd, Suite 501
Baton Rouge, LA 70809
If you should have any questions, please feel free to contact us at 225.952.8191
_______________________________________________
Dev mailing list
[EMAIL PROTECTED]
http://openlayers.org/mailman/listinfo/dev
-------------------------------------------------------------------------
This SF.net email is sponsored by: Splunk Inc.
Still grepping through log files to find problems? Stop.
Now Search log events and configuration files using AJAX and a browser.
Download your FREE copy of Splunk now >> http://get.splunk.com/
_______________________________________________
mapbuilder-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/mapbuilder-devel
