openseadragon/test/demo/overlay.html

<html>
    <title>OpenSeadragon 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>
    <style type="text/css">

        .openseadragon1 {
            width: 800px;
            height: 600px;
        }

    </style>
</head>
<body>
    <div id="contentDiv" class="openseadragon1"></div>
    <div id="annotation-div">
        <input type="button" value="Hide Overlays" id="hideOverlays">
        <input type="button" value="Rotate" id="rotate">
        <span id="degrees">0deg</span>
    </div>

    <script type="text/javascript">

        var viewer = OpenSeadragon({
            id: "contentDiv",
            prefixUrl: "../../build/openseadragon/images/",
            tileSources: "../data/testpattern.dzi",
            minZoomImageRatio: 0,
            maxZoomPixelRatio: 10,
            overlayPreserveContentDirection: true  // Change this to false to test overlay content flipping
        });

        viewer.addHandler("open", function(event) {
            var elt = document.createElement("div");
            elt.className = "runtime-overlay";
            elt.style.background = "green";
            elt.style.outline = "3px solid red";
            elt.style.opacity = "0.7";
            elt.textContent = "Scaled overlay";
            viewer.addOverlay({
                element: elt,
                location: new OpenSeadragon.Rect(0.21, 0.21, 0.099, 0.099),
                rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
            });

            // test with image of letter B to see that images flip too
            elt = document.createElement("div");
            elt.className = "runtime-overlay";
            elt.style.outline = "1px solid blue";
            elt.style.height = "100px";
            elt.innerHTML = "<div><img src='../data/BBlue.png' width='100%' height='100%'/></div>"
            viewer.addOverlay({
                element: elt,
                location: new OpenSeadragon.Point(0.0, 0.0),
                width: 0.1,
                height: 0.1
            });

            elt = document.createElement("div");
            elt.className = "runtime-overlay";
            elt.style.background = "white";
            elt.style.outline = "3px solid red";
            elt.style.width = "100px";
            elt.textContent = "Scaled vertically";
            viewer.addOverlay({
                element: elt,
                location: new OpenSeadragon.Point(0.6, 0.6),
                height: 0.1,
                placement: OpenSeadragon.Placement.TOP_LEFT,
                rotationMode: OpenSeadragon.OverlayRotationMode.NO_ROTATION
            });

            elt = document.createElement("div");
            elt.className = "runtime-overlay";
            elt.style.background = "white";
            elt.style.opacity = "0.5";
            elt.style.outline = "1px solid blue";
            elt.style.height = "100px";
            elt.textContent = "Scaled horizontally";
            viewer.addOverlay({
                element: elt,
                location: new OpenSeadragon.Point(0.1, 0.5),
                width: 0.1
            });

            elt = document.createElement("div");
            elt.className = "runtime-overlay";
            elt.style.background = "white";
            elt.style.opacity = "0.5";
            elt.style.outline = "5px solid pink";
            elt.style.width = "100px";
            elt.style.height = "100px";
            elt.textContent = "Not scaled, centered in the middle";
            viewer.addOverlay({
                element: elt,
                location: new OpenSeadragon.Point(0.5, 0.5),
                placement: OpenSeadragon.Placement.CENTER,
                checkResize: false,
                rotationMode: OpenSeadragon.OverlayRotationMode.EXACT
            });

        });
        $("#hideOverlays").click(function(){
            $(".runtime-overlay").toggle();
        });
        $("#rotate").click(function() {
            viewer.viewport.setRotation(viewer.viewport.getRotation() + 22.5);
            $("#degrees").text(viewer.viewport.getRotation() + "deg");
        });

    </script>
</body>
</html>
Create demo for creating an overlay 2015-06-24 01:02:46 +03:00			`<html>`
Fixing white space 2016-01-07 04:25:58 +03:00			`<title>OpenSeadragon 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>`
			`<style type="text/css">`

			`.openseadragon1 {`
			`width: 800px;`
			`height: 600px;`
			`}`

			`</style>`
Create demo for creating an overlay 2015-06-24 01:02:46 +03:00			`</head>`
			`<body>`
