From: Jeremy Tan <jeremy@jx.tan.fake>
Date: Fri, 18 Oct 2013 13:57:10 +0000 (+0800)
Subject: Sort of make a start on control page
X-Git-Url: https://git.ucc.asn.au/?a=commitdiff_plain;h=e0132025a1df98f88b2415e9e5f75ce7304efb33;p=matches%2FMCTX3420.git

Sort of make a start on control page
Refactor other stuff in gui
although this will probably be erased anyway
---

diff --git a/testing/MCTXWeb/public_html/control.html b/testing/MCTXWeb/public_html/control.html
index f762019..9ba8021 100644
--- a/testing/MCTXWeb/public_html/control.html
+++ b/testing/MCTXWeb/public_html/control.html
@@ -15,25 +15,10 @@
     <script type="text/javascript">
       runBeforeLoad().done(function () {
         $(document).ready(function () {
-         //Show the content!
-         $("#content").css("display", "block");
-         //Set the welcome bar
-         var name = " " + (mctx.friendlyName ? mctx.friendlyName : "");
-         $("#welcome-container").text("Welcome"+ name + "!");
-         $("#logout-container").css("display", "block");
-         //$("#menu-container").populateNavbar();
-
-         $("#logout").click(function () {
-           $("#logout").logout();
-         });
-
          $("#main_controls").submit(function () {
            //Validate!
            return false;
          });
-
-         $("#errorlog").setErrorLog();
-         $("#strain-graphs").setStrainGraphs();
        });       
       })
 
@@ -79,32 +64,72 @@
       </noscript>
 
       <div id="content">
+        <div class="widget" id="sidebar-show">&gt;</div>
         <div id="sidebar">
           <div class="widget">
+            <div id="sidebar-hide">&lt;</div>
             <div class="title">Navigation menu</div>
-            <div class="nav-menu">
-            <ul>
-               <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="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>
-            </ul>
+            <div id="sidebar-menu" class="nav-menu">
+              <ul>
+                <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="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>
+              </ul>
             </div>
           </div>
-          <div class="widget">
-            <div class="title">Help</div>
-
-          </div>
         </div>
         <!-- End sidebar -->
 
         <div id="main">
           <div class="widget">
-            <div class="title">Controls</div>
-            <b>Main controls</b>
-            <form id="main_controls" action="">
+            <div class="title">Experiment Status</div>
+            <table class="horizontal">
+              <tr>
+                <th>Experiment state</th>
+                <td id="state-exp">No experiment running.</td>
+              </tr>
+              <tr>
+                <th>Software status</th>
+                <td id="state-software"></td>
+              </tr>
+            </table>
+            <div class="bold">Error and warning messages</div>
+            <textarea id="errorlog" wrap="off" rows="4" cols="30" readonly>
+            </textarea>
+          </div>
+          
+          <div class="widget">
+            <div class="bold">Main controls</div>
+            <form id="main-controls" action="">
+              <table>
+                <tr>
+                  <td>Experiment name</td>
+                  <td><input name="experiment_name" type="text"></td>
+                </tr>
+                <tr>
+                  <td>Experiment mode</td>
+                  <td>
+                    <input name="experiment_type" value="strain" type="radio"> Strain it
+                    <input name="experiment_type" value="explode" type="radio"> Explode it
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                  </td>
+                  <td align="right">
+                    <input type="submit" value="Start">
+                    <input type="submit" value="Pause">
+                    <input type="submit" value="Stop">
+                  </td>
+                </tr>
+              </table>
+            </form>
+            
+            <div class="bold">Pressure controls</div>
+            <form id="pressure-controls" action="">
               <table>
                 <tr>
                   <td>Experiment name</td>
@@ -128,14 +153,6 @@
                 </tr>
               </table>
             </form>
-            <b>Error and warning messages</b><br>
-            <textarea id="errorlog" wrap="off" rows="4" cols="30" readonly></textarea>
-          </div>
-          <div class="widget">
-            <div class="title">Strain gauges</div>
-            <div id="strain-graphs" class="graph">
-              <!-- Strain graph placeholder -->
-            </div>
           </div>
         </div>
         <!-- End main content -->
