Added a popup for when a modem is not available. While the popup is visible it disabl...

Call page now disappears once the call is ended. Minor fixes to timer.

diff --git a/js/buttonObject.js b/js/buttonObject.js
index c75f28a..7fa88f0 100644 (file)
--- a/js/buttonObject.js
+++ b/js/buttonObject.js
@@ -48,7 +48,7 @@ ButtonObject.prototype.update = function(args)
     if (args.width) {this.width = args.width;}
     if (args.height) {this.height = args.height;}
     if (args.ctx) {this.ctx = ctx;}
-    if (args.visible) {this.visible = args.visible;}
+    if (args.visible != undefined) {this.visible = args.visible;}
     if (args.onClick) {this.onClick = args.onClick;}   
     if (args.onHold) {this.onHold = args.onHold;}      
     if (args.onMove) {this.onMove = args.onMove;}      

diff --git a/js/callPage.js b/js/callPage.js
index e42d43a..24dcd6c 100644 (file)
--- a/js/callPage.js
+++ b/js/callPage.js
@@ -32,24 +32,27 @@ function updateNumber(number)
     callPage.getObj("displayedNumber").text = number;          
 }
 
-function startTimer(timeText)
+function startTimer()
 {
     var today = new Date();
     startTime = today.getTime();
 
+    if (timerInterval)
+       clearInterval(timerInterval);
+
     timerInterval = setInterval( function() {
            var today = new Date();
            var currentTime = today.getTime();
            callTime = Math.floor((currentTime - startTime) / 1000);
-       
-               var hours = Math.floor(callTime / 3600);
-               callTime -= hours * 3600;
-               var mins = Math.floor(callTime / 60);
-               var secs = callTime - (mins * 60) < 10 ? "0" + (callTime - (mins * 60)).toString() : (callTime - (mins * 60)).toString();
-               
-               hours = hours > 10 ? hours : "0" + hours.toString();
-               mins = mins > 10 ? mins : "0" + mins.toString();
-               
+
+           var hours = Math.floor(callTime / 3600);
+           callTime -= hours * 3600;
+           var mins = Math.floor(callTime / 60);
+           var secs = callTime - (mins * 60) < 10 ? "0" + (callTime - (mins * 60)).toString() : (callTime - (mins * 60)).toString();
+
+           hours = hours > 10 ? hours : "0" + hours.toString();
+           mins = mins > 10 ? mins : "0" + mins.toString();
+
            callPage.getObj("callTime").text = hours + ":" + mins + ":" + secs;         
            callPage.drawMenu();
            }, 1000);
@@ -58,49 +61,51 @@ function startTimer(timeText)
 function stopTimer()
 {
     clearInterval(timerInterval);
+    timerInterval = undefined;
+    startTime = 0;
+    callTime = 0;
 }
 
 function initButtons(initState)
 {
-       var incomingBar = callPage.getObj("incomingBar");
-       if (initState == "dialing" || initState == "activeCall")
-               var buttonWidth = screenWidth * 0.6;
+    var incomingBar = callPage.getObj("incomingBar");
+    if (initState == "dialing" || initState == "activeCall")
+       var buttonWidth = screenWidth * 0.6;
     else
-               var buttonWidth = (screenWidth * 0.8) / 2;
-       
-       var buttonHeight = screenHeight * 0.15;
-       
-        var endCallButton;
+       var buttonWidth = (screenWidth * 0.8) / 2;
+
+    var buttonHeight = screenHeight * 0.15;
+
+    var endCallButton;
 
     if (initState == "dialing" || initState == "activeCall")
     {
-               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;                                                                                            
+       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} );                                                                                                    
-               
-               acceptCallButton.onClick = function(){
-                   try {
-                       console.log("Accepting call")
-                               activeCall.accept();
-                   } catch (err) {
-                               console.log("Failed to accept call");
-                   }
-                   
-                   currentState = "activeCall";
-                       startTimer();
-                   initButtons("activeCall");
-                    callPage.drawMenu();
-                    activeCall.accept();
-               };
+       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} );                                                                                                    
+
+       acceptCallButton.onClick = function(){
+           try {
+               console.log("Accepting call")
+                   activeCall.accept();
+           } catch (err) {
+               console.log("Failed to accept call");
+           }
+
+           currentState = "activeCall";                        
+           initButtons("activeCall");
+           callPage.drawMenu();
+           activeCall.accept();
+       };
 
     }          
 
