diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/cam.html | 27 | ||||
| -rw-r--r-- | public/css/cam.css | 24 | ||||
| -rw-r--r-- | public/css/print.css | 24 | ||||
| -rw-r--r-- | public/js/cctv-control.js | 72 | ||||
| -rw-r--r-- | public/js/print.js | 72 | ||||
| -rw-r--r-- | public/print.html | 24 |
6 files changed, 95 insertions, 148 deletions
diff --git a/public/cam.html b/public/cam.html index 3196c52..3c78ff2 100644 --- a/public/cam.html +++ b/public/cam.html @@ -10,22 +10,19 @@ <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önliche Bemerkungen</p> - <textarea id="formAnalysis3"></textarea> - <p> - <a href="#" id='printButton' onclick='hideForm()'> </a> + <div id="controlBox"> + <img src="about:blank" id="formImage"><br> + <span id="errorBox"> </span><br> + <a href="#" id='printButton'> </a> + </div> + <p>Personalkennzeichnung: <input id="formName"> Zeitpunkt:<input id="formDate" readonly> </p> + <p>Analyse der Aufnahme:<br> + <textarea id="formAnalysis1"></textarea><br> + Bemerkungen zum Untersuchungsverlauf:<br> + <textarea id="formAnalysis2"></textarea><br> + Persönliche Bemerkungen:<br> + <textarea id="formAnalysis3"></textarea></p> </div> </body> diff --git a/public/css/cam.css b/public/css/cam.css index d1d28f4..1302288 100644 --- a/public/css/cam.css +++ b/public/css/cam.css @@ -45,9 +45,9 @@ body { #form { /*visibility: hidden;*/ - width: 800px; + width: 1000px; height: 100%; - background-color: rgba(127, 192, 255, 0.9); + background-color: rgba(170, 170, 170, 0.9); margin: 0 auto; position: relative; top: 0px; @@ -57,13 +57,31 @@ body { z-index: 200; } -#formImage { +#controlBox { margin-right: 0px; margin-left: auto; float: right; position: relative; width: 400px; + padding: 0px; +} + +#formImage { + width: 400px; +} + +#formDate { + background-color: #ccc; +} + +#formAnalysis1, #formAnalysis2, #formAnalysis3 { + width: 550px; + height: 150px; +} +#errorBox { + margin: 10px auto; + font-size: 1.1em; } #printButton { diff --git a/public/css/print.css b/public/css/print.css deleted file mode 100644 index e71a0ae..0000000 --- a/public/css/print.css +++ /dev/null @@ -1,24 +0,0 @@ -#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/js/cctv-control.js b/public/js/cctv-control.js index 6db2932..ddbdbb4 100644 --- a/public/js/cctv-control.js +++ b/public/js/cctv-control.js @@ -14,6 +14,7 @@ var cam = 0; var camHost = "192.168.1.20:8080"; var controlHost = "192.168.1.20:8080"; +var submitHost = "192.168.1.20:8080"; var formActive = 0; //crazy errors if boolean is used here... //create event which is triggered when DOM is ready @@ -161,28 +162,79 @@ function showForm() { //make form visible document.getElementById("form").style.visibility = 'visible'; + document.getElementById("printButton").onclick = completeForm; formActive = 1; localStorage.setItem("formActive", formActive); } +var errorTimeout = null; +function setError(message) { + var error_box = document.getElementById('errorBox'); + error_box.innerText = message; + if (errorTimeout !== null) + window.clearTimeout(errorTimeout); + errorTimeout = window.setTimeout(function() { + error_box.innerHTML = ' '; + errorTimeout = null; + }, 5000); + return false; +} -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 +function completeForm() { + var formName = document.getElementById('formName'); + var formDate = document.getElementById('formDate'); + var formAnalysis1 = document.getElementById('formAnalysis1'); + var formAnalysis2 = document.getElementById('formAnalysis2'); + var formAnalysis3 = document.getElementById('formAnalysis3'); + + if (formName.value.length < 3) + return setError("Personalkennzeichung unzureichend!"); + if (formAnalysis1.value.length < 3) + return setError("Analyse der Aufnahme unzureichend!"); + if (formAnalysis2.value.length < 3) + return setError("Bemerkungen zum Untersuchungsverlauf unzureichend!"); +/* if (formAnalysis3.value.length < 3) + return setError("Analyse der Aufnahme unzureichend!");*/ + + // unfocus and disable button //otherwise next enter press will trigger print-function document.getElementById('printButton').blur(); - window.open('print.html', 'Printlayout'); + document.getElementById('printButton').onclick = function() { + return false; + }; + + var request = new XMLHttpRequest(); + request.open("post", "http://" + submitHost + "/submit", false); + + var post_object = { + 'formName': formName.value, + 'formDate': formDate.value, + 'formAnalysis1': formAnalysis1.value, + 'formAnalysis2': formAnalysis2.value, + 'formAnalysis3': formAnalysis3.value, + 'formImage': localStorage.getItem("snapShot") + }; + + var post_data = JSON.stringify(post_object); + request.setRequestHeader('Content-Type', 'application/json'); + request.send(post_data); + + // clear the input fields so they are not + // visible during next usage of the form. + // XXX: Leave the name in? + document.getElementById('formName').value = ''; + document.getElementById('formAnalysis1').value = ''; + document.getElementById('formAnalysis2').value = ''; + document.getElementById('formAnalysis3').value = ''; + + //hide form and unfocus button + //otherwise next enter press will trigger print-function document.getElementById("form").style.visibility = 'hidden'; formActive = 0; localStorage.setItem("formActive", formActive); changeCam(); + return false; } diff --git a/public/js/print.js b/public/js/print.js deleted file mode 100644 index 7375047..0000000 --- a/public/js/print.js +++ /dev/null @@ -1,72 +0,0 @@ -// 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 deleted file mode 100644 index daaa37e..0000000 --- a/public/print.html +++ /dev/null @@ -1,24 +0,0 @@ -<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> |