gonzopi

git clone https://git.tarina.org/gonzopi
Log | Files | Refs | README | LICENSE

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