From 6377ff1447acecdb0496116d983034768773d726 Mon Sep 17 00:00:00 2001
From: Jeremy Tan <jeremy@jx.tan.fake>
Date: Sun, 29 Sep 2013 17:25:30 +0800
Subject: [PATCH] Update pintest + fix css

---
 testing/MCTXWeb/public_html/pintest.html      |   3 +-
 .../MCTXWeb/public_html/static/mctx.gui.js    |   6 +-
 .../public_html/static/mctx.pintest.js        | 140 ++++++++++++------
 testing/MCTXWeb/public_html/static/style.css  |  34 ++++-
 4 files changed, 131 insertions(+), 52 deletions(-)

diff --git a/testing/MCTXWeb/public_html/pintest.html b/testing/MCTXWeb/public_html/pintest.html
index 5d0527b..d8821be 100644
--- a/testing/MCTXWeb/public_html/pintest.html
+++ b/testing/MCTXWeb/public_html/pintest.html
@@ -30,6 +30,7 @@
             $("#pwm-container").exportPWM($("#pwm-menu"));
           }
         });
+        $("#adc-controls").trigger("reset").setADCControl();
       });
     </script>
   </head>
@@ -110,7 +111,7 @@
 
         <div class="widget">
           <div class="title">Analogue input (ADC)</div>
-          <form class="controls" action="#">
+          <form class="controls" action="#" id="adc-controls">
             <table class="centre">
               <tr>
                 <td>AIN</td><th>0</th><th>1</th><th>2</th><th>3</th>
diff --git a/testing/MCTXWeb/public_html/static/mctx.gui.js b/testing/MCTXWeb/public_html/static/mctx.gui.js
index 180c395..c359e3b 100644
--- a/testing/MCTXWeb/public_html/static/mctx.gui.js
+++ b/testing/MCTXWeb/public_html/static/mctx.gui.js
@@ -194,4 +194,8 @@ $.fn.setErrorLog = function () {
   };
   
   updater();
-};
\ No newline at end of file
+};
+
+$(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/mctx.pintest.js b/testing/MCTXWeb/public_html/static/mctx.pintest.js
index 7a792e8..f04daad 100644
--- a/testing/MCTXWeb/public_html/static/mctx.pintest.js
+++ b/testing/MCTXWeb/public_html/static/mctx.pintest.js
@@ -5,6 +5,7 @@
 
 
 mctx.pintest = {};
+mctx.pintest.api = mctx.api + "pin";
 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,
@@ -12,49 +13,22 @@ mctx.pintest.gpios = [
  ];
 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 () {
-    
-  });
-}
+mctx.pintest.idleRefreshRate = 1500;
 
 $.fn.populateDropdown = function(items, pretext) {
   var options = this;
   $.each(items, function(index, value) {
     options.append($("<option />").val(value).text(pretext + value));
   });
+  return this;
 };
 
 $.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 () {
+  $.ajax({url : mctx.pintest.api, data : {type : "gpi", num : number, export : 1}})
+  .done(function () {
     var form = $("<form/>", {"class" : "controls", action : "#", id : "gpio-" + number});
     var title = $("<div/>", {"class" : "centre bold", text : "GPIO " + number});
     var table = $("<table/>", {"class" : "centre"});
@@ -82,18 +56,18 @@ $.fn.exportGPIO = function(menu) {
     container.append(form);
     menu.find("option[value='" + number+"']").remove();
   })
-  .done(function (jqXHR) {
+  .fail(function (jqXHR) {
     alert("Failed to export GPIO " + number + ". Is the server running?\n" +
           "Error code: " + jqXHR.status);
   });
+  return this;
 };
 
 $.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"}})
+  $.ajax({url : mctx.pintest.api, 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});
@@ -119,15 +93,12 @@ $.fn.exportPWM = function(menu) {
       .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;
-        })));
+        $("<input/>", {type : "checkbox", name : "unexport", value :number})));
     
     form.append(title);
     table.append(header).append(controls);
     form.append(table);
+    form.setPWMControl(number, menu);
     container.append(form);
     menu.find("option[value='" + number+"']").remove();
   })
@@ -135,6 +106,7 @@ $.fn.exportPWM = function(menu) {
     alert("Failed to export PWM " + number + ". Is the server running?\n" +
           "Error code: " + jqXHR.status);
   });
