From 1ef860a0560f2be0f3961e2017388a7ffcfd3b7f Mon Sep 17 00:00:00 2001
From: Olivier Stasse <ostasse@laas.fr>
Date: Tue, 26 Mar 2019 21:05:45 +0100
Subject: [PATCH] [js/doc] Add display using a browser and documentation
---
doc/additionalDoc/writeGraph.h | 4 +++
js/view_sot_dg.html | 52 ++++++++++++++++++++++++++++++++++
2 files changed, 56 insertions(+)
create mode 100644 js/view_sot_dg.html
diff --git a/doc/additionalDoc/writeGraph.h b/doc/additionalDoc/writeGraph.h
index 755e46b..ab9b4e8 100644
--- 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.
+
*/
diff --git a/js/view_sot_dg.html b/js/view_sot_dg.html
new file mode 100644
index 0000000..231fcae
--- /dev/null
+++ b/js/view_sot_dg.html
@@ -0,0 +1,52 @@
+<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>
+
--
GitLab