From c35a1c1abb596b919edf42b274d94c7831b93b13 Mon Sep 17 00:00:00 2001 From: Florian Date: Sun, 2 Mar 2014 14:22:10 +0300 Subject: added webinterface --- public/js/cctv-control.js | 244 ++++++++++++++++++++++++++++++++++++++++++++++ public/js/print.js | 72 ++++++++++++++ 2 files changed, 316 insertions(+) create mode 100644 public/js/cctv-control.js create mode 100644 public/js/print.js (limited to 'public/js') 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 += ''; + showForm(); + } + else { + formActive == 0; + document.getElementById('form').style.visibility = "hidden"; + changeCam(); + } +} + +function displayCamNumber() { + var display = document.getElementById('screen'); + camDisplay = cam + 1; + display.innerHTML = '

' + camDisplay + '

'; +} + +//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 += ''; + localStorage.setItem("cam", cam); + } + else { + display.innerHTML = ''; + } +} + +//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 = '

', + pclose = '

'; + +//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(); + +} + -- cgit v1.2.1