From a3ad72df8936c4a58dbd5b39630034cf4ec4c118 Mon Sep 17 00:00:00 2001
From: lauzonhomeschool <85599144+lauzonhomeschool@users.noreply.github.com>
Date: Sat, 24 Dec 2022 16:59:40 -0500
Subject: [PATCH] add settings screen for colors and caps lock

---
 apps/dragboard/ChangeLog     |  1 +
 apps/dragboard/README.md     |  7 ++++--
 apps/dragboard/lib.js        |  9 +++++---
 apps/dragboard/metadata.json |  5 +++--
 apps/dragboard/settings.js   | 43 ++++++++++++++++++++++++++++++++++++
 5 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 apps/dragboard/settings.js

diff --git a/apps/dragboard/ChangeLog b/apps/dragboard/ChangeLog
index 265094e87..faf3d2d33 100644
--- a/apps/dragboard/ChangeLog
+++ b/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
diff --git a/apps/dragboard/README.md b/apps/dragboard/README.md
index 8960e5749..415be5449 100644
--- a/apps/dragboard/README.md
+++ b/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: 
-- Possibly provide a dragboard.settings.js file
+Settings: 
+- 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
diff --git a/apps/dragboard/lib.js b/apps/dragboard/lib.js
index 220f075d7..83aae5f14 100644
--- a/apps/dragboard/lib.js
+++ b/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 ABCCOLOR = g.toColor(1,0,0);//'#FF0000';
-  var NUMCOLOR = g.toColor(0,1,0);//'#00FF00';
+  var HLCOLOR = settings.Highlight ? paramToColor("Highlight") : g.theme.fg;
+  var ABCCOLOR = settings.ABC ? paramToColor("ABC") : g.toColor(1,0,0);//'#FF0000';
+  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);
diff --git a/apps/dragboard/metadata.json b/apps/dragboard/metadata.json
index 64b6dbe18..964ace3a7 100644
--- a/apps/dragboard/metadata.json
+++ b/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"}
   ]
 }
diff --git a/apps/dragboard/settings.js b/apps/dragboard/settings.js
new file mode 100644
index 000000000..6af7b895c
--- /dev/null
+++ b/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);
+});
\ No newline at end of file