testing/MCTXWeb/public_html/values.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/mctx.gui.js"></script>
  12     <script type="text/javascript" src="static/mctx.control.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     <script type="text/javascript">
  17       function initialiseTable(container, prefix, data) {
  18         var hrow = $("<tr/>");
  19         var vrow = $("<tr/>");
  20         var c = 0;
  21
  22         for (var key in data) {
  23           var value = data[key];
  24           var id = prefix + value.name;
  25           var h = $("<td/>").append($("<label/>", {for : id, text : value.name}));
  26           var e = $("<td/>").append($("<input/>", {id : id, type : "text", readonly : true, value : value.value[1]}));
  27           hrow.append(h);
  28           vrow.append(e);
  29
  30           if (++c >= 2) {
  31             container.append(hrow).append(vrow);
  32             c = 0;
  33             hrow = $("<tr/>");
  34             vrow = $("<tr/>");
  35           }
  36         }
  37         if (c > 0) {
  38           container.append(hrow).append(vrow);
  39         }
  40       }
  41
  42       function updateTable(prefix, data) {
  43         for (var key in data) {
  44           var value = data[key];
  45           var id = prefix + value.name;
  46           $("#" + id).val(value.value[1]);
  47         }
  48       }
  49
  50       $.fn.setValueUpdater = function (data) {
  51         initialiseTable($("#sensor-values table"), "sensors_", data.sensors);
  52         initialiseTable($("#actuator-values table"), "actuators_", data.actuators);
  53
  54         var updater = function () {
  55           $.ajax({
  56             url : mctx.api + 'identify',
  57             data : {'sensors' : 1, 'actuators' : 1}
  58           }).done(function (data) {
  59             updateTable("sensors_", data.sensors);
  60             updateTable("actuators_", data.actuators);
  61             setTimeout(updater, 5000);
  62           }).fail(function () {
  63             $("#error-message").text("Connection failure").addClass("fail");
  64           });
  65         };
  66
  67         setTimeout(updater, 5000);
  68       };
  69
  70       runBeforeLoad().done(function () {
  71         $(document).ready(function () {
  72           $.ajax({
  73             url : mctx.api + 'identify',
  74             data : {'sensors' : 1, 'actuators' : 1}
  75           }).done(function (data) {
  76             if (data.control_state !== "Running") {
  77               $("#error-message").text("Experiment not running").addClass("fail");
  78             } else {
  79               $("#values-widget").setValueUpdater(data);
  80             }
  81           }).fail(function () {
  82             $("#error-message").text("Connection failure").addClass("fail");
  83           });
  84        });
  85       }).fail(function () {
  86         $(document).ready(function () {
  87          $("#error-message").text("Connection failure").addClass("fail");
  88        });
  89       });
  90     </script>
  91   </head>
  92
  93   <body>
  94     <div id="header-wrap">
  95       <div id="header">
  96         <div id="leftnav">
  97           <a href="http://www.uwa.edu.au/" target="_blank">
  98             <img alt = "The University of Western Australia"
  99             src="static/uwacrest-text.png">
 100           </a>
 101           <span id="title">Exploding Cans</span>
 102         </div>
 103         <div id="rightnav">
 104           <span id="welcome-container">
 105           </span>
 106           <span id="date">
 107             <script type="text/javascript">getDate();</script>
 108           </span>
 109           <div id="logout-container">
 110             <form action="#">
 111               <div>
 112                 <input type="button" id="logout" value="Logout">
 113               </div>
 114             </form>
 115           </div>
 116         </div>
 117         <div class="clear"></div>
 118       </div>
 119     </div>
 120     <!-- End header -->
 121
 122     <div id="content-wrap">
 123       <noscript>
 124         <div class="widget centre">
 125           <div class="title">JavaScript required</div>
 126           This website requires JavaScript to function correctly.
 127           Please enable JavaScript to use this site.
 128         </div>
 129       </noscript>
 130
 131       <div id="content">
 132         <div class="widget" id="sidebar-show">&gt;</div>
 133         <div id="sidebar">
 134           <div class="widget">
 135             <div id="sidebar-hide">&lt;</div>
 136             <div class="title">Navigation menu</div>
 137             <div id="sidebar-menu" class="nav-menu">
 138               <ul>
 139                 <li><a href="index.html"><span>Home</span></a></li>
 140                 <li><a href="control.html"><span>Experiment control</span></a></li>
 141                 <li><a href="graph.html"><span>Experiment graphs</span></a></li>
 142                 <li><a href="values.html"><span>Experiment data (live)</span></a></li>
 143                 <li><a href="data.html"><span>Experiment data</span></a></li>
 144                 <li><a href="pintest.html"><span>Pin debugging</span></a></li>
 145                 <li class="last"><a href="help.html"><span>Help</span></a></li>
 146               </ul>
 147             </div>
 148           </div>
 149         </div>
 150         <!-- End sidebar -->
 151
 152         <div id="main">
 153           <div id="values-widget" class="widget">
 154             <p class="right" id="error-message">
 155               &nbsp;
 156             </p>
 157             <div class="sub-title">Sensors</div>
 158             <form id="sensor-values" action="#" class="nice clear">
 159               <table>
 160               </table>
 161             </form>
 162             <div class="sub-title">Actuators</div>
 163             <form id="actuator-values" action="#" class="nice clear">
 164               <table>
 165               </table>
 166             </form>
 167           </div>
 168         </div>
 169         <!-- End main content -->
 170       </div>
 171     </div>
 172   </body>
 173 </html>