add settings screen for colors and caps lock

apps/dragboard/ChangeLog

@@ -4,3 +4,4 @@
 0.04: Now displays the opened text string at launch.
 0.05: Now scrolls text when string gets longer than screen width.
 0.06: The code is now more reliable and the input snappier. Widgets will be drawn if present.
+0.07: Settings for display colors

apps/dragboard/README.md

@@ -12,5 +12,8 @@ Known bugs:
 - 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.
 - When repeatedly doing 'del' on an empty text-string, the letter case is changed back and forth between upper and lower case.
 
-To do: 
+Settings: 
-- Possibly provide a dragboard.settings.js file
+- CAPS LOCK: all characters are displayed and typed in uppercase
+- ABC Color: color of the characters row
+- Num Color: color of the digits and symbols row
+- Highlight Color: color of the currently highlighted character

apps/dragboard/lib.js

@@ -2,12 +2,14 @@ exports.input = function(options) {
   options = options||{};
   var text = options.text;
   if ("string"!=typeof text) text="";
+  let settings = require('Storage').readJSON('dragboard.json',1)||{}
 
   var R = Bangle.appRect;
+  const paramToColor = (param) => g.toColor(`#${settings[param].toString(16).padStart(3,0)}`);
   var BGCOLOR = g.theme.bg;
-  var HLCOLOR = g.theme.fg;
+  var HLCOLOR = settings.Highlight ? paramToColor("Highlight") : g.theme.fg;
-  var ABCCOLOR = g.toColor(1,0,0);//'#FF0000';
+  var ABCCOLOR = settings.ABC ? paramToColor("ABC") : g.toColor(1,0,0);//'#FF0000';
-  var NUMCOLOR = g.toColor(0,1,0);//'#00FF00';
+  var NUMCOLOR = settings.Num ? paramToColor("Num") : g.toColor(0,1,0);//'#00FF00';
   var BIGFONT = '6x8:3';
   var BIGFONTWIDTH = parseInt(BIGFONT.charAt(0)*parseInt(BIGFONT.charAt(-1)));
   var SMALLFONT = '6x8:1';
@@ -102,6 +104,7 @@ exports.input = function(options) {
   //setTimeout(initDraw, 0); // So Bangle.appRect reads the correct environment. It would draw off to the side sometimes otherwise.
 
   function changeCase(abcHL) {
+    if (settings.uppercase) return;
     g.setColor(BGCOLOR);
     g.setFontAlign(-1, -1, 0);
     g.drawString(ABC, ABCPADDING, (R.y+R.h)/2);

apps/dragboard/metadata.json

@@ -1,6 +1,6 @@
 { "id": "dragboard",
   "name": "Dragboard",
-  "version":"0.06",
+  "version":"0.07",
   "description": "A library for text input via swiping keyboard",
   "icon": "app.png",
   "type":"textinput",
@@ -9,6 +9,7 @@
   "screenshots": [{"url":"screenshot.png"}],  
   "readme": "README.md",
   "storage": [
-    {"name":"textinput","url":"lib.js"}
+    {"name":"textinput","url":"lib.js"},
+    {"name":"dragboard.settings.js","url":"settings.js"}
   ]
 }

apps/dragboard/settings.js

@@ -0,0 +1,43 @@
+(function(back) {
+  let settings = require('Storage').readJSON('dragboard.json',1)||{};
+  const colors = {
+      4095: /*LANG*/"White",
+      4080: /*LANG*/"Yellow",
+      3840: /*LANG*/"Red",
+      3855: /*LANG*/"Magenta",
+      255: /*LANG*/"Cyan",
+      240: /*LANG*/"Green",
+      15: /*LANG*/"Blue",
+      0: /*LANG*/"Black"
+  };
+
+  const save = () => require('Storage').write('dragboard.json', settings);
+  function colorMenu(key) {
+    let menu = {'': {title: key}, '< Back': () => E.showMenu(appMenu)};
+    Object.keys(colors).forEach(color => {
+      var label = colors[color] + " Color";
+      menu[label] = {
+        value: settings[key] == color,
+        onchange: () => {
+          settings[key] = color;
+          save();
+          setTimeout(E.showMenu, 10, appMenu);
+        }
+      };
+    });
+    return menu;
+  }
+
+  const appMenu = {
+      '': {title: 'Dragboard'}, '< Back': back,
+      'CAPS LOCK': {
+        value: !!settings.uppercase,
+        onchange: v => {settings.uppercase = v; save();}
+      },
+      'ABC': () => E.showMenu(colorMenu("ABC")),
+      'Num': () => E.showMenu(colorMenu("Num")),
+      'Highlight': () => E.showMenu(colorMenu("Highlight"))
+  };
+
+  E.showMenu(appMenu);
+});