update gui
authorJeremy Tan <[email protected]>
Sun, 29 Sep 2013 07:40:34 +0000 (15:40 +0800)
committerJeremy Tan <[email protected]>
Sun, 29 Sep 2013 07:40:34 +0000 (15:40 +0800)
testing/MCTXWeb/public_html/pintest.html [new file with mode: 0644]
testing/MCTXWeb/public_html/static/mctx.gui.js
testing/MCTXWeb/public_html/static/mctx.pintest.js [new file with mode: 0644]
testing/MCTXWeb/public_html/static/style.css

diff --git a/testing/MCTXWeb/public_html/pintest.html b/testing/MCTXWeb/public_html/pintest.html
new file mode 100644 (file)
index 0000000..5d0527b
--- /dev/null
@@ -0,0 +1,156 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+    <title>BeagleBone Black Pin Test</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <!--[if lte IE 8]>
+      <script language="javascript" type="text/javascript" src="static/excanvas.min.js"></script>
+    <![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/base64.js"></script>
+    <script type="text/javascript" src="static/mctx.gui.js"></script>
+    <script type="text/javascript" src="static/mctx.pintest.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">
+      $(document).ready(function () {
+        $("#errorlog").setErrorLog();
+        $("#gpio-menu").populateDropdown(mctx.pintest.gpios, "GPIO ");
+        $("#pwm-menu").populateDropdown(mctx.pintest.pwms, "PWM ");
+        
+        $("#gpio-go").click(function () {
+          if ($("#gpio-menu").val()) {
+            $("#gpio-container").exportGPIO($("#gpio-menu"));
+          }
+        });
+        $("#pwm-go").click(function () {
+          if ($("#pwm-menu").val()) {
+            $("#pwm-container").exportPWM($("#pwm-menu"));
+          }
+        });
+      });
+    </script>
+  </head>
+  
+  <body>
+    <div id="header">
+      <span id="title">BBB pin test</span>
+      <div id="rightnav">
+        <div id="menu-container" class="nav-menu">
+        </div>
+        <span id="date">
+          <script type="text/javascript">getDate();</script>
+        </span>
+      </div>
+      <div class="clear"></div>
+    </div>
+    <!-- End header -->
+    
+    <div id="content">
+      <div id="sidebar">
+        <div class="widget">
+          <div class="title">Info</div>
+          <p>This test page gives control over the BBB's pins.
+          Select a pin that you wish to use from the relevant drop-down
+          menu and click 'Go'.</p>
+          <p>A new widget will appear with controls relevant to that pin.</p>
+          <p>Make sure to check the error log to see if something goes wrong.</p>
+        </div>
+        <div class="widget">
+          <div class="title">Pin out diagram</div>
+          <p>To see the pin out diagram of the BBB, click <a href="">here</a>.</p>
+        </div>
+        <div class="widget">
+          <div class="title">Unexport?</div>
+          <p>
+            To 'unexport' a pin means to disable it. Apart from the obvious
+            use case, sometimes this can be required if you use two PWM channels
+            that share the same frequency base.
+          </p>
+          <p>
+            You won't be able to change
+            the frequency until you unexport one of them.
+          </p>
+        </div>
+        <div class="widget">
+          <div class="title">PWM explained</div>
+          <p>
+            The BBB has up to 8 PWM channels, with 6 having enhanced 
+            resolution.
+          </p>
+          <p>
+            However, those 6 are paired, meaning that each pair must share the
+            same frequency (although the duty cycle can be different).
+          </p>
+        </div>
+      </div>
+      <!-- End sidebar -->
+
+      <div id="main">
+        <div class="widget">
+          <div class="title">Dashboard</div>
+          <table>
+            <tr>
+              <td>
+                GPIO <select id="gpio-menu"></select>
+                <input type="button" id="gpio-go" value="Go">
+              </td>
+              <td>
+                PWM <select id="pwm-menu"></select>
+                <input type="button" id="pwm-go" value="Go">
+              </td>
+            </tr>
+          </table>
+            
+          <div class="sub-title">Error log</div>
+          <textarea id="errorlog" wrap="off" rows="4" cols="30" readonly></textarea>
+        </div>
+
+        <div class="widget">
+          <div class="title">Analogue input (ADC)</div>
+          <form class="controls" action="#">
+            <table class="centre">
+              <tr>
+                <td>AIN</td><th>0</th><th>1</th><th>2</th><th>3</th>
+                <th>4</th><th>5</th><th>6</th><th>7</th>
+              </tr>
+              <tr>
+                <td>Value</td>
+                <td><input name="0" type="text" readonly></td>
+                <td><input name="1" type="text" readonly></td>
+                <td><input name="2" type="text" readonly></td>
+                <td><input name="3" type="text" readonly></td>
+                <td><input name="4" type="text" readonly></td>
+                <td><input name="5" type="text" readonly></td>
+                <td><input name="6" type="text" readonly></td>
+                <td><input name="7" type="text" readonly></td>
+              </tr>
+              <tr>
+                <td>Export</td>
+                <td><input name="0" type="checkbox"></td>
+                <td><input name="1" type="checkbox"></td>
+                <td><input name="2" type="checkbox"></td>
+                <td><input name="3" type="checkbox"></td>
+                <td><input name="4" type="checkbox"></td>
+                <td><input name="5" type="checkbox"></td>
+                <td><input name="6" type="checkbox"></td>
+                <td><input name="7" type="checkbox"></td>
+              </tr>
+            </table>
+          </form>
+        </div>
+        
+        <div class="widget" id="gpio-container">
+          <div class="title">GPIO controls</div>
+        </div>
+        
+        <div class="widget" id="pwm-container">
+          <div class="title">PWM controls</div>
+        </div>
+      </div>
+      <!-- End main content -->
+    </div>
+  </body>
+</html>
index a9e8ae7..180c395 100644 (file)
@@ -81,8 +81,8 @@ $.fn.populateNavbar = function () {
     return {text : items[item].name, href : href};
   };
   
-  menu.populateSubmenu("Sensor data", mctx.sensors, sensorTranslator);
-  menu.populateSubmenu("Actuator data", mctx.actuators, actuatorTranslator);
+  menu.populateSubmenu("Sensor data dump", mctx.sensors, sensorTranslator);
+  menu.populateSubmenu("Actuator data dump", mctx.actuators, actuatorTranslator);
   menu.appendTo(this);
   return this;
 }
