Debug script for SVG inclusion

Cf. #13
faustedition · Aug 30, 2016 · 7df2e8c · 7df2e8c
1 parent 15b12d5
commit 7df2e8c
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 2 deletions.
diff --git a/pom.xml b/pom.xml
@@ -312,7 +312,7 @@
 						<directory>svg_rendering/page</directory>
 						<targetPath>${project.build.directory}/www</targetPath>
 						<includes>
-							<include>debug.html</include>
+							<include>debug*.html</include>
 							<include>js-gen/**</include>
 						</includes>
 					</resource>

diff --git a/src/main/web b/src/main/web
diff --git a/svg_rendering/page/debug.html b/svg_rendering/page/debug.html
@@ -56,6 +56,19 @@ <h1>Transcript Generation Debugging</h1>
 
     </section>
 
+    <footer class="pure-noprint pure-right">
+      <div class="pure-g-r">
+        <div class="pure-u-1-2">
+          <a id="documentViewer">Edition</a>
+          <a id="debug2">Einbindung debuggen</a>
+        </div>
+      </div>
+    </footer>
+    <script type="text/javascript">
+      document.getElementById("documentViewer").href = 'documentViewer' + window.location.search;
+      document.getElementById("debug2").href = 'debug2' + window.location.search;
+    </script>
+
     <script type="text/javascript">
       var parseQueryString = function( queryString ) {
         var params = {}, queries, temp, i, l;

diff --git a/svg_rendering/page/debug2.html b/svg_rendering/page/debug2.html
@@ -0,0 +1,86 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <link rel="stylesheet" href="css/webfonts.css">
+    <link rel="stylesheet" href="css/document-text.css">
+    <link rel="stylesheet" href="css/document-transcript.css">
+    <link rel="stylesheet" href="css/document-transcript-highlight-hands.css">
+    <link rel="stylesheet" href="css/document-transcript-interaction.css">
+    <link rel="stylesheet" href="css/pure-custom.css">
+    <link rel="stylesheet" href="css/basic_layout.css">
+
+    <script type="text/javascript" src="./js/faust_common.js"></script>
+
+    <style>
+      *, *:before, *:after {
+        -webkit-box-sizing: border-box;
+           -moz-box-sizing: border-box;
+                box-sizing: border-box;
+      }
+
+      html, body {
+        height: 100%;
+        margin: 0px 0px 0px 0px;
+        padding: 5px;
+        /* background-color: lightgray; */
+      }
+
+      /*
+      #container {
+        border: 1px solid black;
+        background-color: white;
+      }
+      */
+
+    </style>
+  </head>
+  <body>
+    <div id="container">
+    </div>
+    <section id="debughelp">
+      <h1>Transcript Generation Debugging</h1>
+      <p>This page helps in debugging the <strong>inclusion</strong> of the transcript generation. Just replace the <code>documentViewer</code> URL with the one to this HTML, retaining at least the faustUri and page parameters, and use the developer tools (F12).</p>
+      <p>Note this will work (1) only if served by a server and (2) only when the svg files are there, i.e. generation has run at least once.</p>
+    </section>
+
+    <footer class="pure-noprint pure-right">
+      <div class="pure-g-r">
+        <div class="pure-u-1-2">
+          <a id="documentViewer">Edition</a>
+          <a id="debug">Generierung debuggen</a>
+        </div>
+      </div>
+    </footer>
+    <script type="text/javascript">
+      document.getElementById("documentViewer").href = 'documentViewer' + window.location.search;
+      document.getElementById("debug").href = 'debug' + window.location.search;
+    </script>
+
+    <script type="text/javascript">
+      var parseQueryString = function( queryString ) {
+        var params = {}, queries, temp, i, l;
+
+        // Split into key/value pairs
+        queries = queryString.split("&");
+
+        // Convert the array of strings into an object
+        for ( i = 0, l = queries.length; i < l; i++ ) {
+          temp = queries[i].split('=');
+          params[temp[0]] = temp[1];
+        }
+
+        return params;
+      };
+      var params = parseQueryString(window.location.search.substring(1));
+      console.log(params);
+      var svg = params.faustUri.replace(/^faust:\/\/xml\/document/, 'transcript/diplomatic') + '/page_' + params.page + '.svg';
+      console.log(svg);
+      var help = document.getElementById("debughelp");
+      help.parentNode.removeChild(help);
+      Faust.xhr.getResponseText(svg, function(data) {
+        document.getElementById("container").innerHTML = data;
+      });
+    </script>
+  </body>
+</html>