summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--cam.html25
-rw-r--r--css/cam.css53
-rw-r--r--js/cctv-control.js25
-rw-r--r--js/cctv-control.js.bak55
-rw-r--r--js/load-local-storage.js5
-rw-r--r--test.html12
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>
generated by cgit v1.2.1 (git 2.18.0) at 2024-11-21 18:42:00 +0000