@@ -131,11 +136,8 @@ function initCallPage(initState)
 
     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});
-       
-       initButtons(initState);
-   
-}
-
 
+    initButtons(initState);
 
+}
 

diff --git a/js/canvasObject.js b/js/canvasObject.js
index 70f3fbf..8223de5 100644 (file)
--- a/js/canvasObject.js
+++ b/js/canvasObject.js
@@ -20,13 +20,16 @@ function objectsAtLocation(pageObj, xLoc, yLoc)
        {
            currItem = pageObj.canvasObjs[i];
 
-           if (xLoc > currItem.xLoc && xLoc < (currItem.xLoc + currItem.width))
+           if (currItem.visible)
            {
-               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 (xLoc > currItem.xLoc && xLoc < (currItem.xLoc + currItem.width))
+               {
+                   if (yLoc > currItem.yLoc && yLoc < (currItem.yLoc + currItem.height))
+                   {               
+                       if (prevItem == undefined || (Number(currItem.ctx.canvas.style.zIndex) > Number(prevItem.ctx.canvas.style.zIndex)) || 
+                               ((Number(currItem.ctx.canvas.style.zIndex) === Number(prevItem.ctx.canvas.style.zIndex)) && (currItem.zLoc > prevItem.zLoc)))
+                           prevItem = currItem;
+                   }
                }
            }
        }
@@ -41,6 +44,7 @@ function clearCanvas()
 {
     buttonCtx.clearRect(0,0, screenWidth, screenHeight);
     mainCtx.clearRect(0,0, screenWidth, screenHeight);   
+    mouseCtx.clearRect(0,0, screenWidth, screenHeight);
 }
 
 function drawRoundedRectangle(ctx, xLoc, yLoc, width, height, cornerRadius, strokeStyle, fillStyle, lineWidth)

diff --git a/js/dialer.js b/js/dialer.js
index 0d739be..bb81aea 100644 (file)
--- a/js/dialer.js
+++ b/js/dialer.js
@@ -8,7 +8,7 @@
  */
 
 var mainCanvas, bgCanvas, buttonCanvas;
-var mainCtx, bgCtx, buttonCtx;
+var mainCtx, bgCtx, buttonCtx, mouseCtx;
 var drawn = false;
 var screenHeight;
 var screenWidth;
@@ -16,6 +16,7 @@ var images = [];
 var objects = [];
 var mouseDrag = false, mouseDown = false;
 var prevXMouse, prevYMouse;
