Merge remote-tracking branch 'upstream/master' into dilatometer

[matches/MCTX3420.git] / testing / MCTXWeb / public_html / graph.html

diff --git a/testing/MCTXWeb/public_html/graph.html b/testing/MCTXWeb/public_html/graph.html
index b7d87f1..f03dd73 100644 (file)
--- a/testing/MCTXWeb/public_html/graph.html
+++ b/testing/MCTXWeb/public_html/graph.html
@@ -8,9 +8,11 @@
     <![endif]-->
     <script type="text/javascript" src="static/jquery-1.10.1.min.js"></script>
     <script type="text/javascript" src="static/jquery.flot.min.js"></script>
-
+    <script type="text/javascript" src="static/html2canvas.js"></script>
+    
     <script type="text/javascript" src="static/mctx.gui.js"></script>
     <script type="text/javascript" src="static/mctx.graph.js"></script>
+    
     <link rel="stylesheet" type="text/css" href="static/style.css">
     <link rel="stylesheet" type="text/css" href="static/nav-menu.css">
     <script type="text/javascript">
@@ -42,6 +44,7 @@
           <div id="logout-container">
             <form action="#">
               <div>
+                <input type="button" id="change-password" value="Change password">
                 <input type="button" id="logout" value="Logout">
               </div>
             </form>
@@ -72,6 +75,7 @@
                 <li><a href="index.html"><span>Home</span></a></li>
                 <li><a href="control.html"><span>Experiment control</span></a></li>
                 <li><a href="graph.html"><span>Experiment graphs</span></a></li>
+                <li><a href="values.html"><span>Experiment data (live)</span></a></li>
                 <li><a href="data.html"><span>Experiment data</span></a></li>
                 <li><a href="pintest.html"><span>Pin debugging</span></a></li>
                 <li class="last"><a href="help.html"><span>Help</span></a></li>
@@ -82,10 +86,13 @@
         <!-- End sidebar -->
 
         <div id="main">
-          <div class="widget">
+          <div class="widget" id="graph-widget">
             <div class="title">Graph</div>
             <!-- graph placeholder -->
-            <div id="graph" class="plot"></div>
+            <div id="graph-container">
+              <div id="graph" class="plot"></div>
+              <div id="graph-legend"></div>
+            </div>
           </div>
           <div class="widget" id="graph-controls">
             <!--<div class="title">Visualise</div>-->
@@ -99,27 +106,47 @@
             <!--b>Right Y-Axis</b>
             <form id="y2axis" onChange=$("#graph").setGraph()> <input type="radio" name="y2axis" value="none" id="none" checked="yes">none</form>-->
 
-            <div> 
-              <form id="time_range" class="change">
-                <p> 
-                  Time of Last Update <input type="text" value="" id="current_time" disabled>
-                  Start Time <input type="text" value="" id="start_time"> 
-                  End Time <input type="text" value="" id="end_time">
-                </p>
-              </form>
-            </div>
+
+            <form id="time_range" class="change">
+              <p> 
+                Time of Last Update <input type="text" value="" id="current_time" disabled>
+                Start Time <input type="text" value="" id="start_time"> 
+                End Time <input type="text" value="" id="end_time">
+              </p>
+            </form>
+
             <input type="button" value="Run" id="graph-run" onClick="$('#graph-run').runButton()">
             <input type="button" value="Open New Graph" disabled>
             <input type="button" value="Save Graph Image" id="saveimage">
             <input type="button" value="Dump Raw Data" disabled>
             <script type="text/javascript">
               $("#saveimage").click(function() {
-                $("canvas").each(function() {
-                  var image = new Image();
-
-                  window.open(this.toDataURL("image/png"));
-                  $("#graph-controls").append(image);
-                });
+                  html2canvas($("#graph-widget")[0], {
+                    onrendered: function(canvas) {
+                      var context = canvas.getContext('2d');
+                      context.webkitImageSmoothingEnabled = false;//webkit
+                      context.mozImageSmoothingEnabled = false;//firefox
+                      context.imageSmoothingEnabled = false;
+                      
+                      window.open(canvas.toDataURL("image/png"));
+                      
+                      /*
+                      var canvasOut = document.createElement("canvas");
+                      var ratio = canvas.height / canvas.width;
+                      var width = 1600;
+                      var height = width * ratio;
+                      canvasOut.setAttribute('width', width);
+                      canvasOut.setAttribute('height', height);
+                      
+                      context = canvasOut.getContext('2d');
+                      context.webkitImageSmoothingEnabled = false;//webkit
+                      context.mozImageSmoothingEnabled = false;//firefox
+                      context.imageSmoothingEnabled = false;
+                      context.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, width, height);
+                      
+                      window.open(canvasOut.toDataURL("image/png"))*/
+                    }
+                  });
               });
             </script>