add remote inject input ui changes

revert-dabc3590
warunalakshitha 7 years ago
parent 82f6736bce
commit 33b615a1df

@ -15,102 +15,88 @@
* specific language governing permissions and limitations * specific language governing permissions and limitations
* under the License. * under the License.
*/ */
var rs_websocket; var rs_websocket;
var rs_WebSocketURL; var rs_WebSocketURL;
var shellMessageField = document.getElementById('shell-command'); var shellMessageField = document.getElementById('shell-command');
var shellResponseField = document.getElementById('shell-response'); var shellResponseField = document.getElementById('shell-response');
var canRemotelyControl = true;
WebSocket.prototype.set_opened = function () { WebSocket.prototype.set_opened = function() {
this._opened = true; this._opened = true;
}; };
WebSocket.prototype.set_closed = function () { WebSocket.prototype.set_closed = function() {
this._opened = false; this._opened = false;
}; };
WebSocket.prototype.get_opened = function () { WebSocket.prototype.get_opened = function() {
return this._opened || false; return this._opened || false;
}; };
var remoteSessionWebSocketOnOpen = function () { var remoteSessionWebSocketOnOpen = function() {
rs_websocket.set_opened(); rs_websocket.set_opened();
}; };
var remoteSessionWebSocketOnMessage = function (message) { var remoteSessionWebSocketOnMessage = function(message) {
$('#lbl-remote-session-status').text('Server Connected...');
$('#remote-session-operations').removeClass('hidden'); $('#lbl-remote-session-status').text('Server Connected...');
$('#loading-remote-session').addClass('hidden'); $('#remote-session-operations').removeClass('hidden');
$('#btn-close-remote-session').removeClass('hidden'); $('#loading-remote-session').addClass('hidden');
$('#shell-terminal').removeClass('hidden'); $('#btn-close-remote-session').removeClass('hidden');
if (typeof message.data !== 'string') { $('#shell-terminal').removeClass('hidden');
$('#loading-screen').addClass('hidden'); if (typeof message.data !== 'string') {
var url = URL.createObjectURL(event.data); $('#loading-screen').addClass('hidden');
var img = new Image; var url = URL.createObjectURL(event.data);
var img = new Image;
img.onload = function() {
var ctx = document.getElementById("canvas").getContext('2d'); img.onload = function() {
ctx.canvas.height = this.height; var ctx = document.getElementById("canvas").getContext('2d');
ctx.canvas.width =this.width; ctx.canvas.height = this.height;
ctx.drawImage(this, 0, 0); ctx.canvas.width = this.width;
URL.revokeObjectURL(url); ctx.drawImage(this, 0, 0);
} URL.revokeObjectURL(url);
img.src = url; }
} else { img.src = url;
var json = $.parseJSON(message.data);
if (json.code == "REMOTE_SHELL") {
if(json.status != "NEW"){
$('#loading-terminal').addClass('hidden');
}
if(json.operationResponse != null ){
var shellResponse = $("#shell-response");
shellResponse.val(shellResponse.val() + json.operationResponse);
}
} else if (json.code == "REMOTE_LOGCAT") {
if(json.status != "NEW"){
$('#btn-refresh-logCat').removeClass('hidden');
$('#loading-logcat').addClass('hidden');
}
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 ){
var shellResponse = $("#shell-response");
shellResponse.val(json.operationResponse);
}
} else { } else {
console.log("Message type not supported.");
var json = $.parseJSON(message.data);
if (json.code == "REMOTE_SHELL") {
if (json.status != "NEW") {
$('#loading-terminal').addClass('hidden');
}
if (json.operationResponse != null) {
var shellResponse = $("#shell-response");
shellResponse.val(shellResponse.val() + json.operationResponse);
}
} else if (json.code == "REMOTE_LOGCAT") {
if (json.status != "NEW") {
$('#btn-refresh-logCat').removeClass('hidden');
$('#loading-logcat').addClass('hidden');
}
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) {
var shellResponse = $("#shell-response");
shellResponse.val(json.operationResponse);
}
} else if (json.code == "REMOTE_INPUT") {
canRemotelyControl = false;
} else {
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(); 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(); location.reload();
}; };
@ -127,27 +113,30 @@ $("#btn-close-remote-session").click(function() {
// Close the WebSocket. // Close the WebSocket.
rs_websocket.close(); rs_websocket.close();
rs_websocket.set_closed(); 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'); $('#btn-connect-device').removeClass('hidden');
$('#remote-session-operations').addClass('hidden'); $('#remote-session-operations').addClass('hidden');
$('#btn-close-remote-session').addClass('hidden'); $('#btn-close-remote-session').addClass('hidden');
$('#loading-screen').addClass('hidden'); $('#loading-screen').addClass('hidden');
$('#btn-stop-screen').addClass('hidden'); $('#btn-stop-screen').addClass('hidden');
$('#btn-start-screen').removeClass('hidden'); $('#btn-start-screen').removeClass('hidden');
location.reload(); //location.reload();
}); });
$("#btn-refresh-logCat").click(function() { $("#btn-refresh-logCat").click(function() {
$('#loading-logcat').removeClass('hidden'); $('#loading-logcat').removeClass('hidden');
$('#btn-refresh-logCat').addClass('hidden'); $('#btn-refresh-logCat').addClass('hidden');
var message = new Object(); var message = new Object();
message.code ="REMOTE_LOGCAT"; message.code = "REMOTE_LOGCAT";
// Send the message through the WebSocket. // Send the message through the WebSocket.
rs_websocket.send(JSON.stringify(message)); rs_websocket.send(JSON.stringify(message));
// Clear out the message field. // Clear out the message field.
$("#logcat-response").val("") ; $("#logcat-response").val("");
}); });
@ -165,97 +154,145 @@ function initializeRemoteSessionWebSocket() {
function initializeRemoteSession() { function initializeRemoteSession() {
rs_WebSocketURL = $("#remote-session").data("remote-session-uri"); rs_WebSocketURL = $("#remote-session").data("remote-session-uri");
if(rs_WebSocketURL != null) { if (rs_WebSocketURL != null) {
initializeRemoteSessionWebSocket(); initializeRemoteSessionWebSocket();
window.onbeforeunload = function () { window.onbeforeunload = function() {
rs_websocket.close(); rs_websocket.close();
} }
$('#lbl-remote-session-status').text('Waiting on device to connect...'); $('#lbl-remote-session-status').text('Waiting on device to connect...');
} else { } else {
noty({text: 'Remote Session endpoint connection Failed!', type: 'error'}); noty({
$('#btn-connect-device').removeClass('hidden'); text: 'Remote Session endpoint connection Failed!',
type: 'error'
});
$('#btn-connect-device').removeClass('hidden');
$('#loading-remote-session').addClass('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(); var message = new Object();
message.code ="REMOTE_SHELL"; message.code = "REMOTE_SHELL";
message.payload = $("#shell-command").val(); message.payload = $("#shell-command").val();
// Send the message through the WebSocket. // Send the message through the WebSocket.
rs_websocket.send(JSON.stringify(message)); rs_websocket.send(JSON.stringify(message));
// Clear out the message field. // Clear out the message field.
$("#shell-command").val("") ; $("#shell-command").val("");
$("#shell-response").val("") ; $("#shell-response").val("");
$('#loading-terminal').removeClass('hidden'); $('#loading-terminal').removeClass('hidden');
} }
}); });
$("#btn-start-screen").click(function() { $("#btn-start-screen").click(function() {
canRemotelyControl = true;
$('#loading-screen').removeClass('hidden'); $('#loading-screen').removeClass('hidden');
$('#btn-start-screen').addClass('hidden'); $('#btn-start-screen').addClass('hidden');
$('#remote-control-pannel').removeClass('hidden'); $('#remote-control-pannel').removeClass('hidden');
$('#btn-stop-screen').removeClass('hidden'); $('#btn-stop-screen').removeClass('hidden');
var message = new Object(); var message = new Object();
message.code ="REMOTE_SCREEN"; var input = new Object();
message.payload = "start"; input.action = "start";
// Send the message through the WebSocket. input.height = 768;
rs_websocket.send(JSON.stringify(message)); input.width = 1024;
message.code = "REMOTE_SCREEN";
message.payload = JSON.stringify(input);
// Send the message through the WebSocket.
rs_websocket.send(JSON.stringify(message));
}); });
$("#btn-stop-screen").click(function() { $("#btn-stop-screen").click(function() {
var canvas = document.getElementById("canvas"); canRemotelyControl = false;
var ctx = canvas.getContext('2d'); var canvas = document.getElementById("canvas");
ctx.clearRect(0, 0, canvas.width, canvas.height); var ctx = canvas.getContext('2d');
$('#loading-screen').addClass('hidden'); ctx.clearRect(0, 0, canvas.width, canvas.height);
$('#remote-control-pannel').addClass('hidden'); $('#loading-screen').addClass('hidden');
$('#btn-stop-screen').addClass('hidden'); $('#remote-control-pannel').addClass('hidden');
$('#btn-start-screen').removeClass('hidden'); $('#btn-stop-screen').addClass('hidden');
context.clearRect(0, 0, canvas.width, canvas.height); $('#btn-start-screen').removeClass('hidden');
var message = new Object(); var message = new Object();
message.code ="REMOTE_SCREEN"; var input = new Object();
message.payload = "stop"; input.action = "stop";
// Send the message through the WebSocket. message.code = "REMOTE_SCREEN";
rs_websocket.send(JSON.stringify(message)); message.payload = JSON.stringify(input);
// Send the message through the WebSocket.
rs_websocket.send(JSON.stringify(message));
}); });
$(function() { $(function() {
var lastDuration = 0;
var minDuration = 50;
var durationDiff = 0;
var status = "ready";
var bounds, x, y;
//Enable swiping... //Enable swiping...
$("#canvas").swipe({ $("#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'
}); });
}); });;

Loading…
Cancel
Save