+var clicksDisabled = true;
 
 var mainPageTitleTemplate = {"font" : "bold 40pt Arial", "lineWidth" : 2.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "center",  
     "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 32, "shadowColor" : "rgba(0, 0, 110, 1.0)"};      
@@ -35,17 +36,20 @@ var currentState = "idle";
 
 var activeCall = null;
 var activeService = null;
+var noModems = false;
 
 function onMouseDown(event) 
 {      
+    if (!clicksDisabled)
+    {
+       var selectedObj = objectsAtLocation(currentPage, event.clientX, event.clientY);         
 
-    var selectedObj = objectsAtLocation(currentPage, event.clientX, event.clientY);            
-
-    if (selectedObj && selectedObj.onClick)
-       selectedObj.onClick(event);
+       if (selectedObj && selectedObj.onClick)
+           selectedObj.onClick(event);
 
-    prevXMouse = event.clientX;
-    prevYMouse = event.clientY;
+       prevXMouse = event.clientX;
+       prevYMouse = event.clientY;
+    }
 }
 
 function onMouseMove(event) 
@@ -108,66 +112,34 @@ function init()
     var listener = {
        "onAccountUpdated": function(account) {}, 
        "onAccountAdded": function(account) { 
-            if (activeService == null) {
-                activeAccount = account;
-                activeService = tizen.call.getCallService(activeAccount.id);
-            }
-            
-            // TODO: Remove banner warning of no available modems
-            console.log("Modem available for account: " + activeAccount.id);
+           if (activeService == null) {
+               activeAccount = account;
+               activeService = tizen.call.getCallService(activeAccount.id);
+           }
+
+           noModems = false;
+           initMainPage();
+           switchMenu(mainPage);               
+           clicksDisabled = false;
+
+
+           console.log("Modem available for account: " + activeAccount.id);
        }, 
        "onAccountRemoved": function(id) {
-            if (activeAccount && activeAccount.id == id) {
-                // grab any account available
-                activeAccount = tizen.account.findServices('')[0];
-                try {
-                    activeService = tizen.call.getCallService(activeAccount.id);
-                } catch (err) {
-                    // TODO: Add banner letting the user know that calls can not
-                    // be made since there are no active modems
-                    console.log("No available modems!");
-                }
-            }
+           if (activeAccount && activeAccount.id == id) {
+               // grab any account available
+               activeAccount = tizen.account.findServices('')[0];
+               try {
+                   activeService = tizen.call.getCallService(activeAccount.id);
+               } catch (err) {
+                   noModems = true;
+                   initMainPage();
+                   switchMenu(mainPage);                                   
+                   console.log("No available modems!");
+               }
+           }
        }
     }
-    tizen.account.addAccountListener(listener);
-
-    if (tizen.account.findServices('').length == 0) {
-        // TODO: Add banner letting the user know that calls can not
-        // be made since there are no active modems
-        console.log("No available modems!");
-    }
-
-    var handler = {
-        onIncoming: function(call) {
-        activeCall = call;
-           currentState = "incomingCall";
-           updateNumber(call.callData.LineIdentification);
-           initCallPage("incomingCall");
-           switchMenu(callPage);
-        },
-        onDialing: function(call) {
-            activeCall = call;
-        },
-        onAlerting: function(call) {
-            activeCall = call;
-        },
-        onDisconnected: function(call, disconnectReason) {
-            activeCall = null;
-        },
-        onDisconnecting: function(call) {
-        },
-        onAccepted: function(call) {
-            activeCall = call;
-        },
-        onActivated: function(call) {
-        },
-        onError: function(call){
-            console.log("onError: "); console.log(call);
-        }
-    };
-    tizen.call.addCallHandler(handler);
-
     mainCanvas = document.getElementById("mainCanvas");
     bgCanvas = document.getElementById("bgCanvas");
     buttonCanvas = document.getElementById("buttonCanvas");
@@ -176,9 +148,10 @@ function init()
     mainCtx = mainCanvas.getContext("2d");
     bgCtx = bgCanvas.getContext("2d");
     buttonCtx = buttonCanvas.getContext("2d");
+    mouseCtx = mouseClicksLayer.getContext("2d");
 
     var sources = {
-          phoneIcon: "images/bluetooth-smartphone.png",
+phoneIcon: "images/bluetooth-smartphone.png",
           callButton: "images/ivi_btn-call.png",
           callButtonPressed: "images/ivi_btn-call-active.png",
           closeButton: "images/ivi_btn-close.png",
@@ -215,14 +188,62 @@ function init()
     mouseClicksLayer.addEventListener('mousedown', onMouseDown);
     mouseClicksLayer.addEventListener('mousemove', onMouseMove);
     mouseClicksLayer.addEventListener('mouseup', onMouseUp);
+
+    tizen.account.addAccountListener(listener);
+    
+    setTimeout(function(){
+               if (tizen.account.findServices('').length == 0) 
+               {
+                   noModems = true;
+                   initMainPage();
+                   switchMenu(mainPage);
+                   console.log("No available modems!");       
+               }
+           },1000);
+
+    var handler = {
+onIncoming: function(call) {
+               activeCall = call;
+               currentState = "incomingCall";
+               updateNumber(call.callData.LineIdentification);
+               initCallPage("incomingCall");
+               switchMenu(callPage);
+           },
+onDialing: function(call) {
+              activeCall = call;
+          },
+onAlerting: function(call) {
+               activeCall = call;
+           },
+onDisconnected: function(call, disconnectReason) {
+                   activeCall = null;
+                   stopTimer();
+                   switchMenu(mainPage);
+               },
+onDisconnecting: function(call) {
+                    stopTimer();
+                    switchMenu(mainPage);
+                },
+onAccepted: function(call) {
+               startTimer();
+               activeCall = call;
+           },
+onActivated: function(call) {
+                startTimer();
+            },
+onError: function(call){
+            console.log("onError: "); console.log(call);
+        }
+    };
+    tizen.call.addCallHandler(handler);
 }
 
 function switchMenu(nextMenu)
 {   
-    currentPage.visible = false;
+    currentPage.visible = false;               
     currentPage = nextMenu; 
     currentPage.visible = true;
-    currentPage.drawMenu();
+    currentPage.drawMenu();    
 }
 
 function initPages()

diff --git a/js/mainPage.js b/js/mainPage.js
index 989c155..7ddcf53 100644 (file)
--- a/js/mainPage.js
+++ b/js/mainPage.js
@@ -10,9 +10,11 @@
 var phoneNumberTextTemplate = {"font" : "bold 40pt Arial", "lineWidth" : 2.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "center",  "textBaseline" : "middle",
     "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 32, "shadowColor" : "rgba(0,100,150, 0.6)"};      
 
-
 var sideTextTemplate = {"font" : "bold 40pt Arial", "lineWidth" : 2.5, "fillStyle" : "grey", "strokeStyle" : "white", "textAlign" : "center",  "textBaseline" : "middle",
-    "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 52, "shadowColor" : "rgba(0, 0, 110, 1.0)"};      
+    "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 52, "shadowColor" : "rgba(0, 0, 110, 1.0)", "wordWrap" : true};   
+
+var errorTextTemplate = {"font" : "bold 50px Arial", "lineWidth" : 2.5, "fillStyle" : "red", "strokeStyle" : "rgba(150, 0, 0, 1.0)", "textAlign" : "center",  "textBaseline" : "middle",
+    "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 52, "shadowColor" : "rgba(0, 0, 0, 1.0)", "wordWrap" : true};     
 
 function addButtonGrid (gridX, gridY, gridWidth, gridHeight)
 {              
@@ -80,17 +82,16 @@ function addButtonGrid (gridX, gridY, gridWidth, gridHeight)
     button.onClick = function(){                           
        var dialNumber = mainPage.getObj("textArea").textObj.text;
 
-        try {
-            activeService.makeCall(dialNumber);
-        } catch (err) {
-            console.log("Attempting to make call without an available modem");
-            return;
-        }
+       try {
+           activeService.makeCall(dialNumber);
+       } catch (err) {
+           console.log("Attempting to make call without an available modem");
+           return;
+       }
        initCallPage("dialing");
        updateNumber(dialNumber);
        switchMenu(callPage);           
-       currentState = "dialing";           
-       startTimer(callTime);
+       currentState = "dialing";       
     };         
 }
 
@@ -99,6 +100,7 @@ function initMainPage()
     var textAreaHeight = screenHeight / 4;
     var buttonPadWidth = screenWidth * 0.75;
     var buttonPadHeight = screenHeight - textAreaHeight - 60;
+    errorTextTemplate.font = "bold " + ((screenHeight * 0.6) / 6) + "px Arial";
 
     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} );       
@@ -106,7 +108,14 @@ function initMainPage()
     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})    
