mirror of http://git.sublab.org/mjpegplexer/
Make some changes to form
This commit is contained in:
parent
f009bb45d3
commit
3f44b3f305
|
@ -10,22 +10,19 @@
|
||||||
<img src="img/testbild.gif" id="camImage">
|
<img src="img/testbild.gif" id="camImage">
|
||||||
</div>
|
</div>
|
||||||
<div id="form">
|
<div id="form">
|
||||||
<img src="about:blank" id="formImage">
|
<div id="controlBox">
|
||||||
<p>
|
<img src="about:blank" id="formImage"><br>
|
||||||
</p>
|
<span id="errorBox"> </span><br>
|
||||||
<p>Personalkennzeichnung</p>
|
<a href="#" id='printButton'> </a>
|
||||||
<input id="formName"><br>
|
</div>
|
||||||
<p>Zeitpunkt</p>
|
<p>Personalkennzeichnung: <input id="formName"> Zeitpunkt:<input id="formDate" readonly>
|
||||||
<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>
|
|
||||||
</p>
|
</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>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -45,9 +45,9 @@ body {
|
||||||
|
|
||||||
#form {
|
#form {
|
||||||
/*visibility: hidden;*/
|
/*visibility: hidden;*/
|
||||||
width: 800px;
|
width: 1000px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: rgba(127, 192, 255, 0.9);
|
background-color: rgba(170, 170, 170, 0.9);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
|
@ -57,13 +57,31 @@ body {
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
}
|
}
|
||||||
|
|
||||||
#formImage {
|
#controlBox {
|
||||||
margin-right: 0px;
|
margin-right: 0px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
float: right;
|
float: right;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 400px;
|
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 {
|
#printButton {
|
||||||
|
|
|
@ -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;
|
|
||||||
|
|
||||||
}
|
|
|
@ -14,6 +14,7 @@
|
||||||
var cam = 0;
|
var cam = 0;
|
||||||
var camHost = "192.168.1.20:8080";
|
var camHost = "192.168.1.20:8080";
|
||||||
var controlHost = "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...
|
var formActive = 0; //crazy errors if boolean is used here...
|
||||||
|
|
||||||
//create event which is triggered when DOM is ready
|
//create event which is triggered when DOM is ready
|
||||||
|
@ -161,28 +162,79 @@ function showForm() {
|
||||||
|
|
||||||
//make form visible
|
//make form visible
|
||||||
document.getElementById("form").style.visibility = 'visible';
|
document.getElementById("form").style.visibility = 'visible';
|
||||||
|
document.getElementById("printButton").onclick = completeForm;
|
||||||
formActive = 1;
|
formActive = 1;
|
||||||
localStorage.setItem("formActive", formActive);
|
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() {
|
|
||||||
|
function completeForm() {
|
||||||
//save form data in local storage for later use
|
var formName = document.getElementById('formName');
|
||||||
localStorage.setItem("formName", document.getElementById('formName').value);
|
var formDate = document.getElementById('formDate');
|
||||||
localStorage.setItem("formDate", document.getElementById('formDate').value);
|
var formAnalysis1 = document.getElementById('formAnalysis1');
|
||||||
localStorage.setItem("formAnalysis1", document.getElementById('formAnalysis1').value);
|
var formAnalysis2 = document.getElementById('formAnalysis2');
|
||||||
localStorage.setItem("formAnalysis2", document.getElementById('formAnalysis2').value);
|
var formAnalysis3 = document.getElementById('formAnalysis3');
|
||||||
localStorage.setItem("formAnalysis3", document.getElementById('formAnalysis3').value);
|
|
||||||
|
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
|
//hide form and unfocus button
|
||||||
//otherwise next enter press will trigger print-function
|
//otherwise next enter press will trigger print-function
|
||||||
document.getElementById('printButton').blur();
|
|
||||||
window.open('print.html', 'Printlayout');
|
|
||||||
document.getElementById("form").style.visibility = 'hidden';
|
document.getElementById("form").style.visibility = 'hidden';
|
||||||
formActive = 0;
|
formActive = 0;
|
||||||
localStorage.setItem("formActive", formActive);
|
localStorage.setItem("formActive", formActive);
|
||||||
changeCam();
|
changeCam();
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
|
@ -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>
|
|
Loading…
Reference in New Issue