Fixing white space 2016-01-07 04:25:58 +03:00			`<div id="contentDiv" class="openseadragon1"></div>`
			`<div id="annotation-div">`
Add scaleWidth and scaleHeight options to overlays. 2016-03-25 23:49:58 +03:00			`<input type="button" value="Hide Overlays" id="hideOverlays">`
Change overlays to now always having Point location. 2016-03-30 22:12:50 +03:00			`<input type="button" value="Rotate" id="rotate">`
			`<span id="degrees">0deg</span>`
Fixing white space 2016-01-07 04:25:58 +03:00			`</div>`

Create demo for creating an overlay 2015-06-24 01:02:46 +03:00			`<script type="text/javascript">`
Fixing white space 2016-01-07 04:25:58 +03:00
			`var viewer = OpenSeadragon({`
			`id: "contentDiv",`
			`prefixUrl: "../../build/openseadragon/images/",`
Add scaleWidth and scaleHeight options to overlays. 2016-03-25 23:49:58 +03:00			`tileSources: "../data/testpattern.dzi",`
			`minZoomImageRatio: 0,`
Fixed: Outer div added to element to allow independent flipping An outer div has been added to the internal HTML of the overlay element to allow for independent flipping of the content. Flipping will invert the `scaleX` value of the transform property for the style of the element. By setting the value `overlayContentFlipped: true` in the OSD config we can flip the content in the opposite direction to the overlay, but by setting this to false we can flip the content along with the overlay. This allows for some people who are using images in their overlay to flip the images along with the overlay. 2024-07-12 00:08:37 +03:00			`maxZoomPixelRatio: 10,`
Changelog for #2546 2024-07-16 19:36:24 +03:00			`overlayPreserveContentDirection: true // Change this to false to test overlay content flipping`
Fixing white space 2016-01-07 04:25:58 +03:00			`});`

			`viewer.addHandler("open", function(event) {`
			`var elt = document.createElement("div");`
Add scaleWidth and scaleHeight options to overlays. 2016-03-25 23:49:58 +03:00			`elt.className = "runtime-overlay";`
Fixing white space 2016-01-07 04:25:58 +03:00			`elt.style.background = "green";`
Change overlays to now always having Point location. 2016-03-30 22:12:50 +03:00			`elt.style.outline = "3px solid red";`
			`elt.style.opacity = "0.7";`
Add scaleWidth and scaleHeight options to overlays. 2016-03-25 23:49:58 +03:00			`elt.textContent = "Scaled overlay";`
Change overlays to now always having Point location. 2016-03-30 22:12:50 +03:00			`viewer.addOverlay({`
			`element: elt,`
			`location: new OpenSeadragon.Rect(0.21, 0.21, 0.099, 0.099),`
Use outline instead of border in overlay demo. 2016-04-01 16:19:40 +03:00			`rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX`
Change overlays to now always having Point location. 2016-03-30 22:12:50 +03:00			`});`
Add scaleWidth and scaleHeight options to overlays. 2016-03-25 23:49:58 +03:00
Fixed: Outer div added to element to allow independent flipping An outer div has been added to the internal HTML of the overlay element to allow for independent flipping of the content. Flipping will invert the `scaleX` value of the transform property for the style of the element. By setting the value `overlayContentFlipped: true` in the OSD config we can flip the content in the opposite direction to the overlay, but by setting this to false we can flip the content along with the overlay. This allows for some people who are using images in their overlay to flip the images along with the overlay. 2024-07-12 00:08:37 +03:00			`// test with image of letter B to see that images flip too`
			`elt = document.createElement("div");`
			`elt.className = "runtime-overlay";`
			`elt.style.outline = "1px solid blue";`
			`elt.style.height = "100px";`
			`elt.innerHTML = "<div><img src='../data/BBlue.png' width='100%' height='100%'/></div>"`
			`viewer.addOverlay({`
			`element: elt,`
			`location: new OpenSeadragon.Point(0.0, 0.0),`
			`width: 0.1,`
			`height: 0.1`
			`});`

