Fixing Remote Control app. For now limiting it to mouse and keyboard imput pagesubmit/trunk/20120914.010250accepted/trunk/20120914.010514

as the others aren't ready yet. Changed javascript to work correctly with touch
events rather than standard mouse movements.

2 files changed, 68 insertions, 45 deletions

diff --git a/remotecontrol/www/js/keyboard.js b/remotecontrol/www/js/keyboard.js
index 0e7ba89..c48acaa 100644
--- a/remotecontrol/www/js/keyboard.js
+++ b/remotecontrol/www/js/keyboard.js
@@ -136,6 +136,8 @@ Keyboard.prototype.show = function()
 {
     this.visible = true;
     keyboardCtx.clearRect(0, 0, screenWidth, screenHeight);
+  //  keyboardCtx.fillStyle = "red";
+    buttonCtx.fillRect(0,0,0,0);
     keyboardCtx.drawImage(images.chrome, 0, screenHeight - (screenHeight / 3) - spacer, screenWidth, screenHeight);
 
     for (var canvObjIter = 0; canvObjIter < this.keys.length; canvObjIter++)
diff --git a/remotecontrol/www/js/masterControl.js b/remotecontrol/www/js/masterControl.js
index f57c282..fdab9a3 100644
--- a/remotecontrol/www/js/masterControl.js
+++ b/remotecontrol/www/js/masterControl.js
@@ -22,7 +22,7 @@ var cancelAudioGlowInterval = undefined;
 var cancelAudioInterval = undefined;
 var virtualKeyboard = undefined;
 
-var mainMenuTitleTemplate = {"font" : "bold 40pt Arial", "lineWidth" : 2.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "center",  
+var mainMenuTitleTemplate = {"font" : "bold 40pt Arial", "lineWidth" : 1, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "center",  
     "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 32, "shadowColor" : "rgba(0, 0, 110, 1.0)"};	
 
 var mainMenuButtonTemplate = {"font" : "bold 20pt Arial", "lineWidth" : 1.5, "strokeStyle" : "white", "textAlign" : "center", "textBaseline" : "middle", 
@@ -31,23 +31,45 @@ var mainMenuButtonTemplate = {"font" : "bold 20pt Arial", "lineWidth" : 1.5, "st
 var trackTitleTemplate = {"font" : "bold 30pt Arial", "fillStyle" : "black", "textAlign" : "center",
     "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 12, "shadowColor" : "rgba(225, 225, 225, 1.0)"};
 
-var mainMenu = new MenuObject({"name" : "main", "xLoc" : 0, "yLoc" : 0, "visible" : true});
+var mainMenu = new MenuObject({"name" : "main", "xLoc" : 0, "yLoc" : 0, "visible" : false});
 var audioMenu = new MenuObject({"name" : "audio", "xLoc" : 0, "yLoc" : 0, "visible" : false});
 var videoMenu = new MenuObject({"name" : "video", "xLoc" : 0, "yLoc" : 0, "visible" : false});
 var navMenu = new MenuObject({"name" : "nav", "xLoc" : 0, "yLoc" : 0, "visible" : false});
 var webMenu = new MenuObject({"name" : "web", "xLoc" : 0, "yLoc" : 0, "visible" : false});
-var mouseMenu = new MenuObject({"name" : "mouse", "xLoc" : 0, "yLoc" : 0, "visible" : false});
+var mouseMenu = new MenuObject({"name" : "mouse", "xLoc" : 0, "yLoc" : 0, "visible" : true});
 
-var currentMenu = mainMenu;
+var currentMenu = mouseMenu;
 
-function onTouchDown(event) 
+function onTouchStart(event)
 {
+    prevXMouse = event.touches[0].clientX;
+    prevYMouse = event.touches[0].clientY;
+    startXMouse = prevXMouse;
+    startYMouse = prevYMouse;
+}
+
+function onTouchEnd(event)
+{
+    if (Math.abs(event.changedTouches[0].clientX - startXMouse) < 15 && Math.abs(event.changedTouches[0].clientY - startYMouse < 15))
+    {
+	onMouseDown(event.changedTouches[0]);
+    }
+}
 
+function onTouchMove(event) 
+{
+    if (!virtualKeyboard || virtualKeyboard.visible === false || (virtualKeyboard.topYLoc > event.touches[0].clientY))
+    {
+	var selectedObj = objectsAtLocation(currentMenu, event.touches[0].clientX, event.touches[0].clientY);		
+	if (selectedObj && selectedObj.onMove)
+	    selectedObj.onMove(event.touches[0])
+    }
+    prevXMouse = event.touches[0].clientX;
+    prevYMouse = event.touches[0].clientY; 
 }
 
 function onMouseDown(event) 
 {	
-    //mouseDown = true;
     //Check if the virtual keyboard is up, if so pass the event to the virtual keyboard
     if (!virtualKeyboard || virtualKeyboard.visible === false || (virtualKeyboard.topYLoc > event.clientY))
     {
@@ -152,26 +174,26 @@ function connect()
 	    audioMenu.getObj("volumeSlider").xLoc = ((parseFloat(dataStr) * volBar.width) + volBar.xLoc) - audioMenu.getObj("volumeSlider").width / 2;       	 	
 	    audioMenu.drawMenu();     	 	
 	}
-    
-    else if (currentMenu === audioMenu && jsonMsg.type === "reply" && jsonMsg.reply === "playlist")
+
+	else if (currentMenu === audioMenu && jsonMsg.type === "reply" && jsonMsg.reply === "playlist")
 	{
-		var playlistArray = e.data.split("/");
-		
-		for (var i = 0; i < playlistArray.length; i++)
-		{
-			if (playlistArray[i].indexOf(".") === -1)
-				playlistArray.splice(i,1);
-		}	
-		
-		if (playlistArray && playlistArray.length > 0)
-		{
-			audioMenu.getObj("playlist").listData = playlistArray;
-			//audioMenu.getObj("playlist").message = e.data;
-			audioMenu.drawMenu();
-			console.log(e.data);
-		}
-    }
-	
+	    var playlistArray = e.data.split("/");
+
+	    for (var i = 0; i < playlistArray.length; i++)
+	    {
+		if (playlistArray[i].indexOf(".") === -1)
+		    playlistArray.splice(i,1);
+	    }	
+
+	    if (playlistArray && playlistArray.length > 0)
+	    {
+		audioMenu.getObj("playlist").listData = playlistArray;
+		//audioMenu.getObj("playlist").message = e.data;
+		audioMenu.drawMenu();
+		console.log(e.data);
+	    }
+	}
+
 	//console.log(e.data);
     };
 
@@ -188,8 +210,8 @@ function send(msg) {
 }
 
 function init() 
-{   
-    connect();
+{ 
+    connect(); 
     mainCanvas = document.getElementById("mainCanvas");
     bgCanvas = document.getElementById("bgCanvas");
     buttonCanvas = document.getElementById("buttonCanvas");
@@ -234,9 +256,12 @@ button: "assets/button.png",
 
     $(window).bind('resize', resizeCanvas);
 
-    mouseClicksLayer.addEventListener('mousedown', onMouseDown);
-    mouseClicksLayer.addEventListener('mousemove', onMouseMove);
-    mouseClicksLayer.addEventListener('mouseup', onMouseUp);
+    //mouseClicksLayer.addEventListener('mousemove', onMouseMove);
+    //mouseClicksLayer.addEventListener('mouseup', onMouseUp);
+    mouseClicksLayer.addEventListener('touchmove', onTouchMove);
+    mouseClicksLayer.addEventListener('touchstart', onTouchStart);
+    mouseClicksLayer.addEventListener('touchend', onTouchEnd);
+    //connect();
 }
 
 function switchMenu(nextMenu)
@@ -259,8 +284,6 @@ function switchMenu(nextMenu)
 
 function initMainMenu()
 {
-	//mainMenu.clearObjects();
-
     var iconNames = ["Audio", "Video", "Navigation", "Web Browser", "Mouse Input"];
     mainMenu.addIconGrid(iconNames, [images.button, images.button, images.button, images.button, images.button], 200, 100, 30, 50, 200);
     mainMenu.addObject(bgCtx, "image", {"name" : "bgImage","image": images.bg, "xLoc" : 0, "yLoc" : 0, "width" : screenWidth, "height" : screenHeight} );	    
@@ -272,7 +295,7 @@ function initMainMenu()
 	switch(iconNames[i])
 	{
 	    case "Audio":
-	    mainMenu.getObj("Audio").addText(iconNames[i],mainMenuButtonTemplate);	
+		mainMenu.getObj("Audio").addText(iconNames[i],mainMenuButtonTemplate);	
 		mainMenu.getObj("Audio").onClick = function(){
 		    //send({"api_namespace": "tizen.ivi.remotecontrol","type": "request","request": "volume_info"});
 		    cancelAudioInterval = setInterval(function(){send({"type": "request","request": "audio_info"});}, 5000);					
@@ -314,7 +337,6 @@ function initMainMenu()
 
 function initVideoMenu()
 {	 
-   // videoMenu.clearObjects();
     var iconNames= [ "videoPrevious", "videoPlay", "videoNext"];
     videoMenu.addIconGrid(iconNames, [images.back, images.playBig, images.forward], 50, 50, 30, 50, 200);
 
@@ -360,44 +382,43 @@ function initVideoMenu()
 
 function initMouseMenu()
 {	 
-    //mouseMenu.clearObjects();
     mouseMenu.addObject(bgCtx, "image", {"name" : "bgImage", "image": images.bg, "xLoc" : 0, "yLoc" : 0, "width" : screenWidth, "height" : screenHeight});
 
-    mouseMenu.addObject(buttonCtx, "text", {"name" : "menuTitle","text": "Mouse Input", "xLoc" : (screenWidth / 2), "yLoc" : 50, "template" : mainMenuTitleTemplate});
+   // mouseMenu.addObject(buttonCtx, "text", {"name" : "menuTitle","text": "Mouse Input", "xLoc" : (screenWidth / 2), "yLoc" : 50, "template" : mainMenuTitleTemplate});
 
-    mouseMenu.addObject(buttonCtx, "button", {"name" : "mouseAreaButton", "image": images.mouseArea, "xLoc" : 50, "yLoc" : 100, "width" : screenWidth - 100, "height" : screenHeight - 150, 
+    mouseMenu.addObject(buttonCtx, "button", {"name" : "mouseAreaButton", "image": images.mouseArea, "xLoc" : 25, "yLoc" : 25, "width" : screenWidth - 50, "height" : screenHeight - 100, 
 	    "onClick" : function(){	send({"api_namespace": "tizen.ivi.remotecontrol","type": "command","command": "key_press","key_id": "mouse_click"});},
 	    "onMove" : function(evt){				
-	    var xDist = evt.clientX - prevXMouse;
-	    var yDist = evt.clientY - prevYMouse;	
+	    var xDist = 2 * (evt.clientX - prevXMouse);
+	    var yDist = 2 * (evt.clientY - prevYMouse);	
 	    send({"api_namespace": "tizen.ivi.remotecontrol", "type": "command", "command": "mouse_move", "x": xDist, "y": yDist});
 	    }
 	    });	
 
-    mouseMenu.addHomeButton(buttonCtx, 10, screenHeight -60, 50, 50);
-    mouseMenu.addKeyboardButton(buttonCtx, 100, screenHeight -60, 60, 40);			
+    //    mouseMenu.addHomeButton(buttonCtx, 10, screenHeight -60, 50, 50);
+    mouseMenu.addKeyboardButton(buttonCtx, 20, screenHeight -60, 60, 40);			
     //mouseMenu.addHomeButton(buttonCtx, screenWidth * 0.01, screenHeight -60, screenWidth * 0.07, screenWidth * 0.07);
     //mouseMenu.addKeyboardButton(buttonCtx, screenWidth * 0.1, screenHeight -60, screenWidth * 0.1, screenWidth * 0.05);			
 }
 
 function initNavMenu()
 {	 
-	//navMenu.clearObjects();
+    //navMenu.clearObjects();
 
     navMenu.addObject(bgCtx, "image", {"name" : "bgImage", "image": images.bg, "xLoc" : 0, "yLoc" : 0, "width" : screenWidth, "height" : screenHeight} );   
     navMenu.addObject(buttonCtx, "text", {"name" : "menuTitle","text": "Navigation Control", "xLoc" : (screenWidth / 2), "yLoc" : 50, "template" : mainMenuTitleTemplate} );	
-    
+
     navMenu.addHomeButton(buttonCtx, 10, screenHeight -60, 50, 50);
     navMenu.addKeyboardButton(buttonCtx, 100, screenHeight -60, 60, 40);
 }
 
 function initWebMenu()
 {	 
-	//webMenu.clearObjects();
+    //webMenu.clearObjects();
 
     webMenu.addObject(bgCtx, "image", {"name" : "bgImage", "image": images.bg, "xLoc" : 0, "yLoc" : 0, "width" : screenWidth, "height" : screenHeight} );   
     webMenu.addObject(buttonCtx, "text", {"name" : "menuTitle","text": "Web Control", "xLoc" : (screenWidth / 2), "yLoc" : 50, "template" : mainMenuTitleTemplate} );	
-    
+
     webMenu.addHomeButton(buttonCtx, 10, screenHeight -60, 50, 50);
     webMenu.addKeyboardButton(buttonCtx, 100, screenHeight -60, 60, 40);	
 }