index.html (12616B)
1 $def with (films, cameras, menu, selected,name,scene,shot,take,str,randhash,thumb,vumetermessage,func,filmfolder) 2 3 <script> 4 function Get(yourUrl){ 5 var Httpreq = new XMLHttpRequest(); // a new request 6 Httpreq.open("GET",yourUrl,false); 7 Httpreq.send(null); 8 return Httpreq.responseText; 9 } 10 (function($$) 11 { 12 $$(document).ready(function() 13 { 14 var refreshtime = 1000; 15 var oldrefreshtime = 100; 16 idleTime = 0; 17 //Increment the idle time counter every second. 18 var idleInterval = setInterval(timerIncrement, 1000); 19 function timerIncrement() 20 { 21 idleTime++; 22 if (idleTime > 1) 23 { 24 refreshtime = 1000; 25 } 26 if (oldrefreshtime != refreshtime) 27 { 28 refreshtime = 500; 29 } 30 else 31 { 32 refreshtime = 100; 33 } 34 oldrefreshtime = refreshtime; 35 } 36 37 $$.ajaxSetup( 38 { 39 cache: false, 40 beforeSend: function() { 41 $$('#content').hide(); 42 $$('#loading').show(); 43 }, 44 complete: function() { 45 $$('#loading').hide(); 46 $$('#content').show(); 47 }, 48 success: function() { 49 $$('#loading').hide(); 50 $$('#content').show(); 51 } 52 }); 53 54 var myFunction = function(){ 55 refresh(); 56 console.log(refreshtime); 57 clearInterval(interval); 58 interval = setInterval(myFunction, refreshtime); 59 } 60 var interval = setInterval(myFunction, refreshtime); 61 }); 62 63 function refresh(){ 64 var $$container = $$("#menu2"); 65 $$container.load('/static/menu.html'); 66 $$.ajax({ 67 method: "GET", 68 type: "Content-type", 69 url:"/api", 70 success: function(result) { 71 }, 72 error: function(result) { 73 console.log('error', result); 74 } 75 }) 76 } 77 $$(this).on('keydown', function (event) { 78 idleTime = 0; 79 refreshtime = 10; 80 }); 81 })(jQuery); 82 83 $$(document).on('keydown', function (event) { 84 console.log('error', event.which); 85 if (event.which == 37) { 86 $$('#LEFT').trigger('click'); 87 } else if (event.which == 39) { 88 $$('#RIGHT').trigger('click'); 89 } else if (event.which == 38) { 90 $$('#UP').trigger('click'); 91 } else if (event.which == 40) { 92 $$('#DOWN').trigger('click'); 93 } else if (event.which == 33) { 94 $$('#RECORD').trigger('click'); 95 } else if (event.which == 32) { 96 $$('#RECORD').trigger('click'); 97 } else if (event.which == 34) { 98 $$('#RETAKE').trigger('click'); 99 } else if (event.which == 9) { 100 $$('#VIEW').trigger('click'); 101 } else if (event.which == 46) { 102 $$('#DELETE').trigger('click'); 103 } else if (event.which == 13) { 104 $$('#MIDDLE').trigger('click'); 105 } else if (event.which == 49) { 106 $$('#CAMERA0').trigger('click'); 107 } else if (event.which == 50) { 108 $$('#CAMERA1').trigger('click'); 109 } else if (event.which == 51) { 110 $$('#CAMERA2').trigger('click'); 111 } else if (event.which == 52) { 112 $$('#CAMERA3').trigger('click'); 113 } else if (event.which == 53) { 114 $$('#CAMERA4').trigger('click'); 115 } else if (event.which == 54) { 116 $$('#CAMERA5').trigger('click'); 117 } else if (event.which == 55) { 118 $$('#CAMERA6').trigger('click'); 119 } else if (event.which == 56) { 120 $$('#CAMERA7').trigger('click'); 121 } else if (event.which == 57) { 122 $$('#CAMERA8').trigger('click'); 123 } else if (event.which == 58) { 124 $$('#CAMERA9').trigger('click'); 125 } else if (event.which == 97) { 126 $$('#CAMERA0').trigger('click'); 127 } else if (event.which == 98) { 128 $$('#CAMERA1').trigger('click'); 129 } else if (event.which == 99) { 130 $$('#CAMERA2').trigger('click'); 131 } else if (event.which == 100) { 132 $$('#CAMERA3').trigger('click'); 133 } else if (event.which == 101) { 134 $$('#CAMERA4').trigger('click'); 135 } else if (event.which == 102) { 136 $$('#CAMERA5').trigger('click'); 137 } else if (event.which == 103) { 138 $$('#CAMERA6').trigger('click'); 139 } else if (event.which == 104) { 140 $$('#CAMERA7').trigger('click'); 141 } else if (event.which == 105) { 142 $$('#CAMERA8').trigger('click'); 143 } else if (event.which == 106) { 144 $$('#CAMERA9').trigger('click'); 145 } else if (event.which == 229) { 146 $$('#CAMERA0').trigger('click'); 147 } else if (event.which == 98) { 148 $$('#CAMERA1').trigger('click'); 149 } else if (event.which == 99) { 150 $$('#CAMERA2').trigger('click'); 151 } else if (event.which == 100) { 152 $$('#CAMERA3').trigger('click'); 153 } else if (event.which == 101) { 154 $$('#CAMERA4').trigger('click'); 155 } else if (event.which == 102) { 156 $$('#CAMERA5').trigger('click'); 157 } else if (event.which == 103) { 158 $$('#CAMERA6').trigger('click'); 159 } else if (event.which == 104) { 160 $$('#CAMERA7').trigger('click'); 161 } else if (event.which == 105) { 162 $$('#CAMERA8').trigger('click'); 163 } else if (event.which == 106) { 164 $$('#CAMERA9').trigger('click'); 165 } else if (event.which == 77) { 166 $$('#MOVE').trigger('click'); 167 } else if (event.which == 67) { 168 $$('#COPY').trigger('click'); 169 } else if (event.which == 80) { 170 $$('#PASTE').trigger('click'); 171 } 172 }); 173 </script> 174 connected 175 <pre>use keyboard to control</pre> 176 $for i in cameras: 177 $i 178 <br> 179 <div id="controller"> 180 <a id="VIEW">VIEW</a> <a id="UP">UP</a> <a id="RECORD">RECORD</a><br> 181 <a id="LEFT">LEFT</a> <a id="MIDDLE">MIDDLE</a> <a id="RIGHT">RIGHT</a><br> 182 <a id="DELETE">DELETE</a> <a id="DOWN">DOWN</a> <a id="RETAKE">RETAKE</a><br> 183 </div> 184 <div id="controller2"> 185 <a id="CAMERA0">CAM0</a> <a id="CAMERA1">CAM1</a> <a id="CAMERA2">CAM2</a><br> 186 </div> 187 <div id="controller3"> 188 <a id="MOVE">MOVE</a> <a id="COPY">COPY</a> <a id="PASTE">PASTE</a><br> 189 </div> 190 191 <div id="menu2" style="margin:0 auto; width:99%" ></div> 192 <div id="menu" style="margin:0 auto; width:99%"> 193 </div> 194 <br> 195 <br> 196 <input></input> 197 198 $if thumb != '': 199 $ picture= '/'+filmfolder + name + "/scene" + str(scene).zfill(3) + "/shot" + str(shot).zfill(3) + "/picture" + str(take).zfill(3) + ".jpeg" 200 $else: 201 $ picture= '/'+filmfolder + name + "/scene" + str(scene).zfill(3) + "/shot" + str(shot).zfill(3) + "/take" + str(take).zfill(3) + ".jpeg" 202 203 204 $ take_link='/'+filmfolder + name + "/scene" + str(scene).zfill(3) + "/shot" + str(shot).zfill(3) + "/take" + str(take).zfill(3) + ".mp4" 205 $ scene_link='/'+filmfolder + name + "/scene" + str(scene).zfill(3) + "/scene.mp4" 206 $ film_link='/'+filmfolder + name + "/" +name+ ".mp4" 207 $if thumb != '': 208 $if selected == 0: 209 <a href='$film_link'><img width="80%" src="$picture?$randhash"/></a><br> 210 $elif selected == 1: 211 <a href='$scene_link'><img width="80%" src="$picture?$randhash"/></a><br> 212 $elif selected > 1: 213 <a href='$take_link'><img width="80%" src="$picture?$randhash"/></a><br> 214 <br> 215 216 <script> 217 $$('#LEFT').on('click', function () { 218 $$.ajax({ 219 method: "GET", 220 type: "Content-type", 221 url:"/api?func=left", 222 success: function(result) { 223 }, 224 error: function(result) { 225 console.log('error', result); 226 } 227 }) 228 }); 229 $$('#RIGHT').on('click', function () { 230 $$.ajax({ 231 method: "GET", 232 type: "Content-type", 233 url:"/api?func=right", 234 success: function(result) { 235 }, 236 error: function(result) { 237 console.log('error', result); 238 } 239 }) 240 }); 241 $$('#DOWN').on('click', function () { 242 $$.ajax({ 243 method: "GET", 244 type: "Content-type", 245 url:"/api?func=down", 246 success: function(result) { 247 }, 248 error: function(result) { 249 console.log('error', result); 250 } 251 }) 252 }); 253 $$('#UP').on('click', function () { 254 $$.ajax({ 255 method: "GET", 256 type: "Content-type", 257 url:"/api?func=up", 258 success: function(result) { 259 }, 260 error: function(result) { 261 console.log('error', result); 262 } 263 }) 264 }); 265 $$('#RECORD').on('click', function () { 266 $$.ajax({ 267 method: "GET", 268 type: "Content-type", 269 url:"/api?func=record", 270 success: function(result) { 271 }, 272 error: function(result) { 273 console.log('error', result); 274 } 275 }) 276 }); 277 $$('#RETAKE').on('click', function () { 278 $$.ajax({ 279 method: "GET", 280 type: "Content-type", 281 url:"/api?func=retake", 282 success: function(result) { 283 }, 284 error: function(result) { 285 console.log('error', result); 286 } 287 }) 288 }); 289 $$('#DELETE').on('click', function () { 290 $$.ajax({ 291 method: "GET", 292 type: "Content-type", 293 url:"/api?func=delete", 294 success: function(result) { 295 }, 296 error: function(result) { 297 console.log('error', result); 298 } 299 }) 300 }); 301 $$('#VIEW').on('click', function () { 302 $$.ajax({ 303 method: "GET", 304 type: "Content-type", 305 url:"/api?func=view", 306 success: function(result) { 307 }, 308 error: function(result) { 309 console.log('error', result); 310 } 311 }) 312 }); 313 $$('#MIDDLE').on('click', function () { 314 $$.ajax({ 315 method: "GET", 316 type: "Content-type", 317 url:"/api?func=middle", 318 success: function(result) { 319 }, 320 error: function(result) { 321 console.log('error', result); 322 } 323 }) 324 }); 325 $$('#CAMERA0').on('click', function () { 326 $$.ajax({ 327 method: "GET", 328 type: "Content-type", 329 url:"/api?func=camera0", 330 success: function(result) { 331 }, 332 error: function(result) { 333 console.log('error', result); 334 } 335 }) 336 }); 337 $$('#CAMERA1').on('click', function () { 338 $$.ajax({ 339 method: "GET", 340 type: "Content-type", 341 url:"/api?func=camera1", 342 success: function(result) { 343 }, 344 error: function(result) { 345 console.log('error', result); 346 } 347 }) 348 }); 349 $$('#CAMERA2').on('click', function () { 350 $$.ajax({ 351 method: "GET", 352 type: "Content-type", 353 url:"/api?func=camera2", 354 success: function(result) { 355 }, 356 error: function(result) { 357 console.log('error', result); 358 } 359 }) 360 }); 361 $$('#CAMERA3').on('click', function () { 362 $$.ajax({ 363 method: "GET", 364 type: "Content-type", 365 url:"/api?func=camera3", 366 success: function(result) { 367 }, 368 error: function(result) { 369 console.log('error', result); 370 } 371 }) 372 }); 373 $$('#CAMERA4').on('click', function () { 374 $$.ajax({ 375 method: "GET", 376 type: "Content-type", 377 url:"/api?func=camera4", 378 success: function(result) { 379 }, 380 error: function(result) { 381 console.log('error', result); 382 } 383 }) 384 }); 385 $$('#CAMERA5').on('click', function () { 386 $$.ajax({ 387 method: "GET", 388 type: "Content-type", 389 url:"/api?func=camera5", 390 success: function(result) { 391 }, 392 error: function(result) { 393 console.log('error', result); 394 } 395 }) 396 }); 397 $$('#CAMERA6').on('click', function () { 398 $$.ajax({ 399 method: "GET", 400 type: "Content-type", 401 url:"/api?func=camera6", 402 success: function(result) { 403 }, 404 error: function(result) { 405 console.log('error', result); 406 } 407 }) 408 }); 409 $$('#CAMERA7').on('click', function () { 410 $$.ajax({ 411 method: "GET", 412 type: "Content-type", 413 url:"/api?func=camera7", 414 success: function(result) { 415 }, 416 error: function(result) { 417 console.log('error', result); 418 } 419 }) 420 }); 421 $$('#CAMERA8').on('click', function () { 422 $$.ajax({ 423 method: "GET", 424 type: "Content-type", 425 url:"/api?func=camera8", 426 success: function(result) { 427 }, 428 error: function(result) { 429 console.log('error', result); 430 } 431 }) 432 }); 433 $$('#CAMERA9').on('click', function () { 434 $$.ajax({ 435 method: "GET", 436 type: "Content-type", 437 url:"/api?func=camera9", 438 success: function(result) { 439 }, 440 error: function(result) { 441 console.log('error', result); 442 } 443 }) 444 }); 445 $$('#MOVE').on('click', function () { 446 $$.ajax({ 447 method: "GET", 448 type: "Content-type", 449 url:"/api?func=move", 450 success: function(result) { 451 }, 452 error: function(result) { 453 console.log('error', result); 454 } 455 }) 456 }); 457 $$('#COPY').on('click', function () { 458 $$.ajax({ 459 method: "GET", 460 type: "Content-type", 461 url:"/api?func=copy", 462 success: function(result) { 463 }, 464 error: function(result) { 465 console.log('error', result); 466 } 467 }) 468 }); 469 $$('#PASTE').on('click', function () { 470 $$.ajax({ 471 method: "GET", 472 type: "Content-type", 473 url:"/api?func=paste", 474 success: function(result) { 475 }, 476 error: function(result) { 477 console.log('error', result); 478 } 479 }) 480 }); 481 482 </script> 483