From 7d87636877a19411594b6662aa8f05c77d70dc04 Mon Sep 17 00:00:00 2001
From: Jeremy Tan <jeremy@jx.tan.fake>
Date: Sat, 19 Oct 2013 10:38:45 +0800
Subject: [PATCH] Get most of the stuff down for controls

---
 testing/MCTXWeb/public_html/control.html     | 119 ++++++++++++-------
 testing/MCTXWeb/public_html/graph.html       |   2 +-
 testing/MCTXWeb/public_html/static/style.css |  88 ++++++++++++--
 3 files changed, 155 insertions(+), 54 deletions(-)

diff --git a/testing/MCTXWeb/public_html/control.html b/testing/MCTXWeb/public_html/control.html
index 9ba8021..86a7f82 100644
--- a/testing/MCTXWeb/public_html/control.html
+++ b/testing/MCTXWeb/public_html/control.html
@@ -85,75 +85,112 @@
 
         <div id="main">
           <div class="widget">
-            <div class="title">Experiment Status</div>
-            <table class="horizontal">
-              <tr>
+            <div class="title">Experiment Overview</div>
+            <table class="horizontal medium">
+              <tr id="state-exp-r">
                 <th>Experiment state</th>
-                <td id="state-exp">No experiment running.</td>
+                <td id="state-exp">sdgfsdsses</td>
+                <td style="text-align: right;">
+                  <input id="experiment-stop" type="button" value="Stop">
+                </td>
               </tr>
-              <tr>
+              <tr id="state-software-r">
                 <th>Software status</th>
                 <td id="state-software"></td>
+                <td></td>
               </tr>
             </table>
-            <div class="bold">Error and warning messages</div>
+            
+            <div class="sub-title">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="">
+          <div id="start-widget" class="widget">
+            <div class="title centre">Start an experiment</div>
+            <form id="start-controls" class="nice" action="#">
+              <p>
+                <label for="experiment_name">Experiment name</label>
+                <input id="experiment_name" type="text" name="experiment_name">
+              </p>
+              <p id="start-result">
+                &nbsp;
+              </p>
+              <p class="centre">
+                <input type="button" name="start_strain" value="Strain test">
+                <input type="button" name="start_strain" value="Explode test">
+              </p>
+            </form>
+          </div>
+          
+          <div id="pressure-widget" class="widget">            
+            <form id="pressure-controls" action="#" class="nice clear">
               <table>
                 <tr>
-                  <td>Experiment name</td>
-                  <td><input name="experiment_name" type="text"></td>
+                  <td><label for="pressure-set">Starting pressure (kPa)</label></td>
+                  <td><label for="pressure-stepsize">Pressure step size (kPa)</label></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>
+                  <td><input id="pressure-set" type="text"></td>
+                  <td><input id="pressure-stepsize" type="text"></td>
                 </tr>
                 <tr>
-                  <td>
-                  </td>
-                  <td align="right">
-                    <input type="submit" value="Start">
-                    <input type="submit" value="Pause">
-                    <input type="submit" value="Stop">
-                  </td>
+                  <td><label for="pressure-stepcount">Number of steps to make</label></td>
+                  <td><label for="pressure-stepwait">Wait time between steps (s)</label></td>
+                </tr>
+                <tr>
+                  <td><input id="pressure-stepcount" type="text"></td>
+                  <td><input id="pressure-stepwait" type="text"></td>
                 </tr>
               </table>
+              <p class="left" id="pressure-result">
+                
+              </p>
+              <p class="right">
+                <input type="submit" value="Set pressure">
+              </p>
             </form>
-            
-            <div class="bold">Pressure controls</div>
-            <form id="pressure-controls" action="">
+          </div>
+          
+          <div id="stats-widget" class="widget">
+            <form id="stats" action="#" class="nice clear">
               <table>
                 <tr>
-                  <td>Experiment name</td>
-                  <td><input name="experiment_name" type="text"></td>
+                  <td><label for="stats-mainspressure">Mains pressure (kPa)</label></td>
+                  <td><label for="stats-canpressure">Can pressure (kPa)</label></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>
+                  <td><input id="stats-mainspressure" type="text" readonly></td>
+                  <td><input id="stats-canpressure" type="text" readonly></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 class="stats-strain">
+                  <td><label for="stats-strain1">Central hoop strain</label></td>
+                  <td><label for="stats-strain2">Central longitudinal strain</label></td>
+                </tr>
+                <tr class="stats-strain">
+                  <td><input id="stats-strain1" type="text" readonly></td>
+                  <td><input id="stats-strain2" type="text" readonly></td>
+                </tr>
+                <tr class="stats-strain">
+                  <td><label for="stats-strain3">End hoop strain</label></td>
+                  <td><label for="stats-strain4">End longitudinal strain</label></td>
+                </tr>
+                <tr class="stats-strain">
+                  <td><input id="stats-strain3" type="text" readonly></td>
+                  <td><input id="stats-strain4" type="text" readonly></td>
+                </tr>
+                <tr class="stats-strain">
+                  <td><label for="stats-dilatometer">Dilatometer reading</label></td>
+                  <td><label for="stats-dilatometer">Camera feed</label></td>
+                </tr>
+                <tr class="stats-strain">
+                  <td><input id="stats-dilatometer" type="text" readonly></td>
+                  <td><a href="#">Link</a></td>
                 </tr>
               </table>
             </form>
           </div>
