testing/CansWebInterface/dashboard.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3   <head>
   4     <title>MCTX3420 Web Interface</title>
   5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   6     <!--[if lte IE 8]>
   7       <script language="javascript" type="text/javascript" src="static/excanvas.min.js"></script>
   8     <![endif]-->
   9     <script type="text/javascript" src="static/jquery-1.10.1.min.js"></script>
  10     <script type="text/javascript" src="static/jquery.flot.min.js"></script>
  11     <script type="text/javascript" src="static/base64.js"></script>
  12     <script type="text/javascript" src="static/mctx.gui.js"></script>
  13
  14     <link rel="stylesheet" type="text/css" href="static/style.css">
  15     <link rel="stylesheet" type="text/css" href="static/nav-menu.css">
  16         <link rel="stylesheet" type="text/css" href="static/exp-menu.css">
  17     <script type="text/javascript">
  18       $(document).ready(function () {
  19         $("#menu-container").populateNavbar();
  20         $("#login").submit(function () {
  21           $("#login").login();
  22           return false;
  23         });
  24
  25         $("#main_controls").submit(function () {
  26           //Validate!
  27           return false;
  28         });
  29         //$("#cam1").setCamera();
  30         //$("#strain-graphs").setStrainGraphs();
  31         $("#errorlog").setErrorLog();
  32       });
  33     </script>
  34   </head>
  35
  36   <body>
  37 <div id="header-wrap">
  38       <div id="header">
  39         <div id="leftnav">
  40           <a href="http://www.uwa.edu.au/" target="_blank">
  41             <img alt = "The University of Western Australia"
  42             src="static/uwacrest-text.png">
  43           </a>
  44           <span id="title">Exploding Can Web Interface: Home</span>
  45         </div>
  46                 <div class="nav-menu">
  47                         <ul class="menu">
  48                           <li><a href="dashboard.html">Home</a></li>
  49                           <li><a href="setup.html">Setup</a></li>
  50                           <li><a href="admin.html">Admin</a></li>
  51                           <li><a href="help.html">Help</a></li>
  52                         </ul>
  53                 </div>
  54         <div id="rightnav">
  55           <span id="welcome-container">
  56           </span>
  57           <span id="date">
  58             <script type="text/javascript">getDate();</script>
  59           </span>
  60           <div id="logout-container">
  61             <form action="#">
  62               <div>
  63                 <input type="button" id="logout" value="Logout">
  64               </div>
  65             </form>
  66           </div>
  67         </div>
  68         <div class="clear"></div>
  69       </div>
  70     </div>    <!-- End header -->
  71
  72     <div id="content">
  73       <div id="sidebar">
  74                 <div class="widgetPanel">
  75                         <div class="title">Controls</div>
  76                         <form id="main_controls" action="">
  77                                 <table>
  78                                 <tr>
  79                                         <td>Experiment name</td>
  80                                         <td>
  81                                         <input name="experiment_name" type="text">
  82                                         </td>
  83                                 </tr>
  84                                 <tr>
  85                                 <td>Experiment mode</td>
  86                                 <td>
  87                                         <input name="experiment_type" value="strain" type="radio"> Strain it
  88                                         <input name="experiment_type" value="explode" type="radio"> Explode it
  89                                 </td>
  90                                 </tr>
  91                                 </table>
  92                                 <div align="right">
  93                                         <input type="submit" value="Start">
  94                                         <input type="submit" value="Pause">
  95                                         <input type="submit" value="Stop">
  96                                 </div>
  97                         </form>
  98                 </div>
  99         <div class="widgetPanel">
 100           <div class="title">Status</div>
 101           <div class="item">
 102             <table class="status centre">
 103               <tr><th>Module</th> <th>State</th></tr>
 104               <tr><td>Server API</td> <td>PASS</td></tr>
 105               <tr><td>Enclosure interlock</td> <td>FAIL</td></tr>
 106               <tr><td>Pressure level</td> <td>PASS</td></tr>
 107             </table>
 108             <hr>
 109             Software mode: <span id="server_mode">off</span>
 110           </div>
 111         </div>
 112
 113         <div class="widgetPanel">
 114           <div class="title">Pressure controls</div>
 115         </div>
 116         </div>
 117         <!-- End sidebar -->
 118
 119       <div id="main">
 120           <div class="widget">
 121                 <div class="exp-menu">
 122                         <ul class="menu">
 123                           <li><a href="#"><b>Dashboard</b></a></li>
 124                           <li><a href="graph.html">Graph</a></li>
 125                           <li><a href="#">Image</a></li>
 126                           <li><a href="#">In/Out</a></li>
 127                         </ul>
 128                   </div>
 129                 </div>
 130                 <div class="widget">
 131             <div class="title">System Diagram</div>
 132             <img id="sbd" src="static/sbd4.png" class="centre" style="border:5px solid" alt="System diagram" usemap="#sbd-map">
 133             <map name="sbd-map">
 134               <area shape="rect" coords="8,72,105,118" href="https://github.com/szmoore/MCTX3420/wiki/System-Overview#control" target="_blank" alt="Client PC" title="You">
 135               <area shape="rect" coords="176,72,275,118" href="https://github.com/szmoore/MCTX3420/wiki/Hardware:-BeagleBone" target="_blank" alt="BBB">
 136               <area shape="rect" coords="298,53,395,145" href="https://github.com/szmoore/MCTX3420/wiki/System-Overview#electronics" target="_blank" alt="Electronics">
 137               <area shape="rect" coords="446,53,543,145" href="https://github.com/szmoore/MCTX3420/wiki/System-Overview#pneumatics" target="_blank" alt="Pneumatics">
 138               <area shape="rect" coords="218,191,315,237" href="https://github.com/szmoore/MCTX3420/wiki/System-Overview#sensors" target="_blank" alt="Sensors">
 139               <area shape="rect" coords="418,191,515,237" href="https://github.com/szmoore/MCTX3420/wiki/Hardware:-Sensors#camera" target="_blank" alt="Camera">
 140               <area shape="rect" coords="218,237,315,285" href="#" alt="Strain Can">
 141               <area shape="rect" coords="418,237,515,285" href="#" alt="Explode Can" title="Won't happen">
 142               <area shape="rect" coords="87,191,183,237" href="https://github.com/szmoore/MCTX3420/wiki/System-Overview#case" target="_blank" alt="Case" id="case-btn">
 143               <area shape="rect" coords="87,257,183,303" href="https://github.com/szmoore/MCTX3420/wiki/Hardware:-Mounting" target="_blank" alt="Mounting" id="mounting-btn">
 144               <area shape="rect" coords="210,182,540,317" alt="Mounting Area" id="mounting-area">
 145               <area shape="poly" coords="172,27,548,27,548,317,212,317,212,156,172,156" alt="case Area" id="case-area">
 146             </map>
 147             <script type="text/javascript" src="static/jquery.maphilight.min.js">
 148
 149             </script>
 150             <script type="text/javascript">
 151               $("#sbd").maphilight({
 152                 fillOpacity: 0.4,
 153                 strokeColor: '000000',
 154                 strokeOpacity: 0.7
 155               });
 156
 157               $.fn.hilightToggle = function (on) {
 158                 var data = $(this).data("maphilight") || {};
 159                 data.neverOn = !on;
 160                 $(this).data("maphilight", data);
 161                 return this;
 162               };
 163
 164               $("#mounting-area").hilightToggle(false);
 165               $("#case-area").hilightToggle(false);
 166
 167               $("#mounting-btn").mouseover(function () {
 168                 $("#mounting-area").hilightToggle(true).mouseover();
 169               }).mouseout(function () {
 170                 $("#mounting-area").hilightToggle(false);
 171               });
 172
 173               $("#case-btn").mouseover(function () {
 174                 $("#case-area").hilightToggle(true).mouseover();
 175               }).mouseout(function () {
 176                 $("#case-area").hilightToggle(false);
 177               });
 178
 179             </script>
 180
 181             <div class="clear"></div>
 182           </div>
 183                   </div>
 184
 185
 186         <!-- End main content -->
 187
 188     </div>
 189   </body>
 190 </html>