dragboard v0.03

apps/dragboard/ChangeLog

@@ -1,2 +1,3 @@
 0.01: New App!
 0.02: Added some missing code.
+0.03: Made the code shorter and somewhat more readable by writing some functions. Also made it work as a library where it returns the text once finished. The keyboard is now made to exit correctly when the 'back' event is called. The keyboard now uses theme colors correctly, although it still looks best with dark theme. The numbers row is now solidly green - except for highlights.

apps/dragboard/README.md

@@ -9,15 +9,10 @@ Swiping between the different fields is possible!
 The drag in Dragboard is a nod to the javascript 'drag' event, which is used to select the characters. Also, you can't help but feel somewhat glamorous and risque when this is your keyboard!
 
 Known bugs: 
-- Initially developed for use with dark theme set on Bangle.js 2 - looks aweful with other themes.
+- Initially developed for use with dark theme set on Bangle.js 2 - that is still the preferred way to view it although it now works with other themes.
-- Keyboard is not exited correctly when trying to close the keyboard.  
-- Text is drawn over system back button.
 - Text does not wrap.   
 
 To do: 
-- Make keyboard theme agnostic.
-- Keep number/punctuation color one color.
-- Handle system back button in some way.
 - Make text wrap and/or scroll up/sideways once available space runs out.
-- Optimize code. Further split it up in functions. Add 'ram' keyword where suitable.
+- Optimize code. Further split it up in functions.
 - Possibly provide a dragboard.settings.js file

apps/dragboard/lib.js

