1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4 <title>MCTX3420 Web Interface</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <script type="text/javascript" src="static/jquery-1.10.1.min.js"></script>
7 <script type="text/javascript" src="static/mctx.gui.js"></script>
9 <link rel="stylesheet" type="text/css" href="static/style.css">
10 <link rel="stylesheet" type="text/css" href="static/nav-menu.css">
11 <script type="text/javascript">
12 runBeforeLoad().done(function () {
13 $(document).ready(function () {
15 $("#content").css("display", "block");
17 var name = " " + (mctx.friendlyName ? mctx.friendlyName : "");
18 $("#welcome-container").text("Welcome"+ name + "!");
19 $("#logout-container").css("display", "block");
20 $("#logout").click(function () {
21 $("#logout").logout();
32 <a href="http://www.uwa.edu.au/" target="_blank">
33 <img alt = "The University of Western Australia"
34 src="static/uwacrest-text.png">
36 <span id="title">Exploding Cans</span>
39 <span id="welcome-container">
42 <script type="text/javascript">getDate();</script>
44 <div id="logout-container">
47 <input type="button" id="logout" value="Logout">
52 <div class="clear"></div>
57 <div class="widget centre">
58 <div class="title">JavaScript required</div>
59 This website requires JavaScript to function correctly.
60 Please enable JavaScript to use this site.
67 <div class="title">Navigation menu</div>
71 <div class="title">Help</div>
79 <div class="title centre">Welcome</div>
81 Welcome to the MCTX3420 remote pressure vessel experiment site!
84 To explore how this system works, hover over the elements of the
85 system diagram below. Clicking each element will lead to a new
86 page that describes that component of the system.
89 To begin a new experiment, use the left navigation pane.
93 <div class="title">System diagram</div>
94 <img id="sbd" src="static/sbd.png" class="centre" alt="System diagram" usemap="#sbd-map">
96 <area shape="rect" coords="78,44,178,94" href="#" alt="Client PC" title="You">
97 <area shape="rect" coords="238,44,338,94" href="#" alt="BBB">
98 <area shape="rect" coords="398,44,498,94" href="#" alt="Electronics">
99 <area shape="rect" coords="238,104,338,154" href="#" alt="Pneumatics">
100 <area shape="rect" coords="128,184,228,234" href="#" alt="Sensors">
101 <area shape="rect" coords="348,184,448,234" href="#" alt="Camera">
102 <area shape="rect" coords="128,238,228,288" href="#" alt="Strain Can">
103 <area shape="rect" coords="348,238,448,288" href="#" alt="Explode Can" title="Won't happen">
104 <area shape="rect" coords="13,206,113,231" href="#" alt="Enclosure" id="enclosure-btn">
105 <area shape="rect" coords="13,240,113,265" href="#" alt="Mounting" id="mounting-btn">
106 <area shape="rect" coords="116,175,457,294" alt="Mounting Area" id="mounting-area">
107 <area shape="poly" coords="230,30,524,30,524,294,115,294,115,100,230,100,230,30" alt="Enclosure Area" id="enclosure-area">
109 <script type="text/javascript" src="static/jquery.maphilight.min.js">
112 <script type="text/javascript">
113 $("#sbd").maphilight({
115 strokeColor: '000000',
119 $.fn.hilightToggle = function (on) {
120 var data = $(this).data("maphilight") || {};
122 $(this).data("maphilight", data);
126 $("#mounting-area").hilightToggle(false);
127 $("#enclosure-area").hilightToggle(false);
129 $("#mounting-btn").mouseover(function () {
130 $("#mounting-area").hilightToggle(true).mouseover();
131 }).mouseout(function () {
132 $("#mounting-area").hilightToggle(false);
135 $("#enclosure-btn").mouseover(function () {
136 $("#enclosure-area").hilightToggle(true).mouseover();
137 }).mouseout(function () {
138 $("#enclosure-area").hilightToggle(false);
144 <!-- End main content -->