Fixing Remote Control app. For now limiting it to mouse and keyboard imput page

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

diff --git a/remotecontrol/www/js/keyboard.js b/remotecontrol/www/js/keyboard.js
index 0e7ba89..c48acaa 100644 (file)
--- 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 (file)
--- 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);       
 }