remotecontrol/www/js/keyboard.js

   1 /*
   2  * Copyright (c) 2012, Intel Corporation.
   3  *
   4  * This program is licensed under the terms and conditions of the
   5  * Apache License, version 2.0.  The full text of the Apache License is at
   6  * http://www.apache.org/licenses/LICENSE-2.0
   7  *
   8  */
   9 var keyboardButtonTemplate = {"font" : "bold 20pt Arial", "lineWidth" : 0.5, "fillStyle" : "black", "textAlign" : "center","textBaseline" : "middle",
  10     "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "black"};
  11
  12 var spacer;
  13
  14 Keyboard = function()
  15 {
  16     this.visible = false;
  17     this.topYLoc = screenHeight - (screenHeight / 3) - spacer;
  18     this.shift = false;
  19     this.keysRow = [];
  20
  21     this.keysRow[0] =
  22     {
  23         chars : new Array('q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'),
  24         keycodes: new Array(81, 87, 69, 82, 84, 89, 85, 73, 79, 80),
  25         size : new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1),
  26         totalSize : 10
  27     }
  28     this.keysRow[1] =
  29     {
  30         chars : new Array('a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'),
  31         keycodes: new Array(65, 83, 68, 70, 71, 72, 74, 75, 76),
  32         size : new Array(1, 1, 1, 1, 1, 1, 1, 1, 1),
  33         totalSize : 9
  34     }
  35     this.keysRow[2] =
  36     {
  37         chars : new Array('shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'bksp'),
  38         keycodes: new Array(16, 90, 88, 67, 86, 66, 78, 77, 8),
  39         size : new Array(1.5, 1, 1, 1, 1, 1, 1, 1, 1.5),
  40         totalSize : 10
  41     }
  42
  43     this.keysRow[3] =
  44     {
  45         chars : new Array('123', ',', 'Space', '.', 'Enter'),
  46         keycodes: new Array(-1, 188, 32, 190, 13),
  47         size : new Array(2, 1, 3, 1, 2),
  48         totalSize : 9
  49     }
  50
  51     this.keys = [];
  52
  53     this.init();
  54 }
  55
  56 Keyboard.prototype.init = function()
  57 {
  58     this.keys = [];
  59     this.topYLoc = screenHeight - (screenHeight / 3);
  60     spacer = screenWidth * 0.01;
  61     var minXSpace = screenWidth * 0.01;
  62     var iconWidth = ((screenWidth - minXSpace * 2) / this.keysRow[0].chars.length) - spacer + (spacer / this.keysRow[0].chars.length);
  63     var iconYPosition = screenHeight - (screenHeight / 3);
  64     var iconHeight = (screenHeight - iconYPosition - (spacer * 3)) / (this.keysRow.length + 1);
  65     var iconsPerRow, iconXPosition, firstIconXPosition;
  66
  67     for (var y = 0; y < this.keysRow.length; y++)
  68     {
  69         iconXPosition = ((screenWidth) - (this.keysRow[y].totalSize * (iconWidth + spacer)) ) / 2 > minXSpace ? ((screenWidth) - (this.keysRow[y].totalSize * (iconWidth + spacer)) ) / 2 : minXSpace;
  70         firstIconXPosition = iconXPosition;
  71
  72         for (var i = 0; i < this.keysRow[y].chars.length; i++)
  73         {
  74             tmpObj = new ButtonObject(keyboardCtx,
  75                     {
  76                     "name" : this.keysRow[y].chars[i],
  77                     "name" : this.shift ? this.keysRow[y].chars[i].toUpperCase() : this.keysRow[y].chars[i],
  78                     "keycode" : this.keysRow[y].keycodes[i],
  79                     "image" : images.keyboardButton,
  80                     "xLoc" : iconXPosition,
  81                     "yLoc" : iconYPosition,
  82                     "width" : iconWidth * this.keysRow[y].size[i],
  83                     "height" : iconHeight,
  84                     "onClick" : function()
  85                     {
  86                     // ignore shift key
  87                     if (this.keycode != 16)
  88                     {
  89                     modifier = (virtualKeyboard.shift) ? 16 : -1;
  90
  91                     send(
  92                         {
  93                         "api_namespace" : "tizen.ivi.remotecontrol",
  94                         "type" : "command",
  95                         "command" : "key_press",
  96                         "key_id" : "dom_key_press",
  97                         "key_value" : this.keycode,
  98                         "key_modifier" : modifier
  99                         });
 100                     }
 101                     }
 102                     });
 103
 104             tmpObj.addText(this.shift ? this.keysRow[y].chars[i].toUpperCase() : this.keysRow[y].chars[i], keyboardButtonTemplate);
 105
 106             if (tmpObj)
 107                 this.keys.push(tmpObj);
 108
 109             iconXPosition += iconWidth * this.keysRow[y].size[i] + spacer;
 110         }
 111
 112         iconYPosition += (iconHeight + spacer);
 113     }
 114
 115     tmpObj = new ButtonObject(keyboardCtx,
 116             {
 117             "name" : "close",
 118             "keycode" : -1,
 119             "image" : images.del,
 120             "xLoc" : 0,
 121             "yLoc" : screenHeight - 30,
 122             "width" : 30,
 123             "height" : 30,
 124             "onClick" : function()
 125             {
 126             virtualKeyboard.hide();
 127             }
 128
 129             });
 130
 131     if (tmpObj)
 132         this.keys.push(tmpObj);
 133 }
 134
 135 Keyboard.prototype.show = function()
 136 {
 137     this.visible = true;
 138     keyboardCtx.clearRect(0, 0, screenWidth, screenHeight);
 139   //  keyboardCtx.fillStyle = "red";
 140     buttonCtx.fillRect(0,0,0,0);
 141     keyboardCtx.drawImage(images.chrome, 0, screenHeight - (screenHeight / 3) - spacer, screenWidth, screenHeight);
 142
 143     for (var canvObjIter = 0; canvObjIter < this.keys.length; canvObjIter++)
 144     {
 145         this.keys[canvObjIter].drawObj();
 146     }
 147
 148 }
 149
 150 Keyboard.prototype.hide = function()
 151 {
 152     this.visible = false;
 153     keyboardCtx.clearRect(0, 0, screenWidth, screenHeight);
 154 }
 155
 156 Keyboard.prototype.handleClick = function(event)
 157 {
 158     var currItem;
 159     for ( i = 0; i < this.keys.length; i++)
 160     {
 161         if (this.keys[i] != undefined)
 162         {
 163             currItem = this.keys[i];
 164             if (event.clientX > currItem.xLoc && event.clientX < (currItem.xLoc + currItem.width))
 165             {
 166                 if (event.clientY > currItem.yLoc && event.clientY < (currItem.yLoc + currItem.height))
 167                 {
 168                     currItem.onClick();
 169
 170                     if (currItem.name === "shift" || currItem.name === "SHIFT")
 171                     {
 172                         this.shift = !this.shift;
 173                         this.init();
 174                         this.show();
 175                     }
 176                     else if ( !(currItem.name === "Enter" || currItem.name === "ENTER") && !(currItem.name === "close" || currItem.name === "CLOSE"))
 177                     {
 178                         this.shift = false;
 179                         this.init();
 180                         this.show();
 181                     }
 182
 183                     else
 184                     {
 185                         this.shift = false;
 186                         this.hide();
 187                         this.init();
 188                     }
 189
 190                     return currItem;
 191                 }
 192             }
 193         }
 194     }
 195 }