5 License: GNU General Public License
9 <script src="jquery.min.js"></script>
11 <body bgcolor="#000000">
15 var numberString = "";
17 var cams = new Array();
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";
43 var camTotal = cams.length;
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">';
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');
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');
63 $(document).keydown(function(e) {
65 if (e.keyCode === 33) {
66 curChannel = curChannel+1;
67 if (typeof cams[curChannel] == 'undefined') {
71 document.getElementById("cam").src = cams[curChannel] + "&maxfps=15&mode=jpeg&scale=100";
73 document.getElementById("cam").src = cams[curChannel];
75 $("#curChannel").html(curChannel);
76 $('#curChannel').fadeIn('fast').delay(1000).fadeOut('slow');
78 if (e.keyCode === 34) {
79 curChannel = curChannel-1;
80 if (typeof cams[curChannel] == 'undefined') {
81 curChannel=camTotal-1;
84 document.getElementById("cam").src = cams[curChannel] + "&maxfps=15&mode=jpeg&scale=100";
86 document.getElementById("cam").src = cams[curChannel];
88 $("#curChannel").html(curChannel);
89 $('#curChannel').fadeIn('fast').delay(1000).fadeOut('slow');
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);
109 document.getElementById("cam").src = cams[parseInt(numberString)] + "&mode=jpeg&scale=100";
110 curChannel=parseInt(numberString);
112 $("#curChannel").html(curChannel);
113 $('#curChannel').fadeIn('fast').delay(1000).fadeOut('slow');
120 $(document).keyup(function(e) {
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>