From 53052c8c08eabaf73ac93a55771c593e9be8657e Mon Sep 17 00:00:00 2001
From: Alistair Buxton <a.j.buxton@gmail.com>
Date: Fri, 19 Mar 2021 15:45:21 +0000
Subject: [PATCH] Add flipping example

This isn't complete - the flip toggles do not work as setFlip() is
not implemented. The second image is currently always flipped.
---
 test/demo/flipping.html | 110 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 test/demo/flipping.html
diff --git a/test/demo/flipping.html b/test/demo/flipping.html
new file mode 100644
index 00000000..6d5f1469
--- /dev/null
+++ b/test/demo/flipping.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OpenSeadragon Flipping 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;
+                float: left;
+            }
+
+            .options {
+                margin: 0.5em;
+            }
+
+            .button {
+                margin: 0.3em;
+            }
+
+
+
+        </style>
+    </head>
+    <body>
+    <div>
+        Simple demo page to show image flipping.
+    </div>
+    <div id="contentDiv" class="openseadragon1">
+
+
+    </div>
+    <div class="options">
+        First
+        <div class="button">
+            <input type="checkbox" id="ffirst" onchange="flip(0, this.checked)">
+            <label for="ffirst">Flip (Not Implemented Yet)</label>
+        </div>
+        <div class="button">
+            <input type="checkbox" id="rfirst" onchange="rotate(0, this.checked * 45)">
+            <label for="rfirst">Rotate</label>
+        </div>
+    </div>
+
+    <div class="options">
+        Second
+        <div class="button">
+            <input type="checkbox" id="fsecond" onchange="flip(1, this.checked)" checked>
+            <label for="fsecond">Flip (Not Implemented Yet)</label>
+        </div>
+        <div class="button">
+            <input type="checkbox" id="rsecond" onchange="rotate(1, this.checked * 45)">
+            <label for="rsecond">Rotate</label>
+        </div>
+    </div>
+
+    <div class="options">
+        <div class="button">
+            <input type="checkbox" id="fview" onchange="flipViewport(this.checked)">
+            <label for="fview">Flip Viewport</label>
+        </div>
+
+        <div class="button">
+            <input type="checkbox" id="debug" onchange="debug(this.checked)">
+            <label for="debug">Debug Mode</label>
+        </div>
+    </div>
+    <script type="text/javascript">
+
+        var viewer = OpenSeadragon({
+            // debugMode: true,
+            id: "contentDiv",
+            prefixUrl: "../../build/openseadragon/images/",
+            showNavigator:true
+        });
+
+        var first = viewer.addTiledImage({
+            tileSource: "../data/testpattern.dzi",
+            x: 0,
+            y: 0,
+        });
+
+        var second = viewer.addTiledImage({
+            tileSource: "../data/testpattern.dzi",
+            x: 1,
+            y: 0,
+            flipped: true,
+        });
+
+        function debug(v) {
+            viewer.setDebugMode(v);
+        }
+
+        function flip(n, v) {
+            viewer.world.getItemAt(n).setFlip(v);
+        }
+
+        function rotate(n, v) {
+            viewer.world.getItemAt(n).setRotation(v);
+        }
+
+        function flipViewport(v) {
+            viewer.viewport.setFlip(v);
+        }
+
+    </script>
+    </body>
+</html>
