form is displayed as overlay

6 files changed, 101 insertions, 74 deletions

diff --git a/cam.html b/cam.html
index 507835f..ad5bcd1 100644
--- a/cam.html
+++ b/cam.html
@@ -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>
diff --git a/css/cam.css b/css/cam.css
index 3300965..51744e9 100644
--- a/css/cam.css
+++ b/css/cam.css
@@ -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');
+
+}
+
diff --git a/js/cctv-control.js b/js/cctv-control.js
index c0c7bbd..c0318a0 100644
--- a/js/cctv-control.js
+++ b/js/cctv-control.js
@@ -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;
 	}	
 }
diff --git a/js/cctv-control.js.bak b/js/cctv-control.js.bak
deleted file mode 100644
index 7a12dce..0000000
--- a/js/cctv-control.js.bak
+++ /dev/null
@@ -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;
-	
-	}
-
-}
diff --git a/js/load-local-storage.js b/js/load-local-storage.js
index b3c26e8..7306a58 100644
--- a/js/load-local-storage.js
+++ b/js/load-local-storage.js
@@ -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);
 	}
 	
 
diff --git a/test.html b/test.html
deleted file mode 100644
index 0e19695..0000000
--- a/test.html
+++ /dev/null
@@ -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>