<title>MCTX3420 Web Interface</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>
+ <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/mctx.gui.js"></script>
- <script type="text/javascript" src="static/mctx.graph.js"></script>
+ <script type="text/javascript" src="static/mctx.graph.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">
- runBeforeLoad().always(function () {
+ runBeforeLoad().done(function () {
$(document).ready(function () {
- $("#graph-controls").setDevices();
- $("#graph-run").runButton();
-
+ //Show the content!
+ $("#content").css("display", "block");
+ //Set the welcome bar
+ var name = " " + (mctx.friendlyName ? mctx.friendlyName : "");
+ $("#welcome-container").text("Welcome"+ name + "!");
+ $("#logout-container").css("display", "block");
+ $("#logout").click(function () {
+ $("#logout").logout();
+ });
});
- })
+ }).always(function () {
+ $(document).ready(function () {
+ $("#graph-controls").setDevices();
+ //$("#graph-run").runButton();
+ });
+ });
</script>
</head>
<body>
- <div id="header-wrap"></div>
+ <div id="header-wrap">
+ <div id="header">
+ <div id="leftnav">
+ <a href="http://www.uwa.edu.au/" target="_blank">
+ <img alt = "The University of Western Australia"
+ src="static/uwacrest-text.png">
+ </a>
+ <span id="title">Exploding Cans</span>
+ </div>
+ <div id="rightnav">
+ <span id="welcome-container">
+ </span>
+ <span id="date">
+ <script type="text/javascript">getDate();</script>
+ </span>
+ <div id="logout-container">
+ <form action="#">
+ <div>
+ <input type="button" id="logout" value="Logout">
+ </div>
+ </form>
+ </div>
+ </div>
+ <div class="clear"></div>
+ </div>
+ </div>
+ <!-- End header -->
+
<div id="content-wrap">
+ <noscript>
+ <div class="widget centre">
+ <div class="title">JavaScript required</div>
+ This website requires JavaScript to function correctly.
+ Please enable JavaScript to use this site.
+ </div>
+ </noscript>
+
<div id="content">
+ <div id="sidebar">
+ <div class="widget">
+ <div class="title">Navigation menu</div>
+ <div id="sidebar-menu" class="nav-menu">
+ <ul>
+ <li><a href="index.html"><span>Home</span></a></li>
+ <li><a href="control.html"><span>Experiment control</span></a></li>
+ <li><a href="graph.html"><span>Experiment graphs</span></a></li>
+ <li><a href="data.html"><span>Experiment data</span></a></li>
+ <li><a href="pintest.html"><span>Pin debugging</span></a></li>
+ <li class="last"><a href="help.html"><span>Help</span></a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <!-- End sidebar -->
+
<div id="main">
<div class="widget">
<div class="title">Graph</div>
<div class="widget" id="graph-controls">
<!--<div class="title">Visualise</div>-->
<b>X-Axis</b>
- <form id="xaxis" onChange=$("#graph").setGraph()> <input type="radio" name="xaxis" value="time" id="time" checked="yes">time</input> </form>
+ <form id="xaxis" onChange=$("#graph").setGraph()>
+ <input type="radio" name="xaxis" alt="time" id="time" checked="yes">time</input>
+ </form>
<b>Y-Axis</b>
<form id="yaxis" onChange=$("#graph").setGraph()> </form>
<!--b>Right Y-Axis</b>
</form>
</div>
</div>
- </div>
+ </div>
+ <!-- End main content -->
</div>
</body>
-</html>
+</html>
\ No newline at end of file
* @returns result
*/
function dataMerge(dependent, independent, result) {
-
var j = 0;
for (var i = 0; i < dependent.length-1; ++i) {
var start = dependent[i][0];
var end = dependent[i+1][0];
- var average = 0; var n = 0;
+ var average = 0, n = 0;
for (; j < independent.length; ++j) {
if (independent[j][0] < start)
continue;
if (n > 0) {
average /= n;
result.push([dependent[i][1], average]);
- }
+ }
}
return result;
}
/**
* Helper function adds the sensors and actuators to a form
+ * @param input_type is it a radio? or is it a checkbox?
+ * @param check_first determines whether the first item is checked or not
+ * @param group which group this input belongs to (name field)
*/
-$.fn.deployDevices = function(input_type, check_first) {
- var formhtml = $(this).html();
- var formname = $(this).attr("id");
- // formhtml += "<i> Sensors </i>"
- var checked = "checked";
- if (!check_first)
- checked = "";
- $.each(mctx.sensors, function(key, val) {
- formhtml += "<input type=\""+input_type+"\" value=\""+val+"\" id=\"sensors\" name=\""+formname+"\""+checked+">" + val + "</input>";
- checked = "";
- });
- // formhtml += "<i> Actuators </i>"
- $.each(mctx.actuators, function(key, val) {
- formhtml += "<input type=\""+input_type+"\" value=\""+val+"\" id=\"actuators\" name=\""+formname+"\""+checked+">" + val + "</input>";
- checked = "";
- });
- $(this).html(formhtml);
+$.fn.deployDevices = function(input_type, check_first, group) {
+ var container = this;
+ var apply = function(dict, prefix) {
+ $.each(dict, function(key, val) {
+ var attributes = {
+ 'type' : input_type, 'value' : key, 'alt' : val,
+ 'class' : prefix, 'name' : group,
+ 'id' : prefix + '_' + val //Unique id (name mangling)
+ };
+ var entry = $("<input/>", attributes);
+ var label = $("<label/>", {'for' : prefix + '_' + val, 'text' : val});
+ entry.prop("checked", check_first);
+ check_first = false;
+ container.append(entry).append(label);
+ });
+ }
+
+ apply(mctx.sensors, 'sensors');
+ apply(mctx.actuators, 'actuators');
};
/**
* @returns itself (Is this right?)
*/
$.fn.setDevices = function() {
- // Query for sensors and actuators
- var sensor_curtime = 0;
- var actuator_curtime = 0;
- return $.when(
- $.ajax({url : mctx.api + "?sensors"}).done(function(data) {
- mctx.sensors = $.extend(mctx.sensors, data.sensors);
- sensor_curtime = data.running_time;
- }),
- $.ajax({url : mctx.api + "?actuators"}).done(function(data) {
- mctx.actuators = $.extend(mctx.actuators, data.actuators);
- actuator_curtime = data.running_time;
- })
- ).then(function() {
- $("#xaxis").deployDevices("radio", false);
- $("#yaxis").deployDevices("checkbox", true);
- var c = Math.max(actuator_curtime, sensor_curtime);
- $("input[name=current_time]", "#time_range").val(c);
-
+ // Query for sensors and actuators
+ return $.ajax({
+ url : mctx.api + 'identify',
+ data : {'sensors' : 1, 'actuators' : 1}
+ }).done(function (data) {
+ mctx.sensors = $.extend(mctx.sensors, data.sensors);
+ mctx.actuators = $.extend(mctx.actuators, data.actuators);
+ $("#xaxis").deployDevices("radio", false, 'xaxis');
+ $("#yaxis").deployDevices("checkbox", true, 'yaxis');
+ $("#current_time").val(data.running_time);
});
};
-
-
/**
* Sets the graphs to graph stuff.
* @returns {$.fn}
*/
$.fn.setGraph = function () {
clearTimeout(mctx.graph.timer);
- var sensor_url = mctx.api + "sensors";
- var actuator_url = mctx.api + "actuators";
+ var urls = {
+ 'sensors' : mctx.graph.api.sensors,
+ 'actuators' : mctx.graph.api.actuators
+ }
var updateData = function(json, data) {
for (var i = 0; i < json.data.length; ++i)
};
var graphdiv = this;
-
// Determine which actuator/sensors to plot
- var xaxis = $("input[name=xaxis]:checked", "#xaxis");
- var yaxis = $("input[name=yaxis]:checked", "#yaxis");
+ var xaxis = $("#xaxis input:checked");
+ var yaxis = $("#yaxis input:checked");
var start_time = $("#start_time").val();
var end_time = $("#end_time").val();
if (!$.isNumeric(start_time)) {
}
var devices = {};
- xaxis.each(function() {
- devices[$(this).val()] = {};
- devices[$(this).val()]["url"] = mctx.api + $(this).attr("id");
- devices[$(this).val()]["data"] = [];
- devices[$(this).val()]["start_time"] = start_time;
- devices[$(this).val()]["end_time"] = end_time;
- });
+ var populateDict = function () {
+ var dict = {};
+ dict['urltype'] = $(this).attr("class");
+ dict['id'] = $(this).attr("value");
+ dict['data'] = [];
+ dict['start_time'] = start_time;
+ dict['end_time'] = end_time;
+ devices[$(this).attr("alt")] = dict;
+ };
+ xaxis.each(populateDict);
+ yaxis.each(populateDict);
+
+ /*
yaxis.each(function() {
- devices[$(this).val()] = {};
- devices[$(this).val()]["url"] = mctx.api + $(this).attr("id");
- devices[$(this).val()]["data"] = [];
- devices[$(this).val()]["start_time"] = start_time;
- devices[$(this).val()]["end_time"] = end_time;
+
+ devices[$(this).attr("alt")] = {};
+ devices[$(this).attr("alt")]["url"] = mctx.api + $(this).attr("class");
+ devices[$(this).attr("alt")]["data"] = [];
+ devices[$(this).attr("alt")]["start_time"] = start_time;
+ devices[$(this).attr("alt")]["end_time"] = end_time;
});
+ */
-
var updater = function () {
var time_limit = 20;
var responses = [];
var ctime = $("#current_time");
-
$.each(devices, function(key, val) {
- if (devices[key].url === sensor_url || devices[key].url === actuator_url) {
- // alert("AJAX");
- //alert(key);
- //alert(devices[key].url);
- parameters = {name : key};
+ console.log(val);
+ if (val.urltype in urls) {
+ var parameters = {id : val.id};
if (start_time != null) {
- //alert("start_time = " + start_time);
- parameters = $.extend(parameters, {start_time : start_time});
+ parameters.start_time = start_time;
}
- if (end_time != null)
- parameters = $.extend(parameters, {end_time : end_time});
- responses.push($.ajax({url : devices[key].url, data : parameters}).done(function(json) {
+ if (end_time != null) {
+ parameters.end_time = end_time;
+ }
+ responses.push($.ajax({url : urls[val.urltype], data : parameters})
+ .done(function(json) {
//alert("Hi from " + json.name);
- var dev = devices[json.name].data;
+ var dev = val.data;
for (var i = 0; i < json.data.length; ++i) {
if (dev.length <= 0 || json.data[i][0] > dev[dev.length-1][0]) {
dev.push(json.data[i]);
}
});
- //... When the response is received, then() will happen (I think?)
+ //... When the response is received, then() will happen (I think?) yup
$.when.apply(this, responses).then(function () {
-
var plot_data = [];
yaxis.each(function() {
//alert("Add " + $(this).val() + " to plot");
- if (xaxis.val() === "time") {
+ if (xaxis.attr("alt") === "time") {
//alert("Against time");
- plot_data.push(devices[$(this).val()].data);
+ plot_data.push(devices[$(this).attr("alt")].data);
}
else {
var result = []
- dataMerge(devices[xaxis.val()].data, devices[$(this).val()].data, result);
+ dataMerge(devices[xaxis.attr("alt")].data, devices[$(this).attr("alt")].data, result);
/*
var astr = "[";
for (var i = 0; i < result.length; ++i)
git.ucc.asn.au / matches / MCTX3420.git / commitdiff
UCC git Repository :: git.ucc.asn.au