MCTX3420 Web Interface

Status

- +

@@ -42,11 +47,17 @@

Module	State
Case interlock	FAIL
Pressure level	PASS

+ + + +

Username
Password

@@ -54,18 +65,34 @@

Actuators

- 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. +

Actuators

+ +

Module	Control	State
Solenoid 1

diff --git a/testing/MCTXWeb/public_html/static/mctx.gui.js b/testing/MCTXWeb/public_html/static/mctx.gui.js index 880a560..478e9ad 100644 --- a/testing/MCTXWeb/public_html/static/mctx.gui.js +++ b/testing/MCTXWeb/public_html/static/mctx.gui.js @@ -1,4 +1,88 @@ +/** + * 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 = $("

").append($("", {text : "Sensor data", href : "#"})); + var submenu = $("
- ").append( + $("", {text : mctx.sensors[sensor].name, + href : href, target : "_blank"}) + )); + } + menu.append(sensorEntry.append(submenu)); + + var actuatorEntry = $("
- ").append($("", {text : "Actuator data", href : "#"})); + submenu = $("
  - ").append( + $("", {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 diff --git a/testing/MCTXWeb/public_html/static/nav-menu.css b/testing/MCTXWeb/public_html/static/nav-menu.css new file mode 100644 index 0000000..e64408d --- /dev/null +++ b/testing/MCTXWeb/public_html/static/nav-menu.css @@ -0,0 +1,89 @@ +/* + 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: +
    +
    - Link 1
    - Link 2
    - + Link 3 +
      +
      Sub-link 1
      +
      Sub-link 2
      +
      +
    +
    +*/ \ No newline at end of file diff --git a/testing/MCTXWeb/public_html/static/style.css b/testing/MCTXWeb/public_html/static/style.css index 608feb7..6cba6c9 100644 --- a/testing/MCTXWeb/public_html/static/style.css +++ b/testing/MCTXWeb/public_html/static/style.css @@ -1,9 +1,11 @@ +/** 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; @@ -12,8 +14,6 @@ html { body { font-family: "Open Sans", "Lucida Grande","Lucida Sans",Verdana,Arial; font-size: 13px; - /*margin: 0; - padding: 0;*/ background-color: #F5F5F5; } @@ -22,6 +22,45 @@ hr { 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; @@ -31,7 +70,6 @@ hr { box-shadow: 0 0 0.5em #444444; border-radius: 4px; transition: all 0.2s ease 0s; - overflow: auto; } #header #title { @@ -44,51 +82,12 @@ hr { 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; @@ -100,10 +99,10 @@ th { #sidebar{ float: right; - width: 25%; + min-width: 22%; } -#sidebar .announce { +#sidebar .title { font-size: 20px; font-weight: bold; } @@ -114,9 +113,16 @@ th { } #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 { @@ -125,14 +131,14 @@ th { 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