diff --git a/testing/MCTXWeb/public_html/static/mctx.pintest.js b/testing/MCTXWeb/public_html/static/mctx.pintest.js
new file mode 100644 (file)
index 0000000..7a792e8
--- /dev/null
@@ -0,0 +1,246 @@
+/**
+ * mctx.pintest: Pin test stuff.
+ * Must be included after mctx.gui.js
+ */
+
+
+mctx.pintest = {};
+mctx.pintest.gpios = [   
+  4,   5,   8,   9,  10,  11,  14,  15,  26,  27,  30,  31,  44,  45,
+  46,  47,  48,  49,  60,  61,  65,  66,  67,  68,  69,  70,  71,  72,
+  73,  74,  75,  76,  77,  78,  79,  80,  81,  86,  87,  88,  89, 112, 115
+ ];
+mctx.pintest.pwms = [0, 1, 2, 3, 4, 5, 6, 7];
+mctx.pintest.refreshRate = 750;
+
+
+function unexport (type, number, container, menu) {
+  var url = mctx.api + "pin";
+
+  $.ajax({url : url, data : {type : type, num : number, export : -1}})
+  .fail(function () {
+    switch(type) {
+      case "adc" :
+        var text = container.find("input[type='text'][name='" + number + "']");
+        var check = container.find("input[type='checkbox'][name='unexport']");
+        text.empty();
+        check.attr("checked", true);
+        break;
+      case "gpi": case "gpo" :
+          container.remove();
+          menu.append($("<option />").val(number).text("GPIO " + number));
+        break;
+      case "pwm":
+          container.remove();
+          menu.append($("<option />").val(number).text("PWM " + number));
+        break;
+    }
+  })
+  .done(function () {
+    
+  });
+}
+
+$.fn.populateDropdown = function(items, pretext) {
+  var options = this;
+  $.each(items, function(index, value) {
+    options.append($("<option />").val(value).text(pretext + value));
+  });
+};
+
+$.fn.exportGPIO = function(menu) {
+  var number = menu.val();
+  var url = mctx.api + "pin";
+  var container = this;
+  
+  $.ajax({url : url, data : {type : "gpi", num : number, export : 1}})
+  .fail(function () {
+    var form = $("<form/>", {"class" : "controls", action : "#", id : "gpio-" + number});
+    var title = $("<div/>", {"class" : "centre bold", text : "GPIO " + number});
+    var table = $("<table/>", {"class" : "centre"});
+    var header = $("<tr/>");
+    var controls = $("<tr/>");
+    
+    header.append($("<th/>", {text : "Direction"}))
+      .append($("<th/>", {text : "Set"}))
+      .append($("<th/>", {text : "Result"}))
+      .append($("<th/>", {text : "Unexport"}));
+    
+    controls.append($("<td/>").append(
+              $("<input/>", {type : "button", value : "In", name : "dir"})))
+      .append($("<td/>").append(
+        $("<input/>", {type : "button", value : "Off", name : "set", disabled : true})))
+      .append($("<td/>").append(
+        $("<input/>", {type : "text", readonly : "", name : "result"})))
+      .append($("<td/>").append(
+        $("<input/>", {type : "checkbox", name : "unexport", value : number})));
+    
+    form.append(title);
+    table.append(header).append(controls);
+    form.append(table);
+    form.setGPIOControl(number, menu);
+    container.append(form);
+    menu.find("option[value='" + number+"']").remove();
+  })
+  .done(function (jqXHR) {
+    alert("Failed to export GPIO " + number + ". Is the server running?\n" +
+          "Error code: " + jqXHR.status);
+  });
+};
+
+$.fn.exportPWM = function(menu) {
+  var number = menu.val();
+  var url = mctx.api + "pin";
+  var container = this;
+  $.ajax({url : url, data : {type : "pwm", num : number, export : "1"}})
+  .fail(function () {
+    var form = $("<form/>", {"class" : "controls", action : "#", id : "pwm-" + number});
+    var title = $("<div/>", {"class" : "centre bold", text : "PWM " + number});
+    var table = $("<table/>", {"class" : "centre"});
+    var header = $("<tr/>");
+    var controls = $("<tr/>");
+    
+    header.append($("<th/>", {text : "Frequency (Hz)"}))
+      .append($("<th/>", {text : "Duty cycle"}))
+      .append($("<th/>", {text : "Polarity"}))
+      .append($("<th/>", {text : "Set"}))
+      .append($("<th/>", {text : "Result"}))
+      .append($("<th/>", {text : "Unexport"}));
+    
+    controls.append($("<td/>").append(
+              $("<input/>", {type : "text", name : "freq"})))
+      .append($("<td/>").append(
+        $("<input/>", {type : "text", name : "duty"})))
+      .append($("<td/>").append(
+        $("<input/>", {type : "checkbox", name : "pol"})))
+      .append($("<td/>").append(
+        $("<input/>", {type : "button", value: "Go", name : "set"})))
+      .append($("<td/>").append(
+        $("<input/>", {type : "text", readonly : "", name : "result"})))
+      .append($("<td/>").append(
+        $("<input/>", {type : "checkbox", name : "unexport", value :umber})
+        .click(function () {
+          unexport("pwm", number, form, menu);
+          return false;
+        })));
+    
+    form.append(title);
+    table.append(header).append(controls);
+    form.append(table);
+    container.append(form);
+    menu.find("option[value='" + number+"']").remove();
+  })
+  .done(function (jqXHR) {
+    alert("Failed to export PWM " + number + ". Is the server running?\n" +
+          "Error code: " + jqXHR.status);
+  });
+};
+
+$.fn.setGPIOControl = function (number, menu) {
+  var container = this;
+  var dir = this.find("input[name='dir']");
+  var set = this.find("input[name='set']");
+  var result = this.find("input[name='result']");
+  var unexport = this.find("input[name='unexport']");
+  var update = true;
+  var updater = function() {
+    if (update) {
+      $.ajax({url : mctx.api + "pin", data : {type : "gpi", num : number}})
+      .done(function (data) {
+        result.val(data);
+      })
+      .fail(function () {
+        update = false;
+        result.val("GPIO retrieve failed.");
+      });
+    }
+    setTimeout(updater, mctx.pintest.refreshRate);
+  };
+  
+  dir.click(function () {
+    dir.attr('disabled', true);
+    var setOut = dir.val() === "In";
+    if (setOut) {
+      update = false;
+      set.attr('disabled', false);
+      result.empty();
+      dir.val("Out");
+    } else {
+      update = true;
+      set.attr('disabled', true);
+      result.empty();
+      dir.val("In");
+    }
+    dir.attr('disabled', false);
+  });
+  
+  set.click(function () {
+    dir.attr("disabled", true);
+    var val = (set.val() === "Off") ? 1 : 0;
+    $.ajax({url : mctx.api + "pin", data : {type : "gpo", num : number, set : val}})
+    .done(function (data) {
+      result.text(data);
+      if (val === 0)
+        set.val("Off");
+      else
+        set.val("On");
+    })
+    .fail(function () {
+      result.val("fail");
+    })
+    .always(function () {
+      dir.attr("disabled", false);
+    });
+  });
+  
+  unexport.click(function () {
+    update = false;
+    $.ajax({url : mctx.api + "pin", data : {type : "gpi", num : number, export : -1}})
+    container.remove();
+    menu.append($("<option />").val(number).text("GPIO " + number));
+    return false;
+  });
+  
+  updater();
+};
+
+/* 
+ * GPIO template
+          <form class="controls" action="#">
+            <div class="centre bold">GPIO 20</div>
+            
+            <table class="centre">
+              <tr>
+                <th>Direction</th><th>Set</th><th>Result</th><th>Unexport</th>
+              </tr>
+              <tr>
+                <td><input type="button" value="Out"></td>
+                <td><input type="button" value="On"></td>
+                <td><input type="text" readonly></td>
+                <td><input type="checkbox"></td>
+              </tr>
+            </table>
+          </form>
+ */
+
+/*
+ * PWM template
+          <form class="controls" action="#">
+            <table class="centre">
+              <tr>
+                <th>Frequency (Hz)</th><th>Duty cycle</th>
+                <th>Polarity</th><th>Set</th>
+                <th>Result</th><th>Unexport</th>
+              </tr>
+              <tr>
+                <td><input type="text"></td>
+                <td><input type="text"></td>
+                <td><input type="checkbox"></td>
+                <td><input type="button" value="Go"></td>
+                <td><input type="text" readonly></td>
+                <td><input type="checkbox"></td>
+              </tr>
+            </table>
+          </form>
+ */
\ No newline at end of file
index 35680ca..23a7c1e 100644 (file)
@@ -22,18 +22,38 @@ hr {
   border-bottom: 1px solid gray;
 }
 
