summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFlorian <stayawake@lavabit.com>2014-03-02 14:22:10 +0300
committerFlorian <stayawake@lavabit.com>2014-03-02 14:22:10 +0300
commitc35a1c1abb596b919edf42b274d94c7831b93b13 (patch)
tree00f402824e566a686e0a82ffdb11bb0e4f72ad33
parent08feea56c82a658d0953b86d29c5d2ec5a9d5b80 (diff)
added webinterface
-rw-r--r--public/.gitignore1
-rw-r--r--public/README46
-rw-r--r--public/cam.html32
-rw-r--r--public/css/cam.css82
-rw-r--r--public/css/print.css24
-rw-r--r--public/img/arrow.svg65
-rw-r--r--public/img/down.pngbin0 -> 983 bytes
-rw-r--r--public/img/left.pngbin0 -> 753 bytes
-rw-r--r--public/img/print_button.pngbin0 -> 4931 bytes
-rw-r--r--public/img/print_button.svg120
-rw-r--r--public/img/print_button_highlight.pngbin0 -> 5274 bytes
-rw-r--r--public/img/right.pngbin0 -> 742 bytes
-rw-r--r--public/img/testbild-1.pngbin0 -> 712957 bytes
-rw-r--r--public/img/testbild-2.pngbin0 -> 701650 bytes
-rw-r--r--public/img/testbild-3.pngbin0 -> 702190 bytes
-rw-r--r--public/img/testbild-4.pngbin0 -> 699394 bytes
-rw-r--r--public/img/testbild-4.xcfbin0 -> 939871 bytes
-rw-r--r--public/img/testbild.gifbin0 -> 1097329 bytes
-rw-r--r--public/img/testbild.pngbin0 -> 733994 bytes
-rw-r--r--public/img/testbild.xcfbin0 -> 1233876 bytes
-rw-r--r--public/img/up.pngbin0 -> 977 bytes
-rw-r--r--public/js/cctv-control.js244
-rw-r--r--public/js/print.js72
-rw-r--r--public/print.html24
-rw-r--r--server.js34
25 files changed, 738 insertions, 6 deletions
diff --git a/public/.gitignore b/public/.gitignore
new file mode 100644
index 0000000..1377554
--- /dev/null
+++ b/public/.gitignore
@@ -0,0 +1 @@
+*.swp
diff --git a/public/README b/public/README
new file mode 100644
index 0000000..8d39e20
--- /dev/null
+++ b/public/README
@@ -0,0 +1,46 @@
+This Interface is developed to work with firefox 27.0.1.
+
+Installation
+============
+
+1. Download mjpegplexer:
+ http://git.sublab.org/mjpegplexer/
+
+2. Setup mjpegplexer properly.
+
+3. Copy the contents of cctv-control to the root
+ of your webserver and set the camera-host-IP
+ to the server that runs mjpegplexer.
+
+Omit Printing-Dialogue
+======================
+
+To make firefox not display the printing dialogue a config
+option needs to be added. I recommend to print to a file,
+for everything to work as expected.
+
+1. enter "about:config" and hit enter
+
+2. create a new boolean (right-click)
+ with the name "print.always_silent_print"
+ and set it to "true"
+
+3. set "print.print_to_file" to "true"
+
+4. set your preferred filename in
+ "print.print_to_filename"
+
+5.(opt) adapt values of footers and headers for your needs
+
+
+Default Values
+==============
+
+print.always_silent_print false
+print.print_to_file false
+
+print.footerleft &PT //Pagenumber
+print.footerright &D //Date
+print.headerleft &T //?
+print.headerright &U //Filename
+
diff --git a/public/cam.html b/public/cam.html
new file mode 100644
index 0000000..3196c52
--- /dev/null
+++ b/public/cam.html
@@ -0,0 +1,32 @@
+<!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)" id='body'>
+ <div id="screen">
+ <img src="img/testbild.gif" id="camImage">
+ </div>
+ <div id="form">
+ <img src="about:blank" id="formImage">
+ <p>
+ </p>
+ <p>Personalkennzeichnung</p>
+ <input id="formName"><br>
+ <p>Zeitpunkt</p>
+ <input id="formDate" readonly><br>
+ <p>Analyse der Aufnahme</p>
+ <textarea id="formAnalysis1"></textarea>
+ <p>Bemerkungen zum Untersuchungsverlauf</p>
+ <textarea id="formAnalysis2"></textarea>
+ <p>Pers&ouml;nliche Bemerkungen</p>
+ <textarea id="formAnalysis3"></textarea>
+ <p>
+ <a href="#" id='printButton' onclick='hideForm()'>&nbsp</a>
+ </p>
+ </div>
+
+</body>
+</html>
diff --git a/public/css/cam.css b/public/css/cam.css
new file mode 100644
index 0000000..d1d28f4
--- /dev/null
+++ b/public/css/cam.css
@@ -0,0 +1,82 @@
+body {
+ font-family: Helvetica, Verdana, Arial, sans-serif;
+ background-color: #000;
+ padding: 0px;
+ margin: 0px;
+}
+
+.camNumber {
+ position: fixed;
+
+ left: 20px;
+ top: -100px;
+
+ background: rgba(0,0,0,0.6);
+
+ width: 100px;
+
+ text-align: center;
+
+ color: rgba(255, 255, 255, 0.7);
+ font-weight: bold;
+ font-family: Helvetica, Verdana, Arial, sans-serif;
+ font-size: 120px;
+ line-height: 120px;
+
+ z-index: 100;
+ }
+
+#camImage {
+ min-height: 100%;
+ min-width: 1024px;
+
+ width: 100%;
+ height: auto;
+
+ position: fixed;
+ top: 0;
+ left: 0;
+
+ margin: 0;
+ padding: 0;
+
+ z-index: 50;
+}
+
+#form {
+ /*visibility: hidden;*/
+ width: 800px;
+ height: 100%;
+ background-color: rgba(127, 192, 255, 0.9);
+ margin: 0 auto;
+ position: relative;
+ top: 0px;
+
+ padding: 40px;
+
+ z-index: 200;
+}
+
+#formImage {
+ margin-right: 0px;
+ margin-left: auto;
+ float: right;
+ position: relative;
+ width: 400px;
+
+}
+
+#printButton {
+ width: 200px;
+ height: 100px;
+ display: block;
+ margin: 10px auto;
+ background-image: url('../img/print_button.png');
+ text-decoration: none;
+}
+
+#printButton:hover {
+ background-image: url('../img/print_button_highlight.png');
+
+}
+
diff --git a/public/css/print.css b/public/css/print.css
new file mode 100644
index 0000000..e71a0ae
--- /dev/null
+++ b/public/css/print.css
@@ -0,0 +1,24 @@
+#page {
+ width: 800px;
+
+
+}
+
+#camImage {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+
+#metaContainer {
+ position: absolute;
+ top: 0px;
+ left: 700px;
+}
+
+#textContainer {
+ position: absolute;
+ top: 500px;
+ left: 0px;
+
+}
diff --git a/public/img/arrow.svg b/public/img/arrow.svg
new file mode 100644
index 0000000..02a1b18
--- /dev/null
+++ b/public/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/public/img/down.png b/public/img/down.png
new file mode 100644
index 0000000..e7cad41
--- /dev/null
+++ b/public/img/down.png
Binary files differ
diff --git a/public/img/left.png b/public/img/left.png
new file mode 100644
index 0000000..058e0d5
--- /dev/null
+++ b/public/img/left.png
Binary files differ
diff --git a/public/img/print_button.png b/public/img/print_button.png
new file mode 100644
index 0000000..1275207
--- /dev/null
+++ b/public/img/print_button.png
Binary files differ
diff --git a/public/img/print_button.svg b/public/img/print_button.svg
new file mode 100644
index 0000000..aee2cd0
--- /dev/null
+++ b/public/img/print_button.svg
@@ -0,0 +1,120 @@
+<?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:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="201"
+ height="101"
+ id="svg2"
+ version="1.1"
+ inkscape:version="0.48.4 r9939"
+ sodipodi:docname="print_button.svg"
+ inkscape:export-filename="/home/olf/Projekte/Kunstprojekt-CCTV/js-interface/img/print_button_highlight.png"
+ inkscape:export-xdpi="89.10891"
+ inkscape:export-ydpi="89.10891">
+ <defs
+ id="defs4">
+ <linearGradient
+ id="linearGradient3765">
+ <stop
+ id="stop3767"
+ offset="0"
+ style="stop-color:#666666;stop-opacity:1;" />
+ <stop
+ id="stop3769"
+ offset="1"
+ style="stop-color:#c0c0c0;stop-opacity:1;" />
+ </linearGradient>
+ <linearGradient
+ id="linearGradient3755">
+ <stop
+ style="stop-color:#666666;stop-opacity:1;"
+ offset="0"
+ id="stop3757" />
+ <stop
+ id="stop3771"
+ offset="0.56964296"
+ style="stop-color:#939393;stop-opacity:1;" />
+ <stop
+ style="stop-color:#ffffff;stop-opacity:1;"
+ offset="1"
+ id="stop3759" />
+ </linearGradient>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient3755"
+ id="linearGradient3761"
+ x1="197.5"
+ y1="297.00504"
+ x2="196.78574"
+ y2="169.14789"
+ gradientUnits="userSpaceOnUse" />
+ </defs>
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="2.8"
+ inkscape:cx="38.008931"
+ inkscape:cy="68.443537"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ fit-margin-top="0"
+ fit-margin-left="0"
+ fit-margin-right="0"
+ fit-margin-bottom="0"
+ 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(-88.0625,-169)">
+ <rect
+ style="fill:url(#linearGradient3761);fill-opacity:1;stroke:#000000;stroke-opacity:1"
+ id="rect2985"
+ width="200"
+ height="100"
+ x="88.571426"
+ y="169.50504"
+ ry="18.571428" />
+ <text
+ xml:space="preserve"
+ style="font-size:120px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Open Sans;-inkscape-font-specification:Open Sans"
+ x="109.69447"
+ y="230.50504"
+ id="text3763"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan3765"
+ x="109.69447"
+ y="230.50504"
+ style="font-size:40px;fill:#ffffff">Drucken</tspan></text>
+ </g>
+</svg>
diff --git a/public/img/print_button_highlight.png b/public/img/print_button_highlight.png
new file mode 100644
index 0000000..1cb7df5
--- /dev/null
+++ b/public/img/print_button_highlight.png
Binary files differ
diff --git a/public/img/right.png b/public/img/right.png
new file mode 100644
index 0000000..415fb5d
--- /dev/null
+++ b/public/img/right.png
Binary files differ
diff --git a/public/img/testbild-1.png b/public/img/testbild-1.png
new file mode 100644
index 0000000..cae27b6
--- /dev/null
+++ b/public/img/testbild-1.png
Binary files differ
diff --git a/public/img/testbild-2.png b/public/img/testbild-2.png
new file mode 100644
index 0000000..804ca63
--- /dev/null
+++ b/public/img/testbild-2.png
Binary files differ
diff --git a/public/img/testbild-3.png b/public/img/testbild-3.png
new file mode 100644
index 0000000..cc0f3b3
--- /dev/null
+++ b/public/img/testbild-3.png
Binary files differ
diff --git a/public/img/testbild-4.png b/public/img/testbild-4.png
new file mode 100644
index 0000000..1b73190
--- /dev/null
+++ b/public/img/testbild-4.png
Binary files differ
diff --git a/public/img/testbild-4.xcf b/public/img/testbild-4.xcf
new file mode 100644
index 0000000..c844b06
--- /dev/null
+++ b/public/img/testbild-4.xcf
Binary files differ
diff --git a/public/img/testbild.gif b/public/img/testbild.gif
new file mode 100644
index 0000000..19ea023
--- /dev/null
+++ b/public/img/testbild.gif
Binary files differ
diff --git a/public/img/testbild.png b/public/img/testbild.png
new file mode 100644
index 0000000..82b1339
--- /dev/null
+++ b/public/img/testbild.png
Binary files differ
diff --git a/public/img/testbild.xcf b/public/img/testbild.xcf
new file mode 100644
index 0000000..e23beed
--- /dev/null
+++ b/public/img/testbild.xcf
Binary files differ
diff --git a/public/img/up.png b/public/img/up.png
new file mode 100644
index 0000000..ed95bbd
--- /dev/null
+++ b/public/img/up.png
Binary files differ
diff --git a/public/js/cctv-control.js b/public/js/cctv-control.js
new file mode 100644
index 0000000..70c68e9
--- /dev/null
+++ b/public/js/cctv-control.js
@@ -0,0 +1,244 @@
+// 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 = "127.0.0.1:8080";
+var controlHost = "127.0.0.1:8080";
+var formActive = 0; //crazy errors if boolean is used here...
+
+//create event which is triggered when DOM is ready
+window.onDomReady = initReady;
+
+//change from testbild to default cam when DOM is ready
+window.onDomReady(initViewer);
+
+
+function initReady(fn) {
+ if(document.addEventListener) {
+ document.addEventListener("DOMContentLoaded", fn, false);
+ }
+}
+
+//hide the form, and switch on camera
+function initViewer() {
+ var display = document.getElementById('screen');
+ var tempCam = parseInt(localStorage.getItem('cam'));
+
+ formActive = localStorage.getItem("formActive");
+ if (tempCam <= 7 && tempCam >= 0) {
+ cam = tempCam;
+ }
+
+ //if form was displayed, when page was reloaded, display form
+ if (formActive == 1) {
+ displayCamNumber();
+ display.innerHTML += '<img id="camImage" src="http://' + camHost + '/cam/' + cam + '/stream.mjpeg" />';
+ showForm();
+ }
+ else {
+ formActive == 0;
+ document.getElementById('form').style.visibility = "hidden";
+ changeCam();
+ }
+}
+
+function displayCamNumber() {
+ var display = document.getElementById('screen');
+ camDisplay = cam + 1;
+ display.innerHTML = '<p class="camNumber">' + camDisplay + '</p>';
+}
+
+//change currently displayed camera to the one in cam variable
+function changeCam() {
+
+ var display = document.getElementById('screen');
+ if (cam <= 7 && cam >= 0) {
+ displayCamNumber();
+ display.innerHTML += '<img id="camImage" src="http://' + camHost + '/cam/' + cam + '/stream.mjpeg" />';
+ localStorage.setItem("cam", cam);
+ }
+ else {
+ display.innerHTML = '<img id="camImage" src="img/testbild.gif" />';
+ }
+}
+
+//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, false);
+ request.send();
+ return false;
+ }
+}
+
+//save current screenshot in local storage
+function saveImage() {
+
+ var storageFiles = {}, //local storage object
+ xhr = new XMLHttpRequest(),
+ blob,
+ fileReader = new FileReader(),
+ snapShot = new Image(), //dummy-object to display snapshot
+ imgCanvas = document.createElement("canvas"),
+ imgContext = imgCanvas.getContext("2d");
+
+
+ //xhr.open("GET", 'img/testbild-' + camDisplay + '.png', true);
+ xhr.open("GET", 'http://' + camHost + '/cam/' + cam + '/snapshot.jpg', true);
+ xhr.responseType = "arraybuffer";
+
+ xhr.addEventListener("load", function () {
+ if (xhr.status === 200) {
+
+ blob = new Blob([xhr.response], {type: "image/jpg"});
+
+
+ fileReader.onload = function (evt) {
+ var result = evt.target.result;
+
+ snapShot.src = result;
+
+ try {
+ localStorage.setItem("snapShot", result);
+ }
+ catch (e) {
+ console.log("Storage failed: " + e);
+ }
+ };
+
+ fileReader.readAsDataURL(blob);
+
+ fileReader.onloadend = function() {
+ showForm();
+ }
+ }
+ }, false);
+
+ xhr.send();
+}
+
+function showForm() {
+
+ //load snapshot from localstorage
+ var display1 = document.getElementById("camImage"),
+ display2 = document.getElementById("formImage"),
+ stor = localStorage.getItem("snapShot");
+
+ var d = new Date();
+
+ var date = d.getDay();
+ date += '/';
+ date += d.getMonth();
+ date += '/';
+ date += d.getFullYear();
+
+ var time = d.getHours();
+ time += ':';
+ time += d.getMinutes();
+ time += ':';
+ time += d.getSeconds();
+ time += ' Uhr';
+
+ //display loaded image
+ if (stor) {
+ display1.setAttribute("src", stor);
+ display2.setAttribute("src", stor);
+ }
+
+ //insert date in date-field
+ document.getElementById("formDate").value = date + ' ' + time;
+
+ //make form visible
+ document.getElementById("form").style.visibility = 'visible';
+ formActive = 1;
+ localStorage.setItem("formActive", formActive);
+}
+
+
+function hideForm() {
+
+ //save form data in local storage for later use
+ localStorage.setItem("formName", document.getElementById('formName').value);
+ localStorage.setItem("formDate", document.getElementById('formDate').value);
+ localStorage.setItem("formAnalysis1", document.getElementById('formAnalysis1').value);
+ localStorage.setItem("formAnalysis2", document.getElementById('formAnalysis2').value);
+ localStorage.setItem("formAnalysis3", document.getElementById('formAnalysis3').value);
+
+ //hide form and unfocus button
+ //otherwise next enter press will trigger print-function
+ document.getElementById('printButton').blur();
+ window.open('print.html', 'Printlayout');
+ document.getElementById("form").style.visibility = 'hidden';
+ formActive = 0;
+ localStorage.setItem("formActive", formActive);
+ changeCam();
+}
+
+
+function keyDown(event) {
+
+ // chaning the camera is only possible if the form is not displayed
+ if (formActive != 1) {
+ //numpad has different keycodes!
+ 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;
+ case 13: //enter
+ saveImage();
+ break;
+ }
+ }
+}
diff --git a/public/js/print.js b/public/js/print.js
new file mode 100644
index 0000000..7375047
--- /dev/null
+++ b/public/js/print.js
@@ -0,0 +1,72 @@
+// 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 popen = '<p id="text">',
+ pclose = '</p>';
+
+//create event which is triggered when DOM is ready
+window.onDomReady = initReady;
+
+//change from testbild to default cam when DOM is ready
+window.onDomReady(initViewer);
+
+
+function initReady(fn) {
+ if(document.addEventListener) {
+ document.addEventListener("DOMContentLoaded", fn, false);
+ }
+}
+
+function initViewer() {
+
+ //load contents from localStorage
+ var display = document.getElementById("camImage"),
+ meta = document.getElementById("metaContainer"),
+ text = document.getElementById("textContainer"),
+ formName = localStorage.getItem("formName"),
+ formDate = localStorage.getItem("formDate"),
+ formAnalysis1 = localStorage.getItem("formAnalysis1"),
+ formAnalysis2 = localStorage.getItem("formAnalysis2"),
+ formAnalysis3 = localStorage.getItem("formAnalysis3"),
+ camera = localStorage.getItem("cam");
+ stor = localStorage.getItem("snapShot");
+
+ //cameraname is cameraID + 1
+ camera = parseInt(camera) + 1;
+
+ //display loaded data
+ if (stor) {
+ display.setAttribute("src", stor);
+ meta.innerHTML += popen + formName + pclose;
+ meta.innerHTML += popen + formDate + pclose;
+ meta.innerHTML += popen + 'Kamera ' + camera + pclose;
+ text.innerHTML += popen + formAnalysis1 + pclose;
+ text.innerHTML += popen + formAnalysis2 + pclose;
+ text.innerHTML += popen + formAnalysis3 + pclose;
+ }
+
+ //commented out for debugging and layouting purposes
+ print();
+
+ //reset localStorage to default values
+ //localStorage.setItem("formName", "Untersucher");
+ //localStorage.setItem("formDate", "Datum");
+ //localStorage.setItem("formAnalysis1", "Dein Bericht 1");
+ //localStorage.setItem("formAnalysis2", "Dein Bericht 2");
+ //localStorage.setItem("formAnalysis3", "Dein Bericht 3"):
+
+ //commented out for debugging and layouting purposes
+ window.close();
+
+}
+
diff --git a/public/print.html b/public/print.html
new file mode 100644
index 0000000..daaa37e
--- /dev/null
+++ b/public/print.html
@@ -0,0 +1,24 @@
+<html>
+
+<head>
+ <script src="js/print.js" type="text/javascript"></script>
+ <link rel="stylesheet" type="text/css" href="css/print.css">
+</head>
+
+<body>
+
+<div id="page">
+ <div id="imageContainer">
+ <img src="about:blank" id="camImage">
+ </div>
+ <div id="metaContainer">
+
+ </div>
+ <div id="textContainer">
+
+ </div>
+</div>
+
+
+</body>
+</html>
diff --git a/server.js b/server.js
index 81ef373..cdcee8d 100644
--- a/server.js
+++ b/server.js
@@ -11,16 +11,36 @@ var app = express();
var cameras = [
{
- baseurl: 'http://admin:123456@192.168.1.10',
- model: 'conceptronic'
+ baseurl: 'http://192.168.1.20:8080/cam/0',
+ model: 'mjpegplexer'
},
{
- baseurl: 'http://admin:123456@192.168.1.11',
- model: 'conceptronic'
+ baseurl: 'http://192.168.1.20:8080/cam/1',
+ model: 'mjpegplexer'
},
{
- baseurl: 'http://admin:123456@192.168.1.12',
- model: 'conceptronic'
+ baseurl: 'http://192.168.1.20:8080/cam/2',
+ model: 'mjpegplexer'
+ },
+ {
+ baseurl: 'http://192.168.1.20:8080/cam/3',
+ model: 'mjpegplexer'
+ },
+ {
+ baseurl: 'http://192.168.1.20:8080/cam/4',
+ model: 'mjpegplexer'
+ },
+ {
+ baseurl: 'http://192.168.1.20:8080/cam/5',
+ model: 'mjpegplexer'
+ },
+ {
+ baseurl: 'http://192.168.1.20:8080/cam/6',
+ model: 'mjpegplexer'
+ },
+ {
+ baseurl: 'http://192.168.1.20:8080/cam/7',
+ model: 'mjpegplexer'
}
];
@@ -97,6 +117,8 @@ for (var camera_idx in cameras) {
app.use('/cam/' + camera_idx + '/browse',
express.static(__dirname + '/cam_public'));
}
+ app.use('/interface',
+ express.static(__dirname + '/public'));
app.get('/blackout', function(req, res) {
for (var camera_idx in cameras) {