From 2ef74836bf82c6217de75b8f946077c82a828f85 Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Wed, 17 Dec 2014 16:11:37 -0800
Subject: [PATCH] SVG overlay demo

---
 test/demo/svg-overlay.html | 109 +++++++++++++++++++++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 test/demo/svg-overlay.html
diff --git a/test/demo/svg-overlay.html b/test/demo/svg-overlay.html
new file mode 100644
index 00000000..4b065554
--- /dev/null
+++ b/test/demo/svg-overlay.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OpenSeadragon SVG Overlay Demo</title>
+        <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
+        <script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
+        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+        <style type="text/css">
+
+            html,
+            body,
+            .openseadragon1 {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+            }
+
+            .svg-overlay {
+                left: 0;
+                position: absolute;
+                pointer-events: none;
+                top: 0;
+                width: 100%;
+                height: 100%;
+            }
+
+        </style>
+        <script>
+
+            // ----------
+            App = {
+                itemCount: 20,
+                positionRange: 100,
+                sizeRange: 30,
+                delay: 100,
+
+                // ----------
+                init: function() {
+                    var self = this;
+
+                    var tileSource = {
+                        Image: {
+                            xmlns: "http://schemas.microsoft.com/deepzoom/2008",
+                            Url: "http://openseadragon.github.io/example-images/highsmith/highsmith_files/",
+                            Format: "jpg",
+                            Overlap: "2",
+                            TileSize: "256",
+                            Size: {
+                                Height: "9221",
+                                Width:  "7026"
+                            }
+                        }
+                    };
+
+                    this.viewer = OpenSeadragon({
+                        id: "contentDiv",
+                        prefixUrl: "../../build/openseadragon/images/",
+                        tileSources: [{
+                            tileSource: tileSource,
+                            width: 2,
+                            y: 0.5,
+                            x: 0.5
+                        }],
+                        minZoomImageRatio: 0
+                    });
+
+                    this.viewer.addHandler("animation", function() {
+                        self.update();
+                    });
+
+                    this.viewer.addHandler('open', function() {
+                        var svg = d3.select(self.viewer.canvas).append("svg")
+                            .attr('class', 'svg-overlay')
+                            .attr("width", $(window).width())
+                            .attr("height", $(window).height());
+
+                        self.node = svg.append("g");
+
+                        self.node.append("rect")
+                            .style('fill', '#f00')
+                            .attr("x", 0.5)
+                            .attr("width", 0.25)
+                            .attr("y", 0.5)
+                            .attr("height", 0.25);
+
+                        self.update();
+                    });
+                },
+
+                // ----------
+                update: function() {
+                    var p = this.viewer.viewport.pixelFromPoint(new OpenSeadragon.Point(0, 0), true);
+                    var zoom = this.viewer.viewport.getZoom(true);
+                    var scale = $(window).width() * zoom;
+                    this.node.attr('transform', 'translate(' + p.x + ',' + p.y + ') scale(' + scale + ')');
+                }
+            };
+
+            // ----------
+            $(document).ready(function() {
+                App.init();
+            });
+
+        </script>
+    </head>
+    <body>
+        <div id="contentDiv" class="openseadragon1"></div>
+    </body>
+</html>
