<script type="text/javascript">
runBeforeLoad().done(function () {
$(document).ready(function () {
- //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");
- //$("#menu-container").populateNavbar();
-
- $("#logout").click(function () {
- $("#logout").logout();
- });
-
$("#main_controls").submit(function () {
//Validate!
return false;
});
-
- $("#errorlog").setErrorLog();
- $("#strain-graphs").setStrainGraphs();
});
})
</noscript>
<div id="content">
+ <div class="widget" id="sidebar-show">></div>
<div id="sidebar">
<div class="widget">
+ <div id="sidebar-hide"><</div>
<div class="title">Navigation menu</div>
- <div 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 id="sidebar-menu" class="nav-menu">
+
<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 class="widget">
- <div class="title">Help</div>
-
- </div>
</div>
<!-- End sidebar -->
<div id="main">
<div class="widget">
- <div class="title">Controls</div>
- <b>Main controls</b>
- <form id="main_controls" action="">
+ <div class="title">Experiment Status</div>
+ <table class="horizontal">
+ <tr>
+ <th>Experiment state</th>
+ <td id="state-exp">No experiment running.</td>
+ </tr>
+ <tr>
+ <th>Software status</th>
+ <td id="state-software"></td>
+ </tr>
+ </table>
+ <div class="bold">Error and warning messages</div>
+ <textarea id="errorlog" wrap="off" rows="4" cols="30" readonly>
+ </textarea>
+ </div>
+
+ <div class="widget">
+ <div class="bold">Main controls</div>
+ <form id="main-controls" action="">
+ <table>
+ <tr>
+ <td>Experiment name</td>
+ <td><input name="experiment_name" type="text"></td>
+ </tr>
+ <tr>
+ <td>Experiment mode</td>
+ <td>
+ <input name="experiment_type" value="strain" type="radio"> Strain it
+ <input name="experiment_type" value="explode" type="radio"> Explode it
+ </td>
+ </tr>
+ <tr>
+ <td>
+ </td>
+ <td align="right">
+ <input type="submit" value="Start">
+ <input type="submit" value="Pause">
+ <input type="submit" value="Stop">
+ </td>
+ </tr>
+ </table>
+ </form>
+
+ <div class="bold">Pressure controls</div>
+ <form id="pressure-controls" action="">
<table>
<tr>
<td>Experiment name</td>
</tr>
</table>
</form>
- <b>Error and warning messages</b><br>
- <textarea id="errorlog" wrap="off" rows="4" cols="30" readonly></textarea>
- </div>
- <div class="widget">
- <div class="title">Strain gauges</div>
- <div id="strain-graphs" class="graph">
- <!-- Strain graph placeholder -->
- </div>
</div>
</div>
<!-- End main content -->
<script type="text/javascript">
runBeforeLoad().done(function() {
$(document).ready(function() {
- //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");
- //$("#menu-container").populateNavbar();
-
- $("#logout").click(function() {
- $("#logout").logout();
- });
-
- $("#main_controls").submit(function() {
- //Validate!
- return false;
- });
-
- $("#errorlog").setErrorLog();
});
})
</noscript>
<div id="content">
+ <div class="widget" id="sidebar-show">></div>
<div id="sidebar">
<div class="widget">
+ <div id="sidebar-hide"><</div>
<div class="title">Navigation menu</div>
- <div class="nav-menu">
+ <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>
</ul>
</div>
</div>
- <div class="widget">
- <div class="title">Help</div>
-
- </div>
</div>
<!-- End sidebar -->
<![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>
-
<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().done(function () {
- $(document).ready(function () {
- //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 () {
+ runBeforeLoad().done(function() {
+ $(document).ready(function() {
+
+ }).always(function() {
+ $(document).ready(function() {
$("#graph-controls").setDevices();
- //$("#graph-run").runButton();
});
});
</script>
</head>
-
+
<body>
<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">
+ src="static/uwacrest-text.png">
</a>
<span id="title">Exploding Cans</span>
</div>
</div>
</div>
<!-- End header -->
-
+
<div id="content-wrap">
<noscript>
<div class="widget centre">
</noscript>
<div id="content">
+ <div class="widget" id="sidebar-show">></div>
<div id="sidebar">
<div class="widget">
+ <div id="sidebar-hide"><</div>
<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>
+
<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>
<div id="main">
<div class="widget">
<div class="title">Graph</div>
- <div id="graph" class="plot">
- <!-- graph placeholder -->
- </div>
+ <!-- graph placeholder -->
+ <div id="graph" class="plot"></div>
</div>
<div class="widget" id="graph-controls">
-
<!--<div class="title">Visualise</div>-->
- <b>X-Axis</b>
- <form id="xaxis" class="change">
- <input type="radio" name="xaxis" alt="time" id="time" checked="checked">
- <label for="time">time</label>
- </form>
- <b>Y-Axis</b>
- <form id="yaxis" class="change"> </form>
- <!--b>Right Y-Axis</b>
- <form id="y2axis" onChange=$("#graph").setGraph()> <input type="radio" name="y2axis" value="none" id="none" checked="yes">none</form>-->
+ <!--<div class="title">Visualise</div>-->
+ <b>X-Axis</b>
+ <form id="xaxis" class="change">
+ <input type="radio" name="xaxis" alt="time" id="time" checked="checked">
+ <label for="time">time</label>
+ </form>
+ <b>Y-Axis</b>
+ <form id="yaxis" class="change"> </form>
+ <!--b>Right Y-Axis</b>
+ <form id="y2axis" onChange=$("#graph").setGraph()> <input type="radio" name="y2axis" value="none" id="none" checked="yes">none</form>-->
- <div>
- <form id="time_range" class="change">
- <p>
- Time of Last Update <input type="text" value="" id="current_time" disabled>
- Start Time <input type="text" value="" id="start_time">
- End Time <input type="text" value="" id="end_time">
- </p>
- </form>
- </div>
- <input type="button" value="Run" id="graph-run" onClick="$('#graph-run').runButton()">
- <input type="button" value="Open New Graph" disabled>
- <input type="button" value="Save Graph Image" disabled>
- <input type="button" value="Dump Raw Data" disabled>
- </div>
-
- <!-- TODO: Put this on its own page?
- <div class="widget">
- <div class="title">Controls</div>
- <form id="controls">
- <p>Mode: <input type="radio" name="mode" value="normal">Normal
- <input type="radio" name="mode" value="explode">EXPLODE! </p>
- Filename: <input type="text">
- <input type="button" value="Stop" id="stopstart">
- <input type="button" value="Pause" id="runpause">
- <input type="button" value="Load">
+ <div>
+ <form id="time_range" class="change">
+ <p>
+ Time of Last Update <input type="text" value="" id="current_time" disabled>
+ Start Time <input type="text" value="" id="start_time">
+ End Time <input type="text" value="" id="end_time">
+ </p>
</form>
+ </div>
+ <input type="button" value="Run" id="graph-run" onClick="$('#graph-run').runButton()">
+ <input type="button" value="Open New Graph" disabled>
+ <input type="button" value="Save Graph Image" id="saveimage">
+ <input type="button" value="Dump Raw Data" disabled>
+ <script>
+ $("#saveimage").click(function() {
+ $("canvas").each(function() {
+ var image = new Image();
+
+ window.open(this.toDataURL("image/png"));
+ $("#graph-controls").append(image);
+ });
+ });
+ </script>
+
+ <div id="status-text"> </div>
</div>
+
+
+ <!-- TODO: Put this on its own page?
+ <div class="widget">
+ <div class="title">Controls</div>
+ <form id="controls">
+ <p>Mode: <input type="radio" name="mode" value="normal">Normal
+ <input type="radio" name="mode" value="explode">EXPLODE! </p>
+ Filename: <input type="text">
+ <input type="button" value="Stop" id="stopstart">
+ <input type="button" value="Pause" id="runpause">
+ <input type="button" value="Load">
+ </form>
+ </div>
-->
</div>
- </div>
+ </div>
<!-- End main content -->
</div>
</body>
<script type="text/javascript">
runBeforeLoad().done(function() {
$(document).ready(function() {
- //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");
- //$("#menu-container").populateNavbar();
-
- $("#logout").click(function() {
- $("#logout").logout();
- });
-
- $("#main_controls").submit(function() {
- //Validate!
- return false;
- });
-
- $("#errorlog").setErrorLog();
+
});
})
<div id="content-wrap">
<div id="content">
+ <div class="widget" id="sidebar-show">></div>
<div id="sidebar">
<div class="widget">
+ <div id="sidebar-hide"><</div>
<div class="title">Navigation menu</div>
- <div class="nav-menu">
+ <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>
<script type="text/javascript">
runBeforeLoad().done(function () {
$(document).ready(function () {
- //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 () {
</noscript>
<div id="content">
+ <div class="widget" id="sidebar-show">></div>
<div id="sidebar">
<div class="widget">
+ <div id="sidebar-hide"><</div>
<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>
+
<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 class="widget">
- <div class="title">Help</div>
-
- </div>
</div>
<!-- End sidebar -->
});
$(document).ready(function () {
- //Set the welcome bar
- var name = " " + (mctx.friendlyName ? mctx.friendlyName : "");
- $("#welcome-container").text("Welcome"+ name + "!");
- $("#content").css("display", "block");
-
- $("#logout").click(function () {
- $("#logout").logout();
- });
-
$("#gpio-menu").populateDropdown(mctx.pintest.gpios, "GPIO ");
$("#pwm-menu").populateDropdown(mctx.pintest.pwms, "PWM ");
}
});
$("#adc-controls").trigger("reset").setADCControl();
-
- $("#errorlog").setErrorLog();
});
})
</noscript>
<div id="content">
+ <div class="widget" id="sidebar-show">></div>
<div id="sidebar">
<div class="widget">
+ <div id="sidebar-hide"><</div>
<div class="title">Navigation menu</div>
- <div 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 id="sidebar-menu" class="nav-menu">
+
<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 class="widget">
mctx.graph.independent = null;
mctx.graph.timer = null;
mctx.graph.running = false;
+mctx.graph.chart = null;
/**
* Helper - Calculate pairs of (dependent, independent) values
$("#xaxis").deployDevices("radio", false, 'xaxis');
$("#yaxis").deployDevices("checkbox", true, 'yaxis');
$("#current_time").val(data.running_time);
- //Add event listeners for when the inputs are changed
+ //Add event listeners for when the
$(".change input").change(function () {
$("#graph").setGraph();
});
});
};
+function setGraphStatus(on, failText) {
+ if (on) {
+ mctx.graph.running = true;
+ $("#status-text").html(" ");
+ $("#graph-run").text("Pause");
+ } else {
+ mctx.graph.running = false;
+ if (failText) {
+ $("#status-text").text(failText).addClass("fail");
+ } else {
+ $("#status-text").text("Graph stopped").removeClass("fail");
+ }
+ $("#graph-run").text("Run");
+ }
+}
+
function graphUpdater() {
var urls = {
'sensors' : mctx.graph.api.sensors,
}
var updater = function () {
- var time_limit = 20;
var responses = [];
var ctime = $("#current_time");
var devices = mctx.graph.devices;
if (xaxis.size() < 1 || yaxis.size() < 1) {
- mctx.graph.running = false;
+ setGraphStatus(false, "No x or y axis selected.");
return;
}
$.each(devices, function(key, val) {
if (val.urltype in urls) {
var parameters = {id : val.id};
- if (start_time != null) {
+ if (start_time !== null) {
parameters.start_time = start_time;
}
- if (end_time != null) {
+ if (end_time !== null) {
parameters.end_time = end_time;
}
responses.push($.ajax({url : urls[val.urltype], data : parameters})
plot_data.push(devices[$(this).attr("alt")].data);
} else {
var result = []
- dataMerge(devices[xaxis.attr("alt")].data, devices[$(this).attr("alt")].data, result);
- /*
- var astr = "[";
- for (var i = 0; i < result.length; ++i)
- astr += "[" + result[i][0] + "," + result[i][1] + "]" + ",";
- astr += "]";
- alert(astr);
- */
+ dataMerge(devices[xaxis.attr("alt")].data,
+ devices[$(this).attr("alt")].data, result);
plot_data.push(result);
}
});
- $.plot("#graph", plot_data);
+ //$.plot("#graph", plot_data);
+ if (mctx.graph.chart !== null) {
+ mctx.graph.chart.setData(plot_data);
+ mctx.graph.chart.setupGrid();
+ mctx.graph.chart.draw();
+ } else {
+ mctx.graph.chart = $.plot("#graph", plot_data);
+ }
if (mctx.graph.running) {
mctx.graph.timer = setTimeout(updater, 1000);
}
- }, function () {mctx.graph.running=false; alert("Graph crashed");});
+ }, function () {
+ setGraphStatus("Connection issue - graph stopped.");
+ //This will always happen when a user closes the page
+ //alert("Graph crashed");
+ });
};
- mctx.graph.running = true;
+ setGraphStatus(true);
updater();
return this;
}
var yaxis = $("#yaxis input[name=yaxis]:checked");
if (xaxis.size() < 1 || yaxis.size() < 1) {
//nothing to plot...
+ setGraphStatus(false, "No x or y axis selected.");
return;
}
if (!mctx.graph.running) {
$("#graph-run").val("Pause");
+ $("#status-text").text("")
graphUpdater();
}
};
$.fn.runButton = function() {
- //alert($(this).val());
- if ($(this).val() === "Run") {
- $("#graph").setGraph();
- $(this).val("Pause");
- }
- else {
- mctx.graph.running = false;
+ if (mctx.graph.running) {
+ setGraphStatus(false);
clearTimeout(mctx.graph.timer);
- $(this).val("Run");
+ } else {
+ $("#graph").setGraph();
}
};
return this;
};
+$(document).ready(function () {
+ //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");
+ //$("#menu-container").populateNavbar();
+
+ $("#logout").click(function () {
+ $("#logout").logout();
+ });
+
+ //Enable the error log, if present
+ $("#errorlog").setErrorLog();
+
+ //Enable the hide/show clicks
+ $("#sidebar-hide").click(function () {
+ $("#sidebar").css("display", "none");
+ $("#sidebar-show").css("display", "inherit");
+ return this;
+ });
+
+ $("#sidebar-show").click(function () {
+ $("#sidebar-show").css("display", "none");
+ $("#sidebar").css("display", "inherit");
+ return this;
+ });
+});
$(document).ajaxError(function (event, jqXHR) {
//console.log("AJAX query failed with: " + jqXHR.status + " (" + jqXHR.statusText + ")");
});
\ No newline at end of file
font-family: "Open Sans";
src: url("OpenSans.ttf"),
url("OpenSans.eot");
+ font-weight: normal;
+}
+
+@font-face {
+ font-family: "Open Sans";
+ src: url("OpenSansBold.ttf");
+ font-weight: bold;
}
body {
font-weight: bold;
}
+/*
table {
border: none;
}
padding: 0.2em 0.75em;
}
+
td {
padding: 0 0.5em;
}
border-bottom: 1px solid gray;
}
+*/
+
+table {
+ border-radius: 3px;
+ border: 1px solid #ccc;
+ border-collapse: collapse;
+ word-wrap: break-word;
+ line-height: 1.3em;
+ width: 100%;
+}
+
+td {
+ padding: 0.2em 0.5em;
+}
+
+table.centre {
+ margin: auto;
+ text-align: center;
+}
+
+table.horizontal {
+ line-height: 1.6em;
+}
+
+table.horizontal th {
+ border-right: 1px solid #ccc;
+ border-bottom: 0;
+ width: 20%;
+}
+
img.centre {
display: block;
margin: auto;
#header {
padding: 1.5em 2em;
- max-width: 1280px;
+ /*max-width: 1920px;*/
margin: 0 auto;
}
#content-wrap {
padding: 1em 2em;
- max-width: 1280px;
+ /*max-width: 1920px;*/
margin: 1em auto;
}
#sidebar{
float: left;
width: 240px;
+ transition: all 0.2s ease 0s;
}
#sidebar .title {
font-size: 20px;
}
+#sidebar-hide {
+ border-bottom: 1px solid #CCCCCC;
+ border-left: 1px solid #CCCCCC;
+ cursor: pointer;
+ float: right;
+ height: 20px;
+ margin-right: -1.25em;
+ margin-top: -1em;
+ text-align: center;
+ width: 20px;
+}
+
+#sidebar-show {
+ float: left;
+ cursor: pointer;
+ display: none;
+}
+
.justify {
text-align: justify;
}
margin-bottom: 0.25em;
}
+/* Unused ?? */
+.sxs {
+ display: table;
+ table-layout: fixed;
+ width: 100%;
+ border-spacing: 0.5em;
+}
+
+.sxs div {
+ display: table-cell;
+}
+
+.right {
+ float: right;
+}
+
.title {
font-size: 24px;
font-weight: bold;
max-width: 100%;
width: 100%;
height: 6em;
+ background-color: white;
+ border: 1px solid #ccc;
}
/** For login.html **/
git.ucc.asn.au / matches / MCTX3420.git / commitdiff
UCC git Repository :: git.ucc.asn.au