-<!DOCTYPE html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>MCTX3420 Web Interface</title>
<!--[if lte IE 8]>
<script language="javascript" type="text/javascript" src="static/excanvas.min.js"></script>
<![endif]-->
- <script src="static/jquery-1.10.1.min.js"></script>
- <script src="static/jquery.flot.min.js"></script>
- <script src="static/mctx.gui.js"></script>
+ <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>
<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 () {
+ $("#menu-container").populateNavbar();
+ });
+ </script>
</head>
+
<body>
<div id="header">
<span id="title">Exploding Cans</span>
<div id="rightnav">
- <div id="menu">
- <a href="#">Link 1</a>
- <a href="#">Link 2</a>
- <a href="#">Link 3</a>
+ <div id="menu-container" class="nav-menu">
</div>
<span id="date">
<script type="text/javascript">getDate();</script>
</span>
</div>
+ <div class="clear"></div>
</div>
-
+
<div id="content">
<div id="sidebar">
<div class="widget">
- <div class="announce">
+ <div class="title">
Status
</div>
<div class="item">
- <table>
+ <table class="status centre">
<tr><th>Module</th> <th>State</th></tr>
<tr><td>Case interlock</td> <td>FAIL</td></tr>
<tr><td>Pressure level</td> <td>PASS</td></tr>
</div>
<div class="widget">
- <div class="announce">
- Meta2
+ <div class="title">
+ Login
</div>
<div class="item">
- Some more text
+ <form action="#">
+ <table class="centre">
+ <tr><td>Username</td><td><input name="username" type="text"></td></tr>
+ <tr><td>Password</td><td><input name="pass" type="password"></td></tr>
+ <tr><td></td><td><input type="button" value="Submit"></td></tr>
+ </table>
+ </form>
</div>
</div>
<div id="main">
<div class="widget">
- <div class="announce">Dashboard</div>
+ <div class="title">Dashboard</div>
</div>
<div class="widget">
- <div class="announce">Sensors</div>
+ <div class="title">Sensors</div>
</div>
<div class="widget">
- <div class="announce">Actuators</div>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ <div class="title">Actuators</div>
+ <form action="#">
+ <table class="status">
+ <tr><th>Module</th><th>Control</th><th>State</th></tr>
+ <tr> <td>Solenoid 1</td>
+ <td><input type="button" value="Turn on"></td>
+ <td><div class="circle"></div></td>
+ </tr>
+ </table>
+ </form>
+ </div>
+
+ <div class="widget">
+ <div class="title">Camera Dilatometer</div>
+ <img src="#" alt="Camera 1" id="cam1" class="centre">
+ <script type="text/javascript">
+ //$("#cam1").setCamera();
+ </script>
</div>
</div>
</div>
+/**
+ * MCTX3420 2013 GUI stuff.
+ */
+
+mctx = {};
+//mctx.api = location.protocol + "/" + location.host + "/api/";
+mctx.api = "http://mctx.us.to:8080/api/";
+mctx.expected_api_version = 0;
+mctx.sensors = {
+ 0 : {name : "Strain gauge 1"},
+ 1 : {name : "Strain gauge 2"},
+ 2 : {name : "Strain gauge 3"},
+ 3 : {name : "Strain gauge 4"},
+ 4 : {name : "Pressure sensor 1"},
+ 5 : {name : "Pressure sensor 2"}
+};
+
+mctx.actuators = {
+ 0 : {name : "Solenoid 1"},
+ 1 : {name : "Solenoid 2"},
+ 2 : {name : "Solenoid 3"},
+ 3 : {name : "Pressure regulator"}
+};
+
function getDate(){
- var d = new Date;
- document.write(d.toDateString());
-}
\ No newline at end of file
+ document.write((new Date()).toDateString());
+}
+
+/**
+ * Populates the navigation bar
+ */
+$.fn.populateNavbar = function () {
+ var menu = $("<ul/>", {class : "menu"});
+ var sensorEntry = $("<li/>").append($("<a/>", {text : "Sensor data", href : "#"}));
+ var submenu = $("<ul/>", {class : "submenu"});
+
+ for (sensor in mctx.sensors) {
+ var href = mctx.api + "sensors?start_time=0&format=tsv&id=" + sensor;
+ submenu.append($("<li/>").append(
+ $("<a/>", {text : mctx.sensors[sensor].name,
+ href : href, target : "_blank"})
+ ));
+ }
+ menu.append(sensorEntry.append(submenu));
+
+ var actuatorEntry = $("<li/>").append($("<a/>", {text : "Actuator data", href : "#"}));
+ submenu = $("<ul/>", {class : "submenu"});
+
+ for (actuator in mctx.actuators) {
+ var href = mctx.api + "actuators?start_time=0&format=tsv&id=" + actuator;
+ submenu.append($("<li/>").append(
+ $("<a/>", {text : mctx.actuators[actuator].name,
+ href : href, target : "_blank"})
+ ));
+ }
+ menu.append(actuatorEntry.append(submenu));
+ menu.appendTo(this);
+}
+
+/**
+ * Sets the camera autoupdater
+ * @returns {$.fn}
+ */
+$.fn.setCamera = function () {
+ var loc = mctx.api + "image";
+ var update = true;
+
+ this.error(function() {
+ update = false;
+ });
+
+ var parent = this;
+
+ var updater = function() {
+ if (!update) {
+ alert("Cam fail");
+ parent.attr("src", "");
+ return;
+ }
+
+ parent.attr("src", loc + "#" + (new Date()).getTime());
+
+ setTimeout(updater, 500);
+ };
+
+ updater();
+ return this;
+};
\ No newline at end of file
--- /dev/null
+/*
+ Document : nav-menu
+ Created on : 21/09/2013, 8:33:30 PM
+ Author : Jeremy Tan
+ Description:
+ Navigation menu styling.
+ Background colour: #2A2A2A
+ Highlight colour: #f2f2f2
+ Normal text colour: #bbbbbb
+*/
+
+/** Easing **/
+.nav-menu {
+ transition: all 0.2s ease 0s;
+}
+
+/** Main menu list styling **/
+.nav-menu ul {
+ list-style: none outside none;
+ margin: 0;
+ padding-left: 0;
+ text-align: right;
+}
+
+/** Menu item styling **/
+.nav-menu li {
+ display: inline-block;
+ position: relative;
+}
+
+/** Link styling **/
+.nav-menu a {
+ background-color: #2A2A2A;
+ border-radius: 2px;
+ border: 1px solid #444444;
+ color: #BBBBBB;
+ display: inline-block;
+ margin: 0.1em;
+ padding: 0.2em 2em;
+ text-decoration: none;
+ transition: all 0.2s ease 0s;
+}
+
+/** Highlight currently hovered-over item **/
+.nav-menu li:hover > a {
+ background-color: #f2f2f2;
+ color: #2a2a2a;
+}
+
+/** Display submenu when hovering over list item **/
+.nav-menu ul li:hover > ul {
+ display: block;
+}
+
+/** Submenu styling **/
+.nav-menu ul ul {
+ background-color: #2A2A2A;
+ border-radius: 2px;
+ box-shadow: 1px 1px 1px #2A2A2A;
+ display: none;
+ left: 0;
+ padding: 0.25em 0.5em;
+ position: absolute;
+ text-align: left;
+ z-index: 10;
+}
+
+/** Submenu link styling **/
+.nav-menu ul ul a {
+ width: 11em;
+ padding: 0.25em 0.5em;
+}
+
+/**
+ Style of menu:
+ <div class="nav-menu">
+ <ul class="menu">
+ <li><a href="#">Link 1</a></li>
+ <li><a href="#">Link 2</a></li>
+ <li>
+ <a href="#">Link 3</a>
+ <ul class="submenu">
+ <li><a href="#">Sub-link 1</a></li>
+ <li><a href="#">Sub-link 2</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+*/
\ No newline at end of file
+/** Custom fonts **/
@font-face {
font-family: "Open Sans";
src: url("OpenSans.ttf"),
url("OpenSans.eot");
}
+/** Limit max width and auto-center content **/
html {
max-width: 1280px;
margin: 0 auto;
body {
font-family: "Open Sans", "Lucida Grande","Lucida Sans",Verdana,Arial;
font-size: 13px;
- /*margin: 0;
- padding: 0;*/
background-color: #F5F5F5;
}
border-bottom: 1px dashed gray;
}
+table {
+ border: none;
+}
+
+table.centre {
+ margin: auto;
+}
+
+table.status, table.status tr, table.status td {
+ padding: 0.2em 0.75em;
+}
+
+th {
+ padding: inherit;
+ border-bottom: 1px solid gray;
+}
+
+img.centre {
+ display: block;
+ margin: auto;
+}
+
+input[type="button"] {
+ background-color: #F5F5F5;
+ border: 1px solid #A2A2A2;
+ border-radius: 3px;
+ box-shadow: 1px 1px 1px #BBBBBB;
+ transition: all 0.13s ease 0s;
+}
+
+input[type="button"]:active {
+ background-color: #E8E8E8;
+}
+
+/* IE8 width bugfix */
+input[type="text"], input[type="password"] {
+ width: 100%;
+}
+
#header {
background-color: #2a2a2a;
color: #f2f2f2;
box-shadow: 0 0 0.5em #444444;
border-radius: 4px;
transition: all 0.2s ease 0s;
- overflow: auto;
}
#header #title {
padding-top: 0.5em;
}
-#header #menu {
+#header #menu-container {
margin-right: 1.5em;
font-size: 15px;
- transition: all 0.2s ease 0s;
display: inline-block;
}
-
-#header #menu a {
- border: 1px solid #444444;
- color: #BBBBBB;
- display: inline-block;
- margin: 0.1em;
- padding: 0.2em 2em;
- text-decoration: none;
- transition: all 0.2s ease 0s;
-}
-
-#header #menu a:hover {
- background-color: #f2f2f2;
- color: #2a2a2a;
-}
-
-#header #menu a:active {
- color: black;
-}
-
-table, th, td{
- margin: auto;
- border: none;
- padding: 0.2em 0.75em;
-}
-
-td .fail {
- background-color: #ff2233;
-}
-
-td .pass {
- background-color: #55ff44;
-}
-
-th {
- border-bottom: 1px solid gray;
-}
-
#header #date {
padding-top: 1em;
font-size: 12px;
#sidebar{
float: right;
- width: 25%;
+ min-width: 22%;
}
-#sidebar .announce {
+#sidebar .title {
font-size: 20px;
font-weight: bold;
}
}
#main {
- overflow: hidden;
+ overflow: auto;
margin-right: 25%;
padding-right: 2em;
+ min-width: 400px;
+}
+
+#main .title {
+ font-size: 24px;
+ font-weight: bold;
+ margin-bottom: 0.5em;
}
.widget {
padding: 1em 1.25em;
box-shadow: 0 0 3px #CCCCCC;
transition: all 0.2s ease 0s;
+ overflow: auto;
}
.widget:hover {
box-shadow: 0 0 0.25em #AAAAAA;
}
-#main .announce {
- font-size: 24px;
- font-weight: bold;
- margin-bottom: 0.5em;
+/** Hack **/
+.clear {
+ clear: both;
}
\ No newline at end of file
git.ucc.asn.au / matches / MCTX3420.git / commitdiff
UCC git Repository :: git.ucc.asn.au