+           "fillStyle" : "#51504F", "strokeStyle" : "#373736", "lineWidth" : 5});    
+
+    /************************************** Lock Screen Objects *************************************/
+
+    var fog = mainPage.addObject(mouseCtx, "shape", {"name" : "fog", "xLoc" : 0, "yLoc" : 0, "zLoc" : 3, "width" : screenWidth, 
+           "height" : screenHeight, "fillStyle" : "rgba(100,100,100,0.7)", "visible" : noModems}); 
 
+    var textBox = mainPage.addObject(mouseCtx, "shape", {"name" : "textBox", "rounded" : true, "xLoc" : screenWidth * 0.1, "yLoc" : screenHeight * 0.2, "zLoc" : 4, "width" : screenWidth * 0.8, 
+           "height" : screenHeight * 0.6, "fillStyle" : "white", "strokeStyle" : "#85322A", "lineWidth" : 35, "visible" : noModems, "text" : "No modems available!", "textTemplate" : errorTextTemplate});    
 
 }

diff --git a/js/menuObject.js b/js/menuObject.js
index 0626607..200677b 100644 (file)
--- a/js/menuObject.js
+++ b/js/menuObject.js
@@ -102,20 +102,20 @@ MenuObject.prototype.addIconGrid = function(iconNames, iconImages, iconWidth, ic
 function addBackButton(menuObj, xLoc, yLoc, width, height)
 {
     var obj = {
-        "name" : "back", 
-        "image": images.home, 
-        "xLoc" : xLoc, 
-        "yLoc" : yLoc, 
-        "width" : width, 
-        "height" : height, 
-        "shadowOffsetX" : 0, 
-        "shadowOffsetY" : 0, 
-        "shadowBlur" : 12, 
-        "shadowColor" : "black", 
-        "onClick" : function() { 
-            switchMenu(mainMenu);
-            // TODO: Add call to trigger the homescreen to be raised
-        }
+       "name" : "back", 
+       "image": images.home, 
+       "xLoc" : xLoc, 
+       "yLoc" : yLoc, 
+       "width" : width, 
+       "height" : height, 
+       "shadowOffsetX" : 0, 
+       "shadowOffsetY" : 0, 
+       "shadowBlur" : 12, 
+       "shadowColor" : "black", 
+       "onClick" : function() { 
+           switchMenu(mainMenu);
+           // TODO: Add call to trigger the homescreen to be raised
+       }
     }
     menuObj.addObject(buttonCtx, obj);
 }

diff --git a/js/shapeObject.js b/js/shapeObject.js
index 2e24178..f17f524 100644 (file)
--- a/js/shapeObject.js
+++ b/js/shapeObject.js
@@ -12,6 +12,7 @@ ShapeObject = function(ctx, args)
     /* General */
     this.name = args.name;
     this.type = "shape";
+    this.rounded = args.rounded;
     this.img = args.image;
     this.xLoc = args.xLoc;
     this.yLoc = args.yLoc;
@@ -22,7 +23,7 @@ ShapeObject = function(ctx, args)
     this.lineWidth = args.lineWidth;
     this.fillStyle = args.fillStyle;
     this.ctx = ctx;
-    this.textObj = args.text != undefined ? new TextObject(this.ctx,{"text" : args.text, "xLoc" : (this.xLoc + (this.width / 2)), "yLoc" : (this.yLoc + (this.height / 2)), "zLoc" : (this.zLoc + 1), "template" : args.textTemplate}) : undefined;
+    this.textObj = args.text != undefined ? new TextObject(this.ctx,{"text" : args.text, "xLoc" : (this.xLoc + (this.width / 2)), "yLoc" : (this.yLoc + (this.height / 2)), "zLoc" : (this.zLoc + 1), "width" : args.width, "height" : args.height, "template" : args.textTemplate}) : undefined;
     this.visible = args.visible == undefined ? true : args.visible;
     this.onClick = undefined;          
 
@@ -43,8 +44,8 @@ ShapeObject.prototype.update = function(args)
     if (args.width) {this.width = args.width;}
     if (args.height) {this.height = args.height;}
     if (args.ctx) {this.ctx = ctx;}
-    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.text) {this.textObj.update({"text" : args.text, "xLoc" : (args.xLoc + (args.width / 2)), "yLoc" : (args.yLoc + (args.height / 2)), "zLoc" : (args.zLoc + 1), "width" : args.width, "height" : args.height, "template" : args.textTemplate})}
+    if (args.visible != undefined) {this.visible = args.visible;}
     if (args.onClick) {this.onClick = args.onClick;}   
 
     /* Img shadow styles */
