From: Brian Jones Date: Thu, 16 Aug 2012 21:43:32 +0000 (-0700) Subject: Formatting text X-Git-Tag: accepted/trunk/20120912.055646~7 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=3291d9e53f6f15284da2436bb474de206d5c1f0e;p=profile%2Fivi%2Fwebdialer.git Formatting text --- diff --git a/js/buttonObject.js b/js/buttonObject.js index 8f524b1..c75f28a 100644 --- a/js/buttonObject.js +++ b/js/buttonObject.js @@ -52,9 +52,9 @@ ButtonObject.prototype.update = function(args) if (args.onClick) {this.onClick = args.onClick;} if (args.onHold) {this.onHold = args.onHold;} if (args.onMove) {this.onMove = args.onMove;} - - /* Img shadow styles */ - if (args.shadowOffsetX) {this.shadowOffsetX = args.shadowOffsetX;} + + /* Img shadow styles */ + if (args.shadowOffsetX) {this.shadowOffsetX = args.shadowOffsetX;} if (args.shadowOffsetY) {this.shadowOffsetY = args.shadowOffsetY;} if (args.shadowBlur) {this.shadowBlur = args.shadowBlur;} if (args.shadowColor) {this.shadowColor = args.shadowColor;} @@ -64,22 +64,22 @@ ButtonObject.prototype.drawObj = function() { if (this.visible) { - this.ctx.save(); - - this.ctx.shadowBlur = this.shadowBlur; - this.ctx.shadowColor = this.shadowColor; - this.ctx.shadowOffsetX = this.shadowOffsetX; - this.ctx.shadowOffsetY = this.shadowOffsetY; - - this.ctx.drawImage(this.img, this.xLoc, this.yLoc, this.width, this.height); - - this.ctx.restore(); + this.ctx.save(); + + this.ctx.shadowBlur = this.shadowBlur; + this.ctx.shadowColor = this.shadowColor; + this.ctx.shadowOffsetX = this.shadowOffsetX; + this.ctx.shadowOffsetY = this.shadowOffsetY; + + this.ctx.drawImage(this.img, this.xLoc, this.yLoc, this.width, this.height); + + this.ctx.restore(); + + if (this.textObj != undefined) + this.textObj.drawObj(); - if (this.textObj != undefined) - this.textObj.drawObj(); - - if (this.icon != undefined) - this.icon.drawObj(); + if (this.icon != undefined) + this.icon.drawObj(); } } diff --git a/js/callPage.js b/js/callPage.js index c756a87..850ab8d 100644 --- a/js/callPage.js +++ b/js/callPage.js @@ -12,7 +12,7 @@ var phoneNumberTextTemplate = {"font" : "bold 40pt Arial", "lineWidth" : 2.5, "f var incomingTextTemplate = {"font" : "bold 80pt Arial", "fillStyle" : "white", "textAlign" : "center", "textBaseline" : "middle", "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "rgba(0, 0, 0, 1.0)"}; - + var callTimeTextTemplate = {"font" : "bold 30pt Arial", "fillStyle" : "white", "textAlign" : "left", "textBaseline" : "top", "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "rgba(0, 0, 0, 1.0)"}; @@ -22,85 +22,84 @@ var timerInterval; function updateNumber(number) { - currentNumber = number; - - if (number.length === 10) - { - number = number.slice(0,3) + '-' + number.slice(3,6) + '-' + number.slice(6,10); - } - - callPage.getObj("displayedNumber").text = number; + currentNumber = number; + + if (number.length === 10) + { + number = number.slice(0,3) + '-' + number.slice(3,6) + '-' + number.slice(6,10); + } + + callPage.getObj("displayedNumber").text = number; } function startTimer(timeText) { - var today = new Date(); - startTime = today.getTime(); - - timerInterval = setInterval( function() { - var today = new Date(); - var currentTime = today.getTime(); - callTime = Math.floor((currentTime - startTime) / 1000); - - callPage.getObj("callTime").text = callTime; - callPage.drawMenu(); - }, 1000); + var today = new Date(); + startTime = today.getTime(); + + timerInterval = setInterval( function() { + var today = new Date(); + var currentTime = today.getTime(); + callTime = Math.floor((currentTime - startTime) / 1000); + + callPage.getObj("callTime").text = callTime; + callPage.drawMenu(); + }, 1000); } function stopTimer() { - clearInterval(timerInterval); + clearInterval(timerInterval); } function initCallPage(initState) { - if (initState == "dialing" || initState == "inCall") - var buttonWidth = screenWidth * 0.6; - else - var buttonWidth = (screenWidth * 0.8) / 2; - - var buttonHeight = screenHeight * 0.15; - - - var incomingBar = callPage.addObject(mainCtx, "shape", {"name" : "incomingBar", "xLoc" : -20, "yLoc" : screenHeight * 0.2, "width" : screenWidth + 40, - "height" : screenHeight * 0.6, "fillStyle" : "#51504F", "strokeStyle" : "#B3BF3C", "lineWidth" : 5}) - - var displayedNumber = callPage.addObject(mainCtx, "text", {"name" : "displayedNumber", "xLoc" : screenWidth / 2, "yLoc" : incomingBar.yLoc + incomingBar.height * 0.4, "width" : screenWidth * 0.75, - "height" : screenHeight * 0.4, "text" : currentNumber, "template" : incomingTextTemplate}) - + if (initState == "dialing" || initState == "inCall") + var buttonWidth = screenWidth * 0.6; + else + var buttonWidth = (screenWidth * 0.8) / 2; + + var buttonHeight = screenHeight * 0.15; + + + var incomingBar = callPage.addObject(mainCtx, "shape", {"name" : "incomingBar", "xLoc" : -20, "yLoc" : screenHeight * 0.2, "width" : screenWidth + 40, + "height" : screenHeight * 0.6, "fillStyle" : "#51504F", "strokeStyle" : "#B3BF3C", "lineWidth" : 5}); + + var displayedNumber = callPage.addObject(mainCtx, "text", {"name" : "displayedNumber", "xLoc" : screenWidth / 2, "yLoc" : incomingBar.yLoc + incomingBar.height * 0.4, "width" : screenWidth * 0.75, + "height" : screenHeight * 0.4, "text" : currentNumber, "template" : incomingTextTemplate}); + var clockIcon = callPage.addObject(mainCtx, "image", {"name" : "clock", "image": images.clockIcon, "xLoc" : screenWidth * 0.7, - "yLoc" : incomingBar.yLoc + 30, "width" : 50, "height" : 50} ); - - var callTime = callPage.addObject(mainCtx, "text", {"name" : "callTime", "xLoc" : clockIcon.xLoc + clockIcon.width + 10, "yLoc" : clockIcon.yLoc, "width" : screenWidth * 0.2, - "height" : 100, "text" : "00:00:00", "template" : callTimeTextTemplate}) - - var endCallButton; - - if (initState == "dialing" || initState == "inCall") - { - endCallButton = callPage.addObject(buttonCtx, "button", {"name" : "endCallButton", "image": images.incomingDeclineButton, "icon": images.endCallIcon, "iconWidth" : 100, "iconHeight" : 100, "xLoc" : screenWidth * 0.2, - "yLoc" : incomingBar.yLoc + incomingBar.height - buttonHeight - 50, "width" : buttonWidth, "height" : buttonHeight} ); - - callPage.getObj("acceptCallButton").visible = false; - } - else - { - acceptCallButton = callPage.addObject(buttonCtx, "button", {"name" : "acceptCallButton", "image": images.incomingAcceptButton, "icon": images.callIcon, "iconWidth" : 100, "iconHeight" : 100, "xLoc" : screenWidth * 0.1, - "yLoc" : incomingBar.yLoc + incomingBar.height - buttonHeight - 50, "width" : buttonWidth, "height" : buttonHeight, "visible" : true} ); - - endCallButton = callPage.addObject(buttonCtx, "button", {"name" : "endCallButton", "image": images.incomingDeclineButton, "icon": images.endCallIcon, "iconWidth" : 100, "iconHeight" : 100, "xLoc" : acceptCallButton.xLoc + acceptCallButton.width + 20, - "yLoc" : incomingBar.yLoc + incomingBar.height - buttonHeight - 50, "width" : buttonWidth, "height" : buttonHeight} ); - } - - endCallButton.onClick = function(){ - send({ - "api_namespace" : "tizen.ivi.dialer", - "type": "method", - "command": "hangup" + "yLoc" : incomingBar.yLoc + 30, "width" : 50, "height" : 50} ); + + var callTime = callPage.addObject(mainCtx, "text", {"name" : "callTime", "xLoc" : clockIcon.xLoc + clockIcon.width + 10, "yLoc" : clockIcon.yLoc, "width" : screenWidth * 0.2, + "height" : 100, "text" : "00:00:00", "template" : callTimeTextTemplate}); + + var endCallButton; + + if (initState == "dialing" || initState == "inCall") + { + endCallButton = callPage.addObject(buttonCtx, "button", {"name" : "endCallButton", "image": images.incomingDeclineButton, "icon": images.endCallIcon, "iconWidth" : 100, "iconHeight" : 100, "xLoc" : screenWidth * 0.2, + "yLoc" : incomingBar.yLoc + incomingBar.height - buttonHeight - 50, "width" : buttonWidth, "height" : buttonHeight} ); + + callPage.getObj("acceptCallButton").visible = false; + } + else + { + acceptCallButton = callPage.addObject(buttonCtx, "button", {"name" : "acceptCallButton", "image": images.incomingAcceptButton, "icon": images.callIcon, "iconWidth" : 100, "iconHeight" : 100, "xLoc" : screenWidth * 0.1, + "yLoc" : incomingBar.yLoc + incomingBar.height - buttonHeight - 50, "width" : buttonWidth, "height" : buttonHeight, "visible" : true} ); + + endCallButton = callPage.addObject(buttonCtx, "button", {"name" : "endCallButton", "image": images.incomingDeclineButton, "icon": images.endCallIcon, "iconWidth" : 100, "iconHeight" : 100, + "xLoc" : acceptCallButton.xLoc + acceptCallButton.width + 20, "yLoc" : incomingBar.yLoc + incomingBar.height - buttonHeight - 50, "width" : buttonWidth, "height" : buttonHeight} ); + } + + endCallButton.onClick = function(){ + send({ + "api_namespace" : "tizen.ivi.dialer", + "type": "method", + "command": "hangup" }); - currentState = "idle"; - switchMenu(mainPage); - stopTimer(); - }; - -} \ No newline at end of file + currentState = "idle"; + switchMenu(mainPage); + stopTimer(); + }; + diff --git a/js/canvasObject.js b/js/canvasObject.js index add791b..70f3fbf 100644 --- a/js/canvasObject.js +++ b/js/canvasObject.js @@ -16,24 +16,24 @@ function objectsAtLocation(pageObj, xLoc, yLoc) for (i = 0; i < pageObj.canvasObjs.length; i++) { - if (pageObj.canvasObjs[i] != undefined && pageObj.canvasObjs[i].visible != false) - { - currItem = pageObj.canvasObjs[i]; - - if (xLoc > currItem.xLoc && xLoc < (currItem.xLoc + currItem.width)) - { - if (yLoc > currItem.yLoc && yLoc < (currItem.yLoc + currItem.height)) - { - if (prevItem == undefined || (currItem.ctx.canvas.style.zIndex > prevItem.ctx.canvas.style.zIndex) || - ((currItem.ctx.canvas.style.zIndex === prevItem.ctx.canvas.style.zIndex) && (currItem.zLoc > prevItem.zLoc))) - prevItem = currItem; - } - } + if (pageObj.canvasObjs[i] != undefined && pageObj.canvasObjs[i].visible != false) + { + currItem = pageObj.canvasObjs[i]; + + if (xLoc > currItem.xLoc && xLoc < (currItem.xLoc + currItem.width)) + { + if (yLoc > currItem.yLoc && yLoc < (currItem.yLoc + currItem.height)) + { + if (prevItem == undefined || (currItem.ctx.canvas.style.zIndex > prevItem.ctx.canvas.style.zIndex) || + ((currItem.ctx.canvas.style.zIndex === prevItem.ctx.canvas.style.zIndex) && (currItem.zLoc > prevItem.zLoc))) + prevItem = currItem; } + } + } } - if (prevItem) - return prevItem; - + if (prevItem) + return prevItem; + return undefined; } @@ -45,22 +45,22 @@ function clearCanvas() function drawRoundedRectangle(ctx, xLoc, yLoc, width, height, cornerRadius, strokeStyle, fillStyle, lineWidth) { - ctx.save(); - ctx.strokeStyle = strokeStyle; - ctx.lineWidth = lineWidth; - ctx.fillStyle = fillStyle; - ctx.beginPath(); - ctx.moveTo(xLoc + cornerRadius, yLoc); - ctx.lineTo(xLoc + width - cornerRadius, yLoc); - ctx.quadraticCurveTo(xLoc + width, yLoc, xLoc + width, yLoc + cornerRadius); - ctx.lineTo(xLoc + width, yLoc + height - cornerRadius); - ctx.quadraticCurveTo(xLoc + width, yLoc + height, xLoc + width - cornerRadius, yLoc + height); - ctx.lineTo(xLoc + cornerRadius, yLoc + height); - ctx.quadraticCurveTo(xLoc, yLoc + height, xLoc, yLoc + height - cornerRadius); - ctx.lineTo(xLoc, yLoc + cornerRadius); - ctx.quadraticCurveTo(xLoc, yLoc, xLoc + cornerRadius, yLoc); - ctx.closePath(); - ctx.stroke(); - ctx.fill(); - ctx.restore(); + ctx.save(); + ctx.strokeStyle = strokeStyle; + ctx.lineWidth = lineWidth; + ctx.fillStyle = fillStyle; + ctx.beginPath(); + ctx.moveTo(xLoc + cornerRadius, yLoc); + ctx.lineTo(xLoc + width - cornerRadius, yLoc); + ctx.quadraticCurveTo(xLoc + width, yLoc, xLoc + width, yLoc + cornerRadius); + ctx.lineTo(xLoc + width, yLoc + height - cornerRadius); + ctx.quadraticCurveTo(xLoc + width, yLoc + height, xLoc + width - cornerRadius, yLoc + height); + ctx.lineTo(xLoc + cornerRadius, yLoc + height); + ctx.quadraticCurveTo(xLoc, yLoc + height, xLoc, yLoc + height - cornerRadius); + ctx.lineTo(xLoc, yLoc + cornerRadius); + ctx.quadraticCurveTo(xLoc, yLoc, xLoc + cornerRadius, yLoc); + ctx.closePath(); + ctx.stroke(); + ctx.fill(); + ctx.restore(); } diff --git a/js/dialer.js b/js/dialer.js index 90c9063..d279b61 100644 --- a/js/dialer.js +++ b/js/dialer.js @@ -37,10 +37,10 @@ var currentState = "idle"; function onMouseDown(event) { - var selectedObj = objectsAtLocation(currentPage, event.clientX, event.clientY); - - if (selectedObj && selectedObj.onClick) - selectedObj.onClick(event); + var selectedObj = objectsAtLocation(currentPage, event.clientX, event.clientY); + + if (selectedObj && selectedObj.onClick) + selectedObj.onClick(event); prevXMouse = event.clientX; prevYMouse = event.clientY; @@ -48,10 +48,10 @@ function onMouseDown(event) function onMouseMove(event) { - var selectedObj = objectsAtLocation(currentPage, event.clientX, event.clientY); - if (selectedObj && selectedObj.onMove) - selectedObj.onMove(event) - + var selectedObj = objectsAtLocation(currentPage, event.clientX, event.clientY); + if (selectedObj && selectedObj.onMove) + selectedObj.onMove(event); + prevXMouse = event.clientX; prevYMouse = event.clientY; } @@ -76,7 +76,7 @@ function resizeCanvas() $(mouseClicksLayer).attr('height', screenHeight); if (currentPage) - initPages(); + initPages(); } function loadImages(sources, callback) @@ -86,42 +86,42 @@ function loadImages(sources, callback) for (var src in sources) { - numImages++; + numImages++; } for (var src in sources) { - images[src] = new Image(); - images[src].onload = function(){ - if (++loadedImages >= numImages) { - callback(images); - } - }; - images[src].src = sources[src]; + images[src] = new Image(); + images[src].onload = function(){ + if (++loadedImages >= numImages) { + callback(images); + } + }; + images[src].src = sources[src]; } } function handleMsg(incomingMsg) { - if (incomingMsg.event) + if (incomingMsg.event) + { + switch (incomingMsg.event) { - switch (incomingMsg.event) - { - case "incoming_call": - currentState = "incomingCall"; - initCallPage("incomingCall"); - switchMenu("callPage"); - break; - default: - break; - } + case "incoming_call": + currentState = "incomingCall"; + initCallPage("incomingCall"); + switchMenu("callPage"); + break; + default: + break; } + } } function connect() { var host = window.location.hostname; - ws = new WebSocket("ws://localhost:9999/"); - + ws = new WebSocket("ws://localhost:9999/"); + ws.onopen = function() { send({ "type": "connect", @@ -130,14 +130,14 @@ function connect() }; ws.onmessage = function (e) { - jsonMsg = JSON.parse(e.data); - handleMsg(jsonMsg); - console.log(e.data); + jsonMsg = JSON.parse(e.data); + handleMsg(jsonMsg); + console.log(e.data); }; ws.onclose = function(e) { - alert("Connecition closed"); - console.log(e); + alert("Connecition closed"); + console.log(e); }; } @@ -159,33 +159,33 @@ function init() mainCtx = mainCanvas.getContext("2d"); bgCtx = bgCanvas.getContext("2d"); buttonCtx = buttonCanvas.getContext("2d"); - + var sources = { - phoneIcon: "images/bluetooth-smartphone.png", - callButton: "images/ivi_btn-call.png", - callButtonPressed: "images/ivi_btn-call-active.png", - closeButton: "images/ivi_btn-close.png", - deleteButton: "images/ivi_btn-delete.png", - deleteButtonActive: "images/ivi_btn-delete-active.png", - endCallButton: "images/ivi_btn-endcall.png", - endCallButtonActive: "images/ivi_btn-endcall-active.png", - incomingAcceptButton: "images/ivi_btn-incomingcall-accept.png", - incomingAcceptButtonActive: "images/ivi_btn-incomingcall-accept-active.png", - incomingDeclineButton: "images/ivi_btn-incomingcall-decline.png", - incomingDeclineButtonActive: "images/ivi_btn-incomingcall-decline-active.png", - listItem: "images/ivi_btn-list.png", - listItemActive: "images/ivi_btn-list-active.png", - numberButton: "images/ivi_btn-numbers.png", - numberButtonActive: "images/ivi_btn-numbers-active.png", - buttonBG: "images/ivi_buttonarea.png", - callIcon: "images/ivi_icon-call.png", - deleteIcon: "images/ivi_icon-delete.png", - endCallIcon: "images/ivi_icon-endcall.png", - deleteListItemIcon: "images/ivi_icon-list-delete.png", - deleteListItemIconActive: "images/ivi_icon-list-delete-active.png", - clockIcon: "images/ivi_icon-time.png", - textArea: "images/ivi_textarea.png", - bgImage: "images/ivi-v1_ivi-background.jpg" + phoneIcon: "images/bluetooth-smartphone.png", + callButton: "images/ivi_btn-call.png", + callButtonPressed: "images/ivi_btn-call-active.png", + closeButton: "images/ivi_btn-close.png", + deleteButton: "images/ivi_btn-delete.png", + deleteButtonActive: "images/ivi_btn-delete-active.png", + endCallButton: "images/ivi_btn-endcall.png", + endCallButtonActive: "images/ivi_btn-endcall-active.png", + incomingAcceptButton: "images/ivi_btn-incomingcall-accept.png", + incomingAcceptButtonActive: "images/ivi_btn-incomingcall-accept-active.png", + incomingDeclineButton: "images/ivi_btn-incomingcall-decline.png", + incomingDeclineButtonActive: "images/ivi_btn-incomingcall-decline-active.png", + listItem: "images/ivi_btn-list.png", + listItemActive: "images/ivi_btn-list-active.png", + numberButton: "images/ivi_btn-numbers.png", + numberButtonActive: "images/ivi_btn-numbers-active.png", + buttonBG: "images/ivi_buttonarea.png", + callIcon: "images/ivi_icon-call.png", + deleteIcon: "images/ivi_icon-delete.png", + endCallIcon: "images/ivi_icon-endcall.png", + deleteListItemIcon: "images/ivi_icon-list-delete.png", + deleteListItemIconActive: "images/ivi_icon-list-delete-active.png", + clockIcon: "images/ivi_icon-time.png", + textArea: "images/ivi_textarea.png", + bgImage: "images/ivi-v1_ivi-background.jpg" }; loadImages(sources, resizeCanvas); @@ -212,12 +212,12 @@ function initPages() { initMainPage(); initCallPage(currentState); - - bgCtx.drawImage(images.bgImage, 0, 0, screenWidth, screenHeight); + + bgCtx.drawImage(images.bgImage, 0, 0, screenWidth, screenHeight); currentPage.drawMenu(); } $(document).ready(function () { init(); - }); \ No newline at end of file + }); diff --git a/js/imageObject.js b/js/imageObject.js index 3a0ff2e..be9c47b 100644 --- a/js/imageObject.js +++ b/js/imageObject.js @@ -32,20 +32,20 @@ ImageObject = function(ctx, args) ImageObject.prototype.update = function(args) { - if (args.name) {this.name = args.name;} + if (args.name) {this.name = args.name;} if (args.img) {this.img = args.img;} if (args.xLoc) {this.xLoc = args.xLoc;} if (args.yLoc) {this.yLoc = args.yLoc;} if (args.zLoc) {this.zLoc = args.zLoc;} if (args.width) {this.width = args.width;} if (args.height) {this.height = args.height;} - + if (args.ctx) {this.ctx = ctx;} if (args.text !== undefined) {this.textObj.update({"text" : args.text, "xLoc" : (args.xLoc + (args.width / 2)), "yLoc" : (args.yLoc + (args.height / 2)), "zLoc" : (args.zLoc + 1), "template" : args.textTemplate})} if (args.visible) {this.visible = args.visible;} if (args.onClick) {this.onClick = args.onClick;} - - /* Img shadow styles */ + + /* Img shadow styles */ if (args.shadowOffsetX) {this.shadowOffsetX = args.shadowOffsetX;} if (args.shadowOffsetY) {this.shadowOffsetY = args.shadowOffsetY;} if (args.shadowBlur) {this.shadowBlur = args.shadowBlur;} @@ -56,9 +56,9 @@ ImageObject.prototype.drawObj = function() { if (this.visible) { - this.ctx.drawImage(this.img, this.xLoc, this.yLoc, this.width, this.height); - - if (this.textObj != undefined) - this.textObj.drawObj(); + this.ctx.drawImage(this.img, this.xLoc, this.yLoc, this.width, this.height); + + if (this.textObj != undefined) + this.textObj.drawObj(); } } diff --git a/js/mainPage.js b/js/mainPage.js index 7d76ba2..61e65d8 100644 --- a/js/mainPage.js +++ b/js/mainPage.js @@ -16,91 +16,98 @@ var sideTextTemplate = {"font" : "bold 40pt Arial", "lineWidth" : 2.5, "fillStyl function addButtonGrid (gridX, gridY, gridWidth, gridHeight) { - var spacer = 5; - var iconWidth = ((gridWidth - (spacer * 4)) / 3); - var iconHeight = ((gridHeight - (spacer * 6)) / 5); - + var spacer = 5; + var iconWidth = ((gridWidth - (spacer * 4)) / 3); + var iconHeight = ((gridHeight - (spacer * 6)) / 5); + var iconXPosition = gridX + spacer; var iconYPosition = gridY + spacer; var firstIconXPosition = iconXPosition; - var buttonNum = 1; - var buttonText = ""; - + var buttonNum = 1; + var buttonText = ""; + for (var i = 0; i < 12; i++) { - if (buttonNum > 9) - { - switch (buttonNum) - { - case 10: - buttonText = "*"; - break; - case 11: - buttonText = "0"; - break; - case 12: - buttonText = "#"; - break; - } - } - else - buttonText = buttonNum.toString(); - - var button = mainPage.addObject(buttonCtx, "button", {"name" : buttonText, "image": images.numberButton, "text" : buttonText, "textTemplate" : buttonTextTemplate, "xLoc" : iconXPosition, "yLoc" : iconYPosition, "width" : iconWidth, "height" : iconHeight} ); - button.onClick = function(){ - - mainPage.getObj("textArea").textObj.text += this.name; - mainPage.drawMenu(); - }; - - iconXPosition += (iconWidth + spacer); - - if ((i + 1) % 3 === 0) - { - iconYPosition += (iconHeight + spacer); - iconXPosition = firstIconXPosition; - } - - buttonNum += 1; + if (buttonNum > 9) + { + switch (buttonNum) + { + case 10: + buttonText = "*"; + break; + case 11: + buttonText = "0"; + break; + case 12: + buttonText = "#"; + break; + } + } + else + buttonText = buttonNum.toString(); + + var button = mainPage.addObject(buttonCtx, "button", {"name" : buttonText, "image": images.numberButton, "text" : buttonText, "textTemplate" : buttonTextTemplate, "xLoc" : iconXPosition, + "yLoc" : iconYPosition, "width" : iconWidth, "height" : iconHeight} ); + + button.onClick = function(){ + mainPage.getObj("textArea").textObj.text += this.name; + mainPage.drawMenu(); + }; + + iconXPosition += (iconWidth + spacer); + + if ((i + 1) % 3 === 0) + { + iconYPosition += (iconHeight + spacer); + iconXPosition = firstIconXPosition; + } + + buttonNum += 1; } - - buttonNum = 13 - button = mainPage.addObject(buttonCtx, "button", {"name" : "del", "image": images.deleteButton, "icon": images.deleteIcon, "iconWidth" : iconHeight * 0.9, "iconHeight" : iconHeight * 0.9, "xLoc" : iconXPosition, "yLoc" : iconYPosition, "width" : iconWidth, "height" : iconHeight} ); + + buttonNum = 13; + button = mainPage.addObject(buttonCtx, "button", {"name" : "del", "image": images.deleteButton, "icon": images.deleteIcon, "iconWidth" : iconHeight * 0.9, "iconHeight" : iconHeight * 0.9, + "xLoc" : iconXPosition, "yLoc" : iconYPosition, "width" : iconWidth, "height" : iconHeight} ); iconXPosition += (iconWidth + spacer); button.onClick = function(){ - mainPage.getObj("textArea").textObj.text = mainPage.getObj("textArea").textObj.text.slice(0,-1); - mainPage.drawMenu(); - }; - buttonNum = 14 - button = mainPage.addObject(buttonCtx, "button", {"name" : "call", "image": images.callButton, "icon": images.callIcon, "iconWidth" : iconHeight * 0.9, "iconHeight" : iconHeight * 0.9, "xLoc" : iconXPosition, "yLoc" : iconYPosition, "width" : iconWidth * 2 + spacer, "height" : iconHeight} ); + mainPage.getObj("textArea").textObj.text = mainPage.getObj("textArea").textObj.text.slice(0,-1); + mainPage.drawMenu(); + }; + buttonNum = 14; + button = mainPage.addObject(buttonCtx, "button", {"name" : "call", "image": images.callButton, "icon": images.callIcon, "iconWidth" : iconHeight * 0.9, "iconHeight" : iconHeight * 0.9, + "xLoc" : iconXPosition, "yLoc" : iconYPosition, "width" : iconWidth * 2 + spacer, "height" : iconHeight} ); + button.onClick = function(){ - var dialNumber = mainPage.getObj("textArea").textObj.text; - send({ - "api_namespace" : "tizen.ivi.dialer", - "type": "method", - "command": "dial_number", - "number": dialNumber - }); - initCallPage("dialing"); - updateNumber(dialNumber); - switchMenu(callPage); - currentState = "dialing"; - startTimer(callTime); - }; + var dialNumber = mainPage.getObj("textArea").textObj.text; + + send({ + "api_namespace" : "tizen.ivi.dialer", + "type": "method", + "command": "dial_number", + "number": dialNumber + }); + + initCallPage("dialing"); + updateNumber(dialNumber); + switchMenu(callPage); + currentState = "dialing"; + startTimer(callTime); + }; } function initMainPage() { - var textAreaHeight = screenHeight / 4; - var buttonPadWidth = screenWidth * 0.75; - var buttonPadHeight = screenHeight - textAreaHeight - 60; - + var textAreaHeight = screenHeight / 4; + var buttonPadWidth = screenWidth * 0.75; + var buttonPadHeight = screenHeight - textAreaHeight - 60; + addButtonGrid(20, textAreaHeight + 40, buttonPadWidth, buttonPadHeight); mainPage.addObject(mainCtx, "image", {"name" : "textArea", "image": images.textArea, "text" : "", "textTemplate" : phoneNumberTextTemplate, "xLoc" : 20, "yLoc" : 20, "width" : buttonPadWidth, "height" : textAreaHeight} ); - + mainPage.addObject(mainCtx, "image", {"name" : "buttonBG","image": images.buttonBG, "xLoc" : 20, "yLoc" : textAreaHeight + 40, "width" : buttonPadWidth, "height" : buttonPadHeight} ); - var myobj = mainPage.addObject(mainCtx, "shape", {"name" : "optionsBG", "xLoc" : 40 + buttonPadWidth, "yLoc" : 0, "width" : (screenWidth * 0.25) - 60, "height" : screenHeight, "fillStyle" : "#51504F", "strokeStyle" : "#373736", "lineWidth" : 5}) - - + var myobj = mainPage.addObject(mainCtx, "shape", {"name" : "optionsBG", "xLoc" : 40 + buttonPadWidth, "yLoc" : 0, "width" : (screenWidth * 0.25) - 60, "height" : screenHeight, + "fillStyle" : "#51504F", "strokeStyle" : "#373736", "lineWidth" : 5}) + + } diff --git a/js/menuObject.js b/js/menuObject.js index 7e9a72b..083ba97 100644 --- a/js/menuObject.js +++ b/js/menuObject.js @@ -25,56 +25,56 @@ MenuObject.prototype.addObject = function(ctx, objType, args) { if (ctx && objType) { - var tmpObj; - var index = -1; - - for (var i = 0; i < this.canvasObjs.length; i++) - { - if (this.canvasObjs[i].name === args.name) - { - index = i; - break; - } - } - - if (index !== -1) - { - this.canvasObjs[index].update(args); - } - else - { - switch(objType) - { - case "button": - tmpObj = new ButtonObject(ctx, args); - if (tmpObj) - this.canvasObjs.push(tmpObj); - break; - case "text": - tmpObj = new TextObject(ctx, args); - if (tmpObj) - this.canvasObjs.push(tmpObj); - break; - case "image": - tmpObj = new ImageObject(ctx, args); - if (tmpObj) - this.canvasObjs.push(tmpObj); - break; - case "shape": - tmpObj = new ShapeObject(ctx, args); - if (tmpObj) - this.canvasObjs.push(tmpObj); - break; - default: - console.log("Error: Unknown object type = " + objType); - break; - } - } + var tmpObj; + var index = -1; + + for (var i = 0; i < this.canvasObjs.length; i++) + { + if (this.canvasObjs[i].name === args.name) + { + index = i; + break; + } + } + + if (index !== -1) + { + this.canvasObjs[index].update(args); + } + else + { + switch(objType) + { + case "button": + tmpObj = new ButtonObject(ctx, args); + if (tmpObj) + this.canvasObjs.push(tmpObj); + break; + case "text": + tmpObj = new TextObject(ctx, args); + if (tmpObj) + this.canvasObjs.push(tmpObj); + break; + case "image": + tmpObj = new ImageObject(ctx, args); + if (tmpObj) + this.canvasObjs.push(tmpObj); + break; + case "shape": + tmpObj = new ShapeObject(ctx, args); + if (tmpObj) + this.canvasObjs.push(tmpObj); + break; + default: + console.log("Error: Unknown object type = " + objType); + break; + } + } } if (tmpObj) - return this.canvasObjs[this.canvasObjs.length - 1]; - else if (index > -1) - return this.canvasObjs[index]; + return this.canvasObjs[this.canvasObjs.length - 1]; + else if (index > -1) + return this.canvasObjs[index]; } MenuObject.prototype.addIconGrid = function(iconNames, iconImages, iconWidth, iconHeight, spacer, minXSpace, gridYPosition) @@ -87,15 +87,15 @@ MenuObject.prototype.addIconGrid = function(iconNames, iconImages, iconWidth, ic for (var i = 0; i < iconImages.length; i++) { - this.addObject(buttonCtx, "button", {"name" : iconNames[i], "image": iconImages[i], "xLoc" : iconXPosition, "yLoc" : iconYPosition, "width" : iconWidth, "height" : iconHeight} ); - - iconXPosition += (iconWidth + spacer); - - if ((i + 1) % iconsPerRow === 0) - { - iconYPosition += (iconHeight + spacer); - iconXPosition = firstIconXPosition; - } + this.addObject(buttonCtx, "button", {"name" : iconNames[i], "image": iconImages[i], "xLoc" : iconXPosition, "yLoc" : iconYPosition, "width" : iconWidth, "height" : iconHeight} ); + + iconXPosition += (iconWidth + spacer); + + if ((i + 1) % iconsPerRow === 0) + { + iconYPosition += (iconHeight + spacer); + iconXPosition = firstIconXPosition; + } } } @@ -111,17 +111,17 @@ MenuObject.prototype.drawMenu = function() { if (this.visible != false) { - clearCanvas(); - for (var canvObjIter = 0; canvObjIter < this.canvasObjs.length; canvObjIter++) + clearCanvas(); + for (var canvObjIter = 0; canvObjIter < this.canvasObjs.length; canvObjIter++) + { + if (this.canvasObjs[canvObjIter].visible != false) { - if (this.canvasObjs[canvObjIter].visible != false) - { - if (this.canvasObjs[canvObjIter].largeShadow) - this.canvasObjs[canvObjIter].drawLargeShadow(); - else - this.canvasObjs[canvObjIter].drawObj(); - } + if (this.canvasObjs[canvObjIter].largeShadow) + this.canvasObjs[canvObjIter].drawLargeShadow(); + else + this.canvasObjs[canvObjIter].drawObj(); } + } } } @@ -129,11 +129,11 @@ MenuObject.prototype.editText= function(objName, newData) { for (var i = 0; i < this.canvasObjs.length; i++) { - if (this.canvasObjs[i].name === objName) - { - this.canvasObjs[i].text = newData; - i = this.canvasObjs.length; - } + if (this.canvasObjs[i].name === objName) + { + this.canvasObjs[i].text = newData; + i = this.canvasObjs.length; + } } } @@ -141,9 +141,9 @@ MenuObject.prototype.getObj= function(objName) { for (var i = 0; i < this.canvasObjs.length; i++) { - if (this.canvasObjs[i].name === objName) - { - return this.canvasObjs[i]; - } + if (this.canvasObjs[i].name === objName) + { + return this.canvasObjs[i]; + } } } diff --git a/js/shapeObject.js b/js/shapeObject.js index 9fa325e..2e24178 100644 --- a/js/shapeObject.js +++ b/js/shapeObject.js @@ -35,7 +35,7 @@ ShapeObject = function(ctx, args) ShapeObject.prototype.update = function(args) { - if (args.name) {this.name = args.name;} + if (args.name) {this.name = args.name;} if (args.img) {this.img = args.img;} if (args.xLoc) {this.xLoc = args.xLoc;} if (args.yLoc) {this.yLoc = args.yLoc;} @@ -46,8 +46,8 @@ ShapeObject.prototype.update = function(args) if (args.text) {this.textObj.update({"text" : args.text, "xLoc" : (args.xLoc + (args.width / 2)), "yLoc" : (args.yLoc + (args.height / 2)), "zLoc" : (args.zLoc + 1), "template" : args.textTemplate})} if (args.visible) {this.visible = args.visible;} if (args.onClick) {this.onClick = args.onClick;} - - /* Img shadow styles */ + + /* Img shadow styles */ if (args.shadowOffsetX) {this.shadowOffsetX = args.shadowOffsetX;} if (args.shadowOffsetY) {this.shadowOffsetY = args.shadowOffsetY;} if (args.shadowBlur) {this.shadowBlur = args.shadowBlur;} @@ -58,21 +58,21 @@ ShapeObject.prototype.drawObj = function() { if (this.visible) { - this.ctx.save(); + this.ctx.save(); + + this.ctx.fillStyle = this.fillStyle; + this.ctx.fillRect(this.xLoc, this.yLoc, this.width, this.height); + + if (this.strokeStyle) + { + this.ctx.strokeStyle = this.strokeStyle; + this.ctx.lineWidth = this.lineWidth; + this.ctx.strokeRect(this.xLoc, this.yLoc, this.width, this.height); + } + + if (this.textObj != undefined) + this.textObj.drawObj(); - this.ctx.fillStyle = this.fillStyle; - this.ctx.fillRect(this.xLoc, this.yLoc, this.width, this.height); - - if (this.strokeStyle) - { - this.ctx.strokeStyle = this.strokeStyle; - this.ctx.lineWidth = this.lineWidth; - this.ctx.strokeRect(this.xLoc, this.yLoc, this.width, this.height); - } - - if (this.textObj != undefined) - this.textObj.drawObj(); - - this.ctx.restore(); + this.ctx.restore(); } }