summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--cam.html13
-rw-r--r--css/cam.css12
-rw-r--r--img/arrow.svg65
-rw-r--r--img/down.pngbin0 -> 983 bytes
-rw-r--r--img/left.pngbin0 -> 753 bytes
-rw-r--r--img/right.pngbin0 -> 742 bytes
-rw-r--r--img/testbild-1.pngbin0 -> 712957 bytes
-rw-r--r--img/testbild-2.pngbin0 -> 701650 bytes
-rw-r--r--img/testbild-3.pngbin0 -> 702190 bytes
-rw-r--r--img/testbild-4.pngbin0 -> 699394 bytes
-rw-r--r--img/testbild-4.xcfbin0 -> 939871 bytes
-rw-r--r--img/testbild.gifbin0 -> 1097329 bytes
-rw-r--r--img/testbild.pngbin0 -> 733994 bytes
-rw-r--r--img/testbild.xcfbin0 -> 1233876 bytes
-rw-r--r--img/up.pngbin0 -> 977 bytes
-rw-r--r--js/.main.js.swpbin0 -> 12288 bytes
-rw-r--r--js/cctv-control.js93
-rw-r--r--js/main.js100
-rw-r--r--js/main.js.bak55
19 files changed, 338 insertions, 0 deletions
diff --git a/cam.html b/cam.html
new file mode 100644
index 0000000..60aed46
--- /dev/null
+++ b/cam.html
@@ -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>
diff --git a/css/cam.css b/css/cam.css
new file mode 100644
index 0000000..2155efa
--- /dev/null
+++ b/css/cam.css
@@ -0,0 +1,12 @@
+img.fullscreen {
+ min-height: 100%;
+ min-width: 1024px;
+
+ width: 100%;
+ height: auto;
+
+ position: fixed;
+ top: 0;
+ left: 0;
+
+}
diff --git a/img/arrow.svg b/img/arrow.svg
new file mode 100644
index 0000000..02a1b18
--- /dev/null
+++ b/img/arrow.svg
@@ -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>
diff --git a/img/down.png b/img/down.png
new file mode 100644
index 0000000..e7cad41
--- /dev/null
+++ b/img/down.png
Binary files differ
diff --git a/img/left.png b/img/left.png
new file mode 100644
index 0000000..058e0d5
--- /dev/null
+++ b/img/left.png
Binary files differ
diff --git a/img/right.png b/img/right.png
new file mode 100644
index 0000000..415fb5d
--- /dev/null
+++ b/img/right.png
Binary files differ
diff --git a/img/testbild-1.png b/img/testbild-1.png
new file mode 100644
index 0000000..cae27b6
--- /dev/null
+++ b/img/testbild-1.png
Binary files differ
diff --git a/img/testbild-2.png b/img/testbild-2.png
new file mode 100644
index 0000000..804ca63
--- /dev/null
+++ b/img/testbild-2.png
Binary files differ
diff --git a/img/testbild-3.png b/img/testbild-3.png
new file mode 100644
index 0000000..cc0f3b3
--- /dev/null
+++ b/img/testbild-3.png
Binary files differ
diff --git a/img/testbild-4.png b/img/testbild-4.png
new file mode 100644
index 0000000..1b73190
--- /dev/null
+++ b/img/testbild-4.png
Binary files differ
diff --git a/img/testbild-4.xcf b/img/testbild-4.xcf
new file mode 100644
index 0000000..c844b06
--- /dev/null
+++ b/img/testbild-4.xcf
Binary files differ
diff --git a/img/testbild.gif b/img/testbild.gif
new file mode 100644
index 0000000..19ea023
--- /dev/null
+++ b/img/testbild.gif
Binary files differ
diff --git a/img/testbild.png b/img/testbild.png
new file mode 100644
index 0000000..82b1339
--- /dev/null
+++ b/img/testbild.png
Binary files differ
diff --git a/img/testbild.xcf b/img/testbild.xcf
new file mode 100644
index 0000000..e23beed
--- /dev/null
+++ b/img/testbild.xcf
Binary files differ
diff --git a/img/up.png b/img/up.png
new file mode 100644
index 0000000..ed95bbd
--- /dev/null
+++ b/img/up.png
Binary files differ
diff --git a/js/.main.js.swp b/js/.main.js.swp
new file mode 100644
index 0000000..b3ba802
--- /dev/null
+++ b/js/.main.js.swp
Binary files differ
diff --git a/js/cctv-control.js b/js/cctv-control.js
new file mode 100644
index 0000000..09e978f
--- /dev/null
+++ b/js/cctv-control.js
@@ -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;
+ }
+}
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..b85fa89
--- /dev/null
+++ b/js/main.js
@@ -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;
+ }
+}
diff --git a/js/main.js.bak b/js/main.js.bak
new file mode 100644
index 0000000..7a12dce
--- /dev/null
+++ b/js/main.js.bak
@@ -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;
+
+ }
+
+}
generated by cgit v1.2.1 (git 2.18.0) at 2024-11-22 02:01:51 +0000