lightswitch: masking (espruino/Espruino#2151) + oversize

Update ChangeLog and metadata.json
Update README.md and settings.json
 - add oversize setting + description
Update settings.js
- add oversize setting
Update widget.js
 - add oversize setting
 - add masking touch and drag input by adding own event listeners first and messing up the handler on a widget related event, using espruino/Espruino#2151

apps/lightswitch/ChangeLog

@@ -1,3 +1,4 @@
 0.01: New App!
 0.02: Add the option to enable touching the widget only on clock and settings.
 0.03: Settings page now uses built-in min/max/wrap (fix #1607)
+0.04: Add masking widget input to other apps (using espruino/Espruino#2151), add a oversize option to increase the touch area.

apps/lightswitch/README.md

@@ -1,8 +1,11 @@
 # Light Switch Widget
 
-Whis this widget I wanted to create a solution to quickly en-/disable the LCD backlight and even change the brightness.  
+With this widget I wanted to create a solution to quickly en-/disable the LCD backlight and even change the brightness.  
 In addition it shows the lock status with the option to personalize the lock icon with a tiny image.
 
+All touch and drag inputs related to this widget are cached/masked to prevent actions in the active app.
+(See [espruino/Espruino#2151](https://github.com/espruino/Espruino/issues/2151) for more information.)
+
 ---
 ### Control
 ---
@@ -39,6 +42,9 @@ In addition it shows the lock status with the option to personalize the lock ico
     * _clk+launch_ -> on all apps of the types _clock_ and _launch_
     * _except apps_ -> on all apps of the types _clock_ and _launch_ and in the settings
     * _always on_ -> always enabled when the widget is displayed
+* __Oversize__  
+  _0px_ / _1px_ / _..._ / __20px__ / _..._ / _50px_  
+  To make it easier to hit the widget, this value extends the touch area of the widget in all directions.
 * __Drag Delay__  
   _off_ / _50ms_ / _100ms_ / _..._ / __500ms__ / _..._ / _1000ms_  
   Change the maximum delay between first touch and re-touch/drag to change the brightness or disable changing the brightness completely.
@@ -85,8 +91,6 @@ This images are stored in a seperate file _(lightswitch.images.json)_.
 ### Worth Mentioning
 ---
 #### To do list
-* Catch the touch and draw input related to this widget to prevent actions in the active app.  
-  _(For now I have no idea how to achieve this, help is appreciated)_
 * Manage images for the lock icon through a _Customize and Upload App_ page.
 
 #### Requests, Bugs and Feedback

apps/lightswitch/metadata.json

@@ -2,7 +2,7 @@
   "id": "lightswitch",
   "name": "Light Switch Widget",
   "shortName": "Light Switch",
-  "version": "0.03",
+  "version": "0.04",
   "description": "A fast way to switch LCD backlight on/off, change the brightness and show the lock status. All in one widget.",
   "icon": "images/app.png",
   "screenshots": [

apps/lightswitch/settings.js

@@ -7,6 +7,7 @@
     colors: "011",
     image: "default",
     touchOn: "clock,launch",
+    oversize: 20,
     dragDelay: 500,
     minValue: 0.1,
     unlockSide: "",
@@ -57,11 +58,11 @@
       // return entry for numerical value
       return {
         value: settings[key] * entry.factor,
-        step: entry.step,
-        format: v => v > 0 ? v + entry.unit : "off",
         min : entry.min,
         max : entry.max,
+        step: entry.step,
         wrap : true,
+        format: v => v > 0 ? v + entry.unit : "off",
         onchange: function(v) {
           writeSetting(key, v / entry.factor, entry.drawWidgets);
         },
@@ -96,6 +97,14 @@
       value: ["", "clock", "clock,setting.app.js", "clock,launch", "clock,setting.app.js,launch", "always"],
       drawWidgets: true
     },
+    oversize: {
+      factor: 1,
+      unit: "px",
+      min: 0,
+      max: 50,
+      step: 1,
+      drawWidgets: true
+    },
     dragDelay: {
       factor: 1,
       unit: "ms",
@@ -142,6 +151,7 @@
       "Image": getEntry("image"),
       "-- Control": 0,
       "Touch": getEntry("touchOn"),
+      "Oversize": getEntry("oversize"),
       "Drag Delay": getEntry("dragDelay"),
       "Min Value": getEntry("minValue"),
       "-- Unlock": 0,

apps/lightswitch/settings.json

@@ -10,8 +10,8 @@
       "101" -> magenta
 
  * image: string //
-      "default" ->
-      "random"  ->
+      "default" -> image nearest to the default lock
+      "random"  -> a random image from all available
 
  * touchOn: string // select when widget touch is active
       ""             -> only on default clock
@@ -19,6 +19,9 @@
       "clock,launch" -> on all clocks and lanchers (default)
       "always"       -> always
 
+ * oversize: int // extends the touch area of the widget in px in all directions
+      0 to 50, 20 as default
+
  * dragDelay: int // drag listener reset time in ms
       // time until a drag is needed to activate backlight changing mode
       0   -> disabled
@@ -59,6 +62,7 @@
   "colors": "011",
   "image": "default",
   "touchOn": "clock,launch",
+  "oversize": 20,
   "dragDelay": 500,
   "minValue": 0.1,
   "unlockSide": "",

apps/lightswitch/widget.js

@@ -4,6 +4,7 @@
     colors: "011",
     image: "default",
     touchOn: "clock,launch",
+    oversize: 20,
     dragDelay: 500,
     minValue: 0.1,
     unlockSide: "",
@@ -162,6 +163,11 @@
       // change brigthness value, skip write to storage while still touching
       w.changeValue(value, event.b);
 
+      // masks this drag event by messing up the event handler
+      // see https://github.com/espruino/Espruino/issues/2151
+      Bangle.removeListener("drag", w.dragListener);
+      Bangle["#ondrag"] = [w.dragListener].concat(Bangle["#ondrag"]);
+
       // on touch release remove drag listener and reset drag status to indicate stopped drag action
       if (!event.b) {
         Bangle.removeListener("drag", w.dragListener);
@@ -184,14 +190,14 @@
       if (w.dragStatus === "off") {
 
         // check if inside widget area
-        if (!(!w || cursor.x < w.x || cursor.x > w.x + w.width ||
-            cursor.y < w.y || cursor.y > w.y + 23)) {
+        if (!(!w || cursor.x < w.x - w.oversize || cursor.x > w.x + w.width + w.oversize ||
+            cursor.y < w.y - w.oversize || cursor.y > w.y + 23 + w.oversize)) {
           // first touch feedback
           Bangle.buzz(25);
           // check if drag is disabled
           if (w.dragDelay) {
-            // add drag listener
-            Bangle.on("drag", w.dragListener);
+            // add drag listener at first position
+            Bangle["#ondrag"] = [w.dragListener].concat(Bangle["#ondrag"]);
             // set drag timeout
             w.dragStatus = setTimeout((w) => {
               // remove drag listener
@@ -204,6 +210,10 @@
           }
           // switch backlight
           w.changeValue();
+          // masks this touch event by messing up the event handler
+          // see https://github.com/espruino/Espruino/issues/2151
+          Bangle.removeListener("touch", w.touchListener);
+          Bangle["#ontouch"] = [w.touchListener].concat(Bangle["#ontouch"]);
         }
 
       }
@@ -236,11 +246,11 @@
       // add lock listener
       Bangle.on("lock", w.draw);
 
-      // add touch listener to control the light depending on settings
+      // add touch listener to control the light depending on settings at first position
       if (w.touchOn === "always" || !global.__FILE__ ||
         w.touchOn.includes(__FILE__) ||
         w.touchOn.includes(require("Storage").readJSON(__FILE__.replace("app.js", "info")).type))
-        Bangle.on("touch", w.touchListener);
+        Bangle["#ontouch"] = [w.touchListener].concat(Bangle["#ontouch"]);
 
       // add tap listener to unlock and/or flash backlight
       if (w.unlockSide || w.tapSide) Bangle.on("tap", require("lightswitch.js").tapListener);