Merge pull request #1830 from thyttan/thyttan-kbmulti

[kbmulti] Various changes

apps/kbmulti/ChangeLog

@@ -1 +1,2 @@
 0.01: New keyboard
+0.02: Introduce setting "Show help button?". Make setting firstLaunch invisible by removing corresponding code from settings.js. Add marker that shows when character selection timeout has run out. Display opened text on launch when editing existing text string. Perfect horizontal alignment of buttons. Tweak help message letter casing.

apps/kbmulti/README.md

@@ -10,7 +10,8 @@ Uses the multitap keypad logic originally from here: http://www.espruino.com/Mor
 
 ![](screenshot_1.png)
 ![](screenshot_2.png)
+![](screenshot_3.png)
 
 Written by: [Sir Indy](https://github.com/sir-indy) and [Thyttan](https://github.com/thyttan)
 
-For support and discussion please post in the [Bangle JS Forum](http://forum.espruino.com/microcosms/1424/)
+For support and discussion please post in the [Bangle JS Forum](http://forum.espruino.com/microcosms/1424/)

apps/kbmulti/lib.js

@@ -8,6 +8,7 @@ exports.input = function(options) {
   var settings = require('Storage').readJSON("kbmulti.settings.json", true) || {};
   if (settings.firstLaunch===undefined) { settings.firstLaunch = true; }
   if (settings.charTimeout===undefined) { settings.charTimeout = 500; }
+  if (settings.showHelpBtn===undefined) { settings.showHelpBtn = true; }
 
   var fontSize = "6x15";
   var Layout = require("Layout");
@@ -16,26 +17,30 @@ exports.input = function(options) {
     "4":"GHI4","5":"JKL5","6":"MNO6",
     "7":"PQRS7","8":"TUV80","9":"WXYZ9",
   };
-  var helpMessage = 'swipe:\nRight: Space\nLeft:Backspace\nUp/Down: Caps lock\n';
+  var helpMessage = 'Swipe:\nRight: Space\nLeft:Backspace\nUp/Down: Caps lock\n';
 
   var charTimeout; // timeout after a key is pressed
   var charCurrent; // current character (index in letters)
   var charIndex; // index in letters[charCurrent]
   var caps = true;
   var layout;
+  var btnWidth = g.getWidth()/3
 
-  function displayText() {
+  function displayText(hideMarker) {
     layout.clear(layout.text);
-    layout.text.label = text.slice(-12);
+    layout.text.label = text.slice(settings.showHelpBtn ? -11 : -13) + (hideMarker ? " " : "_");
     layout.render(layout.text);
   }
 
-  function backspace() {
-    // remove the timeout if we had one
+  function deactivateTimeout(charTimeout) {
     if (charTimeout!==undefined) {
       clearTimeout(charTimeout);
       charTimeout = undefined;
     }
+  }
+
+  function backspace() {
+    deactivateTimeout(charTimeout);
     text = text.slice(0, -1);
     newCharacter();
   }
@@ -55,11 +60,7 @@ exports.input = function(options) {
   }
 
   function onKeyPad(key) {
-    // remove the timeout if we had one
-    if (charTimeout!==undefined) {
-      clearTimeout(charTimeout);
-      charTimeout = undefined;
-    }
+    deactivateTimeout(charTimeout);
     // work out which char was pressed
     if (key==charCurrent) {
       charIndex = (charIndex+1) % letters[charCurrent].length;
@@ -69,12 +70,12 @@ exports.input = function(options) {
     }
     var newLetter = letters[charCurrent][charIndex];
     text += (caps ? newLetter.toUpperCase() : newLetter.toLowerCase());
-    displayText();
     // set a timeout
     charTimeout = setTimeout(function() {
       charTimeout = undefined;
       newCharacter();
     }, settings.charTimeout);
+    displayText(charTimeout);
   }
 
   function onSwipe(dirLeftRight, dirUpDown) {
@@ -104,25 +105,26 @@ exports.input = function(options) {
     type:"v", c: [
       {type:"h", c: [
         {type:"txt", font:"12x20", label:text.slice(-12), id:"text", fillx:1},
-        {type:"btn", font:'6x8', label:'?', cb: l=>onHelp(resolve,reject), filly:1 },
+        (settings.showHelpBtn ? {type:"btn", font:'6x8', label:'?', cb: l=>onHelp(resolve,reject), filly:1 } : {}),
       ]},
       {type:"h", c: [
-        {type:"btn", font:fontSize, label:letters[1], cb: l=>onKeyPad(1), id:'1', fillx:1, filly:1 },
-        {type:"btn", font:fontSize, label:letters[2], cb: l=>onKeyPad(2), id:'2', fillx:1, filly:1 },
-        {type:"btn", font:fontSize, label:letters[3], cb: l=>onKeyPad(3), id:'3', fillx:1, filly:1 },
+        {type:"btn", font:fontSize, label:letters[1], cb: l=>onKeyPad(1), id:'1', width:btnWidth, filly:1 },
+        {type:"btn", font:fontSize, label:letters[2], cb: l=>onKeyPad(2), id:'2', width:btnWidth, filly:1 },
+        {type:"btn", font:fontSize, label:letters[3], cb: l=>onKeyPad(3), id:'3', width:btnWidth, filly:1 },
       ]},
       {type:"h", filly:1, c: [
-        {type:"btn", font:fontSize, label:letters[4], cb: l=>onKeyPad(4), id:'4', fillx:1, filly:1 },
-        {type:"btn", font:fontSize, label:letters[5], cb: l=>onKeyPad(5), id:'5', fillx:1, filly:1 },
-        {type:"btn", font:fontSize, label:letters[6], cb: l=>onKeyPad(6), id:'6', fillx:1, filly:1 },
+        {type:"btn", font:fontSize, label:letters[4], cb: l=>onKeyPad(4), id:'4', width:btnWidth, filly:1 },
+        {type:"btn", font:fontSize, label:letters[5], cb: l=>onKeyPad(5), id:'5', width:btnWidth, filly:1 },
+        {type:"btn", font:fontSize, label:letters[6], cb: l=>onKeyPad(6), id:'6', width:btnWidth, filly:1 },
       ]},
       {type:"h", filly:1, c: [
-        {type:"btn", font:fontSize, label:letters[7], cb: l=>onKeyPad(7), id:'7', fillx:1, filly:1 },
-        {type:"btn", font:fontSize, label:letters[8], cb: l=>onKeyPad(8), id:'8', fillx:1, filly:1 },
-        {type:"btn", font:fontSize, label:letters[9], cb: l=>onKeyPad(9), id:'9', fillx:1, filly:1 },
+        {type:"btn", font:fontSize, label:letters[7], cb: l=>onKeyPad(7), id:'7', width:btnWidth, filly:1 },
+        {type:"btn", font:fontSize, label:letters[8], cb: l=>onKeyPad(8), id:'8', width:btnWidth, filly:1 },
+        {type:"btn", font:fontSize, label:letters[9], cb: l=>onKeyPad(9), id:'9', width:btnWidth, filly:1 },
       ]},
     ]
     },{back: ()=>{
+      deactivateTimeout(charTimeout);
       Bangle.setUI();
       Bangle.removeListener("swipe", onSwipe);
       g.clearRect(Bangle.appRect);
@@ -132,12 +134,13 @@ exports.input = function(options) {
 
   return new Promise((resolve,reject) => {
     g.clearRect(Bangle.appRect);
-    if (settings.firstLaunch) { 
-      onHelp(resolve,reject); 
+    if (settings.firstLaunch) {
+      onHelp(resolve,reject);
       settings.firstLaunch = false;
       require('Storage').writeJSON("kbmulti.settings.json", settings);
     } else {
       generateLayout(resolve,reject);
+      displayText(false);
       Bangle.on('swipe', onSwipe);
       layout.render();
     }

apps/kbmulti/metadata.json

@@ -1,6 +1,6 @@
 { "id": "kbmulti",
   "name": "Multitap keyboard",
-  "version":"0.01",
+  "version":"0.02",
   "description": "A library for text input via multitap/T9 style keypad",
   "icon": "app.png",
   "type":"textinput",

apps/kbmulti/settings.js

@@ -1,7 +1,7 @@
 (function(back) {
     function settings() {
       var settings = require('Storage').readJSON("kbmulti.settings.json", true) || {};
-      if (settings.firstLaunch===undefined) { settings.firstLaunch = true; }
+      if (settings.showHelpBtn===undefined) { settings.showHelpBtn = true; }
       if (settings.charTimeout===undefined) { settings.charTimeout = 500; }
       return settings;
     }
@@ -21,11 +21,11 @@
         format: v => v,
         onchange: v => updateSetting("charTimeout", v),
       },
-      /*LANG*/'Show help on first launch': {
-        value: !!settings().firstLaunch,
+      /*LANG*/'Show help button?': {
+        value: !!settings().showHelpBtn,
         format: v => v?"Yes":"No",
-        onchange: v =>  updateSetting("firstLaunch", v)
+        onchange: v =>  updateSetting("showHelpBtn", v)
       }
     };
     E.showMenu(mainmenu);
-  })
+  })