diff --git a/testing/MCTXWeb/public_html/data.html b/testing/MCTXWeb/public_html/data.html
index 14f54a6..c4c2807 100644
--- a/testing/MCTXWeb/public_html/data.html
+++ b/testing/MCTXWeb/public_html/data.html
@@ -20,24 +20,6 @@
     <script type="text/javascript">
       runBeforeLoad().done(function() {
         $(document).ready(function() {
-          //Show the content!
-          $("#content").css("display", "block");
-          //Set the welcome bar
-          var name = " " + (mctx.friendlyName ? mctx.friendlyName : "");
-          $("#welcome-container").text("Welcome" + name + "!");
-          $("#logout-container").css("display", "block");
-          //$("#menu-container").populateNavbar();
-
-          $("#logout").click(function() {
-            $("#logout").logout();
-          });
-
-          $("#main_controls").submit(function() {
-            //Validate!
-            return false;
-          });
-
-          $("#errorlog").setErrorLog();
         });
       })
 
@@ -110,10 +92,12 @@
       </noscript>
 
       <div id="content">
+        <div class="widget" id="sidebar-show">&gt;</div>
         <div id="sidebar">
           <div class="widget">
+            <div id="sidebar-hide">&lt;</div>
             <div class="title">Navigation menu</div>
-            <div class="nav-menu">
+            <div id="sidebar-menu" class="nav-menu">
               <ul>
                 <li><a href="index.html"><span>Home</span></a></li>
                 <li><a href="control.html"><span>Experiment control</span></a></li>
@@ -124,10 +108,6 @@
               </ul>
             </div>
           </div>
-          <div class="widget">
-            <div class="title">Help</div>
-
-          </div>
         </div>
         <!-- End sidebar -->
 