Add scaleWidth and scaleHeight options to overlays. 2016-03-25 23:49:58 +03:00			`elt = document.createElement("div");`
			`elt.className = "runtime-overlay";`
			`elt.style.background = "white";`
Use outline instead of border in overlay demo. 2016-04-01 16:19:40 +03:00			`elt.style.outline = "3px solid red";`
Add scaleWidth and scaleHeight options to overlays. 2016-03-25 23:49:58 +03:00			`elt.style.width = "100px";`
			`elt.textContent = "Scaled vertically";`
			`viewer.addOverlay({`
			`element: elt,`
Change overlays to now always having Point location. 2016-03-30 22:12:50 +03:00			`location: new OpenSeadragon.Point(0.6, 0.6),`
			`height: 0.1,`
Use outline instead of border in overlay demo. 2016-04-01 16:19:40 +03:00			`placement: OpenSeadragon.Placement.TOP_LEFT,`
			`rotationMode: OpenSeadragon.OverlayRotationMode.NO_ROTATION`
Add scaleWidth and scaleHeight options to overlays. 2016-03-25 23:49:58 +03:00			`});`

			`elt = document.createElement("div");`
			`elt.className = "runtime-overlay";`
			`elt.style.background = "white";`
			`elt.style.opacity = "0.5";`
Use outline instead of border in overlay demo. 2016-04-01 16:19:40 +03:00			`elt.style.outline = "1px solid blue";`
Add scaleWidth and scaleHeight options to overlays. 2016-03-25 23:49:58 +03:00			`elt.style.height = "100px";`
			`elt.textContent = "Scaled horizontally";`
			`viewer.addOverlay({`
			`element: elt,`
Change overlays to now always having Point location. 2016-03-30 22:12:50 +03:00			`location: new OpenSeadragon.Point(0.1, 0.5),`
Use outline instead of border in overlay demo. 2016-04-01 16:19:40 +03:00			`width: 0.1`
Add scaleWidth and scaleHeight options to overlays. 2016-03-25 23:49:58 +03:00			`});`
Fixing white space 2016-01-07 04:25:58 +03:00
Add scaleWidth and scaleHeight options to overlays. 2016-03-25 23:49:58 +03:00			`elt = document.createElement("div");`
			`elt.className = "runtime-overlay";`
			`elt.style.background = "white";`
			`elt.style.opacity = "0.5";`
Use outline instead of border in overlay demo. 2016-04-01 16:19:40 +03:00			`elt.style.outline = "5px solid pink";`
Add scaleWidth and scaleHeight options to overlays. 2016-03-25 23:49:58 +03:00			`elt.style.width = "100px";`
			`elt.style.height = "100px";`
			`elt.textContent = "Not scaled, centered in the middle";`
			`viewer.addOverlay({`
			`element: elt,`
			`location: new OpenSeadragon.Point(0.5, 0.5),`
Change overlays to now always having Point location. 2016-03-30 22:12:50 +03:00			`placement: OpenSeadragon.Placement.CENTER,`
Use outline instead of border in overlay demo. 2016-04-01 16:19:40 +03:00			`checkResize: false,`
			`rotationMode: OpenSeadragon.OverlayRotationMode.EXACT`
Add scaleWidth and scaleHeight options to overlays. 2016-03-25 23:49:58 +03:00			`});`

			`});`
			`$("#hideOverlays").click(function(){`
			`$(".runtime-overlay").toggle();`
Fixing white space 2016-01-07 04:25:58 +03:00			`});`
Change overlays to now always having Point location. 2016-03-30 22:12:50 +03:00			`$("#rotate").click(function() {`
			`viewer.viewport.setRotation(viewer.viewport.getRotation() + 22.5);`
			`$("#degrees").text(viewer.viewport.getRotation() + "deg");`
			`});`
Fixing white space 2016-01-07 04:25:58 +03:00
Create demo for creating an overlay 2015-06-24 01:02:46 +03:00			`</script>`
			`</body>`
revert debugging changes in overlay demo 2023-03-06 00:12:30 +03:00			`</html>`