allow image zoom and rotate

html/images.php

@@ -1,18 +1,14 @@
 <?php
 exec("docker images -aq", $res, $ret);
 if ($ret!=0) {
-  echo 'digraph {';
   echo '  A [label="Error\nCannot get Docker Images"];';
   echo '  B [label="Does the Webserver have Docker rights?"];';
   echo '  A->B [label="Probable\nCause"];';
-  echo '}';
   return;
 }
 exec("docker inspect ".join(" ", $res), $res2, $ret);
 if ($ret==0) {
   $images=json_decode(join($res2), true);
-  echo "digraph {\n";
-  echo "  rankdir=TB;\n";
 
   foreach ($images as $i) {
     $name = "";
@@ -42,11 +38,8 @@ if ($ret==0) {
     }
   }
   
-  echo "}";
 } else {
-  echo 'digraph {';
   echo '  A [label="Error\nCannot Inspect Docker Container"];';
-  echo '}';
   return;
 }
 

html/index.html.in

@@ -18,6 +18,10 @@
       <h1>ServiceDock @PACKAGE_VERSION@ - Docker as a Service</h1>
       <div id="togglemenu">
         <span id="username">[unknown]</span>
+        <span id="imagetools" style="display: none">
+          <img onclick="zoom(1)" src="zoom.svg" />
+          <img onclick="rotateviz()" src="rotate.svg" />
+        </span>
         <img id="menuicon" onclick="togglemenu()" onmouseover="$('#menu').show();" src="menu.svg" />
       </div>
     </div>

html/overview.php

@@ -1,18 +1,14 @@
 <?php
 exec("docker ps -aq", $res, $ret);
 if ($ret!=0) {
-  echo 'digraph {';
   echo '  A [label="Error\nCannot get Docker Containers"];';
   echo '  B [label="Does the Webserver have Docker rights?"];';
   echo '  A->B [label="Probable\nCause"];';
-  echo '}';
   return;
 }
 exec("docker inspect ".join(" ", $res), $res2, $ret);
 if ($ret==0) {
   $containers=json_decode(join($res2), true);
-  echo "digraph {\n";
-  echo "  rankdir=LR;\n";
 
   foreach ($containers as $c) {
     $name = preg_replace(',^/,', '', $c['Name']);
@@ -82,11 +78,8 @@ if ($ret==0) {
       echo '"'.$name.'" -> "'.$in.':'.$out.'";',"\n";        
     }
   }
-  echo "}";
 } else {
-  echo 'digraph {';
   echo '  A [label="Error\nCannot Inspect Docker Container"];';
-  echo '}';
   return;
 }
 

html/rotate.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="320.00009"
+   height="399.09518"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="rotate.svg"
+   inkscape:export-filename="C:\Documents and Settings\bstawarz\Bureau\Projects\Projet Site\v1.0\rotate.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.49497475"
+     inkscape:cx="298.93872"
+     inkscape:cy="148.35498"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="986"
+     inkscape:window-height="626"
+     inkscape:window-x="795"
+     inkscape:window-y="170"
+     inkscape:window-maximized="0"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-96,-600.56108)">
+    <path
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:20;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 257.07809,610.54565 -30.23438,30.25 70.5625,70.5625 -70.5625,70.5625 30.23438,30.25 100.79687,-100.8125 z m -30.03125,81.90625 c -68.98721,13.49148 -121.04688,74.26563 -121.04688,147.20316 0,82.8427 67.15729,150 150,150 82.84272,0 150,-67.1573 150,-150 0,-0.099 1.9e-4,-0.1978 0,-0.2969 l -37.5,0 c 2.6e-4,0.099 0,0.1977 0,0.2969 0,62.132 -50.36796,112.5 -112.5,112.5 -62.13203,0 -112.5,-50.368 -112.5,-112.5 0,-51.78645 53.17878,-133.78172 155.35598,-120.60624 l -52.91848,-7.69067 c 48.80967,-27.7324 28.86366,-28.72649 -18.89062,-18.90625 z"
+       id="path3795"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccccsssccsssccc" />
+  </g>
+</svg>

html/servicedock.css

@@ -189,8 +189,10 @@ table.docker li+li {
   color: black;
 }
 
-#menuicon {
+#menuicon, #imagetools img {
   cursor: pointer;
+  height: 1em;
+  width: auto;
 }
 
 #menu {

html/servicedock.js

