display no of active camera as overlay

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;
 	}