[OpenLayers-Commits] r10900 - in sandbox/bjornharrtell/posttransition: examples lib/OpenLayers/Tile

Tue Nov 16 13:49:27 EST 2010

Author: bjornharrtell
Date: 2010-11-16 10:49:27 -0800 (Tue, 16 Nov 2010)
New Revision: 10900

Added:
   sandbox/bjornharrtell/posttransition/examples/posttransition.html
Modified:
   sandbox/bjornharrtell/posttransition/lib/OpenLayers/Tile/Image.js
Log:
Hack post transition effect and add example

Added: sandbox/bjornharrtell/posttransition/examples/posttransition.html
===================================================================

--- sandbox/bjornharrtell/posttransition/examples/posttransition.html	                        (rev 0)
+++ sandbox/bjornharrtell/posttransition/examples/posttransition.html	2010-11-16 18:49:27 UTC (rev 10900)
@@ -0,0 +1,58 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>OpenLayers Transitions Example</title>
+    <link rel="stylesheet" href="style.css" type="text/css" />
+    <script src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        var map;
+        function init(){
+            map = new OpenLayers.Map('mapDiv', {maxResolution: 'auto'});
+
+            var single_default_effect = new OpenLayers.Layer.WMS(
+                "WMS untiled default", 
+                "http://vmap0.tiles.osgeo.org/wms/vmap0?",
+                {layers: 'basic'}, 
+                {singleTile: true}
+            );
+            var single_resize_effect = new OpenLayers.Layer.WMS(
+                "WMS untiled resize", 
+                "http://vmap0.tiles.osgeo.org/wms/vmap0?",
+                {layers: 'basic'}, 
+                {singleTile: true, transitionEffect: 'resize'}
+            );
+            var tiled_default_effect = new OpenLayers.Layer.WMS(
+                "WMS tiled default ", 
+                "http://vmap0.tiles.osgeo.org/wms/vmap0?",
+                {layers: 'basic'}
+            );
+            var tiled_resize_effect = new OpenLayers.Layer.WMS(
+                "WMS tiled resize", 
+                "http://vmap0.tiles.osgeo.org/wms/vmap0?",
+                {layers: 'basic'}, 
+                {transitionEffect: 'resize'}
+            );
+
+            map.addLayers([tiled_resize_effect]);
+            /*map.addLayers([single_default_effect, single_resize_effect,
+                           tiled_default_effect, tiled_resize_effect]);*/
+            //map.addControl(new OpenLayers.Control.LayerSwitcher());
+            map.setCenter(new OpenLayers.LonLat(6.5, 40.5), 4);
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">Post Transition Example</h1>
+    <div id="tags">
+        post transition
+    </div>    
+    <p id="shortdesc">
+        Demonstrates the use of post transition effect.
+    </p>
+    <div id="mapDiv" class="smallmap"></div>
+    <div id="docs">
+        This is an example showing a hacked post transition for tiled resize transition layers.
+        The effect is revealing loaded tiles with a fast fade in.
+    </div>
+  </body>
+  </body>
+</html>


Property changes on: sandbox/bjornharrtell/posttransition/examples/posttransition.html
___________________________________________________________________
Added: svn:mime-type
   + text/html
Added: svn:keywords
   + Id URL
Added: svn:eol-style
   + native

Modified: sandbox/bjornharrtell/posttransition/lib/OpenLayers/Tile/Image.js
===================================================================
--- sandbox/bjornharrtell/posttransition/lib/OpenLayers/Tile/Image.js	2010-11-16 17:31:10 UTC (rev 10899)
+++ sandbox/bjornharrtell/posttransition/lib/OpenLayers/Tile/Image.js	2010-11-16 18:49:27 UTC (rev 10900)
@@ -593,6 +593,20 @@
                 this.frame.scrollLeft = this.frame.scrollLeft; 
             } 
         }
+        
+        if (!this.isBackBuffer) {
+            this.opacity = 0.0;
+            this.frame.style.opacity = this.opacity;
+            var that = this;
+            var callback = function() {
+                that.opacity += 0.05;
+                that.frame.style.opacity = that.opacity;
+                if (that.opacity<1) {
+                    setTimeout(callback, 10);
+                }
+            };
+            setTimeout(callback, 10);
+        }
     },
     
     /** 

