Fixing Remote Control app. For now limiting it to mouse and keyboard imput page 36/1736/1 accepted/trunk/20120914.010514 submit/trunk/20120914.010250
authorBrian Jones <brian.j.jones@intel.com>
Fri, 14 Sep 2012 01:01:52 +0000 (18:01 -0700)
committerBrian Jones <brian.j.jones@intel.com>
Fri, 14 Sep 2012 01:01:52 +0000 (18:01 -0700)
as the others aren't ready yet. Changed javascript to work correctly with touch
events rather than standard mouse movements.

remotecontrol/www/js/keyboard.js
remotecontrol/www/js/masterControl.js

index 0e7ba89..c48acaa 100644 (file)
@@ -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++)
index f57c282..fdab9a3 100644 (file)
@@ -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);       
 }