From 05342f00942c79b674e04bb1a7b998a47f976287 Mon Sep 17 00:00:00 2001 From: Brian Jones Date: Thu, 13 Sep 2012 18:01:52 -0700 Subject: [PATCH] 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. --- remotecontrol/www/js/keyboard.js | 2 + remotecontrol/www/js/masterControl.js | 111 ++++++++++++++++++++-------------- 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); } -- 2.7.4