00001 <!----------------
00002 TO DO
00003 -----
00004 #Check if recording onload and handle that properaly
00005 #figure out how to check autoexposure status
00006 #add autoexposure controls. Probably a dedicated tab
00007 #look into adding dynamic sensor size/position controlls
00008 #add image preview updates
00009 #add debug information
00010 #more...
00011 ----------------->
00012
00013 <html>
00014 <head>
00015 <script type="text/javascript" src="mootools-release-1.11.js"></script>
00016
00017 <script>
00018 var recording=0;
00019 var autoexposure=0;
00020 var ready=0;
00021
00022 window.addEvent('domready', function()
00023 {
00024 document.params.output.value = "";
00025
00026 initAccordian();
00027 initSliders();
00028
00029 initCamera();
00030 initSettings();
00031 });
00032
00033 function initAccordian()
00034 {
00035 log("Initiating Accordian");
00036 var accordion = new Accordion('h3.atStart', 'div.atStart', {
00037 opacity: false,
00038 onActive: function(toggler, element){
00039 toggler.setStyle('color', '#ff3300');
00040 },
00041
00042 onBackground: function(toggler, element){
00043 toggler.setStyle('color', '#222');
00044 }
00045 }, $('accordion'));
00046 }
00047
00048 function initSliders()
00049 {
00050 log("Initiating Sliders");
00051 var mySlide = new Slider($('expos_area'), $('expos_knob'),
00052 {
00053 steps: 100,
00054 onChange: function(step)
00055 {
00056 $('expos').value=step;
00057 },
00058 onComplete: function(step)
00059 {
00060 if(ready)
00061 {
00062 request("camPipe.php?oper=pushSetting&variable="+<?php echo ELPHEL_EXPOS?>+"&value="+step);
00063 log("Setting new exposure value: "+step);
00064 }
00065 }
00066 }).set(<?php echo elphel_get_P_value(ELPHEL_EXPOS)?>);
00067
00068 var mySlide2 = new Slider($('sens_area'), $('sens_knob'),
00069 {
00070 steps: 100,
00071 onChange: function(step)
00072 {
00073 $('sensitivity').value=step;
00074 }
00075 }).set(0);
00076
00077 var mySlide3 = new Slider($('sat_area'), $('sat_knob'),
00078 {
00079 steps: 100,
00080 onChange: function(step)
00081 {
00082 $('saturation').value=step;
00083 }
00084 }).set(0);
00085
00086 var mySlide4 = new Slider($('gamma_area'), $('gamma_knob'),
00087 {
00088 steps: 100,
00089 onChange: function(step)
00090 {
00091 $('gamma').value=step;
00092 },
00093 onComplete: function(step)
00094 {
00095 if(ready)
00096 {
00097 request("camPipe.php?oper=pushSetting&variable="+<?php echo ELPHEL_GAMMA?>+"&value="+step);
00098 log("Setting new GAMMA value: "+step);
00099 }
00100 }
00101 }).set(<?php echo elphel_get_P_value(ELPHEL_GAMMA)?>);
00102
00103 var mySlide5 = new Slider($('quality_area'), $('quality_knob'),
00104 {
00105 steps: 100,
00106 onChange: function(step)
00107 {
00108 $('quality').value=step;
00109 },
00110 onComplete: function(step)
00111 {
00112 if(ready)
00113 {
00114 request("camPipe.php?oper=pushSetting&variable="+<?php echo ELPHEL_QUALITY?>+"&value="+step);
00115 log("Setting new GAMMA value: "+step);
00116 }
00117 }
00118 }).set(<?php echo elphel_get_P_value(ELPHEL_QUALITY)?>);
00119 }
00120
00121 function initSettings()
00122 {
00123 log("Loading settings");
00124 document.params.width.value = <?php echo elphel_get_P_value(ELPHEL_WOI_WIDTH)?>;
00125 document.params.height.value = <?php echo elphel_get_P_value(ELPHEL_WOI_HEIGHT)?>;
00126
00127 document.getElementById("width").disabled = false;
00128 document.getElementById("height").disabled = false;
00129 document.getElementById("expos").disabled = false;
00130 document.getElementById("fps").disabled = false;
00131 document.getElementById("quality").disabled = false;
00132 }
00133
00134 function initCamera()
00135 {
00136 request("camPipe.php?oper=setup");
00137 log("Camera Configured");
00138 ready=1;
00139 }
00140
00141 </script>
00142
00143 <style type="text/css">
00144 <!--
00145 .toggler
00146 {
00147 color: #222;
00148 margin: 0;
00149 padding: 2px 5px;
00150 background: #eee;
00151 border-bottom: 1px solid #ddd;
00152 border-right: 1px solid #ddd;
00153 border-top: 1px solid #f5f5f5;
00154 border-left: 1px solid #f5f5f5;
00155 font-size: 11px;
00156 font-weight: normal;
00157 font-family: 'Andale Mono', sans-serif;
00158 }
00159
00160 .element
00161 {
00162 font-size: 11px;
00163 font-weight: normal;
00164 font-family: 'Andale Mono', sans-serif;
00165 }
00166
00167 #rec_text
00168 {
00169 font-family: 'Andale Mono', sans-serif;
00170 font-size: 11px;
00171 background: #FFFFFF;
00172 width: 60px;
00173 }
00174 #rec_box
00175 {
00176 font-family: 'Andale Mono', sans-serif;
00177 font-size: 11px;
00178 background: blue;
00179 }
00180
00181 #expos_area, #sens_area, #sat_area, #gamma_area, #quality_area
00182 {
00183 background: #ccc;
00184 height: 20px;
00185 width: 150px;
00186 border-top-width: 1px;
00187 border-right-width: 1px;
00188 border-bottom-width: 1px;
00189 border-left-width: 1px;
00190 border-top-style: solid;
00191 border-right-style: solid;
00192 border-bottom-style: solid;
00193 border-left-style: solid;
00194 }
00195
00196 #expos_knob, #sens_knob, #sat_knob, #gamma_knob, #quality_knob
00197 {
00198 height: 20px;
00199 width: 20px;
00200 background: #000;
00201 }
00202 -->
00203 </style>
00204
00205 </head>
00206
00207 <body>
00208 <table width="900" border="0" align="center">
00209 <tr>
00210 <td width="66%" align="left" valign="top"><?php echo "<img src=\"http://". $_SERVER["SERVER_ADDR"] . ":8081/last/img\" width=\"100%\">" ?><br></td>
00211 <td width="34%" valign="top"><form id="params" name="params">
00212 <div id="rec_box" align="right">
00213 <div id="rec_text"><a href="javascript:recorder()">Recorder</a></div>
00214 </div>
00215 <div id="accordion">
00216 <h3 class="toggler atStart">Sensor Settings</h3>
00217 <div class="element atStart">
00218 <table width="100%" border="0" class="element">
00219 <tr>
00220 <td width="44%">Resolution</td>
00221 <td width="56%">W
00222 <input name="width" type="text" id="width" size="4" maxlength="4">
00223 x
00224 H
00225 <input name="height" type="text" id="height" size="4" maxlength="4"></td>
00226 </tr>
00227 <tr>
00228 <td>Frame Rate </td>
00229 <td><input name="fps" id="fps" type="text" size="4" maxlength="4">
00230 FPS</td>
00231 </tr>
00232 <tr>
00233 <td>Quality</td>
00234 <td><table width="100%" border="0">
00235 <tr>
00236 <td width="1"><input name="quality" id="quality" type="text" size="4" maxlength="4"></td>
00237 <td><div id="quality_area">
00238 <div id="quality_knob"></div>
00239 </div></td>
00240 </tr>
00241 </table></td>
00242 </tr>
00243 <tr>
00244 <td>Auto Exposure </td>
00245 <td><div id="ae_state">state</div></td>
00246 </tr>
00247 </table>
00248 </div>
00249 <h3 class="toggler atStart">Image Managment </h3>
00250 <div class="element atStart">
00251 <table width="100%" border="0" class="element">
00252 <tr>
00253 <td width="44%">Exposure</td>
00254 <td width="56%"><table width="100%" border="0">
00255 <tr>
00256 <td width="1"><input name="expos" id="expos" type="text" size="4" maxlength="4"></td>
00257 <td>
00258 <div id="expos_area">
00259 <div id="expos_knob"></div>
00260 </div> </td>
00261 </tr>
00262 </table> </td>
00263 </tr>
00264 <tr>
00265 <td>Sensitivity</td>
00266 <td><table width="100%" border="0">
00267 <tr>
00268 <td width="1"><input name="sensitivity" id="sensitivity" type="text" size="4" maxlength="4"></td>
00269 <td><div id="sens_area">
00270 <div id="sens_knob"></div>
00271 </div></td>
00272 </tr>
00273 </table></td>
00274 </tr>
00275 <tr>
00276 <td>Saturation</td>
00277 <td><table width="100%" border="0">
00278 <tr>
00279 <td width="1"><input name="saturation" id="saturation" type="text" size="4" maxlength="4"></td>
00280 <td><div id="sat_area">
00281 <div id="sat_knob"></div>
00282 </div></td>
00283 </tr>
00284 </table></td>
00285 </tr>
00286 <tr>
00287 <td>Gamma</td>
00288 <td><table width="100%" border="0">
00289 <tr>
00290 <td width="1"><input name="gamma" id="gamma" type="text" size="4" maxlength="4"></td>
00291 <td><div id="gamma_area">
00292 <div id="gamma_knob"></div>
00293 </div></td>
00294 </tr>
00295 </table></td>
00296 </tr>
00297 </table>
00298 <div style="clear:both"></div>
00299 </div>
00300 <h3 class="toggler atStart">Camogm Configuration</h3>
00301 <div class="element atStart">
00302 <table width="100%" border="0" class="element">
00303 <tr>
00304 <td width="44%">Recording Format </td>
00305 <td width="56%"><input name="textfield337" type="text" size="15" maxlength="1"></td>
00306 </tr>
00307 <tr>
00308 <td>Filename Prefix </td>
00309 <td><input name="textfield3372" type="text" size="15" maxlength="1"></td>
00310 </tr>
00311 </table>
00312 </div>
00313 <h3 class="toggler atStart">Camera Managment</h3>
00314 <div class="element atStart">
00315 <table width="100%" border="0" class="element">
00316 <tr>
00317 <td><table width="300" border="0" class="element">
00318 <tr>
00319 <td>log</td>
00320 </tr>
00321 <tr>
00322 <td><label>
00323 <div align="center">
00324 <textarea name="output" cols="50" rows="6" class="element" id="output"></textarea>
00325 </div>
00326 </label></td>
00327 </tr>
00328 </table>
00329 <label></label></td>
00330 </tr>
00331 </table>
00332 </div>
00333 <h3 class="toggler atStart">Sound Settings</h3>
00334 <div class="element atStart">No sound support yet...</div>
00335 </div></form></td>
00336 </tr>
00337 </table>
00338 <script>
00339 function log(data)
00340 {
00341 document.params.output.value += data+"\r";
00342
00343 document.params.output.scrollTop = document.params.output.scrollHeight - document.params.output.clientHeight;
00344 }
00345
00346 function request(url)
00347 {
00348 var ajaxRequest=false;
00349 ajaxRequest = new XMLHttpRequest();
00350 ajaxRequest.open("GET", url,true);
00351 ajaxRequest.onreadystatechange=function()
00352 {
00353 if (ajaxRequest.readyState == 4)
00354 {
00355 if (!ajaxRequest.status == 200)
00356 {
00357 alert("Request Failed: "+url);
00358 }
00359 }
00360 }
00361 ajaxRequest.send(null);
00362 }
00363
00364 function recorder()
00365 {
00366 if(recording)
00367 {
00368
00369 recording=0;
00370 log("Recording Stop.");
00371 document.getElementById("rec_box").style.background = "blue";
00372
00373 document.getElementById("width").disabled = false;
00374 document.getElementById("height").disabled = false;
00375 document.getElementById("expos").disabled = false;
00376 document.getElementById("fps").disabled = false;
00377 document.getElementById("quality").disabled = false;
00378
00379 }
00380 else
00381 {
00382
00383 recording=1;
00384 log("Recording Start");
00385 document.getElementById("rec_box").style.background = "red";
00386
00387 document.getElementById("width").disabled = true;
00388 document.getElementById("height").disabled = true;
00389 document.getElementById("expos").disabled = true;
00390 document.getElementById("fps").disabled = true;
00391 document.getElementById("quality").disabled = true;
00392 }
00393 }
00394 </script>
00395 </body>
00396
00397 </html>