+  return this;
 };
 
 $.fn.setGPIOControl = function (number, menu) {
@@ -146,16 +118,16 @@ $.fn.setGPIOControl = function (number, menu) {
   var update = true;
   var updater = function() {
     if (update) {
-      $.ajax({url : mctx.api + "pin", data : {type : "gpi", num : number}})
+      $.ajax({url : mctx.pintest.api, data : {type : "gpi", num : number}})
       .done(function (data) {
         result.val(data);
       })
-      .fail(function () {
-        update = false;
-        result.val("GPIO retrieve failed.");
+      .always(function () {
+        setTimeout(updater, mctx.pintest.refreshRate);
       });
+    } else {
+      setTimeout(updater, mctx.pintest.idleRefreshRate);
     }
-    setTimeout(updater, mctx.pintest.refreshRate);
   };
   
   dir.click(function () {
@@ -178,9 +150,9 @@ $.fn.setGPIOControl = function (number, menu) {
   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}})
+    $.ajax({url : mctx.pintest.api, data : {type : "gpo", num : number, set : val}})
     .done(function (data) {
-      result.text(data);
+      result.val(data);
       if (val === 0)
         set.val("Off");
       else
@@ -196,13 +168,87 @@ $.fn.setGPIOControl = function (number, menu) {
   
   unexport.click(function () {
     update = false;
-    $.ajax({url : mctx.api + "pin", data : {type : "gpi", num : number, export : -1}})
+    $.ajax({url : mctx.pintest.api, data : {type : "gpi", num : number, export : -1}})
     container.remove();
     menu.append($("<option />").val(number).text("GPIO " + number));
     return false;
   });
   
   updater();
+  return this;
+};
+
+$.fn.setPWMControl = function (number, menu) {
+  var container = this;
+  var freq = this.find("input[name='freq']");
+  var duty = this.find("input[name='duty']");
+  var pol = this.find("input[name='pol']");
+  var set = this.find("input[name='set']");
+  var result = this.find("input[name='result']");
+  var unexport = this.find("input[name='unexport']");
+
+  set.click(function () {
+    var freqVal = parseFloat(freq.val());
+    var dutyVal = parseFloat(duty.val());
+    var polVal = pol.is(":checked") ? 1 : 0;
+    
+    result.val("Processing...");
+    if (isNaN(freqVal) || isNaN(dutyVal) || freqVal <= 0 || dutyVal < 0 || dutyVal > 1) {
+      result.val("Invalid input");
+    } else {
+      $.ajax({url : mctx.pintest.api, 
+              data : {type : "pwm", num : number, freq : freqVal, 
+                      duty : dutyVal, pol : polVal, set : 1}})
+      .done(function(data) {
+        result.val(data);
+      })
+    }
+  });
+  
+  unexport.click(function () {
+    $.ajax({url : mctx.pintest.api, data : {type : "pwm", num : number, export : -1}})
+    container.remove();
+    menu.append($("<option />").val(number).text("PWM " + number));
+    return false;    
+  });
+  
+  return this;
+};
+
+/**
+ * Given the form containing the ADC control elements, it activates the controls.
+ * @returns {$.fn}
+ */
+$.fn.setADCControl = function() {
+  var container = this;
+  this.find("input[type='checkbox']").each(function () {
+    var update = false;
+    var number = $(this).attr("name");
+    var result = container.find("input[type='text'][name='" + number + "']");
+    
+    var updater = function () {
+      if (update) {
+         $.ajax({url : mctx.pintest.api, data : {type : "adc", num : number}})
+         .done(function (data) {
+            result.val(data);
+         })
+         .always(function () {
+            setTimeout(updater, mctx.pintest.refreshRate);
+         });
+      } else {
+        setTimeout(updater, mctx.pintest.idleRefreshRate);
+      }
+    };
+    
+    $(this).click(function () {
+      update = !update;
+      result.val("");
+      var exp = update ? 1 : -1;
+       $.ajax({url : mctx.pintest.api, data : {type : "adc", num : number, export : exp}});
+    });
+    updater();
+  });
+  return this;
 };
 
 /* 
diff --git a/testing/MCTXWeb/public_html/static/style.css b/testing/MCTXWeb/public_html/static/style.css
index f741b16..7ca9f52 100644
--- a/testing/MCTXWeb/public_html/static/style.css
+++ b/testing/MCTXWeb/public_html/static/style.css
@@ -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 {
@@ -100,7 +123,7 @@ input[type="text"], input[type="password"] {
 
 #sidebar{
   float: right;
-  min-width: 22%;
+  max-width: 26%;
 }
 
 #sidebar .title {
@@ -124,7 +147,12 @@ input[type="text"], input[type="password"] {
   font-size: 24px;
   font-weight: bold;
   margin-bottom: 0.5em;
-  margin-left: 25%;
+}
+
+#main .sub-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 0.25em;
 }
 
 .graph {
@@ -155,4 +183,4 @@ input[type="text"], input[type="password"] {
   max-width: 100%;
   width: 100%;
   height: 6em;
-}
+}
\ No newline at end of file
-- 
2.20.1