@@ -7,340 +7,260 @@ exports.input = function(options) {
   var text = options.text;
   if ("string"!=typeof text) text="";
   
-  //Draw the alphabet on the screen
+  var BGCOLOR = g.theme.bg;
+  var HLCOLOR = g.theme.fg;
+  var ABCCOLOR = g.toColor(1,0,0);//'#FF0000';
+  var NUMCOLOR = g.toColor(0,1,0);//'#00FF00';
+  var BIGFONT = '6x8:3';
+  var BIGFONTWIDTH = parseInt(BIGFONT.charAt(0)*parseInt(BIGFONT.charAt(-1)));
+  var SMALLFONT = '6x8:1';
+  var SMALLFONTWIDTH = parseInt(SMALLFONT.charAt(0)*parseInt(SMALLFONT.charAt(-1)));
 
-  var abc = 'abcdefghijklmnopqrstuvwxyz'.toUpperCase();
+  var ABC = 'abcdefghijklmnopqrstuvwxyz'.toUpperCase();
-  var fontSize = "6x8";
+  var ABCPADDING = (g.getWidth()-6*ABC.length)/2;
-  //var xStep = 6;
-  var abcPadding = (g.getWidth()-6*abc.length)/2;
 
-  var numPunct = ' 1234567890!?,.- ';
+  var NUM = ' 1234567890!?,.- ';
-  var numPunctHidden = ' 1234567890!?,.- ';
+  var NUMHIDDEN = ' 1234567890!?,.- ';
-  var numPunctPadding = (g.getWidth()-6*numPunct.length)/2;
+  var NUMPADDING = (g.getWidth()-6*NUM.length)/2;
 
   var rectHeight = 40;
 
-  var bgColor = [0,0,0];
-  var HLColor = [1,1,1];
-  var abcColor = [1,0,0];
-  var numPunctColor = [0,1,0];
-  var delLast;
-  var spaceLast;
 
-  function drawABC() {
+  var delSpaceLast;
+
+  function drawAbcRow() {
     g.clear();
-    g.setFont(fontSize);
+    g.setFont(SMALLFONT);
-    g.setColor(1,0,0);
+    g.setColor(ABCCOLOR);
-    g.drawString(abc, abcPadding, g.getHeight()/2);
+    g.drawString(ABC, ABCPADDING, g.getHeight()/2);
     g.fillRect(0, g.getHeight()-26, g.getWidth(), g.getHeight());
   }
 
-  function drawNumPunct() {
+  function drawNumRow() {
-    g.setFont(fontSize);
+    g.setFont(SMALLFONT);
-    g.setColor(0,1,1);
+    g.setColor(NUMCOLOR);
-    g.drawString(numPunct, numPunctPadding, g.getHeight()/4);
+    g.drawString(NUM, NUMPADDING, g.getHeight()/4);
 
-    g.fillRect(numPunctPadding, g.getHeight()-rectHeight*4/3, g.getWidth()-numPunctPadding, g.getHeight()-rectHeight*2/3);
+    g.fillRect(NUMPADDING, g.getHeight()-rectHeight*4/3, g.getWidth()-NUMPADDING, g.getHeight()-rectHeight*2/3);
   }
 
   function initMarker() {
     g.setColor(0.5,0,0);
-    g.fillRect(5,5,11,13);
+    g.fillRect(3,4+20,11,13+20);
-    g.setColor(1,1,1);
+    g.setColor(HLCOLOR);
   }
 
   function updateTopString() {
-    g.setColor(0,0,0);
+    "ram"
-    g.fillRect(0,5,176,13);
+    g.setColor(BGCOLOR);
+    g.fillRect(0,4+20,176,13+20);
     g.setColor(0.2,0,0);
-    g.fillRect(5,5,5+text.length*6,13);
+    g.fillRect(3,4+20,5+text.length*6,13+20);
     g.setColor(0.7,0,0);
-    g.fillRect(text.length*6+5,5,10+text.length*6,13);
+    g.fillRect(text.length*6+5,4+20,10+text.length*6,13+20);
     g.setColor(1,1,1);
-    g.drawString(text, 5, 5);
+    g.drawString(text, 5, 5+20);
   }
 
-  drawABC();
+  drawAbcRow();
-  drawNumPunct();
+  drawNumRow();
   initMarker();
 
-  var charHL;
+  var abcHL;
-  var charHLPrev = -10;
+  var abcHLPrev = -10;
-  var numPunctHL;
+  var numHL;
-  var numPunctHLPrev = -10;
+  var numHLPrev = -10;
   var type = '';
   var typePrev = '';
   var largeCharOffset = 6;
-  var letterCase = 1;
   
+  function resetChars(char, HLPrev, typePadding, heightDivisor, rowColor) {
+    "ram"
+    // Small character in list
+    g.setColor(rowColor);
+    g.setFont(SMALLFONT);
+    g.drawString(char, typePadding + HLPrev*6, g.getHeight()/heightDivisor);
+    // Large character
+    g.setColor(BGCOLOR);
+    g.fillRect(0,g.getHeight()/3,176,g.getHeight()/3+24);
+    //g.drawString(charSet.charAt(HLPrev), typePadding + HLPrev*6 -largeCharOffset, g.getHeight()/3);; //Old implementation where I find the shape and place of letter to remove instead of just a rectangle.
+    // mark in the list
+  }
+  function showChars(char, HL, typePadding, heightDivisor) {
+    "ram"
+    // mark in the list
+    g.setColor(HLCOLOR);
+    g.setFont(SMALLFONT);
+    if (char != 'del' && char != 'space') g.drawString(char, typePadding + HL*6, g.getHeight()/heightDivisor);
+    // show new large character
+    g.setFont(BIGFONT);
+    g.drawString(char, typePadding + HL*6 -largeCharOffset, g.getHeight()/3);
+    g.setFont(SMALLFONT);
+  }
+  
+  function changeCase(abcHL) {
+    g.setColor(BGCOLOR);
+    g.drawString(ABC, ABCPADDING, g.getHeight()/2);
+    if (ABC.charAt(abcHL) == ABC.charAt(abcHL).toUpperCase()) ABC = ABC.toLowerCase();
+    else ABC = ABC.toUpperCase();
+    g.setColor(ABCCOLOR);
+    g.drawString(ABC, ABCPADDING, g.getHeight()/2);
+  }
+  return new Promise((resolve,reject) => {
   // Interpret touch input
-  Bangle.on('drag', function(event) {
+    Bangle.setUI({
-    g.setFont('6x8');
+    mode: 'custom',
-
+    back: ()=>{
-    // hide delete sign
+            Bangle.setUI();
-    if (delLast == 1) {
+            g.clearRect(Bangle.appRect);
-      g.setColor(0,0,0);
+            resolve(text);
-      g.setFont('6x8:3');
+            },
-      g.drawString('del', g.getWidth()/2 -27, g.getHeight()/3);
+    drag: function(event) {
-      g.setFont('6x8');
-      delLast = 0;
-    }
-
-    //hide space sign
-    if (spaceLast == 1) {
-      g.setColor(0,0,0);
-      g.setFont('6x8:3');
-      g.drawString('space', g.getWidth()/2 -6*3*5/2, g.getHeight()/3);
-      g.setFont('6x8');
-      spaceLast = 0;
-    }
-
 
       // ABCDEFGHIJKLMNOPQRSTUVWXYZ
       // Choose character by draging along red rectangle at bottom of screen
       if (event.y >= ( g.getHeight() - 12 )) {
         // Translate x-position to character
-      if (event.x < abcPadding) { charHL = 0; }
+        if (event.x < ABCPADDING) { abcHL = 0; }
-      else if (event.x >= 176-abcPadding) { charHL = 25; }
+        else if (event.x >= 176-ABCPADDING) { abcHL = 25; }
-      else { charHL = Math.floor((event.x-abcPadding)/6); }
+        else { abcHL = Math.floor((event.x-ABCPADDING)/6); }
 
         // Datastream for development purposes
-      //print(event.x, event.y, event.b, abc.charAt(charHL), abc.charAt(charHLPrev));
+        //print(event.x, event.y, event.b, ABC.charAt(abcHL), ABC.charAt(abcHLPrev));
 
         // Unmark previous character and mark the current one...
         // Handling switching between letters and numbers/punctuation
-      if (typePrev != 'abc') {
+        if (typePrev != 'abc') resetChars(NUM.charAt(numHLPrev), numHLPrev, NUMPADDING, 4, NUMCOLOR);
-        // Small character in list
-        g.setColor(0,1,0);
-        g.drawString(numPunct.charAt(numPunctHLPrev), numPunctPadding + numPunctHLPrev*6, g.getHeight()/4);
-        // Large character
-        g.setColor(0,0,0);
-        g.setFont('6x8:3');
-        g.drawString(numPunct.charAt(numPunctHLPrev), numPunctPadding + numPunctHLPrev*6 -largeCharOffset, g.getHeight()/3);
-        g.setFont('6x8');
-      }
 
-      if (charHL != charHLPrev) {
+        if (abcHL != abcHLPrev) {
-        // unmark in the list
+          resetChars(ABC.charAt(abcHLPrev), abcHLPrev, ABCPADDING, 2, ABCCOLOR);
-        g.setColor(1,0,0);
+          showChars(ABC.charAt(abcHL), abcHL, ABCPADDING, 2);
-        g.drawString(abc.charAt(charHLPrev), abcPadding + charHLPrev*6, g.getHeight()/2);
-        // hide previous large character
-        g.setColor(0,0,0);
-        g.fillRect(0,g.getHeight()/3,176,g.getHeight()/3+24);
-        g.setColor([0,0,0]);
-        g.setFont('6x8:3');
-        g.drawString(abc.charAt(charHLPrev), abcPadding + charHLPrev*6 -largeCharOffset, g.getHeight()/3);
-        g.setFont('6x8');
-        // mark in the list
-        g.setColor(1,1,1);
-        g.setFont('6x8');
-        g.drawString(abc.charAt(charHL), abcPadding + charHL*6, g.getHeight()/2);
-        // show new large character
-        //g.setColor(1,1,1);
-        g.setFont('6x8:3');
-        g.drawString(abc.charAt(charHL), abcPadding + charHL*6 -largeCharOffset, g.getHeight()/3);
-        g.setFont('6x8');
           }
         // Print string at top of screen
         if (event.b == 0) {
-          text = text + abc.charAt(charHL);
+          text = text + ABC.charAt(abcHL);
           updateTopString();
 
           // Autoswitching letter case
-        if (abc.charAt(charHL) == abc.charAt(charHL).toUpperCase()) {
+          if (ABC.charAt(abcHL) == ABC.charAt(abcHL).toUpperCase()) changeCase(abcHL);
-          g.setColor(0,0,0);
-          g.drawString(abc, abcPadding, g.getHeight()/2);
-          abc = abc.toLowerCase();
-          g.setColor(1,0,0);
-          g.drawString(abc, abcPadding, g.getHeight()/2);
-          letterCase = 0
-        }
-          //print(text);
         }
         // Update previous character to current one
-      charHLPrev = charHL;
+        abcHLPrev = abcHL;
         typePrev = 'abc';
       }
       
+      
+      
+      
+      
+      
+      
+      
+
       // 12345678901234567890
       // Choose number or puctuation by draging on green rectangle
       else if ((event.y < ( g.getHeight() - 12 )) && (event.y > ( g.getHeight() - 52 ))) {
         // Translate x-position to character
-      if (event.x < numPunctPadding) { numPunctHL = 0; }
+        if (event.x < NUMPADDING) { numHL = 0; }
-      else if (event.x > 176-numPunctPadding) { numPunctHL = numPunct.length-1; }
+        else if (event.x > 176-NUMPADDING) { numHL = NUM.length-1; }
-      else { numPunctHL = Math.floor((event.x-numPunctPadding)/6); }
+        else { numHL = Math.floor((event.x-NUMPADDING)/6); }
 
         // Datastream for development  purposes
-      //print(event.x, event.y, event.b, numPunct.charAt(numPunctHL), numPunct.charAt(numPunctHLPrev));
+        //print(event.x, event.y, event.b, NUM.charAt(numHL), NUM.charAt(numHLPrev));
 
         // Unmark previous character and mark the current one...
         // Handling switching between letters and numbers/punctuation
-      if (typePrev != 'numPunct') {
+        if (typePrev != 'num') resetChars(ABC.charAt(abcHLPrev), abcHLPrev, ABCPADDING, 2, ABCCOLOR);
-        // Small character in list
+        
-        g.setColor(1,0,0);
+        if (numHL != numHLPrev) {
-        g.drawString(abc.charAt(charHLPrev), abcPadding + charHLPrev*6, g.getHeight()/2);
+          resetChars(NUM.charAt(numHLPrev), numHLPrev, NUMPADDING, 4, NUMCOLOR);
-        // Large character
+          showChars(NUM.charAt(numHL), numHL, NUMPADDING, 4);
-        g.setColor(0,0,0);
-        g.setFont('6x8:3');
-        g.drawString(abc.charAt(charHLPrev), abcPadding + charHLPrev*6 -largeCharOffset, g.getHeight()/3);
-        g.setFont('6x8');
-      }
-      if (numPunctHL != numPunctHLPrev) {
-        // unmark in the list
-        g.setColor(0,1,0);
-        g.drawString(numPunct.charAt(numPunctHLPrev), numPunctPadding + numPunctHLPrev*6, g.getHeight()/4);
-        // hide previous large character
-        g.setColor(0,0,0);
-        g.fillRect(0,g.getHeight()/3,176,g.getHeight()/3+24);
-        g.setColor(0,0,0);
-        g.setFont('6x8:3');
-        g.drawString(numPunct.charAt(numPunctHLPrev), numPunctPadding + numPunctHLPrev*6 -largeCharOffset, g.getHeight()/3);
-        g.setFont('6x8');
-        // mark in the list
-        g.setColor(1,1,1);
-        g.setFont('6x8');
-        g.drawString(numPunct.charAt(numPunctHL), numPunctPadding + numPunctHL*6, g.getHeight()/4);
-        // show new large character
-        //g.setColor(1,1,1);
-        g.setFont('6x8:3');
-        g.drawString(numPunct.charAt(numPunctHL), numPunctPadding + numPunctHL*6 -largeCharOffset, g.getHeight()/3);
-        g.setFont('6x8');
           }
         // Print string at top of screen
         if (event.b == 0) {
-        g.setColor(1,1,1);
+          g.setColor(HLCOLOR);
           // Backspace if releasing before list of numbers/punctuation
-        if (event.x < numPunctPadding) {
+          if (event.x < NUMPADDING) {
             // show delete sign
-          g.setColor(1,1,1);
+            showChars('del', 0, g.getWidth()/2 +6 -27 , 4);
-          g.setFont('6x8:3');
+            delSpaceLast = 1;
-          g.drawString('del', g.getWidth()/2 -27, g.getHeight()/3);
-          g.setFont('6x8');
-          delLast = 1;
-
             text = text.slice(0, -1);
             updateTopString();
             //print(text);
           }
           // Append space if releasing after list of numbers/punctuation
-        else if (event.x > g.getWidth()-numPunctPadding) {
+          else if (event.x > g.getWidth()-NUMPADDING) {
             //show space sign
-          g.setColor(1,1,1);
+            showChars('space', 0, g.getWidth()/2 +6 -6*3*5/2 , 4);
-          g.setFont('6x8:3');
+            delSpaceLast = 1;
-          g.drawString('space', g.getWidth()/2 -6*3*5/2, g.getHeight()/3);
-          g.setFont('6x8');
-          spaceLast = 1;
-
             text = text + ' ';
             updateTopString();
             //print(text);
           }
           // Append selected number/punctuation
           else {
-          text = text + numPunctHidden.charAt(numPunctHL);
+            text = text + NUMHIDDEN.charAt(numHL);
             updateTopString();
 
             // Autoswitching letter case
-          if ((text.charAt(text.length-1) == '.') || (text.charAt(text.length-1) == '!')) {
+            if ((text.charAt(text.length-1) == '.') || (text.charAt(text.length-1) == '!')) changeCase();
-            g.setColor(0,0,0);
-            g.drawString(abc, abcPadding, g.getHeight()/2);
-            abc = abc.toUpperCase();
-            g.setColor(1,0,0);
-            g.drawString(abc, abcPadding, g.getHeight()/2);
-            letterCase = 1;
-
-        }
-          //print(text);
           }
         }
         // Update previous character to current one
-      numPunctHLPrev = numPunctHL;
+        numHLPrev = numHL;
-      typePrev = 'numPunct';
+        typePrev = 'num';
       }
+      
+      
+      
+      
+      
+      
+      
+      
       // Make a space or backspace by swiping right or left on screen above green rectangle
       else {
         if (event.b == 0) {
-        g.setColor(1,1,1);
+          g.setColor(HLCOLOR);
           if (event.x < g.getWidth()/2) {
-          // unmark character in the list
+            resetChars(ABC.charAt(abcHLPrev), abcHLPrev, ABCPADDING, 2, ABCCOLOR);
-          g.setColor(1,0,0);
+            resetChars(NUM.charAt(numHLPrev), numHLPrev, NUMPADDING, 4, NUMCOLOR);
-          g.drawString(abc.charAt(charHLPrev), abcPadding + charHLPrev*6, g.getHeight()/2);
-
-          // unmark number/punctuation in the list
-          g.setColor(0,1,0);
-          g.drawString(numPunct.charAt(numPunctHLPrev), numPunctPadding + numPunctHLPrev*6, g.getHeight()/4);
-
-          // hide previous large character
-          g.setColor([0,0,0]);
-          g.setFont('6x8:3');
-          g.drawString(abc.charAt(charHLPrev), abcPadding + charHLPrev*6 -largeCharOffset, g.getHeight()/3);
-
-          // hide previous large character
-          g.setColor(0,0,0);
-          g.setFont('6x8:3');
-          g.drawString(numPunct.charAt(numPunctHLPrev), numPunctPadding + numPunctHLPrev*6 -largeCharOffset, g.getHeight()/3);
 
             // show delete sign
-          g.setColor(1,1,1);
+            showChars('del', 0, g.getWidth()/2 +6 -27 , 4);
-          g.setFont('6x8:3');
+            delSpaceLast = 1;
-          g.drawString('del', g.getWidth()/2 -27, g.getHeight()/3);
-          g.setFont('6x8');
-          delLast = 1;
 
             // Backspace and draw string upper right corner
             text = text.slice(0, -1);
             updateTopString();
-          if (text.length==0) {
+            if (text.length==0) changeCase(abcHL);
-            g.setColor(0,0,0);
-            g.drawString(abc, abcPadding, g.getHeight()/2);
-            abc = abc.toUpperCase();
-            g.setColor(1,0,0);
-            g.drawString(abc, abcPadding, g.getHeight()/2);
-            letterCase = 1;
-          }
             //print(text, 'undid');
           }
           else {
-          // unmark character in the list
+            resetChars(ABC.charAt(abcHLPrev), abcHLPrev, ABCPADDING, 2, ABCCOLOR);
-          g.setColor(1,0,0);
+            resetChars(NUM.charAt(numHLPrev), numHLPrev, NUMPADDING, 4, NUMCOLOR);
-          g.drawString(abc.charAt(charHLPrev), abcPadding + charHLPrev*6, g.getHeight()/2);
-
-          // unmark number/punctuation in the list
-          g.setColor(0,1,0);
-          g.drawString(numPunct.charAt(numPunctHLPrev), numPunctPadding + numPunctHLPrev*6, g.getHeight()/4);
-
-          // hide previous large character
-          g.setColor([0,0,0]);
-          g.setFont('6x8:3');
-          g.drawString(abc.charAt(charHLPrev), abcPadding + charHLPrev*6 -largeCharOffset, g.getHeight()/3);
-
-          // hide previous large character
-          g.setColor(0,0,0);
-          g.setFont('6x8:3');
-          g.drawString(numPunct.charAt(numPunctHLPrev), numPunctPadding + numPunctHLPrev*6 -largeCharOffset, g.getHeight()/3);
 
             //show space sign
-          g.setColor(1,1,1);
+            showChars('space', 0, g.getWidth()/2 +6 -6*3*5/2 , 4);
-          g.setFont('6x8:3');
+            delSpaceLast = 1;
-          g.drawString('space', g.getWidth()/2 -6*3*5/2, g.getHeight()/3);
-          g.setFont('6x8');
-          spaceLast = 1;
 
             // Append space and draw string upper right corner
-          text = text + numPunctHidden.charAt(0);
+            text = text + NUMHIDDEN.charAt(0);
             updateTopString();
             //print(text, 'made space');
           }
         }
       }
+    }
    });
-
+});
-  return new Promise((resolve,reject) => {
+/*  return new Promise((resolve,reject) => {
     Bangle.setUI({mode:"custom", back:()=>{
       Bangle.setUI();
       g.clearRect(Bangle.appRect);
+      Bangle.setUI();
       resolve(text);
     }});
-  });
+  }); */
 
 };

apps/dragboard/metadata.json

@@ -1,6 +1,6 @@
 { "id": "dragboard",
   "name": "Dragboard",
-  "version":"0.02",
+  "version":"0.03",
   "description": "A library for text input via swiping keyboard",
   "icon": "app.png",
   "type":"textinput",