testing/MCTXWeb/public_html/static/mctx.gui.js

   1 /**
   2  * MCTX3420 2013 GUI stuff.
   3  */
   4
   5 mctx = {};
   6 mctx.api = location.protocol + "//" +  location.host + "/api/";
   7 mctx.expected_api_version = 0;
   8 mctx.key = undefined;
   9 mctx.has_control = false;
  10
  11 mctx.return_codes = {
  12   "1" : "Ok",
  13   "-1" : "General error",
  14   "-2" : "Unauthorized",
  15   "-3" : "Not running",
  16   "-4" : "Already exists"
  17 };
  18
  19 mctx.sensors = {
  20   0 : {name : "Strain gauge 1"},
  21   1 : {name : "Strain gauge 2"},
  22   2 : {name : "Strain gauge 3"},
  23   3 : {name : "Strain gauge 4"},
  24   4 : {name : "Pressure sensor 1"},
  25   5 : {name : "Pressure sensor 2"},
  26   6 : {name : "Pressure sensor 3"}
  27 };
  28
  29 mctx.actuators = {
  30   0 : {name : "Solenoid 1"},
  31   1 : {name : "Solenoid 2"},
  32   2 : {name : "Solenoid 3"},
  33   3 : {name : "Pressure regulator"}
  34 };
  35
  36 mctx.strain_gauges = {};
  37 mctx.strain_gauges.ids = [0, 1, 2, 3];
  38 mctx.strain_gauges.time_limit = 20;
  39
  40 /**
  41  * Writes the current date to wherever it's called.
  42  */
  43 function getDate(){
  44         document.write((new Date()).toDateString());
  45 }
  46
  47 /**
  48  * Populates a submenu of the navigation bar
  49  * @param {string} header The header
  50  * @param {object} items An object representing the submenu items
  51  * @param {function} translator A function that translates an object item
  52  *                              into a text and href.
  53  * @returns {$.fn} Itself
  54  */
  55 $.fn.populateSubmenu = function(header, items, translator) {
  56   var submenuHeader = $("<li/>").append($("<a/>", {text : header, href : "#"}));
  57   var submenu = $("<ul/>", {"class" : "submenu"});
  58
  59   for (var item in items) {
  60     var info = translator(item, items);
  61     submenu.append($("<li/>").append(
  62           $("<a/>", {text : info.text,
  63                      href : info.href, target : "_blank"})
  64     ));
  65   }
  66
  67   this.append(submenuHeader.append(submenu));
  68   return this;
  69 };
  70
  71 /**
  72  * Populates the navigation bar
  73  */
  74 $.fn.populateNavbar = function () {
  75   var menu = $("<ul/>", {"class" : "menu"});
  76   var sensorTranslator = function(item, items) {
  77     var href = mctx.api + "sensors?start_time=0&format=tsv&id=" + item;
  78     return {text : items[item].name, href : href};
  79   };
  80   var actuatorTranslator = function(item, items) {
  81     var href = mctx.api + "actuators?start_time=0&format=tsv&id=" + item;
  82     return {text : items[item].name, href : href};
  83   };
  84
  85   menu.populateSubmenu("Sensor data", mctx.sensors, sensorTranslator);
  86   menu.populateSubmenu("Actuator data", mctx.actuators, actuatorTranslator);
  87   menu.appendTo(this);
  88   return this;
  89 }
  90
  91 /**
  92  * Sets the camera autoupdater
  93  * @returns {$.fn}
  94  */
  95 $.fn.setCamera = function () {
  96   var url = mctx.api + "image";  //http://beaglebone/api/image
  97   var update = true;
  98
  99   //Stop updating if we can't retrieve an image!
 100   this.error(function() {
 101     update = false;
 102   });
 103
 104   var parent = this;
 105
 106   var updater = function() {
 107     if (!update) {
 108       alert("Cam fail");
 109       parent.attr("src", "");
 110       return;
 111     }
 112
 113     parent.attr("src", url + "#" + (new Date()).getTime());
 114
 115     setTimeout(updater, 1000);
 116   };
 117
 118   updater();
 119   return this;
 120 };
 121
 122 $.fn.setStrainGraphs = function () {
 123   var sensor_url = mctx.api + "sensors";
 124   var graphdiv = this;
 125
 126   var updater = function () {
 127     var time_limit = mctx.strain_gauges.time_limit;
 128     var responses = new Array(mctx.strain_gauges.ids.length);
 129
 130     for (var i = 0; i < mctx.strain_gauges.ids.length; i++) {
 131       var parameters = {id : i, start_time: -time_limit};
 132       responses[i] = $.ajax({url : sensor_url, data : parameters});
 133     }
 134
 135     $.when.apply(this, responses).then(function () {
 136       var data = new Array(arguments.length);
 137       for (var i = 0; i < arguments.length; i++) {
 138         var raw_data = arguments[i][0].data;
 139         var pruned_data = [];
 140         var step = ~~(raw_data.length/100);
 141         for (var j = 0; j < raw_data.length; j += step)
 142           pruned_data.push(raw_data[j]);
 143         data[i] = pruned_data;
 144       }
 145       $.plot(graphdiv, data);
 146       setTimeout(updater, 500);
 147     }, function () {alert("It crashed");});
 148   };
 149
 150   updater();
 151   return this;
 152 };
 153
 154 $.fn.login = function () {
 155   var username = this.find("input[name='username']").val();
 156   var password = this.find("input[name='pass']").val();
 157   var force = this.find("input[name='force']").is(":checked");
 158   var url = mctx.api + "control";
 159
 160   var authFunc = function(xhr) {
 161     xhr.setRequestHeader("Authorization",
 162         "Basic " + base64.encode(username + ":" + password));
 163   };
 164
 165   $.ajax({
 166     url : url,
 167     data : {action : "lock", force : (force ? true : undefined)},
 168     beforeSend : authFunc
 169   }).done(function (data) {
 170     mctx.key = data.key;
 171     if (data.status < 0) {
 172       alert("no - " + data.description);
 173     } else {
 174       mctx.has_control = true;
 175       alert("yes - " + mctx.key);
 176     }
 177   }).fail(function (jqXHR) {
 178     mctx.key = undefined;
 179     mctx.has_control = false;
 180     alert("no");
 181   });
 182 };
 183
 184 $.fn.setErrorLog = function () {
 185   var url = mctx.api + "errorlog";
 186   var outdiv = this;
 187
 188   var updater = function () {
 189     $.ajax({url : url}).done(function (data) {
 190       outdiv.text(data);
 191       outdiv.scrollTop(
 192         outdiv[0].scrollHeight - outdiv.height()
 193       );
 194       setTimeout(updater, 1000);
 195     }).fail(function (jqXHR) {
 196       outdiv.text("Failed to retrieve the error log.");
 197     });
 198   };
 199
 200   updater();
 201 };
 202
 203 $(document).ajaxError(function (event, jqXHR) {
 204   //console.log("AJAX query failed with: " + jqXHR.status + " (" + jqXHR.statusText + ")");
 205 });