From a2002c48419b6b3b7c209b0e86fe6c75eed30373 Mon Sep 17 00:00:00 2001 From: storm64 Date: Wed, 6 Apr 2022 22:29:13 +0200 Subject: [PATCH] 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 + apps/lightswitch/README.md | 10 +++++++--- apps/lightswitch/metadata.json | 2 +- apps/lightswitch/settings.js | 16 +++++++++++++--- apps/lightswitch/settings.json | 8 ++++++-- apps/lightswitch/widget.js | 22 ++++++++++++++++------ 6 files changed, 44 insertions(+), 15 deletions(-) diff --git a/apps/lightswitch/ChangeLog b/apps/lightswitch/ChangeLog index 4210ccf03..2c6d2b5db 100644 --- a/apps/lightswitch/ChangeLog +++ b/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. diff --git a/apps/lightswitch/README.md b/apps/lightswitch/README.md index d58de7ca4..67d070f5c 100644 --- a/apps/lightswitch/README.md +++ b/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 diff --git a/apps/lightswitch/metadata.json b/apps/lightswitch/metadata.json index 9ac388eda..54dc8389f 100644 --- a/apps/lightswitch/metadata.json +++ b/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": [ diff --git a/apps/lightswitch/settings.js b/apps/lightswitch/settings.js index bebb16d15..a502324d9 100644 --- a/apps/lightswitch/settings.js +++ b/apps/lightswitch/settings.js @@ -7,6 +7,7 @@ colors: "011", image: "default", touchOn: "clock,launch", + oversize: 20, dragDelay: 500, minValue: 0.1, unlockSide: "", @@ -45,7 +46,7 @@ return { value: entry.value.indexOf(settings[key]), min : 0, - max : entry.value.length-1, + max : entry.value.length - 1, wrap : true, format: v => entry.title ? entry.title[v] : entry.value[v], onchange: function(v) { @@ -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, diff --git a/apps/lightswitch/settings.json b/apps/lightswitch/settings.json index 3d88e2282..176c3cea0 100644 --- a/apps/lightswitch/settings.json +++ b/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": "", diff --git a/apps/lightswitch/widget.js b/apps/lightswitch/widget.js index 119a114fe..53f86ee9a 100644 --- a/apps/lightswitch/widget.js +++ b/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);