index.html (13886B)
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 == 97) { 106 $$('#CAMERA0').trigger('click'); 107 } else if (event.which == 98) { 108 $$('#CAMERA1').trigger('click'); 109 } else if (event.which == 99) { 110 $$('#CAMERA2').trigger('click'); 111 } else if (event.which == 100) { 112 $$('#CAMERA3').trigger('click'); 113 } else if (event.which == 101) { 114 $$('#CAMERA4').trigger('click'); 115 } else if (event.which == 102) { 116 $$('#CAMERA5').trigger('click'); 117 } else if (event.which == 103) { 118 $$('#CAMERA6').trigger('click'); 119 } else if (event.which == 104) { 120 $$('#CAMERA7').trigger('click'); 121 } else if (event.which == 105) { 122 $$('#CAMERA8').trigger('click'); 123 } else if (event.which == 106) { 124 $$('#CAMERA9').trigger('click'); 125 } else if (event.which == 229) { 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 == 77) { 146 $$('#MOVE').trigger('click'); 147 } else if (event.which == 67) { 148 $$('#COPY').trigger('click'); 149 } else if (event.which == 80) { 150 $$('#PASTE').trigger('click'); 151 } 152 }); 153 </script> 154 connected 155 <pre>use keyboard to control</pre> 156 $for i in cameras: 157 $i 158 <br> 159 <div id="controller"> 160 <a id="VIEW">VIEW</a> <a id="UP">UP</a> <a id="RECORD">RECORD</a><br> 161 <a id="LEFT">LEFT</a> <a id="MIDDLE">MIDDLE</a> <a id="RIGHT">RIGHT</a><br> 162 <a id="DELETE">DELETE</a> <a id="DOWN">DOWN</a> <a id="RETAKE">RETAKE</a><br> 163 </div> 164 <div id="controller2"> 165 <a id="CAMERA0">CAM1</a> <a id="CAMERA1">CAM2</a> <a id="CAMERA2">CAM3</a><br> 166 <a id="CAMERA3">CAM4</a> <a id="CAMERA4">CAM5</a> <a id="CAMERA5">CAM6</a><br> 167 </div> 168 <div id="controller3"> 169 <a id="MOVE">MOVE</a> <a id="COPY">COPY</a> <a id="PASTE">PASTE</a><br> 170 </div> 171 172 <div id="menu2" style="margin:0 auto; width:99%" ></div> 173 <div id="menu" style="margin:0 auto; width:99%"> 174 </div> 175 <br> 176 <br> 177 <input></input> 178 179 $if thumb != '': 180 $ picture= '/'+filmfolder + name + "/scene" + str(scene).zfill(3) + "/shot" + str(shot).zfill(3) + "/picture" + str(take).zfill(3) + ".jpeg" 181 $else: 182 $ picture= '/'+filmfolder + name + "/scene" + str(scene).zfill(3) + "/shot" + str(shot).zfill(3) + "/take" + str(take).zfill(3) + ".jpeg" 183 184 185 $ take_link='/'+filmfolder + name + "/scene" + str(scene).zfill(3) + "/shot" + str(shot).zfill(3) + "/take" + str(take).zfill(3) + ".mp4" 186 $ scene_link='/'+filmfolder + name + "/scene" + str(scene).zfill(3) + "/scene.mp4" 187 $ film_link='/'+filmfolder + name + "/" +name+ ".mp4" 188 $if thumb != '': 189 $if selected == 0: 190 <a href='$film_link'><img width="80%" src="$picture?$randhash"/></a><br> 191 $elif selected == 1: 192 <a href='$scene_link'><img width="80%" src="$picture?$randhash"/></a><br> 193 $elif selected > 1: 194 <a href='$take_link'><img width="80%" src="$picture?$randhash"/></a><br> 195 <br> 196 197 <script> 198 $$('#CAMERA0').on('click', function () { 199 $$.ajax({ 200 method: "GET", 201 type: "Content-type", 202 url:"/api?func=camera0", 203 success: function(result) { 204 }, 205 error: function(result) { 206 console.log('error', result); 207 } 208 }) 209 }); 210 $$('#CAMERA1').on('click', function () { 211 $$.ajax({ 212 method: "GET", 213 type: "Content-type", 214 url:"/api?func=camera1", 215 success: function(result) { 216 }, 217 error: function(result) { 218 console.log('error', result); 219 } 220 }) 221 }); 222 $$('#CAMERA2').on('click', function () { 223 $$.ajax({ 224 method: "GET", 225 type: "Content-type", 226 url:"/api?func=camera2", 227 success: function(result) { 228 }, 229 error: function(result) { 230 console.log('error', result); 231 } 232 }) 233 }); 234 $$('#CAMERA3').on('click', function () { 235 $$.ajax({ 236 method: "GET", 237 type: "Content-type", 238 url:"/api?func=camera3", 239 success: function(result) { 240 }, 241 error: function(result) { 242 console.log('error', result); 243 } 244 }) 245 }); 246 $$('#CAMERA4').on('click', function () { 247 $$.ajax({ 248 method: "GET", 249 type: "Content-type", 250 url:"/api?func=camera4", 251 success: function(result) { 252 }, 253 error: function(result) { 254 console.log('error', result); 255 } 256 }) 257 }); 258 $$('#CAMERA5').on('click', function () { 259 $$.ajax({ 260 method: "GET", 261 type: "Content-type", 262 url:"/api?func=camera5", 263 success: function(result) { 264 }, 265 error: function(result) { 266 console.log('error', result); 267 } 268 }) 269 }); 270 $$('#CAMERA6').on('click', function () { 271 $$.ajax({ 272 method: "GET", 273 type: "Content-type", 274 url:"/api?func=camera6", 275 success: function(result) { 276 }, 277 error: function(result) { 278 console.log('error', result); 279 } 280 }) 281 }); 282 $$('#CAMERA7').on('click', function () { 283 $$.ajax({ 284 method: "GET", 285 type: "Content-type", 286 url:"/api?func=camera7", 287 success: function(result) { 288 }, 289 error: function(result) { 290 console.log('error', result); 291 } 292 }) 293 }); 294 295 $$('#LEFT').on('click', function () { 296 $$.ajax({ 297 method: "GET", 298 type: "Content-type", 299 url:"/api?func=left", 300 success: function(result) { 301 }, 302 error: function(result) { 303 console.log('error', result); 304 } 305 }) 306 }); 307 $$('#RIGHT').on('click', function () { 308 $$.ajax({ 309 method: "GET", 310 type: "Content-type", 311 url:"/api?func=right", 312 success: function(result) { 313 }, 314 error: function(result) { 315 console.log('error', result); 316 } 317 }) 318 }); 319 $$('#DOWN').on('click', function () { 320 $$.ajax({ 321 method: "GET", 322 type: "Content-type", 323 url:"/api?func=down", 324 success: function(result) { 325 }, 326 error: function(result) { 327 console.log('error', result); 328 } 329 }) 330 }); 331 $$('#UP').on('click', function () { 332 $$.ajax({ 333 method: "GET", 334 type: "Content-type", 335 url:"/api?func=up", 336 success: function(result) { 337 }, 338 error: function(result) { 339 console.log('error', result); 340 } 341 }) 342 }); 343 $$('#RECORD').on('click', function () { 344 $$.ajax({ 345 method: "GET", 346 type: "Content-type", 347 url:"/api?func=record", 348 success: function(result) { 349 }, 350 error: function(result) { 351 console.log('error', result); 352 } 353 }) 354 }); 355 $$('#RETAKE').on('click', function () { 356 $$.ajax({ 357 method: "GET", 358 type: "Content-type", 359 url:"/api?func=retake", 360 success: function(result) { 361 }, 362 error: function(result) { 363 console.log('error', result); 364 } 365 }) 366 }); 367 $$('#DELETE').on('click', function () { 368 $$.ajax({ 369 method: "GET", 370 type: "Content-type", 371 url:"/api?func=delete", 372 success: function(result) { 373 }, 374 error: function(result) { 375 console.log('error', result); 376 } 377 }) 378 }); 379 $$('#VIEW').on('click', function () { 380 $$.ajax({ 381 method: "GET", 382 type: "Content-type", 383 url:"/api?func=view", 384 success: function(result) { 385 }, 386 error: function(result) { 387 console.log('error', result); 388 } 389 }) 390 }); 391 $$('#MIDDLE').on('click', function () { 392 $$.ajax({ 393 method: "GET", 394 type: "Content-type", 395 url:"/api?func=middle", 396 success: function(result) { 397 }, 398 error: function(result) { 399 console.log('error', result); 400 } 401 }) 402 }); 403 $$('#CAMERA0').on('click', function () { 404 $$.ajax({ 405 method: "GET", 406 type: "Content-type", 407 url:"/api?func=camera0", 408 success: function(result) { 409 }, 410 error: function(result) { 411 console.log('error', result); 412 } 413 }) 414 }); 415 $$('#CAMERA1').on('click', function () { 416 $$.ajax({ 417 method: "GET", 418 type: "Content-type", 419 url:"/api?func=camera1", 420 success: function(result) { 421 }, 422 error: function(result) { 423 console.log('error', result); 424 } 425 }) 426 }); 427 $$('#CAMERA2').on('click', function () { 428 $$.ajax({ 429 method: "GET", 430 type: "Content-type", 431 url:"/api?func=camera2", 432 success: function(result) { 433 }, 434 error: function(result) { 435 console.log('error', result); 436 } 437 }) 438 }); 439 $$('#CAMERA3').on('click', function () { 440 $$.ajax({ 441 method: "GET", 442 type: "Content-type", 443 url:"/api?func=camera3", 444 success: function(result) { 445 }, 446 error: function(result) { 447 console.log('error', result); 448 } 449 }) 450 }); 451 $$('#CAMERA4').on('click', function () { 452 $$.ajax({ 453 method: "GET", 454 type: "Content-type", 455 url:"/api?func=camera4", 456 success: function(result) { 457 }, 458 error: function(result) { 459 console.log('error', result); 460 } 461 }) 462 }); 463 $$('#CAMERA5').on('click', function () { 464 $$.ajax({ 465 method: "GET", 466 type: "Content-type", 467 url:"/api?func=camera5", 468 success: function(result) { 469 }, 470 error: function(result) { 471 console.log('error', result); 472 } 473 }) 474 }); 475 $$('#CAMERA6').on('click', function () { 476 $$.ajax({ 477 method: "GET", 478 type: "Content-type", 479 url:"/api?func=camera6", 480 success: function(result) { 481 }, 482 error: function(result) { 483 console.log('error', result); 484 } 485 }) 486 }); 487 $$('#CAMERA7').on('click', function () { 488 $$.ajax({ 489 method: "GET", 490 type: "Content-type", 491 url:"/api?func=camera7", 492 success: function(result) { 493 }, 494 error: function(result) { 495 console.log('error', result); 496 } 497 }) 498 }); 499 $$('#CAMERA8').on('click', function () { 500 $$.ajax({ 501 method: "GET", 502 type: "Content-type", 503 url:"/api?func=camera8", 504 success: function(result) { 505 }, 506 error: function(result) { 507 console.log('error', result); 508 } 509 }) 510 }); 511 $$('#CAMERA9').on('click', function () { 512 $$.ajax({ 513 method: "GET", 514 type: "Content-type", 515 url:"/api?func=camera9", 516 success: function(result) { 517 }, 518 error: function(result) { 519 console.log('error', result); 520 } 521 }) 522 }); 523 $$('#MOVE').on('click', function () { 524 $$.ajax({ 525 method: "GET", 526 type: "Content-type", 527 url:"/api?func=move", 528 success: function(result) { 529 }, 530 error: function(result) { 531 console.log('error', result); 532 } 533 }) 534 }); 535 $$('#COPY').on('click', function () { 536 $$.ajax({ 537 method: "GET", 538 type: "Content-type", 539 url:"/api?func=copy", 540 success: function(result) { 541 }, 542 error: function(result) { 543 console.log('error', result); 544 } 545 }) 546 }); 547 $$('#PASTE').on('click', function () { 548 $$.ajax({ 549 method: "GET", 550 type: "Content-type", 551 url:"/api?func=paste", 552 success: function(result) { 553 }, 554 error: function(result) { 555 console.log('error', result); 556 } 557 }) 558 }); 559 560 </script> 561