[js/doc] Add display using a browser and documentation

1ef860a0 · Olivier Stasse · 483a2b9b · 1ef860a0 · 1ef860a0
Commit 1ef860a0 authored 5 years ago by Olivier Stasse
--- a/doc/additionalDoc/writeGraph.h
+++ b/doc/additionalDoc/writeGraph.h
@@ -19,4 +19,8 @@ dot -Tpdf /tmp/my_dynamic_graph.dot > /tmp/my_dynamic_graph.pdf
 It provides the following output:
 \image html my_dynamic_graph.png

+\section fromdottojs Viewing in a browser
+To view the dot file you can simply use the view_sot_dg.html file.
+Click on the "Choose File" to specify the filem and click on "Rendering" to display the graph.
+
 */
--- a/js/view_sot_dg.html
+++ b/js/view_sot_dg.html
+<html>
+
+<body>
+   <script src="https://github.com/mdaines/viz.js/releases/download/v2.1.2/viz.js"></script>
+   <script src="https://github.com/mdaines/viz.js/releases/download/v2.1.2/full.render.js"></script>
+   <script>
+     function renderDOTFile() {
+       var fileInputElement = document.getElementById("fileInputElement");
+     
+       var reader = new FileReader();
+       var graphtextres = ""
+       reader.onloadend = function(e) {
+          graphtextres = e.target.result
+          var viz = new Viz();
+
+          viz.renderSVGElement(graphtextres)
+          .then(function(element) {
+
+            elementToRemove=document.getElementById("displaysvgzone")
+            if (elementToRemove != null)
+            {
+             document.body.removeChild(elementToRemove)
+            }
+            document.body.appendChild(element)
+            element.id="displaysvgzone"
+         })
+         .catch(error => {
+          // Create a new Viz instance (@see Caveats page for more info)
+          viz = new Viz();
+     
+          // Possibly display the error
+          console.error(error);
+          });
+        }
+       reader.readAsText(fileInputElement.files[0]);
+     };
+
+
+   </script>
+   <input type="file" id="fileInputElement">   
+   <input id="Rendering" type="button" value="Rendering" onclick="renderDOTFile();" />
+   <script>
+     var el = document.getElementById("Rendering");
+     if (el.addEventListener)
+       el.addEventListener("click", renderDOTFile, false);
+     else if (el.attachEvent)
+       el.attachEvent('onclick', renderDOTFile);
+   </script>
+</body>
+
+</html>
+