@@ -60,18 +61,31 @@ ShapeObject.prototype.drawObj = function()
     {          
        this.ctx.save();
 
-       this.ctx.fillStyle = this.fillStyle;
-       this.ctx.fillRect(this.xLoc, this.yLoc, this.width, this.height);
+       if (!this.rounded)
+       {
+           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.strokeStyle)
+       }
+       else
        {
-           this.ctx.strokeStyle = this.strokeStyle;            
-           this.ctx.lineWidth = this.lineWidth;
-           this.ctx.strokeRect(this.xLoc, this.yLoc, this.width, this.height);
+           drawRoundedRectangle(this.ctx, this.xLoc, this.yLoc, this.width, this.height, 30, this.strokeStyle, this.fillStyle, this.lineWidth)
        }
 
        if (this.textObj != undefined)
-           this.textObj.drawObj();                     
+       {
+           if (this.textObj.largeShadow)
+               this.textObj.drawLargeShadow();
+           else
+               this.textObj.drawObj();
+       }                       
 
        this.ctx.restore();
     }

diff --git a/js/textObject.js b/js/textObject.js
index 5f5d440..8678d97 100644 (file)
--- a/js/textObject.js
+++ b/js/textObject.js
@@ -39,7 +39,7 @@ TextObject = function(ctx, args)
     this.shadowColor = args.shadowColor;
 
     if (args.template)
