initial commit

This commit is contained in:
Florian 2014-01-24 12:35:41 +01:00
commit 918591b770
19 changed files with 338 additions and 0 deletions

13
cam.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE HTML>
<html lang=en>
<head>
<meta charset="utf-8">
<script src="js/cctv-control.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/cam.css">
</head>
<body onkeydown="keyDown(event)">
<div id="screen">
<img src="img/testbild.gif" class="fullscreen">
</div>
</body>
</html>

12
css/cam.css Normal file
View File

@ -0,0 +1,12 @@
img.fullscreen {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}

65
img/arrow.svg Normal file
View File

@ -0,0 +1,65 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100"
height="100"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="arrow.svg"
inkscape:export-filename="/home/olf/Projekte/Kunstprojekt-CCTV/js-interface/down.png"
inkscape:export-xdpi="99.989998"
inkscape:export-ydpi="99.989998">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.959798"
inkscape:cx="72.885621"
inkscape:cy="46.110712"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1280"
inkscape:window-height="763"
inkscape:window-x="0"
inkscape:window-y="16"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-952.36218)">
<path
style="fill:#000000;fill-opacity:1;stroke:none"
d="m 49.999995,1042.3622 40.00001,-80.00001 -80.00001,0 z"
id="path2985"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
img/down.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 983 B

BIN
img/left.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 753 B

BIN
img/right.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 742 B

BIN
img/testbild-1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 696 KiB

BIN
img/testbild-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 685 KiB

BIN
img/testbild-3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 686 KiB

BIN
img/testbild-4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 683 KiB

BIN
img/testbild-4.xcf Normal file

Binary file not shown.

BIN
img/testbild.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
img/testbild.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 717 KiB

BIN
img/testbild.xcf Normal file

Binary file not shown.

BIN
img/up.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 977 B

BIN
js/.main.js.swp Normal file

Binary file not shown.

93
js/cctv-control.js Normal file
View File

@ -0,0 +1,93 @@
// Small lib to
//
//
//
//
var cam = 0;
var camHost = "172.22.80.56:8080";
var controlHost = "172.22.80.56:8080";
//create event which is triggered when DOM is ready
window.onDomReady = initReady;
//change from testbild to default cam when DOM is ready
window.onDomReady(changeCam);
function initReady(fn) {
if(document.addEventListener) {
document.addEventListener("DOMContentLoaded", fn, false);
}
}
//change currently displayed camera to the one in cam variable
function changeCam() {
var display = document.getElementById('screen');
if (cam <= 7 && cam >= 0) {
display.innerHTML = '<img src="http://' + camHost + '/cam/' + cam + '/stream.mjpeg" />';
}
else {
display.innerHTML = '<img src="img/testbild.png" />';
}
}
//send control command to currently selected camera
function controlCam(direction) {
if (direction == "left" || direction == "right" || direction == "up" || direction == "down") {
var request = new XMLHttpRequest();
request.open("get", "http://" + controlHost + "/cam/" + cam + "/control/" + direction + "left", false);
request.send();
return false;
}
function keyDown(event) {
switch(event.keyCode) {
case 49: // 1
cam = 0;
changeCam();
break;
case 50: // 2
cam = 1;
changeCam();
break;
case 51: // 3
cam = 2;
changeCam();
break;
case 52: // 4
cam = 3;
changeCam();
break;
case 53: // 5
cam = 4;
changeCam();
break;
case 54: // 6
cam = 5;
changeCam();
break;
case 55: // 7
cam = 6;
changeCam();
break;
case 56: // 8
cam = 7;
changeCam();
break;
case 37: // arrow left
controlCam("left");
break;
case 38: // arrow up
controlCam("up");
break;
case 39: // arrow right
controlCam("right");
break;
case 40: // arrow down
controlCam("down");
break;
}
}

100
js/main.js Normal file
View File

@ -0,0 +1,100 @@
// CCTV Control
//
// Author: Florian Raemisch
// Email: olf@subsignal.org
//
// cctv-control is a webinterface to control and view
// mjpeg encoded videos by cctv cameras which are
// proxied by mjpegplexer. camera control is possible
// with arrow-keys, if mjpegplexer is configured
// properly.
//
// This Software is licensed under the GPL Version 3, 29 June 2007
var cam = 0;
var camHost = "172.22.80.56:8080";
var controlHost = "172.22.80.56:8080";
//create event which is triggered when DOM is ready
window.onDomReady = initReady;
//change from testbild to default cam when DOM is ready
window.onDomReady(changeCam);
function initReady(fn) {
if(document.addEventListener) {
document.addEventListener("DOMContentLoaded", fn, false);
}
}
//change currently displayed camera to the one in cam variable
function changeCam() {
var display = document.getElementById('screen');
if (cam <= 7 && cam >= 0) {
display.innerHTML = '<img src="http://' + camHost + '/cam/' + cam + '/stream.mjpeg" />';
}
else {
display.innerHTML = '<img src="img/testbild.png" />';
}
}
//send control command to currently selected camera
function controlCam(direction) {
if (direction == "left" || direction == "right" || direction == "up" || direction == "down") {
var request = new XMLHttpRequest();
request.open("get", "http://" + controlHost + "/cam/" + cam + "/control/" + direction + "left", false);
request.send();
return false;
}
function keyDown(event) {
switch(event.keyCode) {
case 49: // 1
cam = 0;
changeCam();
break;
case 50: // 2
cam = 1;
changeCam();
break;
case 51: // 3
cam = 2;
changeCam();
break;
case 52: // 4
cam = 3;
changeCam();
break;
case 53: // 5
cam = 4;
changeCam();
break;
case 54: // 6
cam = 5;
changeCam();
break;
case 55: // 7
cam = 6;
changeCam();
break;
case 56: // 8
cam = 7;
changeCam();
break;
case 37: // arrow left
controlCam("left");
break;
case 38: // arrow up
controlCam("up");
break;
case 39: // arrow right
controlCam("right");
break;
case 40: // arrow down
controlCam("down");
break;
}
}

55
js/main.js.bak Normal file
View File

@ -0,0 +1,55 @@
var cam;
function keyDown(event) {
if (event.keyCode == 49) {
var display = document.getElementById('screen');
cam = 0;
display.innerHTML = '<img src="http://172.22.80.56:8080/cam/0/stream.mjpeg" />'
}
if (event.keyCode == 50) {
var display = document.getElementById('screen');
cam = 1;
display.innerHTML = '<img src="http://172.22.80.56:8080/cam/1/stream.mjpeg" />'
}
if (event.keyCode == 51) {
var display = document.getElementById('screen');
cam = 2;
display.innerHTML = '<img src="http://172.22.80.56:8080/cam/2/stream.mjpeg" />'
}
if (event.keyCode == 52) {
var display = document.getElementById('screen');
display.innerHTML = '<img src="testbild-4.png" />'
}
if (event.keyCode == 37) {
var request = new XMLHttpRequest();
request.open("get", "http://172.22.80.56:8080/cam/" + cam + "/control/left", false);
request.send();
return false;
}
if (event.keyCode == 38) {
var request = new XMLHttpRequest();
request.open("get", "http://172.22.80.56:8080/cam/" + cam +"/control/up", false);
request.send();
return false;
}
if (event.keyCode == 39) {
var request = new XMLHttpRequest();
request.open("get", "http://172.22.80.56:8080/cam/" + cam +"/control/right", false);
request.send();
return false;
}
if (event.keyCode == 40) {
var request = new XMLHttpRequest();
request.open("get", "http://172.22.80.56:8080/cam/" + cam +"/control/down", false);
request.send();
return false;
}
}