@@ -93,6 +93,7 @@ function togglemenu() {
 }
 
 function about(c) {
+    $("#imagetools").hide();
     $.ajax({url: "about.php", success: function(res) {
         try {
             var a = JSON.parse(res);
@@ -110,7 +111,58 @@ function about(c) {
     });
 }
 
+var zoomlevel = 0;
+function zoom(incr = 0) {
+    zoomlevel = (zoomlevel+incr)%2;
+    switch (zoomlevel) {
+        case 0: {
+            $("#main svg").css("width", "auto");
+            $("#main svg").css("height", "auto");
+            $("#main svg").css("max-width", "100%");
+            $("#main svg").css("max-height", "100%");
+        } break;
+        case 1: {
+            $("#main svg").css("width", "100%");
+            $("#main svg").css("height", "auto");
+            $("#main svg").css("max-width", "100%");
+            $("#main svg").css("max-height", "none");
+        } break;
+        case 2: {
+            $("#main.svg").css("width", "auto");
+            $("#main.svg").css("height", "100%");
+            $("#main.svg").css("max-width", "none");
+            $("#main.svg").css("max-height", "100%");
+        } break;
+    }
+}
+
+var viz = null;
+var rankdir = "LR";
+function rotateviz() {
+    if (!viz) return;
+    if (rankdir == "LR")
+        rankdir = "TB";
+    else
+        rankdir = "LR";
+    showviz(viz);
+}
+function showviz(vizpath) {
+    $("#imagetools").show();
+    viz = vizpath;
+    res = "digraph {\n"+"  rankdir="+rankdir+";\n"+viz+"\n}";
+    try {
+        zoomlevel = 0;
+        status(Viz(res));
+    } catch(e) {
+        (res = res.split("\n")).forEach(function(v, i, a) {
+            a[i] = ("000"+(i+1)).slice(-3)+": "+v;
+        });
+        status("<h2>Exception Caught:</h2><p>"+e+"<p><pre>"+res.join("\n")+"</pre>");
+    }
+}
+
 function details(c) {
+    $("#imagetools").hide();
     $.ajax({url: "details.php?container="+c, success: function(res) {
         try {
             status(res);
@@ -124,6 +176,7 @@ function details(c) {
 }
 
 function action(container, action) {
+    $("#imagetools").hide();
     $.ajax({url: "action.php?container="+container+"&action="+action, success: function(res) {
         success(res);
         manage();
@@ -134,6 +187,7 @@ function action(container, action) {
 
 /** Manage Docker Services */
 function manage() {
+    $("#imagetools").hide();
     $.ajax({url: "manage.php", success: function(res) {
         status(res);
     }}).fail(function() {
@@ -143,9 +197,10 @@ function manage() {
 
 /** Show an Overview of all Docker Services */
 function overview() {
+    $("#imagetools").hide();
     $.ajax({url: "overview.php", success: function(res) {
         try {
-            status(Viz(res));
+            showviz(res);
         } catch(e) {
             (res = res.split("\n")).forEach(function(v, i, a) {
                 a[i] = ("000"+(i+1)).slice(-3)+": "+v;
@@ -159,10 +214,10 @@ function overview() {
 
 /** Show an Overview of all Docker Images */
 function imgs() {
+    $("#imagetools").hide();
     $.ajax({url: "images.php", success: function(res) {
         try {
-            status(Viz(res));
+            showviz(res);
-            //status(res);
         } catch(e) {
             (res = res.split("\n")).forEach(function(v, i, a) {
                 a[i] = ("000"+(i+1)).slice(-3)+": "+v;
@@ -177,6 +232,7 @@ function imgs() {
 /// Initial Function: Startup
 /** Decide whether to login or to create a new user */
 function start() {
+    $("#imagetools").hide();
     $("#menu").hide();
     $("#username").html(window.location.hostname)
     try {

html/zoom.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 -256 1664 1664"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   width="100%"
+   height="100%"
+   sodipodi:docname="zoom.svg">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1545"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="0.13169643"
+     inkscape:cx="827.66103"
+     inkscape:cy="840.67801"
+     inkscape:window-x="-2"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <g
+     transform="matrix(1,0,0,-1,0,1152)"
+     id="g4"
+     style="fill:#ffffff">
+    <path
+       d="m 1024,736 v -64 q 0,-13 -9.5,-22.5 Q 1005,640 992,640 H 768 V 416 q 0,-13 -9.5,-22.5 Q 749,384 736,384 h -64 q -13,0 -22.5,9.5 Q 640,403 640,416 V 640 H 416 q -13,0 -22.5,9.5 Q 384,659 384,672 v 64 q 0,13 9.5,22.5 9.5,9.5 22.5,9.5 h 224 v 224 q 0,13 9.5,22.5 9.5,9.5 22.5,9.5 h 64 q 13,0 22.5,-9.5 Q 768,1005 768,992 V 768 h 224 q 13,0 22.5,-9.5 9.5,-9.5 9.5,-22.5 z m 128,-32 q 0,185 -131.5,316.5 Q 889,1152 704,1152 519,1152 387.5,1020.5 256,889 256,704 256,519 387.5,387.5 519,256 704,256 889,256 1020.5,387.5 1152,519 1152,704 z m 512,-832 q 0,-53 -37.5,-90.5 -37.5,-37.5 -90.5,-37.5 -54,0 -90,38 L 1103,124 Q 924,0 704,0 561,0 430.5,55.5 300,111 205.5,205.5 111,300 55.5,430.5 0,561 0,704 q 0,143 55.5,273.5 55.5,130.5 150,225 94.5,94.5 225,150 130.5,55.5 273.5,55.5 143,0 273.5,-55.5 130.5,-55.5 225,-150 94.5,-94.5 150,-225 Q 1408,847 1408,704 1408,484 1284,305 l 343,-343 q 37,-37 37,-90 z"
+       id="path6"
+       inkscape:connector-curvature="0"
+       style="fill:#ffffff" />
+  </g>
+</svg>