diff --git a/testing/MCTXWeb/public_html/graph.html b/testing/MCTXWeb/public_html/graph.html
index be942bf..7b86842 100644
--- a/testing/MCTXWeb/public_html/graph.html
+++ b/testing/MCTXWeb/public_html/graph.html
@@ -8,40 +8,31 @@
     <![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/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">
-      runBeforeLoad().done(function () {
-        $(document).ready(function () {
-         //Show the content!
-         $("#content").css("display", "block");
-         //Set the welcome bar
-         var name = " " + (mctx.friendlyName ? mctx.friendlyName : "");
-         $("#welcome-container").text("Welcome"+ name + "!");
-         $("#logout-container").css("display", "block");
-         $("#logout").click(function () {
-           $("#logout").logout();
-         });
-       });       
-      }).always(function () {
-        $(document).ready(function () {
+      runBeforeLoad().done(function() {
+        $(document).ready(function() {
+        
+        }).always(function() {
+        $(document).ready(function() {
           $("#graph-controls").setDevices();
         });
       });
 
     </script>
   </head>
-  
+
   <body>
     <div id="header-wrap">
       <div id="header">
         <div id="leftnav">
           <a href="http://www.uwa.edu.au/" target="_blank">
             <img alt = "The University of Western Australia"
-            src="static/uwacrest-text.png">
+                 src="static/uwacrest-text.png">
           </a>
           <span id="title">Exploding Cans</span>
         </div>
@@ -63,7 +54,7 @@
       </div>
     </div>
     <!-- End header -->
-    
+
     <div id="content-wrap">
       <noscript>
         <div class="widget centre">
@@ -74,18 +65,20 @@
       </noscript>
 
       <div id="content">
+        <div class="widget" id="sidebar-show">&gt;</div>
         <div id="sidebar">
           <div class="widget">
+            <div id="sidebar-hide">&lt;</div>
             <div class="title">Navigation menu</div>
             <div id="sidebar-menu" class="nav-menu">
-            <ul>
-               <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="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>
-            </ul>
+              <ul>
+                <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="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>
+              </ul>
             </div>
           </div>
         </div>
@@ -94,66 +87,64 @@
         <div id="main">
           <div class="widget">
             <div class="title">Graph</div>
-              <div id="graph" class="plot">
-              
-              </div>
-              <!-- graph placeholder -->
-              <!--<div id="graph" class="plot">
-                
-              </div>-->
+            <!-- graph placeholder -->
+            <div id="graph" class="plot"></div>
           </div>
           <div class="widget" id="graph-controls">
-              <!--<div class="title">Visualise</div>-->
-              <b>X-Axis</b>
-                <form id="xaxis" class="change">
-                  <input type="radio" name="xaxis" alt="time" id="time" checked="checked">
-                  <label for="time">time</label>
-                </form>
-                <b>Y-Axis</b>
-                <form id="yaxis" class="change">  </form>
-                <!--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 class="title">Visualise</div>-->
+            <b>X-Axis</b>
+            <form id="xaxis" class="change">
+              <input type="radio" name="xaxis" alt="time" id="time" checked="checked">
+              <label for="time">time</label>
+            </form>
+            <b>Y-Axis</b>
+            <form id="yaxis" class="change">  </form>
+            <!--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>
-                <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>
-                  $("#saveimage").click(function () {
-                    $("canvas").each(function () {
-                      var image = new Image();
-                      
-                      window.open(this.toDataURL("image/png"));
-                      $("#graph-controls").append(image);
-                    });
-                  });
-                </script>
-            </div>
-        
-        <!-- TODO: Put this on its own page? 
-          <div class="widget">
-              <div class="title">Controls</div>
-              <form id="controls">
-                <p>Mode: <input type="radio" name="mode" value="normal">Normal
-                      <input type="radio" name="mode" value="explode">EXPLODE! </p>
-                Filename: <input type="text"> 
-                <input type="button" value="Stop" id="stopstart">
-                <input type="button" value="Pause" id="runpause">
-                <input type="button" value="Load">
+            <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>
+            <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>
+              $("#saveimage").click(function() {
+                $("canvas").each(function() {
+                  var image = new Image();
+
+                  window.open(this.toDataURL("image/png"));
+                  $("#graph-controls").append(image);
+                });
+              });
+            </script>
+            
+            <div id="status-text">&nbsp;</div>
           </div>
+          
+
+          <!-- TODO: Put this on its own page? 
+            <div class="widget">
+                <div class="title">Controls</div>
+                <form id="controls">
+                  <p>Mode: <input type="radio" name="mode" value="normal">Normal
+                        <input type="radio" name="mode" value="explode">EXPLODE! </p>
+                  Filename: <input type="text"> 
+                  <input type="button" value="Stop" id="stopstart">
+                  <input type="button" value="Pause" id="runpause">
+                  <input type="button" value="Load">
+                </form>
+            </div>
           -->
         </div>
-    </div>
+      </div>
       <!-- End main content -->
     </div>
   </body>
diff --git a/testing/MCTXWeb/public_html/help.html b/testing/MCTXWeb/public_html/help.html
index cad8b0a..5760c4e 100644
--- a/testing/MCTXWeb/public_html/help.html
+++ b/testing/MCTXWeb/public_html/help.html
@@ -11,24 +11,7 @@
     <script type="text/javascript">
       runBeforeLoad().done(function() {
         $(document).ready(function() {
-          //Show the content!
-          $("#content").css("display", "block");
-          //Set the welcome bar
-          var name = " " + (mctx.friendlyName ? mctx.friendlyName : "");
-          $("#welcome-container").text("Welcome" + name + "!");
-          $("#logout-container").css("display", "block");
-          //$("#menu-container").populateNavbar();
-
-          $("#logout").click(function() {
-            $("#logout").logout();
-          });
-
-          $("#main_controls").submit(function() {
-            //Validate!
-            return false;
-          });
-
-          $("#errorlog").setErrorLog();
+          
         });
       })
 
@@ -66,10 +49,12 @@
 
     <div id="content-wrap">
       <div id="content">
+        <div class="widget" id="sidebar-show">&gt;</div>
         <div id="sidebar">
           <div class="widget">
+            <div id="sidebar-hide">&lt;</div>
             <div class="title">Navigation menu</div>
-            <div class="nav-menu">
+            <div id="sidebar-menu" class="nav-menu">
               <ul>
                 <li><a href="index.html"><span>Home</span></a></li>
                 <li><a href="control.html"><span>Experiment control</span></a></li>
diff --git a/testing/MCTXWeb/public_html/index.html b/testing/MCTXWeb/public_html/index.html
index 77c7f75..b91db20 100644
--- a/testing/MCTXWeb/public_html/index.html
+++ b/testing/MCTXWeb/public_html/index.html
@@ -11,15 +11,6 @@
     <script type="text/javascript">
       runBeforeLoad().done(function () {
         $(document).ready(function () {
-         //Show the content!
-         $("#content").css("display", "block");
-         //Set the welcome bar
-         var name = " " + (mctx.friendlyName ? mctx.friendlyName : "");
-         $("#welcome-container").text("Welcome"+ name + "!");
-         $("#logout-container").css("display", "block");
-         $("#logout").click(function () {
-           $("#logout").logout();
-         });
        });       
       }).always(function () {
         $(document).ready(function () {
@@ -69,24 +60,22 @@
       </noscript>
 
       <div id="content">
+        <div class="widget" id="sidebar-show">&gt;</div>
         <div id="sidebar">
           <div class="widget">
+            <div id="sidebar-hide">&lt;</div>
             <div class="title">Navigation menu</div>
             <div id="sidebar-menu" class="nav-menu">
-            <ul>
-               <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="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>
-            </ul>
+              <ul>
+                <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="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>
+              </ul>
             </div>
           </div>
-          <div class="widget">
-            <div class="title">Help</div>
-
-          </div>
         </div>
         <!-- End sidebar -->
 
diff --git a/testing/MCTXWeb/public_html/pintest.html b/testing/MCTXWeb/public_html/pintest.html
index 0944617..9372ee8 100644
--- a/testing/MCTXWeb/public_html/pintest.html
+++ b/testing/MCTXWeb/public_html/pintest.html
@@ -30,15 +30,6 @@
         });
         
         $(document).ready(function () {
-         //Set the welcome bar
-         var name = " " + (mctx.friendlyName ? mctx.friendlyName : "");
-         $("#welcome-container").text("Welcome"+ name + "!");
-         $("#content").css("display", "block");
-
-         $("#logout").click(function () {
-           $("#logout").logout();
-         });
-
          $("#gpio-menu").populateDropdown(mctx.pintest.gpios, "GPIO ");
          $("#pwm-menu").populateDropdown(mctx.pintest.pwms, "PWM ");
 
@@ -59,8 +50,6 @@
            }
          });
          $("#adc-controls").trigger("reset").setADCControl();
-
-         $("#errorlog").setErrorLog();
        });
       })
 
@@ -106,18 +95,20 @@
       </noscript>
       
       <div id="content">
+        <div class="widget" id="sidebar-show">&gt;</div>
         <div id="sidebar">
           <div class="widget">
+            <div id="sidebar-hide">&lt;</div>
             <div class="title">Navigation menu</div>
-            <div class="nav-menu">
-            <ul>
-               <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="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>
-            </ul>
+            <div id="sidebar-menu" class="nav-menu">
+              <ul>
+                <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="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>
+              </ul>
             </div>
           </div>
           <div class="widget">
diff --git a/testing/MCTXWeb/public_html/static/OpenSansBold.ttf b/testing/MCTXWeb/public_html/static/OpenSansBold.ttf
new file mode 100644
index 0000000..277a471
Binary files /dev/null and b/testing/MCTXWeb/public_html/static/OpenSansBold.ttf differ
diff --git a/testing/MCTXWeb/public_html/static/mctx.graph.js b/testing/MCTXWeb/public_html/static/mctx.graph.js
index b91eab3..e79b6a8 100644
--- a/testing/MCTXWeb/public_html/static/mctx.graph.js
+++ b/testing/MCTXWeb/public_html/static/mctx.graph.js
@@ -97,6 +97,22 @@ $.fn.setDevices = function() {
   });
 };
 
+function setGraphStatus(on, failText) {
+  if (on) {
+    mctx.graph.running = true;
+    $("#status-text").html("&nbsp;");
+    $("#graph-run").text("Pause");
+  } else {
+    mctx.graph.running = false;
+    if (failText) {
+      $("#status-text").text(failText).addClass("fail");
+    } else {
+      $("#status-text").text("Graph stopped").removeClass("fail");
+    }
+    $("#graph-run").text("Run");
+  }
+}
+
 function graphUpdater() {
   var urls = {
     'sensors' : mctx.graph.api.sensors,
@@ -104,7 +120,6 @@ function graphUpdater() {
   }
   
   var updater = function () {
-    var time_limit = 20;
     var responses = [];
     var ctime =  $("#current_time");
     
@@ -115,17 +130,17 @@ function graphUpdater() {
     var devices = mctx.graph.devices;
     
     if (xaxis.size() < 1 || yaxis.size() < 1) {
-      mctx.graph.running = false;
+      setGraphStatus(false, "No x or y axis selected.");
       return;
     }
     
     $.each(devices, function(key, val) {
       if (val.urltype in urls) {
         var parameters = {id : val.id};
-        if (start_time != null) {
+        if (start_time !== null) {
           parameters.start_time = start_time;
         }
-        if (end_time != null) {
+        if (end_time !== null) {
           parameters.end_time = end_time;
         }
         responses.push($.ajax({url : urls[val.urltype], data : parameters})
@@ -153,14 +168,8 @@ function graphUpdater() {
           plot_data.push(devices[$(this).attr("alt")].data);
         } else {
           var result = []
-          dataMerge(devices[xaxis.attr("alt")].data, devices[$(this).attr("alt")].data, result);
-          /*
-          var astr = "[";
-          for (var i = 0; i < result.length; ++i)
-            astr += "[" + result[i][0] + "," + result[i][1] + "]" + ",";
-          astr += "]";
-          alert(astr);
-          */
+          dataMerge(devices[xaxis.attr("alt")].data, 
+                    devices[$(this).attr("alt")].data, result);
           plot_data.push(result);
         }
       });
@@ -176,10 +185,14 @@ function graphUpdater() {
       if (mctx.graph.running) {
         mctx.graph.timer = setTimeout(updater, 1000);
       }
-    }, function () {mctx.graph.running=false; alert("Graph crashed");});
+    }, function () {
+      setGraphStatus("Connection issue - graph stopped.");
+      //This will always happen when a user closes the page
+      //alert("Graph crashed"); 
+    });
   };
   
-  mctx.graph.running = true;
+  setGraphStatus(true);
   updater();
   return this;
 }
@@ -194,6 +207,7 @@ $.fn.setGraph = function () {
   var yaxis = $("#yaxis input[name=yaxis]:checked");
   if (xaxis.size() < 1 || yaxis.size() < 1) {
     //nothing to plot...
+    setGraphStatus(false, "No x or y axis selected.");
     return;
   }
   
@@ -227,6 +241,7 @@ $.fn.setGraph = function () {
   
   if (!mctx.graph.running) {
     $("#graph-run").val("Pause");
+    $("#status-text").text("")
     graphUpdater();
   }
   
@@ -234,14 +249,10 @@ $.fn.setGraph = function () {
 };
 
 $.fn.runButton = function() {
-  //alert($(this).val());
-  if ($(this).val() === "Run") {
-    $("#graph").setGraph();
-    $(this).val("Pause");
-  }
-  else {
-    mctx.graph.running = false;
+  if (mctx.graph.running) {
+    setGraphStatus(false);
     clearTimeout(mctx.graph.timer);
-    $(this).val("Run");
+  } else {
+    $("#graph").setGraph();
   }
 };
diff --git a/testing/MCTXWeb/public_html/static/mctx.gui.js b/testing/MCTXWeb/public_html/static/mctx.gui.js
index c609ef5..48737b5 100644
--- a/testing/MCTXWeb/public_html/static/mctx.gui.js
+++ b/testing/MCTXWeb/public_html/static/mctx.gui.js
@@ -284,6 +284,36 @@ $.fn.setErrorLog = function () {
     return this;
 };
 
+$(document).ready(function () {
+  //Show the content!
+  $("#content").css("display", "block");
+  
+  //Set the welcome bar
+  var name = " " + (mctx.friendlyName ? mctx.friendlyName : "");
+  $("#welcome-container").text("Welcome"+ name + "!");
+  $("#logout-container").css("display", "block");
+  //$("#menu-container").populateNavbar();
+
+  $("#logout").click(function () {
+    $("#logout").logout();
+  });
+  
+  //Enable the error log, if present
+  $("#errorlog").setErrorLog();
+  
+  //Enable the hide/show clicks
+  $("#sidebar-hide").click(function () {
+    $("#sidebar").css("display", "none");
+    $("#sidebar-show").css("display", "inherit");
+    return this;
+  });
+
+  $("#sidebar-show").click(function () {
+    $("#sidebar-show").css("display", "none");
+    $("#sidebar").css("display", "inherit");
+    return this;
+  });
+});
 $(document).ajaxError(function (event, jqXHR) {
     //console.log("AJAX query failed with: " + jqXHR.status + " (" + jqXHR.statusText + ")");
 });
\ No newline at end of file
diff --git a/testing/MCTXWeb/public_html/static/style.css b/testing/MCTXWeb/public_html/static/style.css
index 2b23426..b4736db 100644
--- a/testing/MCTXWeb/public_html/static/style.css
+++ b/testing/MCTXWeb/public_html/static/style.css
@@ -3,6 +3,13 @@
   font-family: "Open Sans";
   src: url("OpenSans.ttf"),
     url("OpenSans.eot");
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("OpenSansBold.ttf");
+  font-weight: bold;
 }
 
 body {
@@ -56,6 +63,7 @@ div.centre {
   font-weight: bold;
 }
 
+/*
 table {
   border: none;
 }
@@ -69,6 +77,7 @@ table.status, table.status tr, table.status td {
     padding: 0.2em 0.75em;
 }
 
+
 td {
   padding: 0 0.5em;
 }
@@ -78,6 +87,36 @@ th {
   border-bottom: 1px solid gray;
 }
 
+*/
+
+table {
+  border-radius: 3px;
+  border: 1px solid #ccc;
+  border-collapse: collapse;
+  word-wrap: break-word;
+  line-height: 1.3em;
+  width: 100%;
+}
+
+td {
+  padding: 0.2em 0.5em;
+}
+
+table.centre {
+  margin: auto;
+  text-align: center;
+}
+
+table.horizontal {
+  line-height: 1.6em;
+}
+
+table.horizontal th {
+  border-right: 1px solid #ccc;
+  border-bottom: 0;
+  width: 20%;
+}
+
 img.centre {
   display: block;
   margin: auto;
@@ -121,7 +160,7 @@ input[type="text"]:focus, input[type="password"]:focus {
 
 #header {
   padding: 1.5em 2em;
-  max-width: 1280px;
+  /*max-width: 1920px;*/
   margin: 0 auto;
 }
 
@@ -185,7 +224,7 @@ input[type="text"]:focus, input[type="password"]:focus {
 
 #content-wrap {
   padding: 1em 2em;
-  max-width: 1280px;
+  /*max-width: 1920px;*/
   margin: 1em auto;
 }
 
@@ -197,12 +236,31 @@ input[type="text"]:focus, input[type="password"]:focus {
 #sidebar{
   float: left;
   width: 240px;
+  transition: all 0.2s ease 0s;
 }
 
 #sidebar .title {
   font-size: 20px;
 }
 
+#sidebar-hide {
+  border-bottom: 1px solid #CCCCCC;
+  border-left: 1px solid #CCCCCC;
+  cursor: pointer;
+  float: right;
+  height: 20px;
+  margin-right: -1.25em;
+  margin-top: -1em;
+  text-align: center;
+  width: 20px;
+}
+
+#sidebar-show {
+  float: left;
+  cursor: pointer;
+  display: none;
+}
+
 .justify {
   text-align: justify;
 }
@@ -219,6 +277,22 @@ input[type="text"]:focus, input[type="password"]:focus {
   margin-bottom: 0.25em;
 }
 
+/* Unused ?? */
+.sxs {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  border-spacing: 0.5em;
+}
+
+.sxs div {
+  display: table-cell;
+}
+
+.right {
+  float: right;
+}
+
 .title {
   font-size: 24px;
   font-weight: bold;
@@ -264,6 +338,8 @@ input[type="text"]:focus, input[type="password"]:focus {
   max-width: 100%;
   width: 100%;
   height: 6em;
+  background-color: white;
+  border: 1px solid #ccc;
 }
 
 /** For login.html **/