[draguboard] fix initialization of appRect

apps/draguboard/lib.js

@@ -2,9 +2,9 @@ exports.input = function(options) {
   options = options||{};
   var text = options.text;
   if ("string"!=typeof text) text="";
-    let settings = require('Storage').readJSON('draguboard.json',1)||{}
+  let settings = require('Storage').readJSON('draguboard.json',1)||{};
 
-    var R = Bangle.appRect;
+  var R;
   const paramToColor = (param) => g.toColor(`#${settings[param].toString(16).padStart(3,0)}`);
   var BGCOLOR = g.theme.bg;
   var HLCOLOR = settings.Highlight ? paramToColor("Highlight") : g.theme.fg;
@@ -16,17 +16,16 @@ exports.input = function(options) {
   var LEFT = "IJKLMNOPQ";
   var MIDDLE = "ABCDEFGH";
   var RIGHT = "RSTUVWXYZ";
-    var MIDPADDING = 35;
 
   var NUM = ' 1234567890!?,.-@';
-    var NUMPADDING = ((R.x2)-6*NUM.length)/2;
-    var showCharY = (R.y2)/3;
   var rectHeight = 40;
   var vLength = LEFT.length;
+  var MIDPADDING;
+  var NUMPADDING;
+  var showCharY;
   var middleWidth;
   var middleStart;
-    var topStart = R.y+12;
+  var topStart;
-  
   g.setFontAlign(-1, -1, 0);
 
   function drawAbcRow() {
@@ -37,20 +36,22 @@ exports.input = function(options) {
     g.setColor(ABCCOLOR);
     g.setFont('6x8:2x1');
     g.drawString(RIGHT.split("").join("\n\n"), R.x2-28, topStart);
-      g.drawString(LEFT.split("").join("\n\n"), 22, topStart);
+    g.drawString(LEFT.split("").join("\n\n"), R.x+22, topStart);
     g.setFont('6x8:1x2');
     var spaced = MIDDLE.split("").join(" ");
     middleWidth = g.stringWidth(spaced);
     middleStart = (R.x2-middleWidth)/2;
     g.drawString(spaced, (R.x2-middleWidth)/2, (R.y2)/2);
     g.fillRect(MIDPADDING, (R.y2)-26, (R.x2-MIDPADDING), (R.y2));
-      g.fillRect(0, R.y, 12, R.y2);
+    // Draw left and right drag rectangles
+    g.fillRect(R.x, R.y, 12, R.y2);
     g.fillRect(R.x2, R.y, R.x2-12, R.y2);
   }
 
   function drawNumRow() {
     g.setFont('6x8:1x2');
     g.setColor(NUMCOLOR);
+    NUMPADDING = (R.x2-g.stringWidth(NUM))/2;
     g.drawString(NUM, NUMPADDING, (R.y2)/4);
     g.drawString("<-", NUMPADDING+10, showCharY+5);
     g.drawString("->", R.x2-(NUMPADDING+20), showCharY+5);
@@ -61,32 +62,32 @@ exports.input = function(options) {
   function updateTopString() {
     g.setFont(SMALLFONT);
     g.setColor(BGCOLOR);
-      g.fillRect(0,4+20,176,13+20);
+    g.fillRect(R.x,R.y,R.x2,R.y+9);
     var rectLen = text.length<27? text.length*6:27*6;
     g.setColor(0.7,0,0);
-      //cursor position
+    //draw cursor at end of text
-      g.fillRect(rectLen+5,4+20,rectLen+10,13+20);
+    g.fillRect(R.x+rectLen+5,R.y,R.x+rectLen+10,R.y+9);
     g.setColor(HLCOLOR);
-      g.drawString(text.length<=27? text.substr(-27, 27) : '<- '+text.substr(-24,24), 5, 5+20);
+    g.drawString(text.length<=27? text : '<- '+text.substr(-24,24), R.x+5, R.y+1);
+  }
+
+  function showChars(chars) {
+    "ram";
+
+    // clear large character
+    g.setColor(BGCOLOR);
+    g.fillRect(R.x+65,showCharY,R.x2-65,showCharY+28);
+
+    // show new large character
+    g.setColor(HLCOLOR);
+    g.setFont(BIGFONT);
+    g.drawString(chars, (R.x2 - g.stringWidth(chars))/2, showCharY+4);
   }
 
   var charPos;
   var char;
   var prevChar;
 
-    function showChars(char) {
-      "ram";
-  
-      // clear large character
-      g.setColor(BGCOLOR);
-      g.fillRect(65,showCharY,R.y2-65,showCharY+28);
-  
-      // show new large character
-      g.setColor(HLCOLOR);
-      g.setFont(BIGFONT);
-      g.drawString(char, (R.x2)/2 - g.stringWidth(char)/2, showCharY +4);
-    }
-  
   function moveCharPos(list, select, posPixels) {
     charPos = Math.min(list.length-1, Math.max(0, Math.floor(posPixels)));
     char = list.charAt(charPos);
@@ -100,10 +101,6 @@ exports.input = function(options) {
     }
   }
 
-    drawAbcRow();
-    drawNumRow();
-    updateTopString();
-  
   return new Promise((resolve,reject) => {
     // Interpret touch input
     Bangle.setUI({
@@ -143,5 +140,14 @@ exports.input = function(options) {
         }
       }
     });
+
+    R = Bangle.appRect;
+    MIDPADDING = R.x + 35;
+    showCharY = (R.y2)/3;
+    topStart = R.y+12;
+
+    drawAbcRow();
+    drawNumRow();
+    updateTopString();
   });
 };