-               this.applyTemplate(args.template);
+       this.applyTemplate(args.template);
 }
 
 TextObject.prototype.update = function(args)
@@ -57,7 +57,7 @@ TextObject.prototype.update = function(args)
     if (args.drawVertical) {this.drawVertical = args.drawVertical;}
     if (args.largeShadow) {this.largeShadow = args.largeShadow;}
     if (args.ctx) {this.ctx = ctx;}
-    if (args.visible) {this.visible = args.visible;}
+    if (args.visible != undefined) {this.visible = args.visible;}
     if (args.onClick) {this.onClick = args.onClick;}           
 
     /* Text styles */
@@ -80,49 +80,49 @@ TextObject.prototype.drawObj = function()
 {
     if (this.visible)
     {          
-               this.ctx.save();
-       
-               this.ctx.font = this.font;
-               this.ctx.fillStyle = this.fillStyle;
-               this.ctx.lineWidth = this.lineWidth ;
-               this.ctx.strokeStyle = this.strokeStyle;
-               this.ctx.textAlign = this.textAlign;
-               this.ctx.textBaseline = this.textBaseline;
-               this.ctx.shadowOffsetX = this.shadowOffsetX;   
-               this.ctx.shadowOffsetY = this.shadowOffsetY;   
-               this.ctx.shadowBlur = this.shadowBlur;   
-               this.ctx.shadowColor = this.shadowColor;   
-                       
-               if (this.drawVertical)
-               {
-                       var nextChar;
-                       var tmpStr = this.text;
-                       var vertYLoc = this.yLoc;
-                       for (var i = 0; i < this.text.length; i++)
-                       {
-                               nextChar = tmpStr.charAt(0);
-                               if (this.fillStyle)
-                                       this.ctx.fillText(nextChar, this.xLoc, vertYLoc);       
-       
-                               if (this.strokeStyle)
-                                       this.ctx.strokeText(nextChar, this.xLoc, vertYLoc);
-                               
-                               vertYLoc += 110;        
-                               tmpStr = tmpStr.slice(1);                                                       
-                       }
-               }
-               else if (this.wordWrap)
-                   this.wrapText();
-               else
-               {
-                   if (this.fillStyle)
-                               this.ctx.fillText(this.text, this.xLoc, this.yLoc);     
-       
-                   if (this.strokeStyle)
-                               this.ctx.strokeText(this.text, this.xLoc, this.yLoc);   
-               }       
-               
-               this.ctx.restore();
+       this.ctx.save();
+
+       this.ctx.font = this.font;
+       this.ctx.fillStyle = this.fillStyle;
+       this.ctx.lineWidth = this.lineWidth ;
+       this.ctx.strokeStyle = this.strokeStyle;
+       this.ctx.textAlign = this.textAlign;
+       this.ctx.textBaseline = this.textBaseline;
+       this.ctx.shadowOffsetX = this.shadowOffsetX;   
+       this.ctx.shadowOffsetY = this.shadowOffsetY;   
+       this.ctx.shadowBlur = this.shadowBlur;   
+       this.ctx.shadowColor = this.shadowColor;   
+
+       if (this.drawVertical)
+       {
+           var nextChar;
+           var tmpStr = this.text;
+           var vertYLoc = this.yLoc;
+           for (var i = 0; i < this.text.length; i++)
+           {
+               nextChar = tmpStr.charAt(0);
+               if (this.fillStyle)
+                   this.ctx.fillText(nextChar, this.xLoc, vertYLoc);   
+
+               if (this.strokeStyle)
+                   this.ctx.strokeText(nextChar, this.xLoc, vertYLoc);
+
+               vertYLoc += 110;        
+               tmpStr = tmpStr.slice(1);                                                       
+           }
+       }
+       else if (this.wordWrap)
+           this.wrapText();
+       else
+       {
+           if (this.fillStyle)
+               this.ctx.fillText(this.text, this.xLoc, this.yLoc);     
+
+           if (this.strokeStyle)
+               this.ctx.strokeText(this.text, this.xLoc, this.yLoc);   
+       }       
+
+       this.ctx.restore();
     }
 }
 
