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

form is displayed as overlay

This commit is contained in:
Florian 2014-02-14 19:18:18 +01:00
parent 92e9f920d4
commit af99780ea6
6 changed files with 101 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
cam.html
View File

@ -9,5 +9,30 @@
<div id="screen">
<img src="img/testbild.gif" id="camImage">
</div>
<div id="form">
<img src="about:blank" id="formImage">
<p>
</p>
<p>Personalkennzeichnung</p>
<input id="name"><br>
<p>Zeitpunkt</p>
<input id="date"><br>
<p>Analyse der Aufnahme</p>
<textarea id="analysis">
</textarea>
<p>Bemerkungen zum Untersuchungsverlauf</p>
<textarea id="invAnnotations">
</textarea>
<p>Pers&ouml;nliche Bemerkungen</p>
<textarea id="persAnnotations">
</textarea>
<p>
<a href="#" id='printButton'>&nbsp</a>
</p>
</div>
</body>
</html>

53
css/cam.css
View File

@ -1,14 +1,19 @@
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: #000;
}
.camnumber {
position: absolute;
.camNumber {
position: fixed;
left: 20px;
top: -100px;
background: rgba(0,0,0,0.4);
background: rgba(0,0,0,0.6);
width: 100px;
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-weight: bold;
@ -19,7 +24,7 @@ body {
z-index: 100;
}
img {
#camImage {
min-height: 100%;
min-width: 1024px;
@ -35,3 +40,43 @@ img {
z-index: 50;
}
#form {
/*visibility: hidden;*/
width: 800px;
height: 100%;
background-color: rgba(127, 192, 255, 0.9);
margin: 0 auto;
position: relative;
border: 3px;
border-color: #777;
top: 15px;
padding: 40px;
z-index: 200;
}
#formImage {
margin-right: 0px;
margin-left: auto;
float: right;
position: relative;
width: 400px;
}
#printButton {
width: 200px;
height: 100px;
display: block;
margin: 10px auto;
background-image: url('../img/print_button.png');
text-decoration: none;
}
#printButton:hover {
background-image: url('../img/print_button_highlight.png');
}

25
js/cctv-control.js
View File

@ -30,10 +30,13 @@ function initReady(fn) {
//change currently displayed camera to the one in cam variable
function changeCam() {
document.getElementById('form').style.visibility = "hidden";
var display = document.getElementById('screen');
if (cam <= 7 && cam >= 0) {
camDisplay = cam + 1;
display.innerHTML = '<p class="camnumber">' + camDisplay + '</p>';
display.innerHTML = '<p class="camNumber">' + camDisplay + '</p>';
display.innerHTML += '<img id="camImage" src="http://' + camHost + '/cam/' + cam + '/stream.mjpeg" />';
}
else {
@ -86,12 +89,31 @@ function saveImage() {
};
fileReader.readAsDataURL(blob);
showImage();
}
}, false);
xhr.send();
}
function showImage() {
//load snapshot from localstorage an display in background
var display1 = document.getElementById("camImage"),
display2 = document.getElementById("formImage"),
stor = localStorage.getItem("snapShot");
if (stor) {
display1.setAttribute("src", stor);
display2.setAttribute("src", stor);
}
//make form visible
document.getElementById("form").style.visibility = 'visible';
}
function keyDown(event) {
switch(event.keyCode) {
@ -141,7 +163,6 @@ function keyDown(event) {
break;
case 13: //enter
saveImage();
window.location = "http://127.0.0.1/form.html";
break;
}
}

55
js/cctv-control.js.bak
View File

@ -1,55 +0,0 @@
var cam;
function keyDown(event) {
if (event.keyCode == 49) {
var display = document.getElementById('screen');
cam = 0;
display.innerHTML = '<img src="http://172.22.80.56:8080/cam/0/stream.mjpeg" />'
}
if (event.keyCode == 50) {
var display = document.getElementById('screen');
cam = 1;
display.innerHTML = '<img src="http://172.22.80.56:8080/cam/1/stream.mjpeg" />'
}
if (event.keyCode == 51) {
var display = document.getElementById('screen');
cam = 2;
display.innerHTML = '<img src="http://172.22.80.56:8080/cam/2/stream.mjpeg" />'
}
if (event.keyCode == 52) {
var display = document.getElementById('screen');
display.innerHTML = '<img src="testbild-4.png" />'
}
if (event.keyCode == 37) {
var request = new XMLHttpRequest();
request.open("get", "http://172.22.80.56:8080/cam/" + cam + "/control/left", false);
request.send();
return false;
}
if (event.keyCode == 38) {
var request = new XMLHttpRequest();
request.open("get", "http://172.22.80.56:8080/cam/" + cam +"/control/up", false);
request.send();
return false;
}
if (event.keyCode == 39) {
var request = new XMLHttpRequest();
request.open("get", "http://172.22.80.56:8080/cam/" + cam +"/control/right", false);
request.send();
return false;
}
if (event.keyCode == 40) {
var request = new XMLHttpRequest();
request.open("get", "http://172.22.80.56:8080/cam/" + cam +"/control/down", false);
request.send();
return false;
}
}

5
js/load-local-storage.js
View File

@ -28,10 +28,13 @@ function initReady(fn) {
function loadImg() {
var display = document.getElementById("storImage"),
stor = localStorage.getItem("snapShot")
body = document.getElementById("formBackground"),
stor = localStorage.getItem("snapShot");
if (stor) {
display.setAttribute("src", stor);
document.body.style.background="#f3f3f3 url('"+ stor + "') no-repeat";
display.setAttribute("src", stor);
}

12
test.html
View File

@ -1,12 +0,0 @@
<!DOCTYPE HTML>
<html lang=en>
<head>
<meta charset="utf-8">
<script src="js/load-local-storage.js" type="text/javascript"></script>
</head>
<body>
<div id="screen">
<img src="about:blank" id="storImage">
</div>
</body>
</html>