+          
         </div>
         <!-- End main content -->
       </div>
diff --git a/testing/MCTXWeb/public_html/graph.html b/testing/MCTXWeb/public_html/graph.html
index 7b86842..7416a10 100644
--- a/testing/MCTXWeb/public_html/graph.html
+++ b/testing/MCTXWeb/public_html/graph.html
@@ -115,7 +115,7 @@
             <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>
+            <script type="text/javascript">
               $("#saveimage").click(function() {
                 $("canvas").each(function() {
                   var image = new Image();
diff --git a/testing/MCTXWeb/public_html/static/style.css b/testing/MCTXWeb/public_html/static/style.css
index b4736db..a3f0c09 100644
--- a/testing/MCTXWeb/public_html/static/style.css
+++ b/testing/MCTXWeb/public_html/static/style.css
@@ -25,13 +25,6 @@ hr {
   border-bottom: 1px solid gray;
 }
 
-form.controls {
-  background-color: #F9F9F9;
-  border: 1px solid #808080;
-  padding: 1em;
-  margin: 1em auto;
-}
-
 a {
   color: #1188DD;
 }
@@ -54,7 +47,7 @@ img {
   font-weight: bold
 }
 
-div.centre {
+div.centre, p.centre {
   text-align: center;
   margin: auto;
 }
@@ -63,6 +56,22 @@ div.centre {
   font-weight: bold;
 }
 
+.medium {
+  font-size: 115% !important;
+}
+
+.large {
+  font-size: 130% !important;
+}
+
+.normal {
+  font-size: inherit !important;
+}
+
+.small {
+  font-size: 80% !important;
+}
+
 /*
 table {
   border: none;
@@ -91,17 +100,30 @@ th {
 
 table {
   border-radius: 3px;
-  border: 1px solid #ccc;
   border-collapse: collapse;
   word-wrap: break-word;
   line-height: 1.3em;
   width: 100%;
+  margin: 1em auto;
+  vertical-align: middle;
 }
 
 td {
   padding: 0.2em 0.5em;
 }
 
+tr.pass {
+  color: #000;
+  background-color: #7AE309;
+  font-weight: inherit;
+}
+
+tr.fail {
+  color: #000;
+  background-color: #E30909;
+  font-weight: bold
+}
+
 table.centre {
   margin: auto;
   text-align: center;
@@ -112,9 +134,14 @@ table.horizontal {
 }
 
 table.horizontal th {
-  border-right: 1px solid #ccc;
+  text-align: left;
   border-bottom: 0;
-  width: 20%;
+  width: 15%;
+  font-weight: normal;
+}
+
+table.horizontal.medium th {
+  width: 22%;
 }
 
 img.centre {
@@ -149,6 +176,34 @@ input[type="text"]:focus, input[type="password"]:focus {
   box-shadow: 0 0 2px #BBBBBB;
 }
 
+form.nice {
+  line-height: 1.8em;
+}
+
+form.nice p {
+  margin: 0.25em auto;
+}
+
+form.nice input {
+  font-size: 150%;
+}
+
+form.nice label {
+  font-size: 110%;
+}
+
+form.nice input[type="submit"], form.nice input[type="button"] {
+  font-size: inherit;
+  padding: 0.4em 0.8em;
+}
+
+form.controls {
+  background-color: #F9F9F9;
+  border: 1px solid #808080;
+  padding: 1em;
+  margin: 1em auto;
+}
+
 #header-wrap {
   background-color: #2a2a2a;
   border-top: 0.3em solid #1188DD;
@@ -226,6 +281,7 @@ input[type="text"]:focus, input[type="password"]:focus {
   padding: 1em 2em;
   /*max-width: 1920px;*/
   margin: 1em auto;
+  transition: all 0.2s ease 0s;
 }
 
 #content  {
@@ -272,7 +328,7 @@ input[type="text"]:focus, input[type="password"]:focus {
 }
 
 #main .sub-title {
-  font-size: 18px;
+  font-size: 115%;
   font-weight: bold;
   margin-bottom: 0.25em;
 }
@@ -289,6 +345,10 @@ input[type="text"]:focus, input[type="password"]:focus {
   display: table-cell;
 }
 
+.left {
+  float: left;
+}
+
 .right {
   float: right;
 }
@@ -371,3 +431,7 @@ input[type="text"]:focus, input[type="password"]:focus {
 #login-container #result {
   clear: both;
 }
+
+#experiment-stop {
+  padding: 0.2em 0.4em;
+}
\ No newline at end of file
-- 
2.20.1