+form.controls {
+  background-color: #F9F9F9;
+  border: 1px solid #808080;
+  padding: 1em;
+  margin: 1em auto;
+}
+
+div.centre {
+  text-align: center;
+}
+
+.bold {
+  font-weight: bold;
+}
+
 table {
   border: none;
 }
 
 table.centre {
   margin: auto;
+  text-align: center;
 }
 
 table.status, table.status tr, table.status td {
     padding: 0.2em 0.75em;
 }
 
+td {
+  padding: 0 0.5em;
+}
+
 th {
   padding: inherit;
   border-bottom: 1px solid gray;
@@ -50,6 +70,9 @@ input[type="button"], input[type="submit"] {
   border-radius: 3px;
   box-shadow: 1px 1px 1px #BBBBBB;
   transition: all 0.13s ease 0s;
+  padding: 0 0.5em;
+  min-width: 55px;
+  margin: 0.4em 0.1em;
 }
 
 input[type="button"]:active, input[type="submit"]:active {
@@ -99,7 +122,7 @@ input[type="text"], input[type="password"] {
 
 #sidebar{
   float: right;
-  min-width: 22%;
+  max-width: 26%;
 }
 
 #sidebar .title {
@@ -125,6 +148,12 @@ input[type="text"], input[type="password"] {
   margin-bottom: 0.5em;
 }
 
+#main .sub-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 0.25em;
+}
+
 .graph {
   width: 100%;
   height: 200px;

UCC git Repository :: git.ucc.asn.au