testing/ver0.01/interface.html

   1 <! DOCTYPE html>
   2 <!--VERSION 0.01.02-->
   3 <!--SEE CHANGELOG FOR CHANGES SINCE PREVIOUS VERSION-->
   4 <!--INTERFACE PAGE-->
   5
   6 <html lan="us">
   7 <meta charset="utf-8"></meta>
   8 <title>
   9 REMOTEworks: Remote Experiment Interface
  10 </title>
  11
  12
  13 <head>
  14 <script src="jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
  15 <script src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
  16 <link rel="stylesheet" href="jquery-ui-1.10.3.custom/css/black-tie/jquery-ui-1.10.3.custom.css"></link>
  17
  18 <style>
  19         body{
  20                 font: 75% "Trebuchet MS", sans-serif;
  21                 margin: 50px;
  22         }
  23         .demoHeaders {
  24                 margin-top: 2em;
  25         }
  26         #dialog-link {
  27                 padding: .4em 1em .4em 20px;
  28                 text-decoration: none;
  29                 position: relative;
  30         }
  31         #dialog-link span.ui-icon {
  32                 margin: 0 5px 0 0;
  33                 position: absolute;
  34                 left: .2em;
  35                 top: 50%;
  36                 margin-top: -8px;
  37         }
  38         #icons {
  39                 margin: 0;
  40                 padding: 0;
  41         }
  42         #icons li {
  43                 margin: 2px;
  44                 position: relative;
  45                 padding: 4px 0;
  46                 cursor: pointer;
  47                 float: left;
  48                 list-style: none;
  49         }
  50         #icons span.ui-icon {
  51                 float: left;
  52                 margin: 0 4px;
  53         }
  54         .fakewindowcontain .ui-widget-overlay {
  55                 position: absolute;
  56         }
  57
  58 </style>
  59
  60
  61 <script>
  62         $( function() {
  63         //$("#digitalIO-START").button();
  64         //$("#digitalIO-STOP").button();
  65         //$("#digitalIO-001").button();
  66         //$("#digitalIO-002").button();
  67         //$("#digitalIO-003").button();
  68         //$("#digitalIO-004").button();
  69         $("#selector-OVERVIEW").click(function(e){
  70         alert("Overview Has Been Clicked");
  71         });
  72         $("selector-001").click(function(){
  73         $("#dynamic").append('appended content');
  74         $("#tabbedContentView").tabs();
  75         });
  76         });
  77 </script>
  78 </head>
  79 <body>
  80
  81 <!--Container for whole webpage-->
  82 <div id="container" style="width:1250px">
  83
  84 <!--The title block holds the title and version number information-->
  85         <div id="title block" style="background-color:grey;text-align:right;color:ivory;">
  86                 <p> REMOTEworks&#8482; Ver No: 0.01 </p>
  87         </div>
  88
  89         <div id="controlpane" style="background-color:lightgrey;width:200px;height:500px;float:left;">
  90                 <div id="keycontrols">
  91                 <h2 style="text-align:center">MASTER CONTROLS</h2>
  92                         <button style="width:90px;height:25px;margin:4px;background-color:darkgreen;color:white;" id="digitalIO-START" value="Request Access" role="button">
  93                                 <span class="ui-button-text">
  94                                         Start
  95                                 </span>
  96                         </button>
  97                         <button style="width:90px;height:25px;margin:4px;background-color:red;color:white;" id="digitalIO-STOP" class="ui-button ui-widgetui-state-default ui-corner-all ui-button-text-only" value="Request Access" role="button">
  98                                 <span class="ui-button-text">
  99                                         Stop
 100                                 </span>
 101                 </button>
 102                 <hr/>
 103                 </div>
 104                 <h2 style="text-align:center;">DIGITAL CONTROLS</h2>
 105                 <button style="width:90px;margin:3px;background-color:darkgrey;color:white;" id="digitalIO-001" class="ui-button ui-widgetui-state-default ui-corner-all ui-button-text-only" value="Request Access" role="button">
 106                         <span class="ui-button-text">
 107                                 Actuator 1
 108                         </span>
 109                 </button>
 110                 <button style="width:90px;margin:3px;background-color:darkgrey;color:white;" id="digitalIO-002" class="ui-button ui-widgetui-state-default ui-corner-all ui-button-text-only" value="Request Access" role="button">
 111                         <span class="ui-button-text">
 112                                 Actuator 2
 113                         </span>
 114                 </button>
 115                 <button style="width:90px;margin:3px;background-color:darkgrey;color:white;" id="digitalIO-003" class="ui-button ui-widgetui-state-default ui-corner-all ui-button-text-only" value="Request Access" role="button">
 116                         <span class="ui-button-text">
 117                                 Button 1
 118                         </span>
 119                 </button>
 120                 <button style="width:90px;margin:3px;background-color:darkgrey;color:white;" id="digitalIO-004" class="ui-button ui-widgetui-state-default ui-corner-all ui-button-text-only" value="Request Access" role="button">
 121                         <span class="ui-button-text">
 122                                 Button 2
 123                         </span>
 124                 </button>
 125         </div>
 126
 127 <!--Seperator to divide the controlpane and the contentpane-->
 128         <div id="seperator" style="background-color:black;width:5;height:500px;float:left;">
 129         <p></p>
 130         </div>
 131
 132
 133         <!--
 134         <div id="tabbedContentView" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
 135                 <ul>
 136                         <li><a href="#overview">OVERVIEW</a></li>
 137                         <li><a href="view01">VIEW 1</a></li>
 138                         <li><a href="view02">VIEW 2</a></li>
 139                 </ul>
 140                 <div id="overview">
 141                         <p> Overview Panel </p>
 142                 </div>
 143                 <div id="view01">
 144                         <p> View Number 1 </p>
 145                 </div>
 146                 <div id ="view02">
 147                         <p> View Number 2 </p>
 148                 </div>
 149         </div>
 150         -->
 151
 152
 153
 154
 155
 156
 157
 158
 159
 160
 161
 162
 163
 164
 165
 166
 167
 168
 169         <div id="contentselector" style="background-color:black;width:1045px;float:left;">
 170                 <button style="width:90px;margin:4px;background-color:black;color:white;border:2px solid white;" id="selector-OVERVIEW" class="ui-button ui-widgetui-state-default ui-corner-all ui-button-text-only" value="Request Access" role="button">
 171                         <span class="ui-button-text">
 172                                 OVERVIEW
 173                         </span>
 174                 </button>
 175                 <button style="width:90px;margin:4px;background-color:black;color:white;border:2px solid white;" id="selector-001" class="ui-button ui-widgetui-state-default ui-corner-all ui-button-text-only" value="Request Access" role="button">
 176                         <span class="ui-button-text">
 177                                 VIEW 1
 178                         </span>
 179                 </button>
 180                 <button style="width:90px;margin:4px;background-color:black;color:white;border:2px solid white;" id="selector-002" class="ui-button ui-widgetui-state-default ui-corner-all ui-button-text-only" value="Request Access" role="button">
 181                         <span class="ui-button-text">
 182                                 VIEW 2
 183                         </span>
 184                 </button>
 185         </div>
 186
 187
 188 <!--The contentpane is the main area for dispaying data-->
 189
 190         <div id="contentPane" style="margin:5px;width:1000px;float:left;">
 191                 <h3 style="text-align:center;">OVERVIEW</h3>
 192                 <p style="margin:5px;">Content will go here.</p>
 193                 <div id="dynamic"></div>
 194
 195         </div>
 196
 197
 198 </body>
 199 </html>