adding pointer feature

diff --git a/presenter/getPic.pl b/presenter/getPic.pl
index bf1d77b9c68fb34cf1ea6f186536c3c813bf639a..aa204ab307625f7a12d15d8387d3bd1013329808 100755 (executable)
--- a/presenter/getPic.pl
+++ b/presenter/getPic.pl
@@ -23,6 +23,6 @@ do {
   $f = $data[0];
   chomp($f);
   sleep(1) if($f eq $old);
-  }while($timer++ < 30 && $f eq $old);
+  }while($timer++ < 60 && $f eq $old);
 
 print $f;
\ No newline at end of file

diff --git a/presenter/scripts.js b/presenter/scripts.js
index 938548a1b346ef11519a75d84c4b2ea457f0fa93..42001c3a1eb2aaa31c07cff673c2f0a3494f9dad 100644 (file)
--- a/presenter/scripts.js
+++ b/presenter/scripts.js
@@ -1,5 +1,6 @@
 
 var currentPic = ' ';
+var currentRoom = ' ';
 
 function getData(command,dId,callback) {
   
@@ -27,27 +28,42 @@ function getData(command,dId,callback) {
 
 
 function updatefiles() {
-  room = document.getElementById("showroom").getAttribute("room");
-  getData("getfiles.pl?room="+room,"files");
-}
+  getData("getfiles.pl?room="+currentRoom,"files");
+  }
 
 function present(f) {
   if(f != "") {
-    getData("showPic.pl?img="+f+"&room="+document.getElementById("showroom").getAttribute("room"));
+    getData("showPic.pl?img="+f+"&room="+currentRoom+'&posx=-1&posy=-1');
     }
   else {
     alert("Select a file to show!");
     }
-}
+  }
+
+function pointer(e) {
+  var t = document.getElementById("screen");
+//   alert(t.offsetLeft);
+  var x = Math.round((e.pageX - t.offsetLeft)/t.offsetWidth*100);
+  var y = Math.round((e.pageY - t.offsetTop)/t.offsetHeight*100);  
+  var i = currentPic.split(",");
+  getData("showPic.pl?img="+i[0]+"&room="+currentRoom+'&posx='+x+'&posy='+y);
+  }
 
 function updatepresentation(t) {
-  room = document.getElementById("showroom").getAttribute("room");
+  currentRoom = document.getElementById("showroom").getAttribute("room");
   t = t.trim();
   if(currentPic != t) {
+    var s = document.getElementById("screen");
     currentPic = t;
-    document.getElementById("content").innerHTML = '<img src="store/'+room+'/'+t+'">';
+    var i = t.split(",");
+    if(s) {
+      x = i[1]*s.offsetWidth/100-30 + s.offsetLeft;
+      y = i[2]*s.offsetHeight/100-10 + s.offsetTop;
+      }
+    else { x=0;y=0; }  
+    document.getElementById("content").innerHTML = '<img id="screen" onClick="pointer(event);" src="store/'+currentRoom+'/'+i[0]+'"><div id="pointer" style="left:'+x+'px;top:'+y+'px;">&nbsp;</div>';
     }
-  setTimeout('getData("getPic.pl?old='+t+'&room='+room+'",null,updatepresentation)',1000);  
+  setTimeout('getData("getPic.pl?old='+t+'&room='+currentRoom+'",null,updatepresentation)',1000);  
   }
 
 

diff --git a/presenter/showPic.pl b/presenter/showPic.pl
index 87d0fbd683b3230189698fc4817b89c392927f3d..0066cb5dac0770335a01459bdef52409707264d7 100755 (executable)
--- a/presenter/showPic.pl
+++ b/presenter/showPic.pl
@@ -19,6 +19,13 @@ if($t =~ /[\"\$\(\)\/]/ || !(-e "store/$room/$t")) {
   return 1;
 }
 
+my $tmp = $cgi->param("posx").','.$cgi->param("posy");
+if(!($tmp =~ /^-?[0-9]+,-?[0-9]+$/)) {
+  print "Invalid Position";
+  return 1;
+  }
+$t .= ','.$tmp;
+
 system("echo $t>store/$room/currentstate");
 
 1;
\ No newline at end of file

diff --git a/presenter/style.css b/presenter/style.css
index 9d42381494434c722433e170469f5b9f40aa69b9..687b6cbabd26e614125405be089612deda5c195f 100644 (file)
--- a/presenter/style.css
+++ b/presenter/style.css
@@ -54,18 +54,42 @@ h1 {
   width:100%;
   position:absolute;
   padding-right:100px;
+  text-align:center;
   }
 
+#content div {
+  display:inline-block;
+  }
+  
 #content img {
   height:100%;
+/*   width:100%; */
+  max-height:100%;  
   max-width:100%;
   object-fit:contain;
-  margin:0;
+  margin:auto;
   padding:0;
   }
   
 #roomlist {
   width:200px;
 }
-  
-  
+
+
+@keyframes pointerani {
+/*    0%   {margin:5px 0 0 0px;}
+    100% {margin:0px 0 0 5px;}*/
+  0% {width:25px;height:25px;margin:0;}
+  100% {width:20px;height:20px;margin:2.5px 0 0 2.5px;}
+}
+
+#pointer {
+  width:20px;
+  height:20px;
+  background:transparent;
+  border:5px solid red;
+  opacity:0.7;
+  border-radius:15px;
+  position:absolute;
+  animation: pointerani 1s infinite alternate;
+  }