adding demo to show benefit of fitBoundsWithConstraints

2024-11-22 13:16:10 +03:00 · 2014-06-20 16:18:04 -07:00 · 2014-06-20 16:18:04 -07:00 · e7d8cff109
commit e7d8cff109
parent e67f6b4003
1 changed files with 113 additions and 0 deletions
--- a/test/demo/fitBounds.html
+++ b/test/demo/fitBounds.html
@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>OpenSeadragon Memory Check Demo</title>
+    <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
+    <style type="text/css">
+
+      .openseadragon1 {
+          width: 800px;
+          height: 600px;
+      }
+
+      #highlights li {
+        cursor: pointer;
+      }
+      
+    </style>
+</head>
+<body>
+    <div>
+        Simple demo page to show 'viewport.fitBounds().applyConstraints()' issue.
+    </div>
+
+    <div id="contentDiv" class="openseadragon1"></div>
+    <div id="highlights"></div>
+    
+    <select onchange="changeMethod(this.value);">
+        <option value=0>viewport.fitBoundsWithConstraints(bounds);</option>
+        <option value=1>viewport.fitBounds(bounds);</option>
+        <option value=2>viewport.fitBounds(bounds).applyConstraints();</option>
+    </select>
+    <input type="button" value="Go home" onclick="goHome()"/>
+    
+    <script type="text/javascript">
+
+        var _viewer;
+        var _fittingMethod = 0;
+        
+        var _highlights = [
+            {"queryPoint":[0.13789887359998443,0.43710575899579285], "radius":0.004479581945070337,"text":"Pipe"},
+            {"queryPoint":[0.5923298766583593,0.6461653354541856],   "radius":0.013175241014912752,"text":"Fuel here"},
+            {"queryPoint":[0.43920338711232304,0.7483181389302148],  "radius":0.09222668710438928, "text":"Wheel"},
+            {"queryPoint":[0.07341677959486298,0.9028719921872319],  "radius":0.08996845561083797, "text":"Nothing special"}
+        ];        
+        
+        var generateUniqueHash = (function() {
+            var counter = 0;
+            return function() {
+                return "openseadragon_" + (counter++);
+            };
+        })();
+                    
+        var _viewer = OpenSeadragon({
+            element: document.getElementById("contentDiv"),
+            showNavigationControl: false,
+            prefixUrl: "../../build/openseadragon/images/",
+            hash: generateUniqueHash(), //this is only needed if you want to instantiate more than one viewer at a time.
+            tileSources: {
+                Image: {
+                    xmlns:    "http://schemas.microsoft.com/deepzoom/2008",
+                    Url:      'http://cdn.photosynth.net/ps2/19d5cf2b-77ed-439f-ac21-d3046320384c/packet/undistorted/img0043/',
+                    Format:   "jpg", 
+                    Overlap:  1, 
+                    TileSize: 510,
+                    Size: {
+                        Width:  4592,
+                        Height: 3448
+                    }
+                }
+            }
+        });
+        _viewer.addHandler("open", function() {
+            var str = "<ul>";
+            for (var i=0; i<_highlights.length; ++i) {
+                var highlight = _highlights[i];
+                str += "<li onclick='gotoHighlight("+i+")'>"+highlight.text+"</li>";
+            }
+            str += "</ul>";
+            document.getElementById("highlights").innerHTML = str;
+        });
+        
+        function gotoHighlight(index) {
+            var highlight = _highlights[index];
+            
+            var viewport = _viewer.viewport;
+            var contentSize = viewport.contentSize;
+            var scaling = 1.0 / viewport.viewportToImageZoom(viewport.getZoom());
+            var radius  = highlight.radius*Math.min(contentSize.x, contentSize.y);/*annotation.accurateRadius*scaling;*/
+            var center      = new OpenSeadragon.Point(contentSize.x*highlight.queryPoint[0], contentSize.y*highlight.queryPoint[1]);            
+            var bounds = viewport.imageToViewportRectangle(new OpenSeadragon.Rect(center.x-radius, center.y-radius, radius*2, radius*2));
+                        
+            if (_fittingMethod === 0) {
+                viewport.fitBoundsWithConstraints(bounds, false);
+            }
+            else if (_fittingMethod === 1) {
+                viewport.fitBounds(bounds, false);
+            }
+            else if (_fittingMethod === 2) {
+                viewport.fitBounds(bounds, false).applyConstraints();
+            }           
+        }
+        
+        function changeMethod(value) {
+            _fittingMethod = parseInt(value, 10);
+        }
+        
+        function goHome() {
+            _viewer.viewport.goHome();
+        }
+
+    </script>
+</body>
+</html>