add remote inject input ui changes

components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/public/js/remote-session.js

@@ -15,28 +15,28 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
 var rs_websocket;
 var rs_WebSocketURL;
 var shellMessageField = document.getElementById('shell-command');
 var shellResponseField = document.getElementById('shell-response');
-
+var canRemotelyControl = true;
-WebSocket.prototype.set_opened = function () {
+WebSocket.prototype.set_opened = function() {
     this._opened = true;
 };
 
-WebSocket.prototype.set_closed = function () {
+WebSocket.prototype.set_closed = function() {
     this._opened = false;
 };
-WebSocket.prototype.get_opened = function () {
+WebSocket.prototype.get_opened = function() {
     return this._opened || false;
 };
 
-var remoteSessionWebSocketOnOpen = function () {
+var remoteSessionWebSocketOnOpen = function() {
     rs_websocket.set_opened();
 };
 
-var remoteSessionWebSocketOnMessage = function (message) {
+var remoteSessionWebSocketOnMessage = function(message) {
+
     $('#lbl-remote-session-status').text('Server Connected...');
     $('#remote-session-operations').removeClass('hidden');
     $('#loading-remote-session').addClass('hidden');
@@ -50,7 +50,7 @@ var remoteSessionWebSocketOnMessage = function (message) {
         img.onload = function() {
             var ctx = document.getElementById("canvas").getContext('2d');
             ctx.canvas.height = this.height;
-        ctx.canvas.width =this.width;
+            ctx.canvas.width = this.width;
             ctx.drawImage(this, 0, 0);
             URL.revokeObjectURL(url);
         }
@@ -59,58 +59,44 @@ var remoteSessionWebSocketOnMessage = function (message) {
 
         var json = $.parseJSON(message.data);
         if (json.code == "REMOTE_SHELL") {
-	if(json.status != "NEW"){
+            if (json.status != "NEW") {
                 $('#loading-terminal').addClass('hidden');
             }
-	if(json.operationResponse != null ){
+            if (json.operationResponse != null) {
                 var shellResponse = $("#shell-response");
                 shellResponse.val(shellResponse.val() + json.operationResponse);
             }
 
         } else if (json.code == "REMOTE_LOGCAT") {
 
-	if(json.status != "NEW"){
+            if (json.status != "NEW") {
                 $('#btn-refresh-logCat').removeClass('hidden');
                 $('#loading-logcat').addClass('hidden');
             }
-	if(json.operationResponse != null ){
+            if (json.operationResponse != null) {
                 var logcatResponse = $("#logcat-response");
 
                 logcatResponse.val(logcatResponse.val() + json.operationResponse);
             }
         } else if (json.code == "REMOTE_CONNECT") {
             $('#loading-terminal').addClass('hidden');
-	if(json.operationResponse != null ){
+            if (json.operationResponse != null) {
                 var shellResponse = $("#shell-response");
                 shellResponse.val(json.operationResponse);
             }
+        } else if (json.code == "REMOTE_INPUT") {
+            canRemotelyControl = false;
         } else {
-    console.log("Message type not supported.");
+            console.log("Message type not supported." + JSON.stringify(json));
         }
     }
 };
 
-var remoteSessionWebSocketOnClose = function (e) {
+var remoteSessionWebSocketOnClose = function(e) {
-    $('#btn-connect-device').removeClass('hidden');
-    $('#remote-session-operations').addClass('hidden');
-    $('#btn-close-remote-session').addClass('hidden');
-    $('#loading-screen').addClass('hidden');
-    $('#btn-stop-screen').addClass('hidden');
-    $('#btn-start-screen').removeClass('hidden');
-    if (rs_websocket.get_opened()) {
-        noty({text: 'Connection lost with Remote Session server!!', type: 'error'});
-    }
     location.reload();
-
 };
 
-var remoteSessionWebSocketOnError = function (err) {
+var remoteSessionWebSocketOnError = function(err) {
-    //if (!rs_websocket.get_opened()) return;
-    $('#btn-connect-device').removeClass('hidden');
-    $('#remote-session-operations').addClass('hidden');
-    $('#btn-close-remote-session').addClass('hidden');
-    noty({text: 'Something went wrong when trying to connect to <b>' + rs_WebSocketURL + '<b/>', type: 'error'});
-    rs_websocket.close();
     location.reload();
 };
 
@@ -127,13 +113,16 @@ $("#btn-close-remote-session").click(function() {
     // Close the WebSocket.
     rs_websocket.close();
     rs_websocket.set_closed();
+    var canvas = document.getElementById("canvas");
+    var ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
     $('#btn-connect-device').removeClass('hidden');
     $('#remote-session-operations').addClass('hidden');
     $('#btn-close-remote-session').addClass('hidden');
     $('#loading-screen').addClass('hidden');
     $('#btn-stop-screen').addClass('hidden');
     $('#btn-start-screen').removeClass('hidden');
-    location.reload();
+    //location.reload();
 });
 
 $("#btn-refresh-logCat").click(function() {
@@ -141,13 +130,13 @@ $("#btn-refresh-logCat").click(function() {
     $('#loading-logcat').removeClass('hidden');
     $('#btn-refresh-logCat').addClass('hidden');
     var message = new Object();
-   message.code ="REMOTE_LOGCAT";
+    message.code = "REMOTE_LOGCAT";
 
     // Send the message through the WebSocket.
     rs_websocket.send(JSON.stringify(message));
 
     // Clear out the message field.
-  $("#logcat-response").val("") ;
+    $("#logcat-response").val("");
 
 });
 
@@ -165,25 +154,28 @@ function initializeRemoteSessionWebSocket() {
 function initializeRemoteSession() {
 
     rs_WebSocketURL = $("#remote-session").data("remote-session-uri");
-    if(rs_WebSocketURL != null) {
+    if (rs_WebSocketURL != null) {
         initializeRemoteSessionWebSocket();
-        window.onbeforeunload = function () {
+        window.onbeforeunload = function() {
             rs_websocket.close();
         }
         $('#lbl-remote-session-status').text('Waiting on device to connect...');
 
     } else {
-        noty({text: 'Remote Session endpoint connection Failed!', type: 'error'});
+        noty({
+            text: 'Remote Session endpoint connection Failed!',
+            type: 'error'
+        });
         $('#btn-connect-device').removeClass('hidden');
         $('#loading-remote-session').addClass('hidden');
     }
 }
 
 
-$("#shell-command").keyup(function(event){
+$("#shell-command").keyup(function(event) {
-    if(event.keyCode == 13){
+    if (event.keyCode == 13) {
         var message = new Object();
-   	message.code ="REMOTE_SHELL";
+        message.code = "REMOTE_SHELL";
         message.payload = $("#shell-command").val();
 
 
@@ -191,8 +183,8 @@ $("#shell-command").keyup(function(event){
         rs_websocket.send(JSON.stringify(message));
 
         // Clear out the message field.
-    	$("#shell-command").val("") ;
+        $("#shell-command").val("");
-    	$("#shell-response").val("") ;
+        $("#shell-response").val("");
         $('#loading-terminal').removeClass('hidden');
     }
 });
@@ -200,14 +192,18 @@ $("#shell-command").keyup(function(event){
 
 $("#btn-start-screen").click(function() {
 
-
+    canRemotelyControl = true;
     $('#loading-screen').removeClass('hidden');
     $('#btn-start-screen').addClass('hidden');
     $('#remote-control-pannel').removeClass('hidden');
     $('#btn-stop-screen').removeClass('hidden');
     var message = new Object();
-   message.code ="REMOTE_SCREEN";
+    var input = new Object();
-   message.payload  =  "start";
+    input.action = "start";
+    input.height = 768;
+    input.width = 1024;
+    message.code = "REMOTE_SCREEN";
+    message.payload = JSON.stringify(input);
     // Send the message through the WebSocket.
     rs_websocket.send(JSON.stringify(message));
 });
@@ -215,6 +211,7 @@ $("#btn-start-screen").click(function() {
 
 $("#btn-stop-screen").click(function() {
 
+    canRemotelyControl = false;
     var canvas = document.getElementById("canvas");
     var ctx = canvas.getContext('2d');
     ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -222,40 +219,80 @@ $("#btn-stop-screen").click(function() {
     $('#remote-control-pannel').addClass('hidden');
     $('#btn-stop-screen').addClass('hidden');
     $('#btn-start-screen').removeClass('hidden');
-	context.clearRect(0, 0, canvas.width, canvas.height);
     var message = new Object();
-   message.code ="REMOTE_SCREEN";
+    var input = new Object();
-   message.payload  =  "stop";
+    input.action = "stop";
+    message.code = "REMOTE_SCREEN";
+    message.payload = JSON.stringify(input);
     // Send the message through the WebSocket.
     rs_websocket.send(JSON.stringify(message));
 });
 
 
 $(function() {
+    var lastDuration = 0;
+    var minDuration = 50;
+    var durationDiff = 0;
+    var status = "ready";
+    var bounds, x, y;
     //Enable swiping...
     $("#canvas").swipe({
-        //Generic swipe handler for all directions
+        swipeStatus: function(event, phase, direction, distance, duration, fingers, fingerData, currentDirection) {
-        swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
+
-             switch (direction) {
+            if (canRemotelyControl) {
-                case "right":
+                bounds = event.target.getBoundingClientRect();
-                    $("#canvas")[0].getContext('2d').fillText("You swiped x:" + event.pageX + " y: " + event.pageY + " RIGHT", 10, 90)
+                x = event.clientX - bounds.left;
-                    break;
+                y = event.clientY - bounds.top;
-                case "left":
+                durationDiff = duration - lastDuration;
-                    $("#canvas")[0].getContext('2d').fillText("You swiped x:" + event.pageX + " y: " + event.pageY + " LEFT", 10, 90)
+                if (x < 0 || y < 0 || status == "blocked") {
-                    break;
+                    return;
-                case "up":
+                }
-                    $("#canvas")[0].getContext('2d').fillText("You swiped x:" + event.pageX + " y: " + event.pageY + " UP", 10, 90)
+                var inputMessage = new Object();
-                    break;
+                var input = new Object();
-                case "down":
+                input.x = x / bounds.width;
-                    $("#canvas")[0].getContext('2d').fillText("You swiped x:" + event.pageX + " y: " + event.pageY + " DOWN", 10, 90)
+                input.y = y / bounds.height;
-                    break;
+                input.duration = durationDiff;
-                default:
+                inputMessage.code = "REMOTE_INPUT";
-                    $("#canvas")[0].getContext('2d').fillText("You swiped x:" + event.pageX + " y: " + event.pageY, 10, 90)
+
-                    break;
+                if (status == "ready" && phase == "start") {
+                    input.action = "down";
+                    inputMessage.payload = JSON.stringify(input);
+                    rs_websocket.send(JSON.stringify(inputMessage));
+                    status = "unblocked";
+                } else if (status == "unblocked") {
+                    if (phase == "move") {
+                        if (durationDiff < minDuration) {
+                            return;
+                        } else {
+                            input.action = "move";
+                            inputMessage.payload = JSON.stringify(input);
+                            rs_websocket.send(JSON.stringify(inputMessage));
+                            lastDuration = duration;
+                        }
+                    } else {
+                        input.action = "up";
+                        lastDuration = 0;
+                        status = "blocked";
+                        if (durationDiff < minDuration) {
+                            setTimeout(function() {
+                                inputMessage.payload = JSON.stringify(input);
+                                rs_websocket.send(JSON.stringify(inputMessage));
+                                status = "ready";
+                            }, minDuration);
+                        } else {
+                            inputMessage.payload = JSON.stringify(input);
+                            rs_websocket.send(JSON.stringify(inputMessage));
+                            status = "ready";
+                        }
+                    }
+
                 }
-        },
 
-        //Default is 75px, set to 0 for demo so any distance triggers swipe
+            }
-        threshold: 0
+
+        },
+        threshold: 200,
+        maxTimeThreshold: 5000,
+        fingers: 'all'
     });
-});
+});;