diff options
| -rw-r--r-- | css/cam.css | 27 | ||||
| -rw-r--r-- | js/cctv-control.js | 10 |
2 files changed, 32 insertions, 5 deletions
diff --git a/css/cam.css b/css/cam.css index 2155efa..3300965 100644 --- a/css/cam.css +++ b/css/cam.css @@ -1,4 +1,25 @@ -img.fullscreen { +body { + background-color: #000; +} + +.camnumber { + position: absolute; + + left: 20px; + top: -100px; + + background: rgba(0,0,0,0.4); + + color: rgba(255, 255, 255, 0.7); + font-weight: bold; + font-family: Helvetica, Verdana, Arial, sans-serif; + font-size: 120px; + line-height: 120px; + + z-index: 100; + } + +img { min-height: 100%; min-width: 1024px; @@ -8,5 +29,9 @@ img.fullscreen { position: fixed; top: 0; left: 0; + + margin: 0; + padding: 0; + z-index: 50; } diff --git a/js/cctv-control.js b/js/cctv-control.js index da49ca2..c79346d 100644 --- a/js/cctv-control.js +++ b/js/cctv-control.js @@ -13,8 +13,8 @@ var cam = 0; -var camHost = "172.22.80.56:8080"; -var controlHost = "172.22.80.56:8080"; +var camHost = "127.0.0.1:8080"; +var controlHost = "127.0.0.1:8080"; //create event which is triggered when DOM is ready window.onDomReady = initReady; @@ -32,7 +32,9 @@ function initReady(fn) { function changeCam() { var display = document.getElementById('screen'); if (cam <= 7 && cam >= 0) { - display.innerHTML = '<img src="http://' + camHost + '/cam/' + cam + '/stream.mjpeg" />'; + camDisplay = cam + 1; + display.innerHTML = '<p class="camnumber">' + camDisplay + '</p>'; + display.innerHTML += '<img src="http://' + camHost + '/cam/' + cam + '/stream.mjpeg" />'; } else { display.innerHTML = '<img src="img/testbild.png" />'; @@ -43,7 +45,7 @@ function changeCam() { function controlCam(direction) { if (direction == "left" || direction == "right" || direction == "up" || direction == "down") { var request = new XMLHttpRequest(); - request.open("get", "http://" + controlHost + "/cam/" + cam + "/control/" + direction + "left", false); + request.open("get", "http://" + controlHost + "/cam/" + cam + "/control/" + direction, false); request.send(); return false; } |