ChCh
/
mjpegplexer
mirror of http://git.sublab.org/mjpegplexer/
10
0
Fork 0
Code Issues Releases Wiki Activity

Make some changes to form

This commit is contained in:
Christian Franke 2014-03-19 14:39:23 +01:00 committed by untersuchung
parent f009bb45d3
commit 3f44b3f305
6 changed files with 95 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
public/cam.html
View File

@ -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&ouml;nliche Bemerkungen</p>
<textarea id="formAnalysis3"></textarea>
<p>
<a href="#" id='printButton' onclick='hideForm()'>&nbsp</a>
<div id="controlBox">
<img src="about:blank" id="formImage"><br>
<span id="errorBox">&nbsp;</span><br>
<a href="#" id='printButton'>&nbsp;</a>
</div>
<p>Personalkennzeichnung:&nbsp;<input id="formName"> &nbsp;&nbsp;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&ouml;nliche Bemerkungen:<br>
<textarea id="formAnalysis3"></textarea></p>
</div>
</body>

24
public/css/cam.css
View File

@ -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 {

24
public/css/print.css
View File

@ -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;
}

72
public/js/cctv-control.js
View File

@ -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 = '&nbsp;';
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);
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();
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('printButton').blur();
window.open('print.html', 'Printlayout');
document.getElementById("form").style.visibility = 'hidden';
formActive = 0;
localStorage.setItem("formActive", formActive);
changeCam();
return false;
}

72
public/js/print.js
View File

@ -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();
}

24
public/print.html
View File

@ -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>