index.html

   1 <!--
   2 By: Russell Handorf
   3     rhandorf@handorf.org
   4
   5 License: GNU General Public License
   6 -->
   7 <html>
   8  <head>
   9 <script src="jquery.min.js"></script>
  10 </head>
  11 <body bgcolor="#000000">
  12 <script>
  13
  14 var keyCount = 0;
  15 var numberString = "";
  16 var curChannel=0;
  17 var cams = new Array();
  18
  19 //USER DEFINED STUFF BELOW
  20 var hostName="zoneminder";
  21 cams[0]="http://"+hostName+"/dark-blue-box.jpg";
  22 cams[1]="http://"+hostName+"/zm/cgi-bin/nph-zms?buffer=1000&monitor=1";
  23 cams[2]="http://"+hostName+"/zm/cgi-bin/nph-zms?buffer=1000&monitor=2";
  24 cams[3]="http://"+hostName+"/zm/cgi-bin/nph-zms?buffer=1000&monitor=3";
  25 cams[4]="http://"+hostName+"/zm/cgi-bin/nph-zms?buffer=1000&monitor=4";
  26 cams[5]="http://"+hostName+"/zm/cgi-bin/nph-zms?buffer=1000&monitor=5";
  27 cams[6]="http://"+hostName+"/zm/cgi-bin/nph-zms?buffer=1000&monitor=6";
  28 cams[7]="http://"+hostName+"/zm/cgi-bin/nph-zms?buffer=1000&monitor=7";
  29 cams[8]="http://"+hostName+"/zm/cgi-bin/nph-zms?buffer=1000&monitor=8";
  30 cams[9]="http://"+hostName+"/zm/cgi-bin/nph-zms?buffer=1000&monitor=9";
  31 cams[10]="http://"+hostName+"/zm/cgi-bin/nph-zms?buffer=1000&monitor=10";
  32 cams[11]="http://"+hostName+"/zm/cgi-bin/nph-zms?buffer=1000&monitor=11";
  33 cams[12]="http://"+hostName+"/zm/cgi-bin/nph-zms?buffer=1000&monitor=12";
  34 cams[13]="http://"+hostName+"/zm/cgi-bin/nph-zms?buffer=1000&monitor=13";
  35 cams[14]="http://"+hostName+"/zm/cgi-bin/nph-zms?buffer=1000&monitor=14";
  36 cams[15]="http://"+hostName+"/zm/cgi-bin/nph-zms?buffer=1000&monitor=15";
  37 cams[16]="http://"+hostName+"/zm/cgi-bin/nph-zms?buffer=1000&monitor=16";
  38 cams[17]="http://"+hostName+"/zm/cgi-bin/nph-zms?buffer=1000&monitor=17";
  39 cams[18]="http://"+hostName+"/zm/cgi-bin/nph-zms?buffer=1000&monitor=18";
  40 cams[19]="http://"+hostName+"/zm/cgi-bin/nph-zms?buffer=1000&monitor=19";
  41
  42 $(function() {
  43   var camTotal = cams.length;
  44   var camstring="";
  45   for (var i = 1; i < camTotal; i++) {
  46     camstring = camstring + '<img width="100" height="100" name="cam'+i+'" id="cam'+i+'" src="'+cams[i]+'&maxfps=1&scale=12.5&mode=single">';
  47   }
  48   var leftpos = ((parseInt($("#matrix").css("left"))/2)-100);
  49   var width = (camTotal*100);
  50   $("#matrix").css("width", width+"px" );
  51   $("#matrix").css("left", leftpos+"px" );
  52   $('#matrix').html(camstring);
  53   $('#curChannel').fadeIn('fast').delay(1000).fadeOut('slow');
  54
  55   $(document).ready(function() {
  56     window.setInterval(function(){
  57       for (var i = 1; i < camTotal; i++) {
  58         $('#cam'+i).attr('src',cams[i]+'&maxfps=1&scale=12.5&mode=single');
  59       }
  60     }, 1000);
  61   });
  62
  63   $(document).keydown(function(e) {
  64     if (keyCount < 1) {
  65       if (e.keyCode === 33) {
  66         curChannel = curChannel+1;
  67         if (typeof cams[curChannel] == 'undefined') {
  68           curChannel=0;
  69         }
  70         if (curChannel>0) {
  71           document.getElementById("cam").src = cams[curChannel] + "&maxfps=15&mode=jpeg&scale=100";
  72         } else {
  73           document.getElementById("cam").src = cams[curChannel];
  74         }
  75         $("#curChannel").html(curChannel);
  76         $('#curChannel').fadeIn('fast').delay(1000).fadeOut('slow');
  77       }
  78       if (e.keyCode === 34) {
  79         curChannel = curChannel-1;
  80         if (typeof cams[curChannel] == 'undefined') {
  81           curChannel=camTotal-1;
  82         }
  83         if (curChannel>0) {
  84           document.getElementById("cam").src = cams[curChannel] + "&maxfps=15&mode=jpeg&scale=100";
  85         } else {
  86           document.getElementById("cam").src = cams[curChannel];
  87         }
  88         $("#curChannel").html(curChannel);
  89         $('#curChannel').fadeIn('fast').delay(1000).fadeOut('slow');
  90       }
  91       if (e.which === 48) { numberString=numberString+0;}
  92       if (e.which === 49) { numberString=numberString+1;}
  93       if (e.which === 50) { numberString=numberString+2;}
  94       if (e.which === 51) { numberString=numberString+3;}
  95       if (e.which === 52) { numberString=numberString+4;}
  96       if (e.which === 53) { numberString=numberString+5;}
  97       if (e.which === 54) { numberString=numberString+6;}
  98       if (e.which === 55) { numberString=numberString+7;}
  99       if (e.which === 56) { numberString=numberString+8;}
 100       if (e.which === 57) { numberString=numberString+9;}
 101       if (e.which === 13) {
 102       if (typeof cams[parseInt(numberString)] == 'undefined') {
 103         $("#curChannel").html("X");
 104         $("#curChannel").css("color", "red" );
 105         $('#curChannel').fadeIn('fast').delay(1000).fadeOut('slow');
 106         setTimeout(function() {$("#curChannel").css("color", "white" );}, 1900);
 107         numberString="";
 108       } else {
 109         document.getElementById("cam").src = cams[parseInt(numberString)] + "&mode=jpeg&scale=100";
 110         curChannel=parseInt(numberString);
 111         numberString="";
 112         $("#curChannel").html(curChannel);
 113         $('#curChannel').fadeIn('fast').delay(1000).fadeOut('slow');
 114       }
 115     }
 116   }
 117   keyCount++;
 118   });
 119
 120   $(document).keyup(function(e) {
 121     keyCount=0;
 122   });
 123 });
 124 </script>
 125 <div id='outter' style="width: 100%; height: 100%; position: relative;">
 126 <div id='curChannel' name='curChannel' style="border-radius: 25px; width: 100px; left: calc(50% - 50px); text-align: center; position: absolute; top: 25px; font: 50px Georgia; font-weight: bold; color: white; background: black;">0</div>
 127 <img id='cam' name='cam' src = "http://zoneminder/dark-blue-box.jpg" width="100%" height="100%" style="">
 128 <div id='matrix' name='matrix' style="border-radius: 25px; left: 50%; text-align: center; position: absolute; bottom: 25px; font: 50px Georgia; font-weight: bold; color: white; background: black;"></div>
 129 </div>
 130 </body>
 131 </html>