summaryrefslogtreecommitdiff
path: root/public/js
diff options
context:
space:
mode:
Diffstat (limited to 'public/js')
-rw-r--r--public/js/cctv-control.js244
-rw-r--r--public/js/print.js72
2 files changed, 316 insertions, 0 deletions
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();
+
+}
+
generated by cgit v1.2.1 (git 2.18.0) at 2024-11-22 12:39:09 +0000