@@ -178,30 +178,47 @@ TextObject.prototype.wrapText = function()
 
     for(var i = 0; i < words.length; i++) 
     {
-               var testLine = line + words[i] + " ";
-               var metrics = this.ctx.measureText(testLine);
-               var testWidth = metrics.width;
-               if(testWidth > this.width) 
-               {
-                   if (this.fillStyle)
-                       this.ctx.fillText(line, this.xLoc, tmpYloc);    
-       
-                   if (this.strokeStyle)
-                       this.ctx.strokeText(line, this.xLoc, tmpYloc);  
-       
-                   line = words[i] + " ";
-                   tmpYloc += this.lineHeight;
-                   this.height += this.lineHeight;  
-               }
-               else 
-               {
-                   line = testLine;
-               }
+       var testLine = line + words[i] + " ";
+       var metrics = this.ctx.measureText(testLine);
+       var testWidth = metrics.width;
+       if(testWidth > this.width) 
+       {
+           if (this.fillStyle)
+               this.ctx.fillText(line, this.xLoc, tmpYloc);    
+
+           if (this.strokeStyle)
+               this.ctx.strokeText(line, this.xLoc, tmpYloc);  
+
+           var pxLoc = this.font.search("px");
+           var fsStart = pxLoc;
+           var fontSize = 0;
+
+           while (pxLoc > 0 && this.font[fsStart] !== ' ')
+               fsStart--;
+
+           if (fsStart !== 0)
+               fsStart++;
+
+           while (fsStart != pxLoc)
+           {
+               fontSize += this.font[fsStart];
+               fsStart++;
+           }
+
+           fontSize = Number(fontSize);
+           line = words[i] + " ";
+           tmpYloc += fontSize;
+           this.height += fontSize;
+       }
+       else 
+       {
+           line = testLine;
+       }
     }
-    
+
     if (this.fillStyle)
-               this.ctx.fillText(line, this.xLoc, tmpYloc);    
+       this.ctx.fillText(line, this.xLoc, tmpYloc);    
 
     if (this.strokeStyle)
-               this.ctx.strokeText(line, this.xLoc, tmpYloc);  
+       this.ctx.strokeText(line, this.xLoc, tmpYloc);  
 }