From 89f0df15c5b818e3c9ac81104fffcfdca7903c2f Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sat, 5 Aug 2023 02:14:29 +0200 Subject: [PATCH 001/105] libslider: new library with conf. slider --- apps/libslider/ChangeLog | 1 + apps/libslider/README.md | 30 ++++++++++++++ apps/libslider/app-icon.js | 1 + apps/libslider/app.png | Bin 0 -> 1620 bytes apps/libslider/lib.js | 76 +++++++++++++++++++++++++++++++++++ apps/libslider/metadata.json | 13 ++++++ 6 files changed, 121 insertions(+) create mode 100644 apps/libslider/ChangeLog create mode 100644 apps/libslider/README.md create mode 100644 apps/libslider/app-icon.js create mode 100644 apps/libslider/app.png create mode 100644 apps/libslider/lib.js create mode 100644 apps/libslider/metadata.json diff --git a/apps/libslider/ChangeLog b/apps/libslider/ChangeLog new file mode 100644 index 000000000..5560f00bc --- /dev/null +++ b/apps/libslider/ChangeLog @@ -0,0 +1 @@ +0.01: New App! diff --git a/apps/libslider/README.md b/apps/libslider/README.md new file mode 100644 index 000000000..eff3919c6 --- /dev/null +++ b/apps/libslider/README.md @@ -0,0 +1,30 @@ +# App Name + +More information on making apps: + +* http://www.espruino.com/Bangle.js+First+App +* http://www.espruino.com/Bangle.js+App+Loader + +Describe the app... + +Add screen shots (if possible) to the app folder and link then into this file with ![](.png) + +## Usage + +Describe how to use it + +## Features + +Name the function + +## Controls + +Name the buttons and what they are used for + +## Requests + +Name who should be contacted for support/update requests + +## Creator + +Your name diff --git a/apps/libslider/app-icon.js b/apps/libslider/app-icon.js new file mode 100644 index 000000000..49232b838 --- /dev/null +++ b/apps/libslider/app-icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEwwJC/AH4A/AH4AgA==")) diff --git a/apps/libslider/app.png b/apps/libslider/app.png new file mode 100644 index 0000000000000000000000000000000000000000..582cb2e0853a5a2899a3afbd7eb19cde2ee7f6a0 GIT binary patch literal 1620 zcmV-a2CMmrP)1gXjloC|3_d8m;N2OpV(|i0q4YwBna<2! zK9thw%-*|urnNbV{Gax^?eD+#{x0kLJ~)lj_;W+1>qV*k8akT^^dvctZccUyj4}H~#M%Wwee_v` zHMv7o%BM8@dBrLshn{wGD9BDl?^eV5vSM3T96;NnHvtc6La=(qzq)xrX1d8bK-TN- zrd_f$_O`9nEmS+_S7HTXK<&u;LDIW|qlN&KJvM}tt6TVVqL-AvNv`B*{NzNpBfSQwQP5~Sf(Dp@Vq1+3Q`N9wBQN2`J_?M^u0FIMlt?p^8 z%U3%80kIwg!T{E9<8J18S&$k1`eO)@HP+=TZKo(z3_A3VFYJB=sn`2^Q$mRE>02(+W)np;)L1!GUvU2{O{<&F_nE6Qe#D~Xf|dD z+?d3-D1(IUiL`C2;PPv4CKw8H)v7h8^obJ&Z6D0CjVUe8Xq_NAymxUyPAMU^CCrIu z%1M71EC`5o2if_~7E&h??0jeQ1Y3N6p?}G72FmS*)xQD)%wBE=2tW6@(+MTi!fk9H1pWKew2(jTXVu4%vk26QvSQCbGmk`Z)Y! zBIhh)6vG2)h6mF8wC^|l$M(Eo9D?JiW}=_T2jUA>LC80foTera{^p)Wi`>}Gf;(|ZwEZQ zS^k|*9wyt=f4ZOo!xty7{%}HKD9tBZ50g$=%v&&vMa!#@Nsf>EkEEDA*ST6fiC+An zsNK1#>!x0obq@j$QqYU-ad3ZvbjqUU+%iw(0WahgmHV6yeLWqoYkSl4pzFQ(_Vp&I ztO{WI-48rGLwQb?#vgVvduyd9_6W)rFRoQJq3I(J?{Xmin45#=3l9BmL6Bp<*MZej zrsWN7oRPUr7IvrHoIHOjS=gPTCw>d)^LQK+B|=f2qbGjrWaOd5D<<9Dv>MTW0X3z> zyPy}9`<>1~?NCx@m8G$_@rRTy5zH12YM&P)=tU+L^fgY z^0Z&_6^qdVuwgN3wt_Ze(10?J@%{C2grBk42hsu74qEo^nd&v`X`IHN9lrxzS~GeF S(*#!l0000{ + // If draging on the indicator, adjust one-to-one. + if (e.x>X_START-OVERSIZE*WIDTH && e.x32) { + if (dy>0) { dy-=32; draw('incr',1) } + else { dy+=32; draw('incr',-1) } + Bangle.buzz(20); + } + } + E.stopEventPropagation&&E.stopEventPropagation(); +}; + +let ovr = Graphics.createArrayBuffer(WIDTH,HEIGHT,1,{msb:true}); + +let draw = (mode, input)=>{ + input = Math.min(input,170); + // Draw the indicator. + // Should be displayed when a relevant drag event is detected. + // Should time out. + // If user drags directly on the draw area, adjust level one-to-one. + // Pauses and resets the time out when interacted with. + // TODO: Lazy, keep track of last level and only draw again if it changed. + + if (mode=='incr') { + level = Math.min(Math.max(level-input,0),STEPS); + } + + if (mode=='map') { + input = Math.round(input/STEP_SIZE); + level = Math.min(Math.max(STEPS-input,0),STEPS); + if (level == lastLevel) return; + } + + levelHeight = level==0?WIDTH:level*STEP_SIZE; + //levelHeight = Math.max(level*STEP_SIZE,STEP_SIZE); + lastLevel = level; + + ovr.clear().setColor(1). + fillRect({x:0,y:0,w:WIDTH,y2:ovr.getHeight(),r:30}). // To get outer border... + setColor(0). + fillRect({x:2,y:2,w:WIDTH-5,y2:ovr.getHeight()-2,r:30}). // ... and here it's made hollow. + setColor(0==level?0:1). + fillRect({x:4,y:ovr.getHeight()-levelHeight+4,w:WIDTH-9,y2:ovr.getHeight()-4,r:30}); // Here the bar is drawn. + Bangle.setLCDOverlay({ + width:ovr.getWidth(), height:ovr.getHeight(), + bpp:1, transparent:0, + buffer:ovr.buffer + },X_START,Y_START); + + print(level, input); + //print(process.memory().usage); +}; + +let dy = 0; +Bangle.prependListener('drag', continDrag); +g.setColor(1,0,0).fillRect(Bangle.appRect).reset(); diff --git a/apps/libslider/metadata.json b/apps/libslider/metadata.json new file mode 100644 index 000000000..d19604beb --- /dev/null +++ b/apps/libslider/metadata.json @@ -0,0 +1,13 @@ +{ "id": "libslider", + "name": "My app's human readable name", + "shortName":"Short Name", + "version":"0.01", + "description": "A detailed description of my great app", + "icon": "app.png", + "tags": "", + "supports" : ["BANGLEJS2"], + "readme": "README.md", + "storage": [ + {"name":"7chname.img","url":"app-icon.js","evaluate":true} + ] +} From 1bc45a8ff84ff7549ee9fde6bc5a02fec66218e0 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sun, 6 Aug 2023 02:03:38 +0200 Subject: [PATCH 002/105] libslider: export method, add test app. --- apps/libslider/app.js | 6 ++++++ apps/libslider/lib.js | 14 ++++++++------ 2 files changed, 14 insertions(+), 6 deletions(-) create mode 100644 apps/libslider/app.js diff --git a/apps/libslider/app.js b/apps/libslider/app.js new file mode 100644 index 000000000..69f0762df --- /dev/null +++ b/apps/libslider/app.js @@ -0,0 +1,6 @@ +let callback = (ud)=>{ + if (ud) Bangle.musicControl(ud>0 ? "volumedown" : "volumeup"); + print("hi"); +}; + +require("SliderInput").interface(callback, false); diff --git a/apps/libslider/lib.js b/apps/libslider/lib.js index 1397ab83a..cebd4eaaf 100644 --- a/apps/libslider/lib.js +++ b/apps/libslider/lib.js @@ -1,3 +1,4 @@ +exports.interface = function(cb, useMap) { // Constants for the indicator: const X_START = 87; const WIDTH = 50; @@ -15,16 +16,17 @@ let smoothpastedge = true; let continDrag = (e)=>{ // If draging on the indicator, adjust one-to-one. - if (e.x>X_START-OVERSIZE*WIDTH && e.xX_START-OVERSIZE*WIDTH && e.x32) { - if (dy>0) { dy-=32; draw('incr',1) } - else { dy+=32; draw('incr',-1) } + if (dy>0) { dy-=32; draw('incr',1); cb(1); } + else { dy+=32; draw('incr',-1); cb(-1); } Bangle.buzz(20); + } } E.stopEventPropagation&&E.stopEventPropagation(); @@ -51,8 +53,7 @@ let draw = (mode, input)=>{ if (level == lastLevel) return; } - levelHeight = level==0?WIDTH:level*STEP_SIZE; - //levelHeight = Math.max(level*STEP_SIZE,STEP_SIZE); + levelHeight = level==0?WIDTH:level*STEP_SIZE; // Math.max(level*STEP_SIZE,STEP_SIZE); lastLevel = level; ovr.clear().setColor(1). @@ -73,4 +74,5 @@ let draw = (mode, input)=>{ let dy = 0; Bangle.prependListener('drag', continDrag); -g.setColor(1,0,0).fillRect(Bangle.appRect).reset(); +g.reset(); +} From 904935ba0a6828e772c3d4725392d6657a5ffa79 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Mon, 7 Aug 2023 22:08:28 +0200 Subject: [PATCH 003/105] libslider: tweaks to match changes in gadgetbridge PR to Gadgetbridge: https://codeberg.org/Freeyourgadget/Gadgetbridge/pulls/3241 --- apps/libslider/app.js | 10 ++++++---- apps/libslider/lib.js | 17 +++++++++-------- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/apps/libslider/app.js b/apps/libslider/app.js index 69f0762df..b6017246b 100644 --- a/apps/libslider/app.js +++ b/apps/libslider/app.js @@ -1,6 +1,8 @@ -let callback = (ud)=>{ - if (ud) Bangle.musicControl(ud>0 ? "volumedown" : "volumeup"); - print("hi"); +let callback = (mode, ud)=>{ + if (mode == "map") Bangle.musicControl({cmd:"volumesetlevel", extra:ud}); + if (mode == "incr") Bangle.musicControl(ud>0 ? "volumedown" : "volumeup"); }; -require("SliderInput").interface(callback, false); +g.reset().clear().setColor(1,0,0).fillRect(0,0,176,176); + +require("SliderInput").interface(callback, true, true); diff --git a/apps/libslider/lib.js b/apps/libslider/lib.js index cebd4eaaf..7d4e86c33 100644 --- a/apps/libslider/lib.js +++ b/apps/libslider/lib.js @@ -1,10 +1,11 @@ -exports.interface = function(cb, useMap) { -// Constants for the indicator: +exports.interface = function(cb, useMap, useIncr) { +// TODO: make configurable +// Constants for the indicator: const X_START = 87; const WIDTH = 50; const Y_START = 5; const HEIGHT = 165; -const STEPS = 10; +const STEPS = 100; const STEP_SIZE = HEIGHT/STEPS; const OVERSIZE = 0.5; @@ -12,21 +13,19 @@ const OVERSIZE = 0.5; let level = 0; // TODO: Depend on parameter. let lastLevel; let levelHeight; -let smoothpastedge = true; let continDrag = (e)=>{ + "ram"; // If draging on the indicator, adjust one-to-one. if (useMap && e.x>X_START-OVERSIZE*WIDTH && e.x32) { if (dy>0) { dy-=32; draw('incr',1); cb(1); } else { dy+=32; draw('incr',-1); cb(-1); } Bangle.buzz(20); - } } E.stopEventPropagation&&E.stopEventPropagation(); @@ -35,6 +34,7 @@ let continDrag = (e)=>{ let ovr = Graphics.createArrayBuffer(WIDTH,HEIGHT,1,{msb:true}); let draw = (mode, input)=>{ + "ram"; input = Math.min(input,170); // Draw the indicator. // Should be displayed when a relevant drag event is detected. @@ -51,6 +51,7 @@ let draw = (mode, input)=>{ input = Math.round(input/STEP_SIZE); level = Math.min(Math.max(STEPS-input,0),STEPS); if (level == lastLevel) return; + cb(level); } levelHeight = level==0?WIDTH:level*STEP_SIZE; // Math.max(level*STEP_SIZE,STEP_SIZE); @@ -68,7 +69,7 @@ let draw = (mode, input)=>{ buffer:ovr.buffer },X_START,Y_START); - print(level, input); + //print(level, input); //print(process.memory().usage); }; From 18662e5c55bfa35696c861ab7ced65a2ed32e593 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Mon, 7 Aug 2023 22:14:36 +0200 Subject: [PATCH 004/105] libslider: link files to storage in metadata. --- apps/libslider/metadata.json | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/apps/libslider/metadata.json b/apps/libslider/metadata.json index d19604beb..d906dac37 100644 --- a/apps/libslider/metadata.json +++ b/apps/libslider/metadata.json @@ -1,13 +1,17 @@ { "id": "libslider", - "name": "My app's human readable name", - "shortName":"Short Name", + "name": "Slider test app", + "shortName":"Slider test", "version":"0.01", "description": "A detailed description of my great app", "icon": "app.png", - "tags": "", + "tags": "ui", "supports" : ["BANGLEJS2"], + "provides_modules": ["SliderInput"], "readme": "README.md", "storage": [ - {"name":"7chname.img","url":"app-icon.js","evaluate":true} + {"name":"libslider.img","url":"app-icon.js","evaluate":true}, + {"name":"libslider.app.js","url":"app.js"}, + {"name":"SliderInput","url":"lib.js"} ] } + From 0fb9569ce68235fd4bf9af3ebd6507fbb7199923 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Mon, 7 Aug 2023 23:19:13 +0200 Subject: [PATCH 005/105] libslider:fix lib --- apps/libslider/lib.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/libslider/lib.js b/apps/libslider/lib.js index 7d4e86c33..907d70039 100644 --- a/apps/libslider/lib.js +++ b/apps/libslider/lib.js @@ -23,8 +23,8 @@ let continDrag = (e)=>{ dy += e.dy; //if (!e.b) dy=0; while (Math.abs(dy)>32) { - if (dy>0) { dy-=32; draw('incr',1); cb(1); } - else { dy+=32; draw('incr',-1); cb(-1); } + if (dy>0) { dy-=32; draw('incr',1); cb("incr",1); } + else { dy+=32; draw('incr',-1); cb("incr",-1); } Bangle.buzz(20); } } @@ -51,7 +51,7 @@ let draw = (mode, input)=>{ input = Math.round(input/STEP_SIZE); level = Math.min(Math.max(STEPS-input,0),STEPS); if (level == lastLevel) return; - cb(level); + cb("map",level); } levelHeight = level==0?WIDTH:level*STEP_SIZE; // Math.max(level*STEP_SIZE,STEP_SIZE); From 91055f17cc162dc1370e19e7b269408e91387652 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 8 Aug 2023 00:56:16 +0200 Subject: [PATCH 006/105] libslider: tweaks to the lib and the test app --- apps/libslider/app.js | 8 ++++---- apps/libslider/lib.js | 15 +++++++++++++-- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/apps/libslider/app.js b/apps/libslider/app.js index b6017246b..5033c0da1 100644 --- a/apps/libslider/app.js +++ b/apps/libslider/app.js @@ -1,8 +1,8 @@ -let callback = (mode, ud)=>{ - if (mode == "map") Bangle.musicControl({cmd:"volumesetlevel", extra:ud}); - if (mode == "incr") Bangle.musicControl(ud>0 ? "volumedown" : "volumeup"); +let callback = (mode,fb)=>{ + if (mode =="map") Bangle.musicControl({cmd:"volumesetlevel",extra:Math.round(100*fb/30)}); + if (mode =="incr") Bangle.musicControl(fb>0?"volumedown":"volumeup"); }; g.reset().clear().setColor(1,0,0).fillRect(0,0,176,176); -require("SliderInput").interface(callback, true, true); +Bangle.on('drag', ()=>{require("SliderInput").interface(callback,true,true);}); diff --git a/apps/libslider/lib.js b/apps/libslider/lib.js index 907d70039..5428a7a0d 100644 --- a/apps/libslider/lib.js +++ b/apps/libslider/lib.js @@ -5,7 +5,7 @@ const X_START = 87; const WIDTH = 50; const Y_START = 5; const HEIGHT = 165; -const STEPS = 100; +const STEPS = 30; //Currently corresponds to my phones volume range, from 0 to 30. Maybe it should be 31. Math is hard sometimes... const STEP_SIZE = HEIGHT/STEPS; const OVERSIZE = 0.5; @@ -16,6 +16,8 @@ let levelHeight; let continDrag = (e)=>{ "ram"; + if (timeout) {clearTimeout(timeout); timeout = setTimeout(remove, 1000*1);} + // If draging on the indicator, adjust one-to-one. if (useMap && e.x>X_START-OVERSIZE*WIDTH && e.x{ //print(level, input); //print(process.memory().usage); }; + +let remove = ()=> { + ovr.clear().reset(); + Bangle.setLCDOverlay(); + Bangle.removeListener('drag', continDrag); +}; + +let timeout = setTimeout(remove, 1000*1); let dy = 0; -Bangle.prependListener('drag', continDrag); g.reset(); +Bangle.prependListener('drag', continDrag); + } From d25f09d7ca54481391e37e486caf1bec724f6d13 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 8 Aug 2023 20:38:22 +0200 Subject: [PATCH 007/105] libslider: refactor to split logic and graphics --- apps/libslider/lib.js | 49 +++++++++++++++++++++++-------------------- 1 file changed, 26 insertions(+), 23 deletions(-) diff --git a/apps/libslider/lib.js b/apps/libslider/lib.js index 5428a7a0d..c9d36fd09 100644 --- a/apps/libslider/lib.js +++ b/apps/libslider/lib.js @@ -1,33 +1,47 @@ exports.interface = function(cb, useMap, useIncr) { // TODO: make configurable // Constants for the indicator: -const X_START = 87; +const X_START = 176-55; const WIDTH = 50; const Y_START = 5; const HEIGHT = 165; const STEPS = 30; //Currently corresponds to my phones volume range, from 0 to 30. Maybe it should be 31. Math is hard sometimes... const STEP_SIZE = HEIGHT/STEPS; -const OVERSIZE = 0.5; +const OVERSIZE = 0.65; // Initialize the level -let level = 0; // TODO: Depend on parameter. -let lastLevel; +let level; // TODO: Depend on parameter. +let lastLevel=10; let levelHeight; -let continDrag = (e)=>{ +let continDrag = e=>{ "ram"; if (timeout) {clearTimeout(timeout); timeout = setTimeout(remove, 1000*1);} + let input = Math.min(e.y,170); + input = Math.round(input/STEP_SIZE); // If draging on the indicator, adjust one-to-one. if (useMap && e.x>X_START-OVERSIZE*WIDTH && e.x32) { - if (dy>0) { dy-=32; draw('incr',1); cb("incr",1); } - else { dy+=32; draw('incr',-1); cb("incr",-1); } + if (dy>0) { dy-=32; incr = 1;} + else { dy+=32; incr = -1;} Bangle.buzz(20); + + level = Math.min(Math.max(lastLevel-incr,0),STEPS); + cb("incr",incr); + draw(level); } } E.stopEventPropagation&&E.stopEventPropagation(); @@ -35,9 +49,8 @@ let continDrag = (e)=>{ let ovr = Graphics.createArrayBuffer(WIDTH,HEIGHT,1,{msb:true}); -let draw = (mode, input)=>{ +let draw = (level)=>{ "ram"; - input = Math.min(input,170); // Draw the indicator. // Should be displayed when a relevant drag event is detected. // Should time out. @@ -45,16 +58,7 @@ let draw = (mode, input)=>{ // Pauses and resets the time out when interacted with. // TODO: Lazy, keep track of last level and only draw again if it changed. - if (mode=='incr') { - level = Math.min(Math.max(level-input,0),STEPS); - } - - if (mode=='map') { - input = Math.round(input/STEP_SIZE); - level = Math.min(Math.max(STEPS-input,0),STEPS); - if (level == lastLevel) return; - cb("map",level); - } + if (level == lastLevel) {print("hi"); return;} levelHeight = level==0?WIDTH:level*STEP_SIZE; // Math.max(level*STEP_SIZE,STEP_SIZE); lastLevel = level; @@ -74,7 +78,7 @@ let draw = (mode, input)=>{ //print(level, input); //print(process.memory().usage); }; - + let remove = ()=> { ovr.clear().reset(); Bangle.setLCDOverlay(); @@ -86,5 +90,4 @@ let timeout = setTimeout(remove, 1000*1); let dy = 0; g.reset(); Bangle.prependListener('drag', continDrag); - } From 0a81020b37ca6a80ae0bda5efdb94ac0ee1336de Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 8 Aug 2023 23:36:12 +0200 Subject: [PATCH 008/105] libslider: Add configurability. --- apps/libslider/app.js | 2 +- apps/libslider/lib.js | 37 +++++++++++++++++++++---------------- 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/apps/libslider/app.js b/apps/libslider/app.js index 5033c0da1..a12b51a3c 100644 --- a/apps/libslider/app.js +++ b/apps/libslider/app.js @@ -5,4 +5,4 @@ let callback = (mode,fb)=>{ g.reset().clear().setColor(1,0,0).fillRect(0,0,176,176); -Bangle.on('drag', ()=>{require("SliderInput").interface(callback,true,true);}); +Bangle.on('drag', ()=>{require("SliderInput").interface(callback, {useMap:true});}); diff --git a/apps/libslider/lib.js b/apps/libslider/lib.js index c9d36fd09..99916bda0 100644 --- a/apps/libslider/lib.js +++ b/apps/libslider/lib.js @@ -1,34 +1,39 @@ -exports.interface = function(cb, useMap, useIncr) { -// TODO: make configurable -// Constants for the indicator: -const X_START = 176-55; -const WIDTH = 50; -const Y_START = 5; -const HEIGHT = 165; -const STEPS = 30; //Currently corresponds to my phones volume range, from 0 to 30. Maybe it should be 31. Math is hard sometimes... +exports.interface = function(cb, conf) { +// Configuration for the indicator: +conf = conf?conf:{}; +const USE_MAP = conf.useMap || false; +const USE_INCR = conf.useIncr || true; +const X_START = conf.xStart || 176-55; +const WIDTH = conf.width || 50; +const Y_START = conf.yStart || 5; +const HEIGHT = conf.height || 165; +const STEPS = conf.steps || 30; //Default corresponds to my phones volume range, [0,30]. Maybe it should be 31. Math is hard sometimes... +const OVERSIZE_R = conf.oversizeR || 0; +const OVERSIZE_L = conf.oversizeL || 0; +const TIMEOUT = conf.timeout || 1; + const STEP_SIZE = HEIGHT/STEPS; -const OVERSIZE = 0.65; // Initialize the level let level; // TODO: Depend on parameter. let lastLevel=10; let levelHeight; -let continDrag = e=>{ +let dragSlider = e=>{ "ram"; - if (timeout) {clearTimeout(timeout); timeout = setTimeout(remove, 1000*1);} + if (timeout) {clearTimeout(timeout); timeout = setTimeout(remove, 1000*TIMEOUT);} let input = Math.min(e.y,170); input = Math.round(input/STEP_SIZE); // If draging on the indicator, adjust one-to-one. - if (useMap && e.x>X_START-OVERSIZE*WIDTH && e.xX_START-OVERSIZE_L*WIDTH && e.x{ let remove = ()=> { ovr.clear().reset(); Bangle.setLCDOverlay(); - Bangle.removeListener('drag', continDrag); + Bangle.removeListener('drag', dragSlider); }; -let timeout = setTimeout(remove, 1000*1); +let timeout = setTimeout(remove, 1000*TIMEOUT); let dy = 0; g.reset(); -Bangle.prependListener('drag', continDrag); +Bangle.prependListener('drag', dragSlider); } From 9909ff74cf1e8a6b73a875b2d2672160011ea0f1 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Thu, 10 Aug 2023 02:19:59 +0200 Subject: [PATCH 009/105] libslider: init w current android audio level --- apps/libslider/app.js | 10 +++++++++- apps/libslider/lib.js | 21 ++++++++++++--------- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/apps/libslider/app.js b/apps/libslider/app.js index a12b51a3c..f9456242b 100644 --- a/apps/libslider/app.js +++ b/apps/libslider/app.js @@ -1,8 +1,16 @@ let callback = (mode,fb)=>{ if (mode =="map") Bangle.musicControl({cmd:"volumesetlevel",extra:Math.round(100*fb/30)}); if (mode =="incr") Bangle.musicControl(fb>0?"volumedown":"volumeup"); + if (mode =="remove") {audioLevels.c = fb;} }; g.reset().clear().setColor(1,0,0).fillRect(0,0,176,176); -Bangle.on('drag', ()=>{require("SliderInput").interface(callback, {useMap:true});}); +let audioLevels; +let audioHandler = (e)=>{audioLevels = e;}; +Bangle.on('audio', audioHandler); +Bangle.musicControl("volumegetlevel"); + +Bangle.on('drag', ()=>{ + require("SliderInput").interface(callback, {useMap:true, steps:audioLevels.u, currLevel:audioLevels.c});} +); diff --git a/apps/libslider/lib.js b/apps/libslider/lib.js index 99916bda0..f076f97da 100644 --- a/apps/libslider/lib.js +++ b/apps/libslider/lib.js @@ -15,10 +15,12 @@ const TIMEOUT = conf.timeout || 1; const STEP_SIZE = HEIGHT/STEPS; // Initialize the level -let level; // TODO: Depend on parameter. -let lastLevel=10; +let level; +let prevLevel = conf.currLevel || 0; let levelHeight; +let firstRun = true; + let dragSlider = e=>{ "ram"; if (timeout) {clearTimeout(timeout); timeout = setTimeout(remove, 1000*TIMEOUT);} @@ -44,7 +46,7 @@ let dragSlider = e=>{ else { dy+=32; incr = -1;} Bangle.buzz(20); - level = Math.min(Math.max(lastLevel-incr,0),STEPS); + level = Math.min(Math.max(prevLevel-incr,0),STEPS); cb("incr",incr); draw(level); } @@ -63,19 +65,19 @@ let draw = (level)=>{ // Pauses and resets the time out when interacted with. // TODO: Lazy, keep track of last level and only draw again if it changed. - if (level == lastLevel) {print("hi"); return;} + if (level == prevLevel) {if (!firstRun) return; if (firstRun) firstRun = false;} levelHeight = level==0?WIDTH:level*STEP_SIZE; // Math.max(level*STEP_SIZE,STEP_SIZE); - lastLevel = level; + prevLevel = level; ovr.clear().setColor(1). - fillRect({x:0,y:0,w:WIDTH,y2:ovr.getHeight(),r:30}). // To get outer border... + fillRect({x:0,y:0,w:WIDTH,y2:HEIGHT,r:30}). // To get outer border... setColor(0). - fillRect({x:2,y:2,w:WIDTH-5,y2:ovr.getHeight()-2,r:30}). // ... and here it's made hollow. + fillRect({x:2,y:2,w:WIDTH-5,y2:HEIGHT-2,r:30}). // ... and here it's made hollow. setColor(0==level?0:1). - fillRect({x:4,y:ovr.getHeight()-levelHeight+4,w:WIDTH-9,y2:ovr.getHeight()-4,r:30}); // Here the bar is drawn. + fillRect({x:4,y:HEIGHT-levelHeight+4,w:WIDTH-9,y2:ovr.getHeight()-4,r:30}); // Here the bar is drawn. Bangle.setLCDOverlay({ - width:ovr.getWidth(), height:ovr.getHeight(), + width:WIDTH, height:HEIGHT, bpp:1, transparent:0, buffer:ovr.buffer },X_START,Y_START); @@ -88,6 +90,7 @@ let remove = ()=> { ovr.clear().reset(); Bangle.setLCDOverlay(); Bangle.removeListener('drag', dragSlider); + cb("remove", level); }; let timeout = setTimeout(remove, 1000*TIMEOUT); From 3824a5e603d5667dab5ec0a3126ea1fa64cb2430 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Mon, 14 Aug 2023 01:45:13 +0200 Subject: [PATCH 010/105] libslider: update and wait for volume level... ... from android before initiating the slider. --- apps/libslider/app.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/apps/libslider/app.js b/apps/libslider/app.js index f9456242b..c93e21969 100644 --- a/apps/libslider/app.js +++ b/apps/libslider/app.js @@ -1,7 +1,8 @@ +{ let callback = (mode,fb)=>{ if (mode =="map") Bangle.musicControl({cmd:"volumesetlevel",extra:Math.round(100*fb/30)}); if (mode =="incr") Bangle.musicControl(fb>0?"volumedown":"volumeup"); - if (mode =="remove") {audioLevels.c = fb;} + if (mode =="remove") {audioLevels.c = fb; ebLast = 0;} }; g.reset().clear().setColor(1,0,0).fillRect(0,0,176,176); @@ -11,6 +12,13 @@ let audioHandler = (e)=>{audioLevels = e;}; Bangle.on('audio', audioHandler); Bangle.musicControl("volumegetlevel"); -Bangle.on('drag', ()=>{ - require("SliderInput").interface(callback, {useMap:true, steps:audioLevels.u, currLevel:audioLevels.c});} +let ebLast = 0; +Bangle.on('drag', (e)=>{ + if (ebLast==0) { + Bangle.musicControl("volumegetlevel"); + setTimeout(()=>{require("SliderInput").interface(callback, {useMap:true, steps:audioLevels.u, currLevel:audioLevels.c});},200); + } + ebLast = e.b; +} ); +} From 2b1d20905f44fc331dc4fb436b4cd055a0f22737 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 15 Aug 2023 01:35:00 +0200 Subject: [PATCH 011/105] libslider: draw outer border only once on init --- apps/libslider/lib.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/apps/libslider/lib.js b/apps/libslider/lib.js index f076f97da..84e3fa1b9 100644 --- a/apps/libslider/lib.js +++ b/apps/libslider/lib.js @@ -63,19 +63,21 @@ let draw = (level)=>{ // Should time out. // If user drags directly on the draw area, adjust level one-to-one. // Pauses and resets the time out when interacted with. - // TODO: Lazy, keep track of last level and only draw again if it changed. + + if (firstRun) { + ovr.setColor(1). + fillRect({x:0,y:0,w:WIDTH,y2:HEIGHT,r:30}); // To get outer border... + } if (level == prevLevel) {if (!firstRun) return; if (firstRun) firstRun = false;} levelHeight = level==0?WIDTH:level*STEP_SIZE; // Math.max(level*STEP_SIZE,STEP_SIZE); prevLevel = level; - ovr.clear().setColor(1). - fillRect({x:0,y:0,w:WIDTH,y2:HEIGHT,r:30}). // To get outer border... - setColor(0). + ovr.setColor(0). fillRect({x:2,y:2,w:WIDTH-5,y2:HEIGHT-2,r:30}). // ... and here it's made hollow. setColor(0==level?0:1). - fillRect({x:4,y:HEIGHT-levelHeight+4,w:WIDTH-9,y2:ovr.getHeight()-4,r:30}); // Here the bar is drawn. + fillRect({x:4,y:HEIGHT-levelHeight+4,w:WIDTH-9,y2:HEIGHT-4,r:30}); // Here the bar is drawn. Bangle.setLCDOverlay({ width:WIDTH, height:HEIGHT, bpp:1, transparent:0, @@ -90,7 +92,7 @@ let remove = ()=> { ovr.clear().reset(); Bangle.setLCDOverlay(); Bangle.removeListener('drag', dragSlider); - cb("remove", level); + cb("remove", prevLevel); }; let timeout = setTimeout(remove, 1000*TIMEOUT); From cdf10ac69ba2fe31dc7b91b9414ad23803736356 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 15 Aug 2023 01:41:54 +0200 Subject: [PATCH 012/105] libslider: remove rounded corners ... ... to make debugging graphics easier. --- apps/libslider/lib.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/libslider/lib.js b/apps/libslider/lib.js index 84e3fa1b9..66be04667 100644 --- a/apps/libslider/lib.js +++ b/apps/libslider/lib.js @@ -66,7 +66,7 @@ let draw = (level)=>{ if (firstRun) { ovr.setColor(1). - fillRect({x:0,y:0,w:WIDTH,y2:HEIGHT,r:30}); // To get outer border... + fillRect({x:0,y:0,w:WIDTH,y2:HEIGHT,r:0}); // To get outer border... } if (level == prevLevel) {if (!firstRun) return; if (firstRun) firstRun = false;} @@ -75,9 +75,9 @@ let draw = (level)=>{ prevLevel = level; ovr.setColor(0). - fillRect({x:2,y:2,w:WIDTH-5,y2:HEIGHT-2,r:30}). // ... and here it's made hollow. + fillRect({x:2,y:2,w:WIDTH-5,y2:HEIGHT-2,r:0}). // ... and here it's made hollow. setColor(0==level?0:1). - fillRect({x:4,y:HEIGHT-levelHeight+4,w:WIDTH-9,y2:HEIGHT-4,r:30}); // Here the bar is drawn. + fillRect({x:4,y:HEIGHT-levelHeight+4,w:WIDTH-9,y2:HEIGHT-4,r:0}); // Here the bar is drawn. Bangle.setLCDOverlay({ width:WIDTH, height:HEIGHT, bpp:1, transparent:0, From 4f5929b30305e14b00d57276c49191d3c7b98f06 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 15 Aug 2023 02:24:56 +0200 Subject: [PATCH 013/105] libslider: graphics now behave on low levels... ... keeping the border intact. (Still some problems if the rectangle is given rounded corners) --- apps/libslider/lib.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/libslider/lib.js b/apps/libslider/lib.js index 66be04667..0428fbe62 100644 --- a/apps/libslider/lib.js +++ b/apps/libslider/lib.js @@ -4,9 +4,9 @@ conf = conf?conf:{}; const USE_MAP = conf.useMap || false; const USE_INCR = conf.useIncr || true; const X_START = conf.xStart || 176-55; -const WIDTH = conf.width || 50; +const WIDTH = conf.width-9 || 50-9; // -9 to compensate for the border. const Y_START = conf.yStart || 5; -const HEIGHT = conf.height || 165; +const HEIGHT = conf.height-5 || 165-5; // -5 to compensate for the border. const STEPS = conf.steps || 30; //Default corresponds to my phones volume range, [0,30]. Maybe it should be 31. Math is hard sometimes... const OVERSIZE_R = conf.oversizeR || 0; const OVERSIZE_L = conf.oversizeL || 0; @@ -54,7 +54,7 @@ let dragSlider = e=>{ E.stopEventPropagation&&E.stopEventPropagation(); }; -let ovr = Graphics.createArrayBuffer(WIDTH,HEIGHT,1,{msb:true}); +let ovr = Graphics.createArrayBuffer(WIDTH+9,HEIGHT+5,1,{msb:true}); let draw = (level)=>{ "ram"; @@ -66,7 +66,7 @@ let draw = (level)=>{ if (firstRun) { ovr.setColor(1). - fillRect({x:0,y:0,w:WIDTH,y2:HEIGHT,r:0}); // To get outer border... + fillRect({x:0,y:0,w:WIDTH+9,y2:HEIGHT+5,r:0}); // To get outer border... } if (level == prevLevel) {if (!firstRun) return; if (firstRun) firstRun = false;} @@ -75,16 +75,16 @@ let draw = (level)=>{ prevLevel = level; ovr.setColor(0). - fillRect({x:2,y:2,w:WIDTH-5,y2:HEIGHT-2,r:0}). // ... and here it's made hollow. + fillRect({x:2,y:2,w:WIDTH+4,y2:HEIGHT+2,r:0}). // ... and here it's made hollow. setColor(0==level?0:1). - fillRect({x:4,y:HEIGHT-levelHeight+4,w:WIDTH-9,y2:HEIGHT-4,r:0}); // Here the bar is drawn. + fillRect({x:4,y:4+HEIGHT-levelHeight,w:WIDTH,y2:HEIGHT,r:0}); // Here the bar is drawn. Bangle.setLCDOverlay({ - width:WIDTH, height:HEIGHT, + width:WIDTH+9, height:HEIGHT+5, bpp:1, transparent:0, buffer:ovr.buffer },X_START,Y_START); - //print(level, input); + //print(level); //print(process.memory().usage); }; From 2ce848b1aadbf42ecb5ddf69b92e2522a069d590 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 15 Aug 2023 22:50:29 +0200 Subject: [PATCH 014/105] libslider: lock input method to first e.x position Before you could alternate between 'increment' mode and 'map' mode by `drag`ing horizontally. Now you can't. This makes it much less likely to accidentally trigger near maximum level when you just wanted to increment the level. --- apps/libslider/lib.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/libslider/lib.js b/apps/libslider/lib.js index 0428fbe62..25aafee17 100644 --- a/apps/libslider/lib.js +++ b/apps/libslider/lib.js @@ -20,6 +20,8 @@ let prevLevel = conf.currLevel || 0; let levelHeight; let firstRun = true; +let ebLast = 0; +let exFirst; let dragSlider = e=>{ "ram"; @@ -27,8 +29,10 @@ let dragSlider = e=>{ let input = Math.min(e.y,170); input = Math.round(input/STEP_SIZE); + if (ebLast==0) exFirst = e.x; + // If draging on the indicator, adjust one-to-one. - if (USE_MAP && e.x>X_START-OVERSIZE_L*WIDTH && e.xX_START-OVERSIZE_L*WIDTH && exFirst{ draw(level); } } + ebLast = e.b; E.stopEventPropagation&&E.stopEventPropagation(); }; From 3b174337f3d021bbcac7cd35762fc0110111edf6 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 15 Aug 2023 23:07:55 +0200 Subject: [PATCH 015/105] libslider: move stopEventPropagation on top --- apps/libslider/lib.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/libslider/lib.js b/apps/libslider/lib.js index 25aafee17..e49f2cc9b 100644 --- a/apps/libslider/lib.js +++ b/apps/libslider/lib.js @@ -25,6 +25,8 @@ let exFirst; let dragSlider = e=>{ "ram"; + E.stopEventPropagation&&E.stopEventPropagation(); + if (timeout) {clearTimeout(timeout); timeout = setTimeout(remove, 1000*TIMEOUT);} let input = Math.min(e.y,170); input = Math.round(input/STEP_SIZE); @@ -56,7 +58,6 @@ let dragSlider = e=>{ } } ebLast = e.b; - E.stopEventPropagation&&E.stopEventPropagation(); }; let ovr = Graphics.createArrayBuffer(WIDTH+9,HEIGHT+5,1,{msb:true}); From a00fdc1d12e2d87fd61b333f9d04f47066369924 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 15 Aug 2023 23:37:16 +0200 Subject: [PATCH 016/105] libslider: disable timeout ...by passing in `timeout:'no'`. --- apps/libslider/lib.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/libslider/lib.js b/apps/libslider/lib.js index e49f2cc9b..1ac7d2873 100644 --- a/apps/libslider/lib.js +++ b/apps/libslider/lib.js @@ -101,7 +101,8 @@ let remove = ()=> { cb("remove", prevLevel); }; -let timeout = setTimeout(remove, 1000*TIMEOUT); +let timeout; +if (TIMEOUT!=='no') timeout = setTimeout(remove, 1000*TIMEOUT); let dy = 0; g.reset(); From 3c21342a7d35b0d219c39f7097c1564664c0ca15 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 16 Aug 2023 23:36:01 +0200 Subject: [PATCH 017/105] libslider: split and move to modules and test app --- apps/{libslider => slidertest}/ChangeLog | 0 apps/{libslider => slidertest}/README.md | 0 apps/{libslider => slidertest}/app-icon.js | 0 apps/{libslider => slidertest}/app.js | 0 apps/{libslider => slidertest}/app.png | Bin apps/{libslider => slidertest}/metadata.json | 8 +++----- apps/libslider/lib.js => modules/SliderInput.js | 0 7 files changed, 3 insertions(+), 5 deletions(-) rename apps/{libslider => slidertest}/ChangeLog (100%) rename apps/{libslider => slidertest}/README.md (100%) rename apps/{libslider => slidertest}/app-icon.js (100%) rename apps/{libslider => slidertest}/app.js (100%) rename apps/{libslider => slidertest}/app.png (100%) rename apps/{libslider => slidertest}/metadata.json (51%) rename apps/libslider/lib.js => modules/SliderInput.js (100%) diff --git a/apps/libslider/ChangeLog b/apps/slidertest/ChangeLog similarity index 100% rename from apps/libslider/ChangeLog rename to apps/slidertest/ChangeLog diff --git a/apps/libslider/README.md b/apps/slidertest/README.md similarity index 100% rename from apps/libslider/README.md rename to apps/slidertest/README.md diff --git a/apps/libslider/app-icon.js b/apps/slidertest/app-icon.js similarity index 100% rename from apps/libslider/app-icon.js rename to apps/slidertest/app-icon.js diff --git a/apps/libslider/app.js b/apps/slidertest/app.js similarity index 100% rename from apps/libslider/app.js rename to apps/slidertest/app.js diff --git a/apps/libslider/app.png b/apps/slidertest/app.png similarity index 100% rename from apps/libslider/app.png rename to apps/slidertest/app.png diff --git a/apps/libslider/metadata.json b/apps/slidertest/metadata.json similarity index 51% rename from apps/libslider/metadata.json rename to apps/slidertest/metadata.json index d906dac37..3baec373a 100644 --- a/apps/libslider/metadata.json +++ b/apps/slidertest/metadata.json @@ -5,13 +5,11 @@ "description": "A detailed description of my great app", "icon": "app.png", "tags": "ui", - "supports" : ["BANGLEJS2"], - "provides_modules": ["SliderInput"], + "supports": ["BANGLEJS2"], "readme": "README.md", "storage": [ - {"name":"libslider.img","url":"app-icon.js","evaluate":true}, - {"name":"libslider.app.js","url":"app.js"}, - {"name":"SliderInput","url":"lib.js"} + {"name":"slidertest.img","url":"app-icon.js","evaluate":"true"}, + {"name":"slidertest.app.js","url":"app.js"} ] } diff --git a/apps/libslider/lib.js b/modules/SliderInput.js similarity index 100% rename from apps/libslider/lib.js rename to modules/SliderInput.js From 2ad99fe948a45a2cf4350c2667b2e9093041e14a Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Fri, 13 Oct 2023 21:34:39 +0200 Subject: [PATCH 018/105] slidertest: remove slider test app --- apps/slidertest/ChangeLog | 1 - apps/slidertest/README.md | 30 ------------------------------ apps/slidertest/app-icon.js | 1 - apps/slidertest/app.js | 24 ------------------------ apps/slidertest/app.png | Bin 1620 -> 0 bytes apps/slidertest/metadata.json | 15 --------------- 6 files changed, 71 deletions(-) delete mode 100644 apps/slidertest/ChangeLog delete mode 100644 apps/slidertest/README.md delete mode 100644 apps/slidertest/app-icon.js delete mode 100644 apps/slidertest/app.js delete mode 100644 apps/slidertest/app.png delete mode 100644 apps/slidertest/metadata.json diff --git a/apps/slidertest/ChangeLog b/apps/slidertest/ChangeLog deleted file mode 100644 index 5560f00bc..000000000 --- a/apps/slidertest/ChangeLog +++ /dev/null @@ -1 +0,0 @@ -0.01: New App! diff --git a/apps/slidertest/README.md b/apps/slidertest/README.md deleted file mode 100644 index eff3919c6..000000000 --- a/apps/slidertest/README.md +++ /dev/null @@ -1,30 +0,0 @@ -# App Name - -More information on making apps: - -* http://www.espruino.com/Bangle.js+First+App -* http://www.espruino.com/Bangle.js+App+Loader - -Describe the app... - -Add screen shots (if possible) to the app folder and link then into this file with ![](.png) - -## Usage - -Describe how to use it - -## Features - -Name the function - -## Controls - -Name the buttons and what they are used for - -## Requests - -Name who should be contacted for support/update requests - -## Creator - -Your name diff --git a/apps/slidertest/app-icon.js b/apps/slidertest/app-icon.js deleted file mode 100644 index 49232b838..000000000 --- a/apps/slidertest/app-icon.js +++ /dev/null @@ -1 +0,0 @@ -require("heatshrink").decompress(atob("mEwwJC/AH4A/AH4AgA==")) diff --git a/apps/slidertest/app.js b/apps/slidertest/app.js deleted file mode 100644 index c93e21969..000000000 --- a/apps/slidertest/app.js +++ /dev/null @@ -1,24 +0,0 @@ -{ -let callback = (mode,fb)=>{ - if (mode =="map") Bangle.musicControl({cmd:"volumesetlevel",extra:Math.round(100*fb/30)}); - if (mode =="incr") Bangle.musicControl(fb>0?"volumedown":"volumeup"); - if (mode =="remove") {audioLevels.c = fb; ebLast = 0;} -}; - -g.reset().clear().setColor(1,0,0).fillRect(0,0,176,176); - -let audioLevels; -let audioHandler = (e)=>{audioLevels = e;}; -Bangle.on('audio', audioHandler); -Bangle.musicControl("volumegetlevel"); - -let ebLast = 0; -Bangle.on('drag', (e)=>{ - if (ebLast==0) { - Bangle.musicControl("volumegetlevel"); - setTimeout(()=>{require("SliderInput").interface(callback, {useMap:true, steps:audioLevels.u, currLevel:audioLevels.c});},200); - } - ebLast = e.b; -} -); -} diff --git a/apps/slidertest/app.png b/apps/slidertest/app.png deleted file mode 100644 index 582cb2e0853a5a2899a3afbd7eb19cde2ee7f6a0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1620 zcmV-a2CMmrP)1gXjloC|3_d8m;N2OpV(|i0q4YwBna<2! zK9thw%-*|urnNbV{Gax^?eD+#{x0kLJ~)lj_;W+1>qV*k8akT^^dvctZccUyj4}H~#M%Wwee_v` zHMv7o%BM8@dBrLshn{wGD9BDl?^eV5vSM3T96;NnHvtc6La=(qzq)xrX1d8bK-TN- zrd_f$_O`9nEmS+_S7HTXK<&u;LDIW|qlN&KJvM}tt6TVVqL-AvNv`B*{NzNpBfSQwQP5~Sf(Dp@Vq1+3Q`N9wBQN2`J_?M^u0FIMlt?p^8 z%U3%80kIwg!T{E9<8J18S&$k1`eO)@HP+=TZKo(z3_A3VFYJB=sn`2^Q$mRE>02(+W)np;)L1!GUvU2{O{<&F_nE6Qe#D~Xf|dD z+?d3-D1(IUiL`C2;PPv4CKw8H)v7h8^obJ&Z6D0CjVUe8Xq_NAymxUyPAMU^CCrIu z%1M71EC`5o2if_~7E&h??0jeQ1Y3N6p?}G72FmS*)xQD)%wBE=2tW6@(+MTi!fk9H1pWKew2(jTXVu4%vk26QvSQCbGmk`Z)Y! zBIhh)6vG2)h6mF8wC^|l$M(Eo9D?JiW}=_T2jUA>LC80foTera{^p)Wi`>}Gf;(|ZwEZQ zS^k|*9wyt=f4ZOo!xty7{%}HKD9tBZ50g$=%v&&vMa!#@Nsf>EkEEDA*ST6fiC+An zsNK1#>!x0obq@j$QqYU-ad3ZvbjqUU+%iw(0WahgmHV6yeLWqoYkSl4pzFQ(_Vp&I ztO{WI-48rGLwQb?#vgVvduyd9_6W)rFRoQJq3I(J?{Xmin45#=3l9BmL6Bp<*MZej zrsWN7oRPUr7IvrHoIHOjS=gPTCw>d)^LQK+B|=f2qbGjrWaOd5D<<9Dv>MTW0X3z> zyPy}9`<>1~?NCx@m8G$_@rRTy5zH12YM&P)=tU+L^fgY z^0Z&_6^qdVuwgN3wt_Ze(10?J@%{C2grBk42hsu74qEo^nd&v`X`IHN9lrxzS~GeF S(*#!l0000 Date: Thu, 17 Aug 2023 02:47:26 +0200 Subject: [PATCH 019/105] SliderInput: be lazy about running callback funct only run if the sliders level was changed. --- modules/SliderInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/SliderInput.js b/modules/SliderInput.js index 1ac7d2873..495d1933e 100644 --- a/modules/SliderInput.js +++ b/modules/SliderInput.js @@ -38,7 +38,7 @@ let dragSlider = e=>{ level = Math.min(Math.max(STEPS-input,0),STEPS); - cb("map",level); + if (level != prevLevel) cb("map",level); draw(level); } else if (USE_INCR) { // Heavily inspired by "updown" mode of setUI. From 49d834609847fa7ec690c0590512926e6c2e5a1e Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Thu, 17 Aug 2023 02:49:35 +0200 Subject: [PATCH 020/105] SliderInput: default prevLevel to middle of range. --- modules/SliderInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/SliderInput.js b/modules/SliderInput.js index 495d1933e..d3d8e9ca4 100644 --- a/modules/SliderInput.js +++ b/modules/SliderInput.js @@ -16,7 +16,7 @@ const STEP_SIZE = HEIGHT/STEPS; // Initialize the level let level; -let prevLevel = conf.currLevel || 0; +let prevLevel = conf.currLevel || STEPS/2; let levelHeight; let firstRun = true; From ffab963837ed5c149cbdf8af3140f9075f5685cb Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Fri, 18 Aug 2023 01:52:24 +0200 Subject: [PATCH 021/105] SliderInput: add horizontal configuration --- modules/SliderInput.js | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/modules/SliderInput.js b/modules/SliderInput.js index d3d8e9ca4..42a77d5fd 100644 --- a/modules/SliderInput.js +++ b/modules/SliderInput.js @@ -3,9 +3,10 @@ exports.interface = function(cb, conf) { conf = conf?conf:{}; const USE_MAP = conf.useMap || false; const USE_INCR = conf.useIncr || true; -const X_START = conf.xStart || 176-55; +const ROTATE = conf.horizontal || false; +const X_START = ROTATE?(conf.yStart || 5):(conf.xStart || 176-55); const WIDTH = conf.width-9 || 50-9; // -9 to compensate for the border. -const Y_START = conf.yStart || 5; +const Y_START = ROTATE?(conf.xStart || 176-55):(conf.yStart || 5); const HEIGHT = conf.height-5 || 165-5; // -5 to compensate for the border. const STEPS = conf.steps || 30; //Default corresponds to my phones volume range, [0,30]. Maybe it should be 31. Math is hard sometimes... const OVERSIZE_R = conf.oversizeR || 0; @@ -28,10 +29,10 @@ let dragSlider = e=>{ E.stopEventPropagation&&E.stopEventPropagation(); if (timeout) {clearTimeout(timeout); timeout = setTimeout(remove, 1000*TIMEOUT);} - let input = Math.min(e.y,170); + let input = Math.min(ROTATE?175-e.x:e.y, 170); input = Math.round(input/STEP_SIZE); - if (ebLast==0) exFirst = e.x; + if (ebLast==0) exFirst = ROTATE?175-e.y:e.x; // If draging on the indicator, adjust one-to-one. if (USE_MAP && exFirst>X_START-OVERSIZE_L*WIDTH && exFirst{ } else if (USE_INCR) { // Heavily inspired by "updown" mode of setUI. - dy += e.dy; + dy += ROTATE?-e.dx:e.dy; //if (!e.b) dy=0; let incr; @@ -60,7 +61,7 @@ let dragSlider = e=>{ ebLast = e.b; }; -let ovr = Graphics.createArrayBuffer(WIDTH+9,HEIGHT+5,1,{msb:true}); +let ovr = Graphics.createArrayBuffer(ROTATE?HEIGHT+5:WIDTH+9, ROTATE?WIDTH+9:HEIGHT+5, 1, {msb:true}); let draw = (level)=>{ "ram"; @@ -71,7 +72,7 @@ let draw = (level)=>{ // Pauses and resets the time out when interacted with. if (firstRun) { - ovr.setColor(1). + ovr.setColor(1).setRotation(ROTATE). fillRect({x:0,y:0,w:WIDTH+9,y2:HEIGHT+5,r:0}); // To get outer border... } @@ -80,15 +81,15 @@ let draw = (level)=>{ levelHeight = level==0?WIDTH:level*STEP_SIZE; // Math.max(level*STEP_SIZE,STEP_SIZE); prevLevel = level; - ovr.setColor(0). + ovr.setColor(0).setRotation(ROTATE). fillRect({x:2,y:2,w:WIDTH+4,y2:HEIGHT+2,r:0}). // ... and here it's made hollow. setColor(0==level?0:1). fillRect({x:4,y:4+HEIGHT-levelHeight,w:WIDTH,y2:HEIGHT,r:0}); // Here the bar is drawn. Bangle.setLCDOverlay({ - width:WIDTH+9, height:HEIGHT+5, + width:ROTATE?HEIGHT+5:WIDTH+9, height:ROTATE?WIDTH+9:HEIGHT+5, bpp:1, transparent:0, buffer:ovr.buffer - },X_START,Y_START); + }, X_START, Y_START); //print(level); //print(process.memory().usage); From 604350e328a1193286bca6383d33c7dce773fb3c Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Mon, 21 Aug 2023 23:52:00 +0200 Subject: [PATCH 022/105] SliderInput: refactor to not use LCD overlay --- modules/SliderInput.js | 30 ++++++++++++------------------ 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/modules/SliderInput.js b/modules/SliderInput.js index 42a77d5fd..e79851242 100644 --- a/modules/SliderInput.js +++ b/modules/SliderInput.js @@ -12,6 +12,9 @@ const STEPS = conf.steps || 30; //Default corresponds to my phones volume range, const OVERSIZE_R = conf.oversizeR || 0; const OVERSIZE_L = conf.oversizeL || 0; const TIMEOUT = conf.timeout || 1; +const COL_FG = conf.colorFG || g.theme.fg2; +const COL_BG = conf.colorBG || g.theme.bg2; +const LAZY = conf.lazy || true; const STEP_SIZE = HEIGHT/STEPS; @@ -28,7 +31,9 @@ let dragSlider = e=>{ "ram"; E.stopEventPropagation&&E.stopEventPropagation(); - if (timeout) {clearTimeout(timeout); timeout = setTimeout(remove, 1000*TIMEOUT);} + if (timeout) {clearTimeout(timeout); timeout = undefined;} + if (e.b==0 && !timeout) timeout = setTimeout(remove, 1000*TIMEOUT); + let input = Math.min(ROTATE?175-e.x:e.y, 170); input = Math.round(input/STEP_SIZE); @@ -61,8 +66,6 @@ let dragSlider = e=>{ ebLast = e.b; }; -let ovr = Graphics.createArrayBuffer(ROTATE?HEIGHT+5:WIDTH+9, ROTATE?WIDTH+9:HEIGHT+5, 1, {msb:true}); - let draw = (level)=>{ "ram"; // Draw the indicator. @@ -71,33 +74,24 @@ let draw = (level)=>{ // If user drags directly on the draw area, adjust level one-to-one. // Pauses and resets the time out when interacted with. - if (firstRun) { - ovr.setColor(1).setRotation(ROTATE). - fillRect({x:0,y:0,w:WIDTH+9,y2:HEIGHT+5,r:0}); // To get outer border... + if (firstRun || !LAZY) { + g.setColor(COL_FG).fillRect({x:X_START,y:Y_START,w:WIDTH+8,y2:Y_START+HEIGHT+5,r:0}); // To get outer border... } - if (level == prevLevel) {if (!firstRun) return; if (firstRun) firstRun = false;} levelHeight = level==0?WIDTH:level*STEP_SIZE; // Math.max(level*STEP_SIZE,STEP_SIZE); prevLevel = level; - ovr.setColor(0).setRotation(ROTATE). - fillRect({x:2,y:2,w:WIDTH+4,y2:HEIGHT+2,r:0}). // ... and here it's made hollow. - setColor(0==level?0:1). - fillRect({x:4,y:4+HEIGHT-levelHeight,w:WIDTH,y2:HEIGHT,r:0}); // Here the bar is drawn. - Bangle.setLCDOverlay({ - width:ROTATE?HEIGHT+5:WIDTH+9, height:ROTATE?WIDTH+9:HEIGHT+5, - bpp:1, transparent:0, - buffer:ovr.buffer - }, X_START, Y_START); + g.setColor(COL_BG). + fillRect({x:X_START+2,y:Y_START+2,w:WIDTH+4,y2:Y_START+HEIGHT+2,r:0}). // ... and here it's made hollow. + setColor(0==level?COL_BG:COL_FG). + fillRect({x:X_START+4,y:Y_START+4+HEIGHT-levelHeight,w:WIDTH,y2:Y_START+HEIGHT,r:0}); // Here the bar is drawn. //print(level); //print(process.memory().usage); }; let remove = ()=> { - ovr.clear().reset(); - Bangle.setLCDOverlay(); Bangle.removeListener('drag', dragSlider); cb("remove", prevLevel); }; From ead101bb9039e8cdde0523ab38be0119620b9ebc Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Fri, 25 Aug 2023 01:05:34 +0200 Subject: [PATCH 023/105] SliderInput: (WIP) fix rotation after refactor --- modules/SliderInput.js | 39 +++++++++++++++++++++++++++++++-------- 1 file changed, 31 insertions(+), 8 deletions(-) diff --git a/modules/SliderInput.js b/modules/SliderInput.js index e79851242..aae17709e 100644 --- a/modules/SliderInput.js +++ b/modules/SliderInput.js @@ -4,10 +4,10 @@ conf = conf?conf:{}; const USE_MAP = conf.useMap || false; const USE_INCR = conf.useIncr || true; const ROTATE = conf.horizontal || false; -const X_START = ROTATE?(conf.yStart || 5):(conf.xStart || 176-55); -const WIDTH = conf.width-9 || 50-9; // -9 to compensate for the border. -const Y_START = ROTATE?(conf.xStart || 176-55):(conf.yStart || 5); -const HEIGHT = conf.height-5 || 165-5; // -5 to compensate for the border. +let X_START = (conf.xStart || 176-55); +let WIDTH = conf.width-9 || 50-9; // -9 to compensate for the border. +let Y_START = (conf.yStart || 5); +let HEIGHT = conf.height-5 || 165-5; // -5 to compensate for the border. const STEPS = conf.steps || 30; //Default corresponds to my phones volume range, [0,30]. Maybe it should be 31. Math is hard sometimes... const OVERSIZE_R = conf.oversizeR || 0; const OVERSIZE_L = conf.oversizeL || 0; @@ -18,6 +18,16 @@ const LAZY = conf.lazy || true; const STEP_SIZE = HEIGHT/STEPS; +if (ROTATE) { + let mediator = X_START; + X_START = Y_START; + Y_START = mediator; + mediator = WIDTH; + WIDTH = HEIGHT; + HEIGHT = mediator; + delete mediator; +} + // Initialize the level let level; let prevLevel = conf.currLevel || STEPS/2; @@ -27,6 +37,19 @@ let firstRun = true; let ebLast = 0; let exFirst; +let wasOnIndicator = (exFirst)=>{ + "ram"; + if (!ROTATE) return exFirst>X_START-OVERSIZE_L*WIDTH && exFirstY_START-OVERSIZE_L*HEIGHT && exFirst{ + "ram"; + if (!ROTATE) return {x:X_START+4,y:Y_START+4+HEIGHT-levelHeight,w:WIDTH,y2:Y_START+HEIGHT,r:0}; + if (ROTATE) return {x:X_START+4,y:Y_START+4,w:X_START+4+levelHeight-2,y2:Y_START+HEIGHT,r:0}; +}; + + let dragSlider = e=>{ "ram"; E.stopEventPropagation&&E.stopEventPropagation(); @@ -37,10 +60,10 @@ let dragSlider = e=>{ let input = Math.min(ROTATE?175-e.x:e.y, 170); input = Math.round(input/STEP_SIZE); - if (ebLast==0) exFirst = ROTATE?175-e.y:e.x; + if (ebLast==0) exFirst = ROTATE?e.y:e.x; // If draging on the indicator, adjust one-to-one. - if (USE_MAP && exFirst>X_START-OVERSIZE_L*WIDTH && exFirst{ } if (level == prevLevel) {if (!firstRun) return; if (firstRun) firstRun = false;} - levelHeight = level==0?WIDTH:level*STEP_SIZE; // Math.max(level*STEP_SIZE,STEP_SIZE); + levelHeight = level*STEP_SIZE; //level==0?WIDTH:level*STEP_SIZE; // Math.max(level*STEP_SIZE,STEP_SIZE); prevLevel = level; g.setColor(COL_BG). fillRect({x:X_START+2,y:Y_START+2,w:WIDTH+4,y2:Y_START+HEIGHT+2,r:0}). // ... and here it's made hollow. setColor(0==level?COL_BG:COL_FG). - fillRect({x:X_START+4,y:Y_START+4+HEIGHT-levelHeight,w:WIDTH,y2:Y_START+HEIGHT,r:0}); // Here the bar is drawn. + fillRect(updateBar(levelHeight)); // Here the bar is drawn. //print(level); //print(process.memory().usage); From afa7fd91ec84170fbd41ef0ae4aa004a8ec1f224 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sat, 26 Aug 2023 20:06:17 +0200 Subject: [PATCH 024/105] SliderInput: precalculate static rectangles also remove unneeded variable 'levelHeight' --- modules/SliderInput.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/modules/SliderInput.js b/modules/SliderInput.js index aae17709e..960324407 100644 --- a/modules/SliderInput.js +++ b/modules/SliderInput.js @@ -31,12 +31,14 @@ if (ROTATE) { // Initialize the level let level; let prevLevel = conf.currLevel || STEPS/2; -let levelHeight; let firstRun = true; let ebLast = 0; let exFirst; +const borderRect = {x:X_START,y:Y_START,w:WIDTH+8,y2:Y_START+HEIGHT+5,r:0}; +const hollowRect = {x:X_START+2,y:Y_START+2,w:WIDTH+4,y2:Y_START+HEIGHT+2,r:0}; + let wasOnIndicator = (exFirst)=>{ "ram"; if (!ROTATE) return exFirst>X_START-OVERSIZE_L*WIDTH && exFirst{ // Pauses and resets the time out when interacted with. if (firstRun || !LAZY) { - g.setColor(COL_FG).fillRect({x:X_START,y:Y_START,w:WIDTH+8,y2:Y_START+HEIGHT+5,r:0}); // To get outer border... + g.setColor(COL_FG).fillRect(borderRect); // To get outer border... } if (level == prevLevel) {if (!firstRun) return; if (firstRun) firstRun = false;} - levelHeight = level*STEP_SIZE; //level==0?WIDTH:level*STEP_SIZE; // Math.max(level*STEP_SIZE,STEP_SIZE); prevLevel = level; g.setColor(COL_BG). - fillRect({x:X_START+2,y:Y_START+2,w:WIDTH+4,y2:Y_START+HEIGHT+2,r:0}). // ... and here it's made hollow. + fillRect(hollowRect). // ... and here it's made hollow. setColor(0==level?COL_BG:COL_FG). - fillRect(updateBar(levelHeight)); // Here the bar is drawn. + fillRect(updateBar(level*STEP_SIZE)); // Here the bar is drawn. //print(level); //print(process.memory().usage); From c86fd3458b2dd5d6e806699308751414e8ed34c0 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sat, 26 Aug 2023 20:18:36 +0200 Subject: [PATCH 025/105] SliderInput: load test app on load from Web IDE --- modules/SliderInput.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/modules/SliderInput.js b/modules/SliderInput.js index 960324407..2f0c1fb21 100644 --- a/modules/SliderInput.js +++ b/modules/SliderInput.js @@ -1,3 +1,5 @@ +try { // for making it possiblie to run the test app in the following catch statement. It would complaing on `exported` not being defined. + exports.interface = function(cb, conf) { // Configuration for the indicator: conf = conf?conf:{}; @@ -127,3 +129,5 @@ let dy = 0; g.reset(); Bangle.prependListener('drag', dragSlider); } + +} catch (e) {eval(require("Storage").read("slidertest.app.js"));} From abfca68abbe572c52c2d94b45596210085483a83 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sat, 26 Aug 2023 23:31:19 +0200 Subject: [PATCH 026/105] SliderInput: fix slider graphics that was a little off after changing from using LCD overlay. --- modules/SliderInput.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/modules/SliderInput.js b/modules/SliderInput.js index 2f0c1fb21..0b90d11e5 100644 --- a/modules/SliderInput.js +++ b/modules/SliderInput.js @@ -6,10 +6,10 @@ conf = conf?conf:{}; const USE_MAP = conf.useMap || false; const USE_INCR = conf.useIncr || true; const ROTATE = conf.horizontal || false; -let X_START = (conf.xStart || 176-55); -let WIDTH = conf.width-9 || 50-9; // -9 to compensate for the border. -let Y_START = (conf.yStart || 5); -let HEIGHT = conf.height-5 || 165-5; // -5 to compensate for the border. +let X_START = (conf.xStart+4 || 176-54+4); // +4 to compensate for the border. +let WIDTH = conf.width-8 || 50-8; // -8 to compensate for the border. +let Y_START = (conf.yStart+4 || 5+4); // +4 to compensate for the border. +let HEIGHT = conf.height-8 || 164-8; // -8 to compensate for the border. const STEPS = conf.steps || 30; //Default corresponds to my phones volume range, [0,30]. Maybe it should be 31. Math is hard sometimes... const OVERSIZE_R = conf.oversizeR || 0; const OVERSIZE_L = conf.oversizeL || 0; @@ -17,6 +17,7 @@ const TIMEOUT = conf.timeout || 1; const COL_FG = conf.colorFG || g.theme.fg2; const COL_BG = conf.colorBG || g.theme.bg2; const LAZY = conf.lazy || true; +const ROUND = conf.rounded?40:0; const STEP_SIZE = HEIGHT/STEPS; @@ -38,22 +39,21 @@ let firstRun = true; let ebLast = 0; let exFirst; -const borderRect = {x:X_START,y:Y_START,w:WIDTH+8,y2:Y_START+HEIGHT+5,r:0}; -const hollowRect = {x:X_START+2,y:Y_START+2,w:WIDTH+4,y2:Y_START+HEIGHT+2,r:0}; - let wasOnIndicator = (exFirst)=>{ "ram"; if (!ROTATE) return exFirst>X_START-OVERSIZE_L*WIDTH && exFirstY_START-OVERSIZE_L*HEIGHT && exFirst{ "ram"; - if (!ROTATE) return {x:X_START+4,y:Y_START+4+HEIGHT-levelHeight,w:WIDTH,y2:Y_START+HEIGHT,r:0}; - if (ROTATE) return {x:X_START+4,y:Y_START+4,w:X_START+4+levelHeight-2,y2:Y_START+HEIGHT,r:0}; + if (!ROTATE) return {x:X_START,y:Y_START+HEIGHT-levelHeight,w:WIDTH,y2:Y_START+HEIGHT,r:ROUND}; + if (ROTATE) return {x:X_START,y:Y_START,w:levelHeight,h:HEIGHT,r:ROUND}; }; - let dragSlider = e=>{ "ram"; E.stopEventPropagation&&E.stopEventPropagation(); From a7787abba9f4ab9176a770ffb5202bd84f94b217 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sun, 27 Aug 2023 00:37:33 +0200 Subject: [PATCH 027/105] SliderInput: tweaks for showing multiple sliders --- modules/SliderInput.js | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/modules/SliderInput.js b/modules/SliderInput.js index 0b90d11e5..c19c3f4c8 100644 --- a/modules/SliderInput.js +++ b/modules/SliderInput.js @@ -4,7 +4,7 @@ exports.interface = function(cb, conf) { // Configuration for the indicator: conf = conf?conf:{}; const USE_MAP = conf.useMap || false; -const USE_INCR = conf.useIncr || true; +const USE_INCR = conf.useIncr===false?false:true; const ROTATE = conf.horizontal || false; let X_START = (conf.xStart+4 || 176-54+4); // +4 to compensate for the border. let WIDTH = conf.width-8 || 50-8; // -8 to compensate for the border. @@ -13,11 +13,13 @@ let HEIGHT = conf.height-8 || 164-8; // -8 to compensate for the border. const STEPS = conf.steps || 30; //Default corresponds to my phones volume range, [0,30]. Maybe it should be 31. Math is hard sometimes... const OVERSIZE_R = conf.oversizeR || 0; const OVERSIZE_L = conf.oversizeL || 0; -const TIMEOUT = conf.timeout || 1; +const TIMEOUT = conf.timeout===false?false:(conf.timeout===0?0:(conf.timeout || 1)); const COL_FG = conf.colorFG || g.theme.fg2; const COL_BG = conf.colorBG || g.theme.bg2; -const LAZY = conf.lazy || true; +const LAZY = conf.lazy===false?false:true; const ROUND = conf.rounded?40:0; +const PROPAGATE = conf.propagateDrag || false; +const IMMEDIATE_DRAW = conf.immediateDraw || false; const STEP_SIZE = HEIGHT/STEPS; @@ -56,10 +58,10 @@ let updateBar = (levelHeight)=>{ let dragSlider = e=>{ "ram"; - E.stopEventPropagation&&E.stopEventPropagation(); + if (!PROPAGATE) E.stopEventPropagation&&E.stopEventPropagation(); if (timeout) {clearTimeout(timeout); timeout = undefined;} - if (e.b==0 && !timeout) timeout = setTimeout(remove, 1000*TIMEOUT); + if (e.b==0 && !timeout && TIMEOUT) timeout = setTimeout(remove, 1000*TIMEOUT); let input = Math.min(ROTATE?175-e.x:e.y, 170); input = Math.round(input/STEP_SIZE); @@ -123,11 +125,15 @@ let remove = ()=> { }; let timeout; -if (TIMEOUT!=='no') timeout = setTimeout(remove, 1000*TIMEOUT); +if (TIMEOUT) timeout = setTimeout(remove, 1000*TIMEOUT); let dy = 0; g.reset(); Bangle.prependListener('drag', dragSlider); +if (IMMEDIATE_DRAW) draw(prevLevel); } -} catch (e) {eval(require("Storage").read("slidertest.app.js"));} +} catch (e) { + print(e); + eval(require("Storage").read("slidertest.app.js")); +} From 644d23a511f9a9ec828b21fbe4128ba8633f2c0a Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sun, 27 Aug 2023 01:00:03 +0200 Subject: [PATCH 028/105] SliderInput: default graphics depend on appRect --- modules/SliderInput.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/modules/SliderInput.js b/modules/SliderInput.js index c19c3f4c8..74505c1c2 100644 --- a/modules/SliderInput.js +++ b/modules/SliderInput.js @@ -1,15 +1,18 @@ -try { // for making it possiblie to run the test app in the following catch statement. It would complaing on `exported` not being defined. +try { // for making it possiblie to run the test app in the following catch statement. It would complain on `exports` not being defined. exports.interface = function(cb, conf) { + +const R = Bangle.appRect; + // Configuration for the indicator: conf = conf?conf:{}; const USE_MAP = conf.useMap || false; const USE_INCR = conf.useIncr===false?false:true; const ROTATE = conf.horizontal || false; -let X_START = (conf.xStart+4 || 176-54+4); // +4 to compensate for the border. -let WIDTH = conf.width-8 || 50-8; // -8 to compensate for the border. -let Y_START = (conf.yStart+4 || 5+4); // +4 to compensate for the border. -let HEIGHT = conf.height-8 || 164-8; // -8 to compensate for the border. +let X_START = (conf.xStart+4 || R.x2-R.w/4-4+4); // +4 to compensate for the border. +let WIDTH = conf.width-8 || R.w/4-8; // -8 to compensate for the border. +let Y_START = (conf.yStart+4 || R.y+4+4); // +4 to compensate for the border. +let HEIGHT = conf.height-8 || R.h-10-8; // -8 to compensate for the border. const STEPS = conf.steps || 30; //Default corresponds to my phones volume range, [0,30]. Maybe it should be 31. Math is hard sometimes... const OVERSIZE_R = conf.oversizeR || 0; const OVERSIZE_L = conf.oversizeL || 0; From 87a8593b04e6425d019c443b4128d22495ea8486 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sun, 27 Aug 2023 12:17:57 +0200 Subject: [PATCH 029/105] SliderInput: add function to auto progress making it possible to track progress in e.g. a song. --- modules/SliderInput.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/modules/SliderInput.js b/modules/SliderInput.js index 74505c1c2..7e2746445 100644 --- a/modules/SliderInput.js +++ b/modules/SliderInput.js @@ -23,6 +23,7 @@ const LAZY = conf.lazy===false?false:true; const ROUND = conf.rounded?40:0; const PROPAGATE = conf.propagateDrag || false; const IMMEDIATE_DRAW = conf.immediateDraw || false; +const AUTO_PROGRESS = conf.autoProgress || false; const STEP_SIZE = HEIGHT/STEPS; @@ -37,8 +38,8 @@ if (ROTATE) { } // Initialize the level -let level; -let prevLevel = conf.currLevel || STEPS/2; +let level = conf.currLevel || STEPS/2; +let prevLevel; let firstRun = true; let ebLast = 0; @@ -90,7 +91,7 @@ let dragSlider = e=>{ else { dy+=32; incr = -1;} Bangle.buzz(20); - level = Math.min(Math.max(prevLevel-incr,0),STEPS); + level = Math.min(Math.max(level-incr,0),STEPS); cb("incr",incr); draw(level); } @@ -133,7 +134,18 @@ if (TIMEOUT) timeout = setTimeout(remove, 1000*TIMEOUT); let dy = 0; g.reset(); Bangle.prependListener('drag', dragSlider); -if (IMMEDIATE_DRAW) draw(prevLevel); +if (IMMEDIATE_DRAW) draw(level); + +if (AUTO_PROGRESS) { + draw(level); + let autoUpdate = ()=>{ + level = level?level+1:0; + draw(level); + if (level==STEPS) {clearInterval(autoInterval); return;} + }; + let autoInterval; + autoInterval = setInterval(autoUpdate,1000); +} } } catch (e) { From 53242e8aaf4135c25a8872bc4e384f21c7709991 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 29 Aug 2023 22:03:42 +0200 Subject: [PATCH 030/105] SliderInput: contain config in an object --- modules/SliderInput.js | 114 ++++++++++++++++++++++------------------- 1 file changed, 61 insertions(+), 53 deletions(-) diff --git a/modules/SliderInput.js b/modules/SliderInput.js index 7e2746445..0153ca288 100644 --- a/modules/SliderInput.js +++ b/modules/SliderInput.js @@ -4,41 +4,49 @@ exports.interface = function(cb, conf) { const R = Bangle.appRect; -// Configuration for the indicator: -conf = conf?conf:{}; -const USE_MAP = conf.useMap || false; -const USE_INCR = conf.useIncr===false?false:true; -const ROTATE = conf.horizontal || false; -let X_START = (conf.xStart+4 || R.x2-R.w/4-4+4); // +4 to compensate for the border. -let WIDTH = conf.width-8 || R.w/4-8; // -8 to compensate for the border. -let Y_START = (conf.yStart+4 || R.y+4+4); // +4 to compensate for the border. -let HEIGHT = conf.height-8 || R.h-10-8; // -8 to compensate for the border. -const STEPS = conf.steps || 30; //Default corresponds to my phones volume range, [0,30]. Maybe it should be 31. Math is hard sometimes... -const OVERSIZE_R = conf.oversizeR || 0; -const OVERSIZE_L = conf.oversizeL || 0; -const TIMEOUT = conf.timeout===false?false:(conf.timeout===0?0:(conf.timeout || 1)); -const COL_FG = conf.colorFG || g.theme.fg2; -const COL_BG = conf.colorBG || g.theme.bg2; -const LAZY = conf.lazy===false?false:true; -const ROUND = conf.rounded?40:0; -const PROPAGATE = conf.propagateDrag || false; -const IMMEDIATE_DRAW = conf.immediateDraw || false; -const AUTO_PROGRESS = conf.autoProgress || false; +// configuration for the indicator: -const STEP_SIZE = HEIGHT/STEPS; +let c = Object.assign({ +useMap:false, +useIncr:true, +horizontal:false, +xStart:R.x2-R.w/4-4, +width:R.w/4, +yStart:R.y+4, +height:R.h-10, +steps:30, // Default corresponds to my phones volume range, [0,30]. Maybe it should be 31. Math is hard sometimes... +oversizeR:0, +oversizeL:0, +timeout:1, +colorFG:g.theme.fg2, +colorBG:g.theme.bg2, +lazy:true, +rounded:0, +propagateDrag:false, +immediateDraw:false, +autoProgress:false, +},conf); -if (ROTATE) { - let mediator = X_START; - X_START = Y_START; - Y_START = mediator; - mediator = WIDTH; - WIDTH = HEIGHT; - HEIGHT = mediator; +if (c.xStart) c.xStart += 4; // +4 to compensate for the border. +if (c.width) c.width -= 8; // +8 to compensate for the border. +if (c.yStart) c.yStart += 4; // +4 to compensate for the border. +if (c.height) c.height -= 8; // +8 to compensate for the border. +if (c.rounded) c.rounded = 40; + +const STEP_SIZE = c.height/c.steps; + +if (c.horizontal) { + let mediator = c.xStart; + c.xStart = c.yStart; + c.yStart = mediator; + mediator = c.width; + c.width = c.height; + c.height = mediator; delete mediator; } // Initialize the level -let level = conf.currLevel || STEPS/2; +let level = c.currLevel || c.steps/2; let prevLevel; let firstRun = true; @@ -47,42 +55,42 @@ let exFirst; let wasOnIndicator = (exFirst)=>{ "ram"; - if (!ROTATE) return exFirst>X_START-OVERSIZE_L*WIDTH && exFirstY_START-OVERSIZE_L*HEIGHT && exFirstc.xStart-c.oversizeL*c.width && exFirstc.yStart-c.oversizeL*c.height && exFirst{ "ram"; - if (!ROTATE) return {x:X_START,y:Y_START+HEIGHT-levelHeight,w:WIDTH,y2:Y_START+HEIGHT,r:ROUND}; - if (ROTATE) return {x:X_START,y:Y_START,w:levelHeight,h:HEIGHT,r:ROUND}; + if (!c.horizontal) return {x:c.xStart,y:c.yStart+c.height-levelHeight,w:c.width,y2:c.yStart+c.height,r:c.rounded}; + if (c.horizontal) return {x:c.xStart,y:c.yStart,w:levelHeight,h:c.height,r:c.rounded}; }; let dragSlider = e=>{ "ram"; - if (!PROPAGATE) E.stopEventPropagation&&E.stopEventPropagation(); + if (!c.propagateDrag) E.stopEventPropagation&&E.stopEventPropagation(); if (timeout) {clearTimeout(timeout); timeout = undefined;} - if (e.b==0 && !timeout && TIMEOUT) timeout = setTimeout(remove, 1000*TIMEOUT); + if (e.b==0 && !timeout && (c.timeout || c.timeout===0)) timeout = setTimeout(remove, 1000*c.timeout); - let input = Math.min(ROTATE?175-e.x:e.y, 170); + let input = Math.min(c.horizontal?175-e.x:e.y, 170); input = Math.round(input/STEP_SIZE); - if (ebLast==0) exFirst = ROTATE?e.y:e.x; + if (ebLast==0) exFirst = c.horizontal?e.y:e.x; // If draging on the indicator, adjust one-to-one. - if (USE_MAP && wasOnIndicator(exFirst)) { + if (c.useMap && wasOnIndicator(exFirst)) { - level = Math.min(Math.max(STEPS-input,0),STEPS); + level = Math.min(Math.max(c.steps-input,0),c.steps); if (level != prevLevel) cb("map",level); draw(level); - } else if (USE_INCR) { // Heavily inspired by "updown" mode of setUI. + } else if (c.useIncr) { // Heavily inspired by "updown" mode of setUI. - dy += ROTATE?-e.dx:e.dy; + dy += c.horizontal?-e.dx:e.dy; //if (!e.b) dy=0; let incr; @@ -91,7 +99,7 @@ let dragSlider = e=>{ else { dy+=32; incr = -1;} Bangle.buzz(20); - level = Math.min(Math.max(level-incr,0),STEPS); + level = Math.min(Math.max(level-incr,0),c.steps); cb("incr",incr); draw(level); } @@ -107,19 +115,19 @@ let draw = (level)=>{ // If user drags directly on the draw area, adjust level one-to-one. // Pauses and resets the time out when interacted with. - if (firstRun || !LAZY) { - g.setColor(COL_FG).fillRect(borderRect); // To get outer border... + if (firstRun || !c.lazy) { + g.setColor(c.colorFG).fillRect(borderRect); // To get outer border... } if (level == prevLevel) {if (!firstRun) return; if (firstRun) firstRun = false;} prevLevel = level; - g.setColor(COL_BG). + g.setColor(c.colorBG). fillRect(hollowRect). // ... and here it's made hollow. - setColor(0==level?COL_BG:COL_FG). + setColor(0==level?c.colorBG:c.colorFG). fillRect(updateBar(level*STEP_SIZE)); // Here the bar is drawn. - //print(level); + print(level); //print(process.memory().usage); }; @@ -129,19 +137,19 @@ let remove = ()=> { }; let timeout; -if (TIMEOUT) timeout = setTimeout(remove, 1000*TIMEOUT); +if (c.timeout || c.timeout===0) timeout = setTimeout(remove, 1000*c.timeout); let dy = 0; g.reset(); Bangle.prependListener('drag', dragSlider); -if (IMMEDIATE_DRAW) draw(level); +if (c.immediateDraw) draw(level); -if (AUTO_PROGRESS) { +if (c.autoProgress) { draw(level); let autoUpdate = ()=>{ level = level?level+1:0; draw(level); - if (level==STEPS) {clearInterval(autoInterval); return;} + if (level==c.steps) {clearInterval(autoInterval); return;} }; let autoInterval; autoInterval = setInterval(autoUpdate,1000); From 7e906ede2566579f9b969ccf673b2a1818c8c273 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sat, 2 Sep 2023 11:17:04 +0200 Subject: [PATCH 031/105] SliderInput:refactor to return obj w funcs & vars ... making it possible to interact with the slider reachable in the scope where the slider was initiated from. --- modules/SliderInput.js | 164 ++++++++++++++++++++--------------------- 1 file changed, 81 insertions(+), 83 deletions(-) diff --git a/modules/SliderInput.js b/modules/SliderInput.js index 0153ca288..9dc754385 100644 --- a/modules/SliderInput.js +++ b/modules/SliderInput.js @@ -4,9 +4,13 @@ exports.interface = function(cb, conf) { const R = Bangle.appRect; +let o = {}; +o.v = {}; // variables go here. +o.f = {}; // functions go here. + // configuration for the indicator: -let c = Object.assign({ +o.c = Object.assign({ // constants go here. useMap:false, useIncr:true, horizontal:false, @@ -23,137 +27,131 @@ colorBG:g.theme.bg2, lazy:true, rounded:0, propagateDrag:false, -immediateDraw:false, +immediatedraw:false, autoProgress:false, },conf); -if (c.xStart) c.xStart += 4; // +4 to compensate for the border. -if (c.width) c.width -= 8; // +8 to compensate for the border. -if (c.yStart) c.yStart += 4; // +4 to compensate for the border. -if (c.height) c.height -= 8; // +8 to compensate for the border. -if (c.rounded) c.rounded = 40; +o.c._xStart = o.c.xStart + 4; // +4 to compensate for the border. +o.c._width = o.c.width - 8; // -8 to compensate for the border. +o.c._yStart = o.c.yStart + 4; // +4 to compensate for the border. +o.c._height = o.c.height - 8; // -8 to compensate for the border. +if (o.c.rounded) o.c.rounded = 40; -const STEP_SIZE = c.height/c.steps; +o.c.STEP_SIZE = o.c._height/o.c.steps; -if (c.horizontal) { - let mediator = c.xStart; - c.xStart = c.yStart; - c.yStart = mediator; - mediator = c.width; - c.width = c.height; - c.height = mediator; +if (o.c.horizontal) { + let mediator = o.c._xStart; + o.c._xStart = o.c._yStart; + o.c._yStart = mediator; + mediator = o.c._width; + o.c._width = o.c._height; + o.c._height = mediator; + + mediator = o.c.xStart; + o.c.xStart = o.c.yStart; + o.c.yStart = mediator; + mediator = o.c.width; + o.c.width = o.c.height; + o.c.height = mediator; delete mediator; } // Initialize the level -let level = c.currLevel || c.steps/2; -let prevLevel; +o.v.level = o.c.currLevel || o.c.steps/2; -let firstRun = true; -let ebLast = 0; -let exFirst; +o.v.firstRun = true; +o.v.ebLast = 0; -let wasOnIndicator = (exFirst)=>{ +o.f.wasOnIndicator = (exFirst)=>{ "ram"; - if (!c.horizontal) return exFirst>c.xStart-c.oversizeL*c.width && exFirstc.yStart-c.oversizeL*c.height && exFirsto.c._xStart-o.c.oversizeL*o.c._width && exFirsto.c._yStart-o.c.oversizeL*o.c._height && exFirst{ +o.f.updateBar = (levelHeight)=>{ "ram"; - if (!c.horizontal) return {x:c.xStart,y:c.yStart+c.height-levelHeight,w:c.width,y2:c.yStart+c.height,r:c.rounded}; - if (c.horizontal) return {x:c.xStart,y:c.yStart,w:levelHeight,h:c.height,r:c.rounded}; + if (!o.c.horizontal) return {x:o.c._xStart,y:o.c._yStart+o.c._height-levelHeight,w:o.c._width,y2:o.c._yStart+o.c._height,r:o.c.rounded}; + if (o.c.horizontal) return {x:o.c._xStart,y:o.c._yStart,w:levelHeight,h:o.c._height,r:o.c.rounded}; }; -let dragSlider = e=>{ +o.f.dragSlider = e=>{ "ram"; - if (!c.propagateDrag) E.stopEventPropagation&&E.stopEventPropagation(); + if (!o.c.propagateDrag) E.stopEventPropagation&&E.stopEventPropagation(); - if (timeout) {clearTimeout(timeout); timeout = undefined;} - if (e.b==0 && !timeout && (c.timeout || c.timeout===0)) timeout = setTimeout(remove, 1000*c.timeout); + if (o.v.timeoutID) {clearTimeout(o.v.timeoutID); o.v.timeoutID = undefined;} + if (e.b==0 && !o.v.timeoutID && (o.c.timeout || o.c.timeout===0)) o.v.timeoutID = setTimeout(o.f.remove, 1000*o.c.timeout); - let input = Math.min(c.horizontal?175-e.x:e.y, 170); - input = Math.round(input/STEP_SIZE); + let input = Math.min(o.c.horizontal?175-e.x:e.y, 170); + input = Math.round(input/o.c.STEP_SIZE); - if (ebLast==0) exFirst = c.horizontal?e.y:e.x; + if (o.v.ebLast==0) exFirst = o.c.horizontal?e.y:e.x; - // If draging on the indicator, adjust one-to-one. - if (c.useMap && wasOnIndicator(exFirst)) { + if (o.c.useMap && o.f.wasOnIndicator(exFirst)) { // If draging starts on the indicator, adjust one-to-one. - level = Math.min(Math.max(c.steps-input,0),c.steps); + o.v.level = Math.min(Math.max(o.c.steps-input,0),o.c.steps); - if (level != prevLevel) cb("map",level); - draw(level); + if (o.v.level != o.v.prevLevel) cb("map",o.v.level); + o.f.draw(o.v.level); - } else if (c.useIncr) { // Heavily inspired by "updown" mode of setUI. + } else if (o.c.useIncr) { // Heavily inspired by "updown" mode of setUI. - dy += c.horizontal?-e.dx:e.dy; - //if (!e.b) dy=0; + o.v.dy += o.c.horizontal?-e.dx:e.dy; + //if (!e.b) o.v.dy=0; let incr; - while (Math.abs(dy)>32) { - if (dy>0) { dy-=32; incr = 1;} - else { dy+=32; incr = -1;} + while (Math.abs(o.v.dy)>32) { + if (o.v.dy>0) { o.v.dy-=32; incr = 1;} + else { o.v.dy+=32; incr = -1;} Bangle.buzz(20); - level = Math.min(Math.max(level-incr,0),c.steps); + o.v.level = Math.min(Math.max(o.v.level-incr,0),o.c.steps); cb("incr",incr); - draw(level); + o.f.draw(o.v.level); } } - ebLast = e.b; + o.v.ebLast = e.b; }; -let draw = (level)=>{ +o.f.draw = (level)=>{ "ram"; - // Draw the indicator. - // Should be displayed when a relevant drag event is detected. - // Should time out. - // If user drags directly on the draw area, adjust level one-to-one. - // Pauses and resets the time out when interacted with. - if (firstRun || !c.lazy) { - g.setColor(c.colorFG).fillRect(borderRect); // To get outer border... + if (true || o.v.firstRun || !o.c.lazy) { + g.setColor(o.c.colorFG).fillRect(o.c.borderRect); // To get outer border... } - if (level == prevLevel) {if (!firstRun) return; if (firstRun) firstRun = false;} + if (false && level == o.v.prevLevel) {if (!o.v.firstRun) return; if (o.v.firstRun) o.v.firstRun = false;} - prevLevel = level; + o.v.prevLevel = level; - g.setColor(c.colorBG). - fillRect(hollowRect). // ... and here it's made hollow. - setColor(0==level?c.colorBG:c.colorFG). - fillRect(updateBar(level*STEP_SIZE)); // Here the bar is drawn. + g.setColor(o.c.colorBG). + fillRect(o.c.hollowRect). // ... and here it's made hollow. + setColor(0==level?o.c.colorBG:o.c.colorFG). + fillRect(o.f.updateBar(level*o.c.STEP_SIZE)); // Here the bar is drawn. - print(level); + //print(level); //print(process.memory().usage); }; -let remove = ()=> { - Bangle.removeListener('drag', dragSlider); - cb("remove", prevLevel); +o.f.remove = ()=> { + Bangle.removeListener('drag', o.f.dragSlider); + cb("remove", o.v.prevLevel); }; -let timeout; -if (c.timeout || c.timeout===0) timeout = setTimeout(remove, 1000*c.timeout); - -let dy = 0; -g.reset(); -Bangle.prependListener('drag', dragSlider); -if (c.immediateDraw) draw(level); - -if (c.autoProgress) { - draw(level); - let autoUpdate = ()=>{ - level = level?level+1:0; - draw(level); - if (level==c.steps) {clearInterval(autoInterval); return;} +if (o.c.autoProgress) { + o.f.autoUpdate = ()=>{ + //if (o.v.level===undefined) o.v.level = -1; + o.v.level = o.v.level+1; + o.f.draw(o.v.level); + if (o.v.level==o.c.steps) {clearInterval(o.v.autoIntervalID);} }; - let autoInterval; - autoInterval = setInterval(autoUpdate,1000); + o.f.startAutoUpdate = ()=>{o.v.autoIntervalID = setInterval(o.f.autoUpdate,1000)}; } + +//o.f.printThis = ()=>(print(this)); + +return o; } } catch (e) { From b69274f36465691947a6cced51acf150da821f5b Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sat, 2 Sep 2023 11:31:54 +0200 Subject: [PATCH 032/105] SliderInput: vim auto-format + format tweak --- modules/SliderInput.js | 80 +++++++++++++++++++++--------------------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/modules/SliderInput.js b/modules/SliderInput.js index 9dc754385..4ddc33a77 100644 --- a/modules/SliderInput.js +++ b/modules/SliderInput.js @@ -11,24 +11,24 @@ o.f = {}; // functions go here. // configuration for the indicator: o.c = Object.assign({ // constants go here. -useMap:false, -useIncr:true, -horizontal:false, -xStart:R.x2-R.w/4-4, -width:R.w/4, -yStart:R.y+4, -height:R.h-10, -steps:30, // Default corresponds to my phones volume range, [0,30]. Maybe it should be 31. Math is hard sometimes... -oversizeR:0, -oversizeL:0, -timeout:1, -colorFG:g.theme.fg2, -colorBG:g.theme.bg2, -lazy:true, -rounded:0, -propagateDrag:false, -immediatedraw:false, -autoProgress:false, + useMap:false, + useIncr:true, + horizontal:false, + xStart:R.x2-R.w/4-4, + width:R.w/4, + yStart:R.y+4, + height:R.h-10, + steps:30, // Default corresponds to my phones volume range, [0,30]. Maybe it should be 31. Math is hard sometimes... + oversizeR:0, + oversizeL:0, + timeout:1, + colorFG:g.theme.fg2, + colorBG:g.theme.bg2, + lazy:true, + rounded:0, + propagateDrag:false, + immediatedraw:false, + autoProgress:false, },conf); o.c._xStart = o.c.xStart + 4; // +4 to compensate for the border. @@ -89,29 +89,29 @@ o.f.dragSlider = e=>{ if (o.v.ebLast==0) exFirst = o.c.horizontal?e.y:e.x; - if (o.c.useMap && o.f.wasOnIndicator(exFirst)) { // If draging starts on the indicator, adjust one-to-one. + if (o.c.useMap && o.f.wasOnIndicator(exFirst)) { // If draging starts on the indicator, adjust one-to-one. - o.v.level = Math.min(Math.max(o.c.steps-input,0),o.c.steps); + o.v.level = Math.min(Math.max(o.c.steps-input,0),o.c.steps); - if (o.v.level != o.v.prevLevel) cb("map",o.v.level); + if (o.v.level != o.v.prevLevel) cb("map",o.v.level); + o.f.draw(o.v.level); + + } else if (o.c.useIncr) { // Heavily inspired by "updown" mode of setUI. + + o.v.dy += o.c.horizontal?-e.dx:e.dy; + //if (!e.b) o.v.dy=0; + + let incr; + while (Math.abs(o.v.dy)>32) { + if (o.v.dy>0) { o.v.dy-=32; incr = 1;} + else { o.v.dy+=32; incr = -1;} + Bangle.buzz(20); + + o.v.level = Math.min(Math.max(o.v.level-incr,0),o.c.steps); + cb("incr",incr); o.f.draw(o.v.level); - - } else if (o.c.useIncr) { // Heavily inspired by "updown" mode of setUI. - - o.v.dy += o.c.horizontal?-e.dx:e.dy; - //if (!e.b) o.v.dy=0; - - let incr; - while (Math.abs(o.v.dy)>32) { - if (o.v.dy>0) { o.v.dy-=32; incr = 1;} - else { o.v.dy+=32; incr = -1;} - Bangle.buzz(20); - - o.v.level = Math.min(Math.max(o.v.level-incr,0),o.c.steps); - cb("incr",incr); - o.f.draw(o.v.level); - } } + } o.v.ebLast = e.b; }; @@ -125,7 +125,7 @@ o.f.draw = (level)=>{ o.v.prevLevel = level; - g.setColor(o.c.colorBG). + g.setColor(o.c.colorBG). fillRect(o.c.hollowRect). // ... and here it's made hollow. setColor(0==level?o.c.colorBG:o.c.colorFG). fillRect(o.f.updateBar(level*o.c.STEP_SIZE)); // Here the bar is drawn. @@ -155,6 +155,6 @@ return o; } } catch (e) { - print(e); - eval(require("Storage").read("slidertest.app.js")); +print(e); +eval(require("Storage").read("slidertest.app.js")); } From 4ca116aabae80b5767c5ba429405938cb741f533 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sat, 2 Sep 2023 16:13:03 +0200 Subject: [PATCH 033/105] SliderInput: track active drag handler in variable --- modules/SliderInput.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/modules/SliderInput.js b/modules/SliderInput.js index 4ddc33a77..247c43eca 100644 --- a/modules/SliderInput.js +++ b/modules/SliderInput.js @@ -79,6 +79,7 @@ o.f.updateBar = (levelHeight)=>{ o.f.dragSlider = e=>{ "ram"; + o.v.dragActive = true; if (!o.c.propagateDrag) E.stopEventPropagation&&E.stopEventPropagation(); if (o.v.timeoutID) {clearTimeout(o.v.timeoutID); o.v.timeoutID = undefined;} @@ -136,6 +137,7 @@ o.f.draw = (level)=>{ o.f.remove = ()=> { Bangle.removeListener('drag', o.f.dragSlider); + o.v.dragActive = false; cb("remove", o.v.prevLevel); }; From a353fdbc1c34008e5dede0c88ab6122d9885a57f Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Mon, 4 Sep 2023 23:17:53 +0200 Subject: [PATCH 034/105] SliderInput: add rectangle object to slider object --- modules/SliderInput.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/modules/SliderInput.js b/modules/SliderInput.js index 247c43eca..8b2dfeab1 100644 --- a/modules/SliderInput.js +++ b/modules/SliderInput.js @@ -56,6 +56,8 @@ if (o.c.horizontal) { delete mediator; } +o.c.r = {x:o.c.xStart, y:o.c.yStart, x2:o.c.xStart+o.c.width, y2:o.c.yStart+o.c.height, w:o.c.width, h:o.c.height}; + // Initialize the level o.v.level = o.c.currLevel || o.c.steps/2; From 0f9cb535094a7d1da6db99d3b87cec6c15e9601d Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sun, 3 Sep 2023 23:19:42 +0200 Subject: [PATCH 035/105] SliderInput: add `stopAutoUpdate` function --- modules/SliderInput.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/modules/SliderInput.js b/modules/SliderInput.js index 8b2dfeab1..bde37760e 100644 --- a/modules/SliderInput.js +++ b/modules/SliderInput.js @@ -148,9 +148,10 @@ if (o.c.autoProgress) { //if (o.v.level===undefined) o.v.level = -1; o.v.level = o.v.level+1; o.f.draw(o.v.level); - if (o.v.level==o.c.steps) {clearInterval(o.v.autoIntervalID);} + if (o.v.level==o.c.steps) {o.f.stopAutoUpdate();} }; - o.f.startAutoUpdate = ()=>{o.v.autoIntervalID = setInterval(o.f.autoUpdate,1000)}; + o.f.startAutoUpdate = ()=>{o.f.stopAutoUpdate(); o.v.autoIntervalID = setInterval(o.f.autoUpdate,1000);}; + o.f.stopAutoUpdate = ()=>{if (o.v.autoIntervalID) {clearInterval(o.v.autoIntervalID); o.v.autoIntervalID = undefined;}}; } //o.f.printThis = ()=>(print(this)); From f10ff2199d358ee82ba9add8fb0dba52da910212 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sun, 3 Sep 2023 23:21:40 +0200 Subject: [PATCH 036/105] SliderInput: fix inability to initiate w level 0 --- modules/SliderInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/SliderInput.js b/modules/SliderInput.js index bde37760e..cbe3697e6 100644 --- a/modules/SliderInput.js +++ b/modules/SliderInput.js @@ -59,7 +59,7 @@ if (o.c.horizontal) { o.c.r = {x:o.c.xStart, y:o.c.yStart, x2:o.c.xStart+o.c.width, y2:o.c.yStart+o.c.height, w:o.c.width, h:o.c.height}; // Initialize the level -o.v.level = o.c.currLevel || o.c.steps/2; +o.v.level = (o.c.currLevel||o.c.currLevel===0)?o.c.currLevel:o.c.steps/2; o.v.firstRun = true; o.v.ebLast = 0; From c24499df6d47bd89389da58f44f69d182d8c0c46 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sat, 9 Sep 2023 12:25:35 +0200 Subject: [PATCH 037/105] SliderInput: change name to "Slider.js" --- modules/{SliderInput.js => Slider.js} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename modules/{SliderInput.js => Slider.js} (99%) diff --git a/modules/SliderInput.js b/modules/Slider.js similarity index 99% rename from modules/SliderInput.js rename to modules/Slider.js index cbe3697e6..7fa46de88 100644 --- a/modules/SliderInput.js +++ b/modules/Slider.js @@ -1,6 +1,6 @@ try { // for making it possiblie to run the test app in the following catch statement. It would complain on `exports` not being defined. -exports.interface = function(cb, conf) { +exports.create = function(cb, conf) { const R = Bangle.appRect; From 873fcca251af7db1063c8033e2855aa1db515d60 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sun, 10 Sep 2023 00:51:15 +0200 Subject: [PATCH 038/105] Slider: add callback on auto progress --- modules/Slider.js | 1 + 1 file changed, 1 insertion(+) diff --git a/modules/Slider.js b/modules/Slider.js index 7fa46de88..596dac10f 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -148,6 +148,7 @@ if (o.c.autoProgress) { //if (o.v.level===undefined) o.v.level = -1; o.v.level = o.v.level+1; o.f.draw(o.v.level); + cb("auto"); if (o.v.level==o.c.steps) {o.f.stopAutoUpdate();} }; o.f.startAutoUpdate = ()=>{o.f.stopAutoUpdate(); o.v.autoIntervalID = setInterval(o.f.autoUpdate,1000);}; From 9f7b65892e81f46bec39a05739d28141ed2888df Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sun, 10 Sep 2023 23:54:23 +0200 Subject: [PATCH 039/105] Slider: make drawing borders optional --- modules/Slider.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 596dac10f..22844d152 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -29,6 +29,8 @@ o.c = Object.assign({ // constants go here. propagateDrag:false, immediatedraw:false, autoProgress:false, + noOuterBorder:false, + noInnerBorder:false },conf); o.c._xStart = o.c.xStart + 4; // +4 to compensate for the border. @@ -121,16 +123,16 @@ o.f.dragSlider = e=>{ o.f.draw = (level)=>{ "ram"; - if (true || o.v.firstRun || !o.c.lazy) { + if (true && !o.c.noOuterBorder /*|| o.v.firstRun || !o.c.lazy*/) { g.setColor(o.c.colorFG).fillRect(o.c.borderRect); // To get outer border... } if (false && level == o.v.prevLevel) {if (!o.v.firstRun) return; if (o.v.firstRun) o.v.firstRun = false;} o.v.prevLevel = level; - g.setColor(o.c.colorBG). - fillRect(o.c.hollowRect). // ... and here it's made hollow. - setColor(0==level?o.c.colorBG:o.c.colorFG). + g.setColor(o.c.colorBG); + if (!o.c.noOuterBorder || !o.c.noInnerBorder) g.fillRect(o.c.hollowRect); // ... and here it's made hollow. + g.setColor(0==level?o.c.colorBG:o.c.colorFG). fillRect(o.f.updateBar(level*o.c.STEP_SIZE)); // Here the bar is drawn. //print(level); From 5b19330fee23b22c8100de5f17b6a8e83368e74b Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 12 Sep 2023 14:54:08 +0200 Subject: [PATCH 040/105] Slider: option to set border size --- modules/Slider.js | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 22844d152..8a375948f 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -29,14 +29,15 @@ o.c = Object.assign({ // constants go here. propagateDrag:false, immediatedraw:false, autoProgress:false, - noOuterBorder:false, - noInnerBorder:false + outerBorderSize:2, + innerBorderSize:2, },conf); -o.c._xStart = o.c.xStart + 4; // +4 to compensate for the border. -o.c._width = o.c.width - 8; // -8 to compensate for the border. -o.c._yStart = o.c.yStart + 4; // +4 to compensate for the border. -o.c._height = o.c.height - 8; // -8 to compensate for the border. +let totalBorderSize = o.c.outerBorderSize + o.c.innerBorderSize; +o.c._xStart = o.c.xStart + totalBorderSize; +o.c._width = o.c.width - 2*totalBorderSize; +o.c._yStart = o.c.yStart + totalBorderSize; +o.c._height = o.c.height - 2*totalBorderSize; if (o.c.rounded) o.c.rounded = 40; o.c.STEP_SIZE = o.c._height/o.c.steps; @@ -72,8 +73,8 @@ o.f.wasOnIndicator = (exFirst)=>{ if (o.c.horizontal) return exFirst>o.c._yStart-o.c.oversizeL*o.c._height && exFirst{ "ram"; @@ -123,16 +124,16 @@ o.f.dragSlider = e=>{ o.f.draw = (level)=>{ "ram"; - if (true && !o.c.noOuterBorder /*|| o.v.firstRun || !o.c.lazy*/) { + if (true || o.v.firstRun || !o.c.lazy) { g.setColor(o.c.colorFG).fillRect(o.c.borderRect); // To get outer border... } if (false && level == o.v.prevLevel) {if (!o.v.firstRun) return; if (o.v.firstRun) o.v.firstRun = false;} o.v.prevLevel = level; - g.setColor(o.c.colorBG); - if (!o.c.noOuterBorder || !o.c.noInnerBorder) g.fillRect(o.c.hollowRect); // ... and here it's made hollow. - g.setColor(0==level?o.c.colorBG:o.c.colorFG). + g.setColor(o.c.colorBG). + fillRect(o.c.hollowRect). // ... and here it's made hollow. + setColor(0==level?o.c.colorBG:o.c.colorFG). fillRect(o.f.updateBar(level*o.c.STEP_SIZE)); // Here the bar is drawn. //print(level); From 5df5f56888a671bca11eab84b0bd4c4f0deb8988 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 13 Sep 2023 00:10:20 +0200 Subject: [PATCH 041/105] Slider: hide slider while still auto incrementing --- modules/Slider.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/modules/Slider.js b/modules/Slider.js index 8a375948f..d5c56f0ab 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -147,10 +147,11 @@ o.f.remove = ()=> { }; if (o.c.autoProgress) { + o.v.shouldAutoDraw = true; o.f.autoUpdate = ()=>{ //if (o.v.level===undefined) o.v.level = -1; o.v.level = o.v.level+1; - o.f.draw(o.v.level); + if (o.v.shouldAutoDraw) o.f.draw(o.v.level); cb("auto"); if (o.v.level==o.c.steps) {o.f.stopAutoUpdate();} }; From d157f51b50335fd74416f6759c3fa1919dc38e09 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Fri, 15 Sep 2023 22:46:53 +0200 Subject: [PATCH 042/105] Slider:add var containing the app to load on error --- modules/Slider.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/modules/Slider.js b/modules/Slider.js index d5c56f0ab..e0279b56a 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -166,5 +166,6 @@ return o; } catch (e) { print(e); -eval(require("Storage").read("slidertest.app.js")); +let appName = "spotrem"; +eval(require("Storage").read(appName+".app.js")); } From 94074304dc0f4e62d03aa44106d82bd728ed9dc4 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sat, 16 Sep 2023 18:51:39 +0200 Subject: [PATCH 043/105] Slider: draw directly when starting auto update ... if the slider should be drawn. Otherwise will just keep track of position to draw later. --- modules/Slider.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/modules/Slider.js b/modules/Slider.js index e0279b56a..0eaf8648f 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -155,7 +155,11 @@ if (o.c.autoProgress) { cb("auto"); if (o.v.level==o.c.steps) {o.f.stopAutoUpdate();} }; - o.f.startAutoUpdate = ()=>{o.f.stopAutoUpdate(); o.v.autoIntervalID = setInterval(o.f.autoUpdate,1000);}; + o.f.startAutoUpdate = ()=>{ + o.f.stopAutoUpdate(); + if (o.v.shouldAutoDraw) o.f.draw(o.v.level); + o.v.autoIntervalID = setInterval(o.f.autoUpdate,1000); + }; o.f.stopAutoUpdate = ()=>{if (o.v.autoIntervalID) {clearInterval(o.v.autoIntervalID); o.v.autoIntervalID = undefined;}}; } From 9e978b2c5bd058d8257396756fd23c4e3325cb11 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 19 Sep 2023 01:35:45 +0200 Subject: [PATCH 044/105] Slider: change to only add required parts ... depending on how the slider is configured when initializing. Assumed to reduce ram use, have not tested to see if it actually is an improvement in rem use or general performance in practice. --- modules/Slider.js | 132 ++++++++++++++++++++++++---------------------- 1 file changed, 70 insertions(+), 62 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 0eaf8648f..bbf6bfe43 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -31,6 +31,8 @@ o.c = Object.assign({ // constants go here. autoProgress:false, outerBorderSize:2, innerBorderSize:2, + drawableSlider:true, + dragableSlider:true, },conf); let totalBorderSize = o.c.outerBorderSize + o.c.innerBorderSize; @@ -67,97 +69,103 @@ o.v.level = (o.c.currLevel||o.c.currLevel===0)?o.c.currLevel:o.c.steps/2; o.v.firstRun = true; o.v.ebLast = 0; -o.f.wasOnIndicator = (exFirst)=>{ - "ram"; - if (!o.c.horizontal) return exFirst>o.c._xStart-o.c.oversizeL*o.c._width && exFirsto.c._yStart-o.c.oversizeL*o.c._height && exFirst{ + "ram"; + if (!o.c.horizontal) return exFirst>o.c._xStart-o.c.oversizeL*o.c._width && exFirsto.c._yStart-o.c.oversizeL*o.c._height && exFirst{ + "ram"; + o.v.dragActive = true; + if (!o.c.propagateDrag) E.stopEventPropagation&&E.stopEventPropagation(); -o.f.updateBar = (levelHeight)=>{ - "ram"; - if (!o.c.horizontal) return {x:o.c._xStart,y:o.c._yStart+o.c._height-levelHeight,w:o.c._width,y2:o.c._yStart+o.c._height,r:o.c.rounded}; - if (o.c.horizontal) return {x:o.c._xStart,y:o.c._yStart,w:levelHeight,h:o.c._height,r:o.c.rounded}; -}; + if (o.v.timeoutID) {clearTimeout(o.v.timeoutID); o.v.timeoutID = undefined;} + if (e.b==0 && !o.v.timeoutID && (o.c.timeout || o.c.timeout===0)) o.v.timeoutID = setTimeout(o.f.remove, 1000*o.c.timeout); -o.f.dragSlider = e=>{ - "ram"; - o.v.dragActive = true; - if (!o.c.propagateDrag) E.stopEventPropagation&&E.stopEventPropagation(); + let input = Math.min(o.c.horizontal?175-e.x:e.y, 170); + input = Math.round(input/o.c.STEP_SIZE); - if (o.v.timeoutID) {clearTimeout(o.v.timeoutID); o.v.timeoutID = undefined;} - if (e.b==0 && !o.v.timeoutID && (o.c.timeout || o.c.timeout===0)) o.v.timeoutID = setTimeout(o.f.remove, 1000*o.c.timeout); + if (o.v.ebLast==0) exFirst = o.c.horizontal?e.y:e.x; - let input = Math.min(o.c.horizontal?175-e.x:e.y, 170); - input = Math.round(input/o.c.STEP_SIZE); + if (o.c.useMap && o.f.wasOnIndicator(exFirst)) { // If draging starts on the indicator, adjust one-to-one. - if (o.v.ebLast==0) exFirst = o.c.horizontal?e.y:e.x; + o.v.level = Math.min(Math.max(o.c.steps-input,0),o.c.steps); - if (o.c.useMap && o.f.wasOnIndicator(exFirst)) { // If draging starts on the indicator, adjust one-to-one. + if (o.v.level != o.v.prevLevel) cb("map",o.v.level); + o.f.draw&&o.f.draw(o.v.level); - o.v.level = Math.min(Math.max(o.c.steps-input,0),o.c.steps); + } else if (o.c.useIncr) { // Heavily inspired by "updown" mode of setUI. - if (o.v.level != o.v.prevLevel) cb("map",o.v.level); - o.f.draw(o.v.level); + o.v.dy += o.c.horizontal?-e.dx:e.dy; + //if (!e.b) o.v.dy=0; - } else if (o.c.useIncr) { // Heavily inspired by "updown" mode of setUI. + let incr; + while (Math.abs(o.v.dy)>32) { + if (o.v.dy>0) { o.v.dy-=32; incr = 1;} + else { o.v.dy+=32; incr = -1;} + Bangle.buzz(20); - o.v.dy += o.c.horizontal?-e.dx:e.dy; - //if (!e.b) o.v.dy=0; - - let incr; - while (Math.abs(o.v.dy)>32) { - if (o.v.dy>0) { o.v.dy-=32; incr = 1;} - else { o.v.dy+=32; incr = -1;} - Bangle.buzz(20); - - o.v.level = Math.min(Math.max(o.v.level-incr,0),o.c.steps); - cb("incr",incr); - o.f.draw(o.v.level); + o.v.level = Math.min(Math.max(o.v.level-incr,0),o.c.steps); + cb("incr",incr); + o.f.draw&&o.f.draw(o.v.level); + } } - } - o.v.ebLast = e.b; -}; + o.v.ebLast = e.b; + }; -o.f.draw = (level)=>{ - "ram"; + o.f.remove = ()=> { + Bangle.removeListener('drag', o.f.dragSlider); + o.v.dragActive = false; + cb("remove", o.v.prevLevel); + }; +} - if (true || o.v.firstRun || !o.c.lazy) { - g.setColor(o.c.colorFG).fillRect(o.c.borderRect); // To get outer border... - } - if (false && level == o.v.prevLevel) {if (!o.v.firstRun) return; if (o.v.firstRun) o.v.firstRun = false;} +if (o.c.drawableSlider) { - o.v.prevLevel = level; + o.f.updateBar = (levelHeight)=>{ + "ram"; + if (!o.c.horizontal) return {x:o.c._xStart,y:o.c._yStart+o.c._height-levelHeight,w:o.c._width,y2:o.c._yStart+o.c._height,r:o.c.rounded}; + if (o.c.horizontal) return {x:o.c._xStart,y:o.c._yStart,w:levelHeight,h:o.c._height,r:o.c.rounded}; + }; - g.setColor(o.c.colorBG). - fillRect(o.c.hollowRect). // ... and here it's made hollow. - setColor(0==level?o.c.colorBG:o.c.colorFG). - fillRect(o.f.updateBar(level*o.c.STEP_SIZE)); // Here the bar is drawn. + o.c.borderRect = {x:o.c._xStart-totalBorderSize,y:o.c._yStart-totalBorderSize,w:o.c._width+2*totalBorderSize,h:o.c._height+2*totalBorderSize,r:o.c.rounded}; - //print(level); - //print(process.memory().usage); -}; + o.c.hollowRect = {x:o.c._xStart-o.c.innerBorderSize,y:o.c._yStart-o.c.innerBorderSize,w:o.c._width+2*o.c.innerBorderSize,h:o.c._height+2*o.c.innerBorderSize,r:o.c.rounded}; -o.f.remove = ()=> { - Bangle.removeListener('drag', o.f.dragSlider); - o.v.dragActive = false; - cb("remove", o.v.prevLevel); -}; + o.f.draw = (level)=>{ + "ram"; + + if (true || o.v.firstRun || !o.c.lazy) { + g.setColor(o.c.colorFG).fillRect(o.c.borderRect); // To get outer border... + } + if (false && level == o.v.prevLevel) {if (!o.v.firstRun) return; if (o.v.firstRun) o.v.firstRun = false;} + + o.v.prevLevel = level; + + g.setColor(o.c.colorBG). + fillRect(o.c.hollowRect). // ... and here it's made hollow. + setColor(0==level?o.c.colorBG:o.c.colorFG). + fillRect(o.f.updateBar(level*o.c.STEP_SIZE)); // Here the bar is drawn. + + //print(level); + //print(process.memory().usage); + }; +} if (o.c.autoProgress) { o.v.shouldAutoDraw = true; o.f.autoUpdate = ()=>{ //if (o.v.level===undefined) o.v.level = -1; o.v.level = o.v.level+1; - if (o.v.shouldAutoDraw) o.f.draw(o.v.level); + if (o.v.shouldAutoDraw) o.f.draw&&o.f.draw(o.v.level); cb("auto"); if (o.v.level==o.c.steps) {o.f.stopAutoUpdate();} }; o.f.startAutoUpdate = ()=>{ o.f.stopAutoUpdate(); - if (o.v.shouldAutoDraw) o.f.draw(o.v.level); + if (o.v.shouldAutoDraw) o.f.draw&&o.f.draw(o.v.level); o.v.autoIntervalID = setInterval(o.f.autoUpdate,1000); }; o.f.stopAutoUpdate = ()=>{if (o.v.autoIntervalID) {clearInterval(o.v.autoIntervalID); o.v.autoIntervalID = undefined;}}; From ef650f5359dc4a53a933c6f8c74214f0262164c5 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 19 Sep 2023 19:27:58 +0200 Subject: [PATCH 045/105] Slider: list currLevel among the constants --- modules/Slider.js | 1 + 1 file changed, 1 insertion(+) diff --git a/modules/Slider.js b/modules/Slider.js index bbf6bfe43..3e2facf7d 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -33,6 +33,7 @@ o.c = Object.assign({ // constants go here. innerBorderSize:2, drawableSlider:true, dragableSlider:true, + currLevel:undefined, },conf); let totalBorderSize = o.c.outerBorderSize + o.c.innerBorderSize; From 14dd20791f379a68f38b57e2821fede36188d4f7 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 19 Sep 2023 19:30:31 +0200 Subject: [PATCH 046/105] Slider: fix dy not initialized for increment mode --- modules/Slider.js | 1 + 1 file changed, 1 insertion(+) diff --git a/modules/Slider.js b/modules/Slider.js index 3e2facf7d..6c9a5a398 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -69,6 +69,7 @@ o.v.level = (o.c.currLevel||o.c.currLevel===0)?o.c.currLevel:o.c.steps/2; o.v.firstRun = true; o.v.ebLast = 0; +o.v.dy = 0; if (o.c.dragableSlider) { o.f.wasOnIndicator = (exFirst)=>{ From 8e6b9c7308cce687914e97b9fb3f1a6550d82c68 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 20 Sep 2023 19:53:53 +0200 Subject: [PATCH 047/105] Slider: add ability to limit drag area ... of the sliders drag handler. --- modules/Slider.js | 81 +++++++++++++++++++++++++++-------------------- 1 file changed, 46 insertions(+), 35 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 6c9a5a398..f459173e0 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -34,6 +34,7 @@ o.c = Object.assign({ // constants go here. drawableSlider:true, dragableSlider:true, currLevel:undefined, + dragRect:R, },conf); let totalBorderSize = o.c.outerBorderSize + o.c.innerBorderSize; @@ -72,6 +73,11 @@ o.v.ebLast = 0; o.v.dy = 0; if (o.c.dragableSlider) { + o.f.wasOnDragRect = (exFirst, eyFirst)=>{ + "ram"; + return exFirst>o.c.dragRect.x && exFirsto.c.dragRect.y && eyFirst{ "ram"; if (!o.c.horizontal) return exFirst>o.c._xStart-o.c.oversizeL*o.c._width && exFirst{ "ram"; - o.v.dragActive = true; - if (!o.c.propagateDrag) E.stopEventPropagation&&E.stopEventPropagation(); - - if (o.v.timeoutID) {clearTimeout(o.v.timeoutID); o.v.timeoutID = undefined;} - if (e.b==0 && !o.v.timeoutID && (o.c.timeout || o.c.timeout===0)) o.v.timeoutID = setTimeout(o.f.remove, 1000*o.c.timeout); - - let input = Math.min(o.c.horizontal?175-e.x:e.y, 170); - input = Math.round(input/o.c.STEP_SIZE); - - if (o.v.ebLast==0) exFirst = o.c.horizontal?e.y:e.x; - - if (o.c.useMap && o.f.wasOnIndicator(exFirst)) { // If draging starts on the indicator, adjust one-to-one. - - o.v.level = Math.min(Math.max(o.c.steps-input,0),o.c.steps); - - if (o.v.level != o.v.prevLevel) cb("map",o.v.level); - o.f.draw&&o.f.draw(o.v.level); - - } else if (o.c.useIncr) { // Heavily inspired by "updown" mode of setUI. - - o.v.dy += o.c.horizontal?-e.dx:e.dy; - //if (!e.b) o.v.dy=0; - - let incr; - while (Math.abs(o.v.dy)>32) { - if (o.v.dy>0) { o.v.dy-=32; incr = 1;} - else { o.v.dy+=32; incr = -1;} - Bangle.buzz(20); - - o.v.level = Math.min(Math.max(o.v.level-incr,0),o.c.steps); - cb("incr",incr); - o.f.draw&&o.f.draw(o.v.level); - } + if (o.v.ebLast==0) { + exFirst = o.c.horizontal?e.y:e.x; + eyFirst = o.c.horizontal?e.x:e.y; } - o.v.ebLast = e.b; - }; + + if (o.f.wasOnDragRect(exFirst, eyFirst)) { + o.v.dragActive = true; + if (!o.c.propagateDrag) E.stopEventPropagation&&E.stopEventPropagation(); + + if (o.v.timeoutID) {clearTimeout(o.v.timeoutID); o.v.timeoutID = undefined;} + if (e.b==0 && !o.v.timeoutID && (o.c.timeout || o.c.timeout===0)) o.v.timeoutID = setTimeout(o.f.remove, 1000*o.c.timeout); + + let input = Math.min(o.c.horizontal?175-e.x:e.y, 170); + input = Math.round(input/o.c.STEP_SIZE); + + if (o.c.useMap && o.f.wasOnIndicator(exFirst)) { // If draging starts on the indicator, adjust one-to-one. + + o.v.level = Math.min(Math.max(o.c.steps-input,0),o.c.steps); + + if (o.v.level != o.v.prevLevel) cb("map",o.v.level); + o.f.draw&&o.f.draw(o.v.level); + + } else if (o.c.useIncr) { // Heavily inspired by "updown" mode of setUI. + + o.v.dy += o.c.horizontal?-e.dx:e.dy; + //if (!e.b) o.v.dy=0; + + let incr; + while (Math.abs(o.v.dy)>32) { + if (o.v.dy>0) { o.v.dy-=32; incr = 1;} + else { o.v.dy+=32; incr = -1;} + Bangle.buzz(20); + + o.v.level = Math.min(Math.max(o.v.level-incr,0),o.c.steps); + cb("incr",incr); + o.f.draw&&o.f.draw(o.v.level); + } + } + o.v.ebLast = e.b; + }; + } o.f.remove = ()=> { Bangle.removeListener('drag', o.f.dragSlider); From 31a6de6e3f5b790073ee884dec6214db91e9ff16 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 20 Sep 2023 20:07:25 +0200 Subject: [PATCH 048/105] Slider: vim auto format - no functional change --- modules/Slider.js | 346 +++++++++++++++++++++++----------------------- 1 file changed, 173 insertions(+), 173 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index f459173e0..a99d3a332 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -1,196 +1,196 @@ try { // for making it possiblie to run the test app in the following catch statement. It would complain on `exports` not being defined. -exports.create = function(cb, conf) { + exports.create = function(cb, conf) { -const R = Bangle.appRect; + const R = Bangle.appRect; -let o = {}; -o.v = {}; // variables go here. -o.f = {}; // functions go here. + let o = {}; + o.v = {}; // variables go here. + o.f = {}; // functions go here. -// configuration for the indicator: + // configuration for the indicator: -o.c = Object.assign({ // constants go here. - useMap:false, - useIncr:true, - horizontal:false, - xStart:R.x2-R.w/4-4, - width:R.w/4, - yStart:R.y+4, - height:R.h-10, - steps:30, // Default corresponds to my phones volume range, [0,30]. Maybe it should be 31. Math is hard sometimes... - oversizeR:0, - oversizeL:0, - timeout:1, - colorFG:g.theme.fg2, - colorBG:g.theme.bg2, - lazy:true, - rounded:0, - propagateDrag:false, - immediatedraw:false, - autoProgress:false, - outerBorderSize:2, - innerBorderSize:2, - drawableSlider:true, - dragableSlider:true, - currLevel:undefined, - dragRect:R, -},conf); + o.c = Object.assign({ // constants go here. + useMap:false, + useIncr:true, + horizontal:false, + xStart:R.x2-R.w/4-4, + width:R.w/4, + yStart:R.y+4, + height:R.h-10, + steps:30, // Default corresponds to my phones volume range, [0,30]. Maybe it should be 31. Math is hard sometimes... + oversizeR:0, + oversizeL:0, + timeout:1, + colorFG:g.theme.fg2, + colorBG:g.theme.bg2, + lazy:true, + rounded:0, + propagateDrag:false, + immediatedraw:false, + autoProgress:false, + outerBorderSize:2, + innerBorderSize:2, + drawableSlider:true, + dragableSlider:true, + currLevel:undefined, + dragRect:R, + },conf); -let totalBorderSize = o.c.outerBorderSize + o.c.innerBorderSize; -o.c._xStart = o.c.xStart + totalBorderSize; -o.c._width = o.c.width - 2*totalBorderSize; -o.c._yStart = o.c.yStart + totalBorderSize; -o.c._height = o.c.height - 2*totalBorderSize; -if (o.c.rounded) o.c.rounded = 40; + let totalBorderSize = o.c.outerBorderSize + o.c.innerBorderSize; + o.c._xStart = o.c.xStart + totalBorderSize; + o.c._width = o.c.width - 2*totalBorderSize; + o.c._yStart = o.c.yStart + totalBorderSize; + o.c._height = o.c.height - 2*totalBorderSize; + if (o.c.rounded) o.c.rounded = 40; -o.c.STEP_SIZE = o.c._height/o.c.steps; + o.c.STEP_SIZE = o.c._height/o.c.steps; -if (o.c.horizontal) { - let mediator = o.c._xStart; - o.c._xStart = o.c._yStart; - o.c._yStart = mediator; - mediator = o.c._width; - o.c._width = o.c._height; - o.c._height = mediator; + if (o.c.horizontal) { + let mediator = o.c._xStart; + o.c._xStart = o.c._yStart; + o.c._yStart = mediator; + mediator = o.c._width; + o.c._width = o.c._height; + o.c._height = mediator; - mediator = o.c.xStart; - o.c.xStart = o.c.yStart; - o.c.yStart = mediator; - mediator = o.c.width; - o.c.width = o.c.height; - o.c.height = mediator; - delete mediator; -} - -o.c.r = {x:o.c.xStart, y:o.c.yStart, x2:o.c.xStart+o.c.width, y2:o.c.yStart+o.c.height, w:o.c.width, h:o.c.height}; - -// Initialize the level -o.v.level = (o.c.currLevel||o.c.currLevel===0)?o.c.currLevel:o.c.steps/2; - -o.v.firstRun = true; -o.v.ebLast = 0; -o.v.dy = 0; - -if (o.c.dragableSlider) { - o.f.wasOnDragRect = (exFirst, eyFirst)=>{ - "ram"; - return exFirst>o.c.dragRect.x && exFirsto.c.dragRect.y && eyFirst{ - "ram"; - if (!o.c.horizontal) return exFirst>o.c._xStart-o.c.oversizeL*o.c._width && exFirsto.c._yStart-o.c.oversizeL*o.c._height && exFirst{ - "ram"; - if (o.v.ebLast==0) { - exFirst = o.c.horizontal?e.y:e.x; - eyFirst = o.c.horizontal?e.x:e.y; + mediator = o.c.xStart; + o.c.xStart = o.c.yStart; + o.c.yStart = mediator; + mediator = o.c.width; + o.c.width = o.c.height; + o.c.height = mediator; + delete mediator; } - if (o.f.wasOnDragRect(exFirst, eyFirst)) { - o.v.dragActive = true; - if (!o.c.propagateDrag) E.stopEventPropagation&&E.stopEventPropagation(); + o.c.r = {x:o.c.xStart, y:o.c.yStart, x2:o.c.xStart+o.c.width, y2:o.c.yStart+o.c.height, w:o.c.width, h:o.c.height}; - if (o.v.timeoutID) {clearTimeout(o.v.timeoutID); o.v.timeoutID = undefined;} - if (e.b==0 && !o.v.timeoutID && (o.c.timeout || o.c.timeout===0)) o.v.timeoutID = setTimeout(o.f.remove, 1000*o.c.timeout); + // Initialize the level + o.v.level = (o.c.currLevel||o.c.currLevel===0)?o.c.currLevel:o.c.steps/2; - let input = Math.min(o.c.horizontal?175-e.x:e.y, 170); - input = Math.round(input/o.c.STEP_SIZE); + o.v.firstRun = true; + o.v.ebLast = 0; + o.v.dy = 0; - if (o.c.useMap && o.f.wasOnIndicator(exFirst)) { // If draging starts on the indicator, adjust one-to-one. + if (o.c.dragableSlider) { + o.f.wasOnDragRect = (exFirst, eyFirst)=>{ + "ram"; + return exFirst>o.c.dragRect.x && exFirsto.c.dragRect.y && eyFirst{ + "ram"; + if (!o.c.horizontal) return exFirst>o.c._xStart-o.c.oversizeL*o.c._width && exFirsto.c._yStart-o.c.oversizeL*o.c._height && exFirst32) { - if (o.v.dy>0) { o.v.dy-=32; incr = 1;} - else { o.v.dy+=32; incr = -1;} - Bangle.buzz(20); - - o.v.level = Math.min(Math.max(o.v.level-incr,0),o.c.steps); - cb("incr",incr); - o.f.draw&&o.f.draw(o.v.level); + o.f.dragSlider = e=>{ + "ram"; + if (o.v.ebLast==0) { + exFirst = o.c.horizontal?e.y:e.x; + eyFirst = o.c.horizontal?e.x:e.y; } + + if (o.f.wasOnDragRect(exFirst, eyFirst)) { + o.v.dragActive = true; + if (!o.c.propagateDrag) E.stopEventPropagation&&E.stopEventPropagation(); + + if (o.v.timeoutID) {clearTimeout(o.v.timeoutID); o.v.timeoutID = undefined;} + if (e.b==0 && !o.v.timeoutID && (o.c.timeout || o.c.timeout===0)) o.v.timeoutID = setTimeout(o.f.remove, 1000*o.c.timeout); + + let input = Math.min(o.c.horizontal?175-e.x:e.y, 170); + input = Math.round(input/o.c.STEP_SIZE); + + if (o.c.useMap && o.f.wasOnIndicator(exFirst)) { // If draging starts on the indicator, adjust one-to-one. + + o.v.level = Math.min(Math.max(o.c.steps-input,0),o.c.steps); + + if (o.v.level != o.v.prevLevel) cb("map",o.v.level); + o.f.draw&&o.f.draw(o.v.level); + + } else if (o.c.useIncr) { // Heavily inspired by "updown" mode of setUI. + + o.v.dy += o.c.horizontal?-e.dx:e.dy; + //if (!e.b) o.v.dy=0; + + let incr; + while (Math.abs(o.v.dy)>32) { + if (o.v.dy>0) { o.v.dy-=32; incr = 1;} + else { o.v.dy+=32; incr = -1;} + Bangle.buzz(20); + + o.v.level = Math.min(Math.max(o.v.level-incr,0),o.c.steps); + cb("incr",incr); + o.f.draw&&o.f.draw(o.v.level); + } + } + o.v.ebLast = e.b; + }; } - o.v.ebLast = e.b; - }; + + o.f.remove = ()=> { + Bangle.removeListener('drag', o.f.dragSlider); + o.v.dragActive = false; + cb("remove", o.v.prevLevel); + }; + } + + if (o.c.drawableSlider) { + + o.f.updateBar = (levelHeight)=>{ + "ram"; + if (!o.c.horizontal) return {x:o.c._xStart,y:o.c._yStart+o.c._height-levelHeight,w:o.c._width,y2:o.c._yStart+o.c._height,r:o.c.rounded}; + if (o.c.horizontal) return {x:o.c._xStart,y:o.c._yStart,w:levelHeight,h:o.c._height,r:o.c.rounded}; + }; + + o.c.borderRect = {x:o.c._xStart-totalBorderSize,y:o.c._yStart-totalBorderSize,w:o.c._width+2*totalBorderSize,h:o.c._height+2*totalBorderSize,r:o.c.rounded}; + + o.c.hollowRect = {x:o.c._xStart-o.c.innerBorderSize,y:o.c._yStart-o.c.innerBorderSize,w:o.c._width+2*o.c.innerBorderSize,h:o.c._height+2*o.c.innerBorderSize,r:o.c.rounded}; + + o.f.draw = (level)=>{ + "ram"; + + if (true || o.v.firstRun || !o.c.lazy) { + g.setColor(o.c.colorFG).fillRect(o.c.borderRect); // To get outer border... + } + if (false && level == o.v.prevLevel) {if (!o.v.firstRun) return; if (o.v.firstRun) o.v.firstRun = false;} + + o.v.prevLevel = level; + + g.setColor(o.c.colorBG). + fillRect(o.c.hollowRect). // ... and here it's made hollow. + setColor(0==level?o.c.colorBG:o.c.colorFG). + fillRect(o.f.updateBar(level*o.c.STEP_SIZE)); // Here the bar is drawn. + + //print(level); + //print(process.memory().usage); + }; + } + + if (o.c.autoProgress) { + o.v.shouldAutoDraw = true; + o.f.autoUpdate = ()=>{ + //if (o.v.level===undefined) o.v.level = -1; + o.v.level = o.v.level+1; + if (o.v.shouldAutoDraw) o.f.draw&&o.f.draw(o.v.level); + cb("auto"); + if (o.v.level==o.c.steps) {o.f.stopAutoUpdate();} + }; + o.f.startAutoUpdate = ()=>{ + o.f.stopAutoUpdate(); + if (o.v.shouldAutoDraw) o.f.draw&&o.f.draw(o.v.level); + o.v.autoIntervalID = setInterval(o.f.autoUpdate,1000); + }; + o.f.stopAutoUpdate = ()=>{if (o.v.autoIntervalID) {clearInterval(o.v.autoIntervalID); o.v.autoIntervalID = undefined;}}; + } + + //o.f.printThis = ()=>(print(this)); + + return o; } - o.f.remove = ()=> { - Bangle.removeListener('drag', o.f.dragSlider); - o.v.dragActive = false; - cb("remove", o.v.prevLevel); - }; -} - -if (o.c.drawableSlider) { - - o.f.updateBar = (levelHeight)=>{ - "ram"; - if (!o.c.horizontal) return {x:o.c._xStart,y:o.c._yStart+o.c._height-levelHeight,w:o.c._width,y2:o.c._yStart+o.c._height,r:o.c.rounded}; - if (o.c.horizontal) return {x:o.c._xStart,y:o.c._yStart,w:levelHeight,h:o.c._height,r:o.c.rounded}; - }; - - o.c.borderRect = {x:o.c._xStart-totalBorderSize,y:o.c._yStart-totalBorderSize,w:o.c._width+2*totalBorderSize,h:o.c._height+2*totalBorderSize,r:o.c.rounded}; - - o.c.hollowRect = {x:o.c._xStart-o.c.innerBorderSize,y:o.c._yStart-o.c.innerBorderSize,w:o.c._width+2*o.c.innerBorderSize,h:o.c._height+2*o.c.innerBorderSize,r:o.c.rounded}; - - o.f.draw = (level)=>{ - "ram"; - - if (true || o.v.firstRun || !o.c.lazy) { - g.setColor(o.c.colorFG).fillRect(o.c.borderRect); // To get outer border... - } - if (false && level == o.v.prevLevel) {if (!o.v.firstRun) return; if (o.v.firstRun) o.v.firstRun = false;} - - o.v.prevLevel = level; - - g.setColor(o.c.colorBG). - fillRect(o.c.hollowRect). // ... and here it's made hollow. - setColor(0==level?o.c.colorBG:o.c.colorFG). - fillRect(o.f.updateBar(level*o.c.STEP_SIZE)); // Here the bar is drawn. - - //print(level); - //print(process.memory().usage); - }; -} - -if (o.c.autoProgress) { - o.v.shouldAutoDraw = true; - o.f.autoUpdate = ()=>{ - //if (o.v.level===undefined) o.v.level = -1; - o.v.level = o.v.level+1; - if (o.v.shouldAutoDraw) o.f.draw&&o.f.draw(o.v.level); - cb("auto"); - if (o.v.level==o.c.steps) {o.f.stopAutoUpdate();} - }; - o.f.startAutoUpdate = ()=>{ - o.f.stopAutoUpdate(); - if (o.v.shouldAutoDraw) o.f.draw&&o.f.draw(o.v.level); - o.v.autoIntervalID = setInterval(o.f.autoUpdate,1000); - }; - o.f.stopAutoUpdate = ()=>{if (o.v.autoIntervalID) {clearInterval(o.v.autoIntervalID); o.v.autoIntervalID = undefined;}}; -} - -//o.f.printThis = ()=>(print(this)); - -return o; -} - } catch (e) { -print(e); -let appName = "spotrem"; -eval(require("Storage").read(appName+".app.js")); + print(e); + let appName = "spotrem"; + eval(require("Storage").read(appName+".app.js")); } From eb00e69431e75a1c57d43110000eeb425f5700d9 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 20 Sep 2023 20:24:42 +0200 Subject: [PATCH 049/105] Slider: fix gh workflow error ... and fix some warnings from Espruino Web IDE --- modules/Slider.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index a99d3a332..b946fc44a 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -125,8 +125,8 @@ try { // for making it possiblie to run the test app in the following catch stat } } o.v.ebLast = e.b; - }; - } + } + }; o.f.remove = ()=> { Bangle.removeListener('drag', o.f.dragSlider); @@ -187,7 +187,7 @@ try { // for making it possiblie to run the test app in the following catch stat //o.f.printThis = ()=>(print(this)); return o; - } + }; } catch (e) { print(e); From 52fe14fb3258d94b8b520e51e772550e14c444bd Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 26 Sep 2023 22:57:17 +0200 Subject: [PATCH 050/105] Slider: set timeoutID to `undefined` on remove ... fixing interference with other timeouts where the same id was assigned to another timeout that would be deleted erroneously. This was tracked down because a timeout in the `spotrem` version being developed alongside this slider module would stop executing code. --- modules/Slider.js | 1 + 1 file changed, 1 insertion(+) diff --git a/modules/Slider.js b/modules/Slider.js index b946fc44a..3d569bf62 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -131,6 +131,7 @@ try { // for making it possiblie to run the test app in the following catch stat o.f.remove = ()=> { Bangle.removeListener('drag', o.f.dragSlider); o.v.dragActive = false; + o.v.timeoutID = undefined; cb("remove", o.v.prevLevel); }; } From cd4e4abee2a8661a1c8e176d80653d8fe76666d2 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Thu, 28 Sep 2023 19:17:58 +0200 Subject: [PATCH 051/105] Slider: refine drawing rounded sliders So far only tested on a standard config width slider. --- modules/Slider.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 3d569bf62..dda5a3bfe 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -42,9 +42,9 @@ try { // for making it possiblie to run the test app in the following catch stat o.c._width = o.c.width - 2*totalBorderSize; o.c._yStart = o.c.yStart + totalBorderSize; o.c._height = o.c.height - 2*totalBorderSize; - if (o.c.rounded) o.c.rounded = 40; + o.c.rounded = o.c.rounded?20:0; - o.c.STEP_SIZE = o.c._height/o.c.steps; + o.c.STEP_SIZE = (o.c._height-(2*o.c.rounded-7))/o.c.steps; if (o.c.horizontal) { let mediator = o.c._xStart; @@ -161,7 +161,11 @@ try { // for making it possiblie to run the test app in the following catch stat g.setColor(o.c.colorBG). fillRect(o.c.hollowRect). // ... and here it's made hollow. setColor(0==level?o.c.colorBG:o.c.colorFG). - fillRect(o.f.updateBar(level*o.c.STEP_SIZE)); // Here the bar is drawn. + fillRect(o.f.updateBar(2*o.c.rounded-7+level*o.c.STEP_SIZE)); // Here the bar is drawn. + if (o.c.rounded && level===0) { + g.setColor(o.c.colorFG).fillCircle(o.c._xStart+o.c._width/2,o.c._yStart+o.c._height-o.c.rounded+2, o.c.rounded-o.c.innerBorderSize); + g.setColor(o.c.colorBG).fillCircle(o.c._xStart+o.c._width/2,o.c._yStart+o.c._height-o.c.rounded+2, o.c.rounded-o.c.innerBorderSize-2); + } //print(level); //print(process.memory().usage); @@ -192,6 +196,6 @@ try { // for making it possiblie to run the test app in the following catch stat } catch (e) { print(e); - let appName = "spotrem"; + let appName = "slidertest"; eval(require("Storage").read(appName+".app.js")); } From d2f69df3bf9b4eada33659d7634f56c3360150aa Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Thu, 28 Sep 2023 23:12:31 +0200 Subject: [PATCH 052/105] Slider: fix logic re rounded or not --- modules/Slider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index dda5a3bfe..4bf2f8ad0 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -44,7 +44,7 @@ try { // for making it possiblie to run the test app in the following catch stat o.c._height = o.c.height - 2*totalBorderSize; o.c.rounded = o.c.rounded?20:0; - o.c.STEP_SIZE = (o.c._height-(2*o.c.rounded-7))/o.c.steps; + o.c.STEP_SIZE = (o.c._height-(!o.c.rounded?0:(2*o.c.rounded-7)))/o.c.steps; if (o.c.horizontal) { let mediator = o.c._xStart; @@ -161,7 +161,7 @@ try { // for making it possiblie to run the test app in the following catch stat g.setColor(o.c.colorBG). fillRect(o.c.hollowRect). // ... and here it's made hollow. setColor(0==level?o.c.colorBG:o.c.colorFG). - fillRect(o.f.updateBar(2*o.c.rounded-7+level*o.c.STEP_SIZE)); // Here the bar is drawn. + fillRect(o.f.updateBar((!o.c.rounded?0:(2*o.c.rounded-7))+level*o.c.STEP_SIZE)); // Here the bar is drawn. if (o.c.rounded && level===0) { g.setColor(o.c.colorFG).fillCircle(o.c._xStart+o.c._width/2,o.c._yStart+o.c._height-o.c.rounded+2, o.c.rounded-o.c.innerBorderSize); g.setColor(o.c.colorBG).fillCircle(o.c._xStart+o.c._width/2,o.c._yStart+o.c._height-o.c.rounded+2, o.c.rounded-o.c.innerBorderSize-2); From c2b26202681d40cdbb4548ce7ecfcd390e4e5d4f Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Fri, 29 Sep 2023 00:44:19 +0200 Subject: [PATCH 053/105] Slider:map input acounts for size & pos of slider ... and also if the slider is rounded. --- modules/Slider.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 4bf2f8ad0..2a522dbda 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -98,11 +98,11 @@ try { // for making it possiblie to run the test app in the following catch stat if (o.v.timeoutID) {clearTimeout(o.v.timeoutID); o.v.timeoutID = undefined;} if (e.b==0 && !o.v.timeoutID && (o.c.timeout || o.c.timeout===0)) o.v.timeoutID = setTimeout(o.f.remove, 1000*o.c.timeout); - let input = Math.min(o.c.horizontal?175-e.x:e.y, 170); - input = Math.round(input/o.c.STEP_SIZE); - if (o.c.useMap && o.f.wasOnIndicator(exFirst)) { // If draging starts on the indicator, adjust one-to-one. + let input = Math.max(0,Math.min((o.c.horizontal?175-e.x:e.y)-o.c.yStart-3*o.c.rounded/4, o.c.height)); + input = Math.round(input/o.c.STEP_SIZE); + o.v.level = Math.min(Math.max(o.c.steps-input,0),o.c.steps); if (o.v.level != o.v.prevLevel) cb("map",o.v.level); From 6f4b87666af5c3b48e19547fa72fdbe22eefd2b7 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Fri, 29 Sep 2023 01:12:17 +0200 Subject: [PATCH 054/105] Slider: fix level=0 on rounded horizontal sliders --- modules/Slider.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 2a522dbda..06a2f7afb 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -163,8 +163,8 @@ try { // for making it possiblie to run the test app in the following catch stat setColor(0==level?o.c.colorBG:o.c.colorFG). fillRect(o.f.updateBar((!o.c.rounded?0:(2*o.c.rounded-7))+level*o.c.STEP_SIZE)); // Here the bar is drawn. if (o.c.rounded && level===0) { - g.setColor(o.c.colorFG).fillCircle(o.c._xStart+o.c._width/2,o.c._yStart+o.c._height-o.c.rounded+2, o.c.rounded-o.c.innerBorderSize); - g.setColor(o.c.colorBG).fillCircle(o.c._xStart+o.c._width/2,o.c._yStart+o.c._height-o.c.rounded+2, o.c.rounded-o.c.innerBorderSize-2); + g.setColor(o.c.colorFG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._width/2:o.c.rounded-2), o.c._yStart+o.c._height-o.c.rounded+2, o.c.rounded-o.c.innerBorderSize); + g.setColor(o.c.colorBG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._width/2:o.c.rounded-2), o.c._yStart+o.c._height-o.c.rounded+2, o.c.rounded-o.c.innerBorderSize-2); } //print(level); @@ -196,6 +196,6 @@ try { // for making it possiblie to run the test app in the following catch stat } catch (e) { print(e); - let appName = "slidertest"; + let appName = "spotrem"; eval(require("Storage").read(appName+".app.js")); } From 8c4ad72d1da08d4b318727698d4cc28c03b7670e Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Fri, 29 Sep 2023 01:56:03 +0200 Subject: [PATCH 055/105] Slider: fix map input for horizontal sliders --- modules/Slider.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 06a2f7afb..914f3a40b 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -100,10 +100,12 @@ try { // for making it possiblie to run the test app in the following catch stat if (o.c.useMap && o.f.wasOnIndicator(exFirst)) { // If draging starts on the indicator, adjust one-to-one. - let input = Math.max(0,Math.min((o.c.horizontal?175-e.x:e.y)-o.c.yStart-3*o.c.rounded/4, o.c.height)); + let input = !o.c.horizontal? + Math.min((175-e.y)-o.c.yStart-3*o.c.rounded/4, o.c.height): + Math.min(e.x-o.c.xStart-3*o.c.rounded/4, o.c.width); input = Math.round(input/o.c.STEP_SIZE); - o.v.level = Math.min(Math.max(o.c.steps-input,0),o.c.steps); + o.v.level = Math.min(Math.max(input,0),o.c.steps); if (o.v.level != o.v.prevLevel) cb("map",o.v.level); o.f.draw&&o.f.draw(o.v.level); From 5657492cb4c81908adf422b2a55cc2aa1281d1a5 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Fri, 29 Sep 2023 02:22:39 +0200 Subject: [PATCH 056/105] Slider:move laziness from draw fun to drag handler --- modules/Slider.js | 25 ++++++++++--------------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 914f3a40b..91f524d50 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -107,9 +107,11 @@ try { // for making it possiblie to run the test app in the following catch stat o.v.level = Math.min(Math.max(input,0),o.c.steps); - if (o.v.level != o.v.prevLevel) cb("map",o.v.level); - o.f.draw&&o.f.draw(o.v.level); - + if (o.v.level != o.v.prevLevel) { + cb("map",o.v.level); + o.f.draw&&o.f.draw(o.v.level); + } + o.v.prevLevel = o.v.level; } else if (o.c.useIncr) { // Heavily inspired by "updown" mode of setUI. o.v.dy += o.c.horizontal?-e.dx:e.dy; @@ -124,6 +126,7 @@ try { // for making it possiblie to run the test app in the following catch stat o.v.level = Math.min(Math.max(o.v.level-incr,0),o.c.steps); cb("incr",incr); o.f.draw&&o.f.draw(o.v.level); + o.v.prevLevel = o.v.level; } } o.v.ebLast = e.b; @@ -134,7 +137,7 @@ try { // for making it possiblie to run the test app in the following catch stat Bangle.removeListener('drag', o.f.dragSlider); o.v.dragActive = false; o.v.timeoutID = undefined; - cb("remove", o.v.prevLevel); + cb("remove", o.v.level); }; } @@ -153,17 +156,9 @@ try { // for making it possiblie to run the test app in the following catch stat o.f.draw = (level)=>{ "ram"; - if (true || o.v.firstRun || !o.c.lazy) { - g.setColor(o.c.colorFG).fillRect(o.c.borderRect); // To get outer border... - } - if (false && level == o.v.prevLevel) {if (!o.v.firstRun) return; if (o.v.firstRun) o.v.firstRun = false;} - - o.v.prevLevel = level; - - g.setColor(o.c.colorBG). - fillRect(o.c.hollowRect). // ... and here it's made hollow. - setColor(0==level?o.c.colorBG:o.c.colorFG). - fillRect(o.f.updateBar((!o.c.rounded?0:(2*o.c.rounded-7))+level*o.c.STEP_SIZE)); // Here the bar is drawn. + g.setColor(o.c.colorFG).fillRect(o.c.borderRect). // To get outer border... + setColor(o.c.colorBG).fillRect(o.c.hollowRect). // ... and here it's made hollow. + setColor(0==level?o.c.colorBG:o.c.colorFG).fillRect(o.f.updateBar((!o.c.rounded?0:(2*o.c.rounded-7))+level*o.c.STEP_SIZE)); // Here the bar is drawn. if (o.c.rounded && level===0) { g.setColor(o.c.colorFG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._width/2:o.c.rounded-2), o.c._yStart+o.c._height-o.c.rounded+2, o.c.rounded-o.c.innerBorderSize); g.setColor(o.c.colorBG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._width/2:o.c.rounded-2), o.c._yStart+o.c._height-o.c.rounded+2, o.c.rounded-o.c.innerBorderSize-2); From b9c5245ba0c29a2b7b96d71a9221f589354cf2fd Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Fri, 29 Sep 2023 02:35:20 +0200 Subject: [PATCH 057/105] Slider:tweak code re zero level on rounded sliders --- modules/Slider.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 91f524d50..8cafa07a5 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -159,9 +159,9 @@ try { // for making it possiblie to run the test app in the following catch stat g.setColor(o.c.colorFG).fillRect(o.c.borderRect). // To get outer border... setColor(o.c.colorBG).fillRect(o.c.hollowRect). // ... and here it's made hollow. setColor(0==level?o.c.colorBG:o.c.colorFG).fillRect(o.f.updateBar((!o.c.rounded?0:(2*o.c.rounded-7))+level*o.c.STEP_SIZE)); // Here the bar is drawn. - if (o.c.rounded && level===0) { - g.setColor(o.c.colorFG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._width/2:o.c.rounded-2), o.c._yStart+o.c._height-o.c.rounded+2, o.c.rounded-o.c.innerBorderSize); - g.setColor(o.c.colorBG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._width/2:o.c.rounded-2), o.c._yStart+o.c._height-o.c.rounded+2, o.c.rounded-o.c.innerBorderSize-2); + if (o.c.rounded && level===0) { // Hollow circle indicates level zero when slider is rounded. + g.setColor(o.c.colorFG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._width/2:o.c.rounded-2), o.c._yStart+o.c._height-o.c.rounded+2, o.c.rounded-o.c.innerBorderSize). + setColor(o.c.colorBG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._width/2:o.c.rounded-2), o.c._yStart+o.c._height-o.c.rounded+2, o.c.rounded-o.c.innerBorderSize-2); } //print(level); From 2444e75628c27be5e3a11dfb00ba010c88f4dcf4 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Fri, 29 Sep 2023 20:52:24 +0200 Subject: [PATCH 058/105] Slider: small refactor to shorten code --- modules/Slider.js | 27 ++++++++++----------------- 1 file changed, 10 insertions(+), 17 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 8cafa07a5..8f94bba23 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -37,24 +37,8 @@ try { // for making it possiblie to run the test app in the following catch stat dragRect:R, },conf); - let totalBorderSize = o.c.outerBorderSize + o.c.innerBorderSize; - o.c._xStart = o.c.xStart + totalBorderSize; - o.c._width = o.c.width - 2*totalBorderSize; - o.c._yStart = o.c.yStart + totalBorderSize; - o.c._height = o.c.height - 2*totalBorderSize; - o.c.rounded = o.c.rounded?20:0; - - o.c.STEP_SIZE = (o.c._height-(!o.c.rounded?0:(2*o.c.rounded-7)))/o.c.steps; - if (o.c.horizontal) { - let mediator = o.c._xStart; - o.c._xStart = o.c._yStart; - o.c._yStart = mediator; - mediator = o.c._width; - o.c._width = o.c._height; - o.c._height = mediator; - - mediator = o.c.xStart; + let mediator = o.c.xStart; o.c.xStart = o.c.yStart; o.c.yStart = mediator; mediator = o.c.width; @@ -63,6 +47,15 @@ try { // for making it possiblie to run the test app in the following catch stat delete mediator; } + let totalBorderSize = o.c.outerBorderSize + o.c.innerBorderSize; + o.c._xStart = o.c.xStart + totalBorderSize; + o.c._width = o.c.width - 2*totalBorderSize; + o.c._yStart = o.c.yStart + totalBorderSize; + o.c._height = o.c.height - 2*totalBorderSize; + o.c.rounded = o.c.rounded?20:0; + + o.c.STEP_SIZE = ((!o.c.horizontal?o.c._height:o.c._width)-(!o.c.rounded?0:(2*o.c.rounded-7)))/o.c.steps; + o.c.r = {x:o.c.xStart, y:o.c.yStart, x2:o.c.xStart+o.c.width, y2:o.c.yStart+o.c.height, w:o.c.width, h:o.c.height}; // Initialize the level From 98a6417008e0085ae4c32eba6981641c040ace25 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Fri, 29 Sep 2023 21:06:50 +0200 Subject: [PATCH 059/105] Slider: move `let incr` into `while` scope --- modules/Slider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/Slider.js b/modules/Slider.js index 8f94bba23..64cddace7 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -110,8 +110,8 @@ try { // for making it possiblie to run the test app in the following catch stat o.v.dy += o.c.horizontal?-e.dx:e.dy; //if (!e.b) o.v.dy=0; - let incr; while (Math.abs(o.v.dy)>32) { + let incr; if (o.v.dy>0) { o.v.dy-=32; incr = 1;} else { o.v.dy+=32; incr = -1;} Bangle.buzz(20); From 0952ad9a2671303270b78a5b2ecd9f3b5527ab3e Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sat, 30 Sep 2023 21:11:39 +0200 Subject: [PATCH 060/105] Slider: refactor logic re auto progressing sliders --- modules/Slider.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 64cddace7..0dabd966e 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -163,17 +163,21 @@ try { // for making it possiblie to run the test app in the following catch stat } if (o.c.autoProgress) { - o.v.shouldAutoDraw = true; o.f.autoUpdate = ()=>{ //if (o.v.level===undefined) o.v.level = -1; - o.v.level = o.v.level+1; - if (o.v.shouldAutoDraw) o.f.draw&&o.f.draw(o.v.level); + o.v.level = o.c.currLevel + Math.round((Date.now()-o.v.initTime)/1000) + if (o.v.level>o.c.steps) o.v.level=o.c.steps; + o.f.draw&&o.f.draw(o.v.level); cb("auto"); if (o.v.level==o.c.steps) {o.f.stopAutoUpdate();} }; + o.f.updateInitTime = ()=>{ + o.v.initTime=Date.now(); + } o.f.startAutoUpdate = ()=>{ o.f.stopAutoUpdate(); - if (o.v.shouldAutoDraw) o.f.draw&&o.f.draw(o.v.level); + !o.v.initTime&&o.f.updateInitTime(); + o.f.draw&&o.f.draw(o.v.level); o.v.autoIntervalID = setInterval(o.f.autoUpdate,1000); }; o.f.stopAutoUpdate = ()=>{if (o.v.autoIntervalID) {clearInterval(o.v.autoIntervalID); o.v.autoIntervalID = undefined;}}; From ecd4a7ee0c6670a5e33fea51ee9722b9ca8758f4 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sun, 1 Oct 2023 00:50:28 +0200 Subject: [PATCH 061/105] Slider: Assign empty function to cb if undefined --- modules/Slider.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/modules/Slider.js b/modules/Slider.js index 0dabd966e..5181e4c83 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -4,6 +4,8 @@ try { // for making it possiblie to run the test app in the following catch stat const R = Bangle.appRect; + if (!cb) cb = ()=>{}; + let o = {}; o.v = {}; // variables go here. o.f = {}; // functions go here. From 573fa3806c9d01ed90b8a6f65bf21f4c2c52619a Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sun, 1 Oct 2023 02:42:44 +0200 Subject: [PATCH 062/105] Slider: remove some unused vars and consts --- modules/Slider.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 5181e4c83..17e215fdb 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -26,10 +26,8 @@ try { // for making it possiblie to run the test app in the following catch stat timeout:1, colorFG:g.theme.fg2, colorBG:g.theme.bg2, - lazy:true, - rounded:0, + rounded:true, propagateDrag:false, - immediatedraw:false, autoProgress:false, outerBorderSize:2, innerBorderSize:2, @@ -63,7 +61,6 @@ try { // for making it possiblie to run the test app in the following catch stat // Initialize the level o.v.level = (o.c.currLevel||o.c.currLevel===0)?o.c.currLevel:o.c.steps/2; - o.v.firstRun = true; o.v.ebLast = 0; o.v.dy = 0; From 9c4fd1d94c5b15500a540c2ab7bd790e02da684c Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sun, 1 Oct 2023 02:43:55 +0200 Subject: [PATCH 063/105] Slider: Add some documentation --- modules/Slider.md | 97 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 modules/Slider.md diff --git a/modules/Slider.md b/modules/Slider.md new file mode 100644 index 000000000..051be474f --- /dev/null +++ b/modules/Slider.md @@ -0,0 +1,97 @@ +Slider Library +======================== + +> Take a look at README.md for hints on developing with this library. + +Usage +----- + +```JS +var Slider = require("Slider"); +var slider = Slider(callbackFunction, configObject); + +Bangle.on("drag", slider.f.dragSlider); + +// If the slider should take precedent over other drag handlers use (fw2v18 and up): +// Bangle.prependListener("drag", slider.f.dragSlider); +``` + +`callbackFunction` (first argument) determines what `slider` is used for. Should take two arguments, `mode` and `feedback`. The different modes/feedback combinations to expect are: +- "map", o.v.level | current level when interacting by mapping interface. +- "incr", incr | where incr = +-1, when interacting by incrementing interface. +- "remove", o.v.level | last level when the slider times out. +- "auto" | on its own, when auto progressing. + +`configObject` (second argument, optional) has the following defaults: + +```JSON +R = Bangle.appRect; // For use when determining defaults below. + +{ +useMap:false, // Use the mapping feature? +useIncr:true, // Use the incementing feature? +horizontal:false, // Slider should be horizontal? +xStart:R.x2-R.w/4-4, // Leftmost x-coordinate. (Uppermost y-coordingat if horizontal) +width:R.w/4, // Width of the slider. (Height if horizontal) +yStart:R.y+4, // Uppermost y-coordinate. (Rightmost x-coordinate if horizontal) +height:R.h-10, // Height of the slider. (Width if horizontal) +steps:30, // Number of discrete steps of the slider. +oversizeR:0, // Determines if the mapping area should be extend outside the indicator (Right/Up). +oversizeL:0, // Determines if the mapping area should be extend outside the indicator (Left/Down). +timeout:1, // Second untill the slider times out. +colorFG:g.theme.fg2, // Forground color. +colorBG:g.theme.bg2, // Background color. +rounded:true, // Slider should have rounded corners? +propagateDrag:false, // Pass the drag event on down the handler chain? +autoProgress:false, // The slider should be able to progress automatically? +outerBorderSize:2, // The size of the visual border. +innerBorderSize:2, // The distance between visual border and the slider. +drawableSlider:true, // Should supply the sliders standard drawing mechanism? +dragableSlider:true, // Should supply the sliders standard interaction mechanisms? +currLevel:undefined, // The level to initate the slider with. +dragRect:R, // Accept input withing this rectangle. +} +``` + +A slider initiated in the Web IDE terminal reveals its internals to a degree: +``` +>slider = require("Slider").create(()=>{},{autoProgress:true}) +={ + v: { level: 15, ebLast: 0, dy: 0 }, + f: { + wasOnDragRect: function (exFirst,eyFirst) { ... }, + wasOnIndicator: function (exFirst) { ... }, + dragSlider: function (e) { ... }, + remove: function () { ... }, + updateBar: function (levelHeight) { ... }, + draw: function (level) { ... }, + autoUpdate: function () { ... }, + updateInitTime: function () { ... }, + startAutoUpdate: function () { ... }, + stopAutoUpdate: function () { ... } + }, + c: { useMap: false, useIncr: true, horizontal: false, xStart: 127, + width: 44, yStart: 28, height: 142, steps: 30, oversizeR: 0, + oversizeL: 0, timeout: 1, colorFG: 65535, colorBG: 8, rounded: 20, + propagateDrag: false, autoProgress: true, outerBorderSize: 2, innerBorderSize: 2, + drawableSlider: true, dragableSlider: true, currLevel: undefined, + dragRect: { x: 0, y: 24, w: 176, h: 152, + x2: 175, y2: 175 }, + _xStart: 131, _width: 36, _yStart: 32, _height: 134, STEP_SIZE: 3.36666666666, + r: { x: 127, y: 28, x2: 171, y2: 170, + w: 44, h: 142 }, + borderRect: { x: 127, y: 28, w: 44, h: 142, + r: 20 }, + hollowRect: { x: 129, y: 30, w: 40, h: 138, + r: 20 } + } + } +> +``` + +Links +----- + +There is a [slider test app on thyttan's personal app loader](https://thyttan.github.io/BangleApps/?q=slidertest) (at time of writing). Looking at [its code](https://github.com/thyttan/BangleApps/blob/ui-slider-lib/apps/slidertest/app.js) is a good way to see how the slider is used in app development. + +The version of [Remote for Spotify on thyttan's personal app loader](https://thyttan.github.io/BangleApps/?q=spotrem) (at time of writing) also utilizes the `Slider` module. Here is [the code](https://github.com/thyttan/BangleApps/blob/ui-slider-lib/apps/spotrem/app.js). From a2380862662f0d1c669807f5c89e454545818329 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 3 Oct 2023 00:23:30 +0200 Subject: [PATCH 064/105] Slider: Add some descriptive comments --- modules/Slider.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 17e215fdb..839ec5a58 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -1,17 +1,17 @@ -try { // for making it possiblie to run the test app in the following catch statement. It would complain on `exports` not being defined. +try { // For making it possiblie to run the test app in the following catch statement. It would complain on `exports` not being defined when uploading from Web IDE and not run otherwise. exports.create = function(cb, conf) { const R = Bangle.appRect; + // Empty function added to cb if it's undefined. if (!cb) cb = ()=>{}; let o = {}; o.v = {}; // variables go here. o.f = {}; // functions go here. - // configuration for the indicator: - + // Default configuration for the indicator, modified by parameter `conf`: o.c = Object.assign({ // constants go here. useMap:false, useIncr:true, @@ -37,6 +37,7 @@ try { // for making it possiblie to run the test app in the following catch stat dragRect:R, },conf); + // If horizontal, flip things around. if (o.c.horizontal) { let mediator = o.c.xStart; o.c.xStart = o.c.yStart; @@ -47,6 +48,7 @@ try { // for making it possiblie to run the test app in the following catch stat delete mediator; } + // Make room for the border. Underscore indicates the area for the actual indicator bar without borders. let totalBorderSize = o.c.outerBorderSize + o.c.innerBorderSize; o.c._xStart = o.c.xStart + totalBorderSize; o.c._width = o.c.width - 2*totalBorderSize; @@ -56,6 +58,7 @@ try { // for making it possiblie to run the test app in the following catch stat o.c.STEP_SIZE = ((!o.c.horizontal?o.c._height:o.c._width)-(!o.c.rounded?0:(2*o.c.rounded-7)))/o.c.steps; + // Add a rectangle object with x, y, x2, y2, w and h values. o.c.r = {x:o.c.xStart, y:o.c.yStart, x2:o.c.xStart+o.c.width, y2:o.c.yStart+o.c.height, w:o.c.width, h:o.c.height}; // Initialize the level @@ -64,7 +67,9 @@ try { // for making it possiblie to run the test app in the following catch stat o.v.ebLast = 0; o.v.dy = 0; + // Only add interactivity if wanted. if (o.c.dragableSlider) { + o.f.wasOnDragRect = (exFirst, eyFirst)=>{ "ram"; return exFirst>o.c.dragRect.x && exFirsto.c.dragRect.y && eyFirsto.c._yStart-o.c.oversizeL*o.c._height && exFirst{ "ram"; if (o.v.ebLast==0) { @@ -83,6 +89,7 @@ try { // for making it possiblie to run the test app in the following catch stat eyFirst = o.c.horizontal?e.x:e.y; } + // Only react if on allowed area. if (o.f.wasOnDragRect(exFirst, eyFirst)) { o.v.dragActive = true; if (!o.c.propagateDrag) E.stopEventPropagation&&E.stopEventPropagation(); @@ -125,6 +132,7 @@ try { // for making it possiblie to run the test app in the following catch stat } }; + // Cleanup. o.f.remove = ()=> { Bangle.removeListener('drag', o.f.dragSlider); o.v.dragActive = false; @@ -133,8 +141,10 @@ try { // for making it possiblie to run the test app in the following catch stat }; } + // Add standard slider graphics only if wanted. if (o.c.drawableSlider) { + // Function for getting the indication bars size. o.f.updateBar = (levelHeight)=>{ "ram"; if (!o.c.horizontal) return {x:o.c._xStart,y:o.c._yStart+o.c._height-levelHeight,w:o.c._width,y2:o.c._yStart+o.c._height,r:o.c.rounded}; @@ -145,6 +155,7 @@ try { // for making it possiblie to run the test app in the following catch stat o.c.hollowRect = {x:o.c._xStart-o.c.innerBorderSize,y:o.c._yStart-o.c.innerBorderSize,w:o.c._width+2*o.c.innerBorderSize,h:o.c._height+2*o.c.innerBorderSize,r:o.c.rounded}; + // Standard slider drawing method. o.f.draw = (level)=>{ "ram"; @@ -161,9 +172,9 @@ try { // for making it possiblie to run the test app in the following catch stat }; } + // Add logic for auto progressing the slider only if wanted. if (o.c.autoProgress) { o.f.autoUpdate = ()=>{ - //if (o.v.level===undefined) o.v.level = -1; o.v.level = o.c.currLevel + Math.round((Date.now()-o.v.initTime)/1000) if (o.v.level>o.c.steps) o.v.level=o.c.steps; o.f.draw&&o.f.draw(o.v.level); @@ -182,8 +193,6 @@ try { // for making it possiblie to run the test app in the following catch stat o.f.stopAutoUpdate = ()=>{if (o.v.autoIntervalID) {clearInterval(o.v.autoIntervalID); o.v.autoIntervalID = undefined;}}; } - //o.f.printThis = ()=>(print(this)); - return o; }; From 17f72c680e2a4832a4f17552c08df60afcbf4824 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 3 Oct 2023 00:43:32 +0200 Subject: [PATCH 065/105] Slider: tweaks to Slider.md documentation --- modules/Slider.md | 58 +++++++++++++++++++++++------------------------ 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/modules/Slider.md b/modules/Slider.md index 051be474f..024a52519 100644 --- a/modules/Slider.md +++ b/modules/Slider.md @@ -16,11 +16,11 @@ Bangle.on("drag", slider.f.dragSlider); // Bangle.prependListener("drag", slider.f.dragSlider); ``` -`callbackFunction` (first argument) determines what `slider` is used for. Should take two arguments, `mode` and `feedback`. The different modes/feedback combinations to expect are: -- "map", o.v.level | current level when interacting by mapping interface. -- "incr", incr | where incr = +-1, when interacting by incrementing interface. -- "remove", o.v.level | last level when the slider times out. -- "auto" | on its own, when auto progressing. +`callbackFunction` (first argument) determines what `slider` is used for. `slider` will pass two arguments, `mode` and `feedback` into `callbackFunction` (if `slider` is interactive). The different `mode`/`feedback` combinations to expect are: +- `"map", o.v.level` | current level when interacting by mapping interface. +- `"incr", incr` | where incr = +-1, when interacting by incrementing interface. +- `"remove", o.v.level` | last level when the slider times out. +- `"auto"` | on its own, when auto progressing. `configObject` (second argument, optional) has the following defaults: @@ -28,34 +28,34 @@ Bangle.on("drag", slider.f.dragSlider); R = Bangle.appRect; // For use when determining defaults below. { -useMap:false, // Use the mapping feature? -useIncr:true, // Use the incementing feature? -horizontal:false, // Slider should be horizontal? -xStart:R.x2-R.w/4-4, // Leftmost x-coordinate. (Uppermost y-coordingat if horizontal) -width:R.w/4, // Width of the slider. (Height if horizontal) -yStart:R.y+4, // Uppermost y-coordinate. (Rightmost x-coordinate if horizontal) -height:R.h-10, // Height of the slider. (Width if horizontal) -steps:30, // Number of discrete steps of the slider. -oversizeR:0, // Determines if the mapping area should be extend outside the indicator (Right/Up). -oversizeL:0, // Determines if the mapping area should be extend outside the indicator (Left/Down). -timeout:1, // Second untill the slider times out. -colorFG:g.theme.fg2, // Forground color. -colorBG:g.theme.bg2, // Background color. -rounded:true, // Slider should have rounded corners? -propagateDrag:false, // Pass the drag event on down the handler chain? -autoProgress:false, // The slider should be able to progress automatically? -outerBorderSize:2, // The size of the visual border. -innerBorderSize:2, // The distance between visual border and the slider. -drawableSlider:true, // Should supply the sliders standard drawing mechanism? -dragableSlider:true, // Should supply the sliders standard interaction mechanisms? -currLevel:undefined, // The level to initate the slider with. -dragRect:R, // Accept input withing this rectangle. +useMap: false, // Use the mapping feature? +useIncr: true, // Use the incementing feature? +horizontal: false, // Slider should be horizontal? +xStart: R.x2-R.w/4-4, // Leftmost x-coordinate. (Uppermost y-coordinate if horizontal) +width: R.w/4, // Width of the slider. (Height if horizontal) +yStart: R.y+4, // Uppermost y-coordinate. (Rightmost x-coordinate if horizontal) +height: R.h-10, // Height of the slider. (Width if horizontal) +steps: 30, // Number of discrete steps of the slider. +oversizeR: 0, // Determines if the mapping area should be extend outside the indicator (Right/Up). +oversizeL: 0, // Determines if the mapping area should be extend outside the indicator (Left/Down). +timeout: 1, // Seconds untill the slider times out. +colorFG: g.theme.fg2, // Foreground color. +colorBG: g.theme.bg2, // Background color. +rounded: true, // Slider should have rounded corners? +propagateDrag: false, // Pass the drag event on down the handler chain? +autoProgress: false, // The slider should be able to progress automatically? +outerBorderSize: 2, // The size of the visual border. +innerBorderSize: 2, // The distance between visual border and the slider. +drawableSlider: true, // Should supply the sliders standard drawing mechanism? +dragableSlider: true, // Should supply the sliders standard interaction mechanisms? +currLevel: undefined, // The level to initate the slider with. +dragRect: R, // Accept input within this rectangle. } ``` -A slider initiated in the Web IDE terminal reveals its internals to a degree: +A slider initiated in the Web IDE terminal window reveals its internals to a degree: ``` ->slider = require("Slider").create(()=>{},{autoProgress:true}) +>slider = require("Slider").create(()=>{}, {autoProgress:true}) ={ v: { level: 15, ebLast: 0, dy: 0 }, f: { From 9b1cfd48368094fd84d46d52fedd11a3655d466a Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 3 Oct 2023 01:02:13 +0200 Subject: [PATCH 066/105] Slider: `ebLast` and `dy` only needed with draging --- modules/Slider.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 839ec5a58..a371b1a0d 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -64,12 +64,12 @@ try { // For making it possiblie to run the test app in the following catch stat // Initialize the level o.v.level = (o.c.currLevel||o.c.currLevel===0)?o.c.currLevel:o.c.steps/2; - o.v.ebLast = 0; - o.v.dy = 0; - // Only add interactivity if wanted. if (o.c.dragableSlider) { + o.v.ebLast = 0; + o.v.dy = 0; + o.f.wasOnDragRect = (exFirst, eyFirst)=>{ "ram"; return exFirst>o.c.dragRect.x && exFirsto.c.dragRect.y && eyFirst Date: Wed, 4 Oct 2023 00:31:03 +0200 Subject: [PATCH 067/105] Slider:use actual current level for auto progress --- modules/Slider.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index a371b1a0d..2fd245360 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -175,22 +175,30 @@ try { // For making it possiblie to run the test app in the following catch stat // Add logic for auto progressing the slider only if wanted. if (o.c.autoProgress) { o.f.autoUpdate = ()=>{ - o.v.level = o.c.currLevel + Math.round((Date.now()-o.v.initTime)/1000) + o.v.level = o.v.autoInitLevel + Math.round((Date.now()-o.v.autoInitTime)/1000) if (o.v.level>o.c.steps) o.v.level=o.c.steps; o.f.draw&&o.f.draw(o.v.level); cb("auto"); if (o.v.level==o.c.steps) {o.f.stopAutoUpdate();} }; - o.f.updateInitTime = ()=>{ - o.v.initTime=Date.now(); - } + o.f.initAutoValues = ()=>{ + o.v.autoInitTime=Date.now(); + o.v.autoInitLevel=o.v.level; + }; o.f.startAutoUpdate = ()=>{ o.f.stopAutoUpdate(); - !o.v.initTime&&o.f.updateInitTime(); + o.f.initAutoValues(); o.f.draw&&o.f.draw(o.v.level); o.v.autoIntervalID = setInterval(o.f.autoUpdate,1000); }; - o.f.stopAutoUpdate = ()=>{if (o.v.autoIntervalID) {clearInterval(o.v.autoIntervalID); o.v.autoIntervalID = undefined;}}; + o.f.stopAutoUpdate = ()=>{ + if (o.v.autoIntervalID) { + clearInterval(o.v.autoIntervalID); + o.v.autoIntervalID = undefined; + } + o.v.autoInitLevel = undefined; + o.v.autoInitTime = undefined; + }; } return o; From 795fec654e9dc26d8338173ce5025fed827de378 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 4 Oct 2023 19:44:10 +0200 Subject: [PATCH 068/105] Slider: tweak documentation in slider.md --- modules/Slider.md | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/modules/Slider.md b/modules/Slider.md index 024a52519..1069284cb 100644 --- a/modules/Slider.md +++ b/modules/Slider.md @@ -16,7 +16,7 @@ Bangle.on("drag", slider.f.dragSlider); // Bangle.prependListener("drag", slider.f.dragSlider); ``` -`callbackFunction` (first argument) determines what `slider` is used for. `slider` will pass two arguments, `mode` and `feedback` into `callbackFunction` (if `slider` is interactive). The different `mode`/`feedback` combinations to expect are: +`callbackFunction` (first argument) determines what `slider` is used for. `slider` will pass two arguments, `mode` and `feedback`, into `callbackFunction` (if `slider` is interactive or auto progressing). The different `mode`/`feedback` combinations to expect are: - `"map", o.v.level` | current level when interacting by mapping interface. - `"incr", incr` | where incr = +-1, when interacting by incrementing interface. - `"remove", o.v.level` | last level when the slider times out. @@ -28,28 +28,31 @@ Bangle.on("drag", slider.f.dragSlider); R = Bangle.appRect; // For use when determining defaults below. { -useMap: false, // Use the mapping feature? -useIncr: true, // Use the incementing feature? +currLevel: undefined, // The level to initate the slider with. horizontal: false, // Slider should be horizontal? xStart: R.x2-R.w/4-4, // Leftmost x-coordinate. (Uppermost y-coordinate if horizontal) width: R.w/4, // Width of the slider. (Height if horizontal) yStart: R.y+4, // Uppermost y-coordinate. (Rightmost x-coordinate if horizontal) height: R.h-10, // Height of the slider. (Width if horizontal) steps: 30, // Number of discrete steps of the slider. + +dragableSlider: true, // Should supply the sliders standard interaction mechanisms? +dragRect: R, // Accept input within this rectangle. +useIncr: true, // Use the incrementing feature? +useMap: false, // Use the mapping feature? oversizeR: 0, // Determines if the mapping area should be extend outside the indicator (Right/Up). oversizeL: 0, // Determines if the mapping area should be extend outside the indicator (Left/Down). +propagateDrag: false, // Pass the drag event on down the handler chain? timeout: 1, // Seconds untill the slider times out. + +drawableSlider: true, // Should supply the sliders standard drawing mechanism? colorFG: g.theme.fg2, // Foreground color. colorBG: g.theme.bg2, // Background color. rounded: true, // Slider should have rounded corners? -propagateDrag: false, // Pass the drag event on down the handler chain? -autoProgress: false, // The slider should be able to progress automatically? outerBorderSize: 2, // The size of the visual border. innerBorderSize: 2, // The distance between visual border and the slider. -drawableSlider: true, // Should supply the sliders standard drawing mechanism? -dragableSlider: true, // Should supply the sliders standard interaction mechanisms? -currLevel: undefined, // The level to initate the slider with. -dragRect: R, // Accept input within this rectangle. + +autoProgress: false, // The slider should be able to progress automatically? } ``` @@ -66,7 +69,7 @@ A slider initiated in the Web IDE terminal window reveals its internals to a deg updateBar: function (levelHeight) { ... }, draw: function (level) { ... }, autoUpdate: function () { ... }, - updateInitTime: function () { ... }, + initAutoValues: function () { ... }, startAutoUpdate: function () { ... }, stopAutoUpdate: function () { ... } }, From 944da801866c4d4479e95179f5c3b76e387ce02c Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 4 Oct 2023 19:44:50 +0200 Subject: [PATCH 069/105] Slider: reorder default config values --- modules/Slider.js | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 2fd245360..b5b9263a3 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -13,28 +13,31 @@ try { // For making it possiblie to run the test app in the following catch stat // Default configuration for the indicator, modified by parameter `conf`: o.c = Object.assign({ // constants go here. - useMap:false, - useIncr:true, + currLevel:undefined, horizontal:false, xStart:R.x2-R.w/4-4, width:R.w/4, yStart:R.y+4, height:R.h-10, - steps:30, // Default corresponds to my phones volume range, [0,30]. Maybe it should be 31. Math is hard sometimes... + steps:30, + + dragableSlider:true, + dragRect:R, + useIncr:true, + useMap:false, oversizeR:0, oversizeL:0, + propagateDrag:false, timeout:1, + + drawableSlider:true, colorFG:g.theme.fg2, colorBG:g.theme.bg2, rounded:true, - propagateDrag:false, - autoProgress:false, outerBorderSize:2, innerBorderSize:2, - drawableSlider:true, - dragableSlider:true, - currLevel:undefined, - dragRect:R, + + autoProgress:false, },conf); // If horizontal, flip things around. From 408990d91956a7d4116c3aa59c92e6c686a93083 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Sun, 8 Oct 2023 18:22:44 +0200 Subject: [PATCH 070/105] Slider:move draw and cb to deduplicate code --- modules/Slider.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index b5b9263a3..a88c91df2 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -100,6 +100,7 @@ try { // For making it possiblie to run the test app in the following catch stat if (o.v.timeoutID) {clearTimeout(o.v.timeoutID); o.v.timeoutID = undefined;} if (e.b==0 && !o.v.timeoutID && (o.c.timeout || o.c.timeout===0)) o.v.timeoutID = setTimeout(o.f.remove, 1000*o.c.timeout); + let cbObj; if (o.c.useMap && o.f.wasOnIndicator(exFirst)) { // If draging starts on the indicator, adjust one-to-one. let input = !o.c.horizontal? @@ -109,11 +110,8 @@ try { // For making it possiblie to run the test app in the following catch stat o.v.level = Math.min(Math.max(input,0),o.c.steps); - if (o.v.level != o.v.prevLevel) { - cb("map",o.v.level); - o.f.draw&&o.f.draw(o.v.level); - } - o.v.prevLevel = o.v.level; + cbObj = {mode:"map", value:o.v.level}; + } else if (o.c.useIncr) { // Heavily inspired by "updown" mode of setUI. o.v.dy += o.c.horizontal?-e.dx:e.dy; @@ -126,11 +124,15 @@ try { // For making it possiblie to run the test app in the following catch stat Bangle.buzz(20); o.v.level = Math.min(Math.max(o.v.level-incr,0),o.c.steps); - cb("incr",incr); - o.f.draw&&o.f.draw(o.v.level); - o.v.prevLevel = o.v.level; + + cbObj = {mode:"incr", value:incr}; } } + if (o.v.level != o.v.prevLevel) { + o.f.draw&&o.f.draw(o.v.level); + cb(cbObj.mode, cbObj.value); + } + o.v.prevLevel = o.v.level; o.v.ebLast = e.b; } }; From bcb6e0ca01b859d7b06a424f81750ff1bd007194 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Mon, 9 Oct 2023 00:09:53 +0200 Subject: [PATCH 071/105] Slider: ask what the screens height is Should make this more likely to work on different size screens. --- modules/Slider.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/modules/Slider.js b/modules/Slider.js index a88c91df2..69b3ef033 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -69,6 +69,7 @@ try { // For making it possiblie to run the test app in the following catch stat // Only add interactivity if wanted. if (o.c.dragableSlider) { + const Y_MAX = g.getHeight()-1; // Should this take users screen calibration into account? o.v.ebLast = 0; o.v.dy = 0; @@ -104,7 +105,7 @@ try { // For making it possiblie to run the test app in the following catch stat if (o.c.useMap && o.f.wasOnIndicator(exFirst)) { // If draging starts on the indicator, adjust one-to-one. let input = !o.c.horizontal? - Math.min((175-e.y)-o.c.yStart-3*o.c.rounded/4, o.c.height): + Math.min((Y_MAX-e.y)-o.c.yStart-3*o.c.rounded/4, o.c.height): Math.min(e.x-o.c.xStart-3*o.c.rounded/4, o.c.width); input = Math.round(input/o.c.STEP_SIZE); From 01cf0fb202cc0b87fdef023fe6c6c73c84817452 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Mon, 9 Oct 2023 18:17:35 +0200 Subject: [PATCH 072/105] Slider: disregard laziness on max/min levels --- modules/Slider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/Slider.js b/modules/Slider.js index 69b3ef033..bf15594ed 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -129,7 +129,7 @@ try { // For making it possiblie to run the test app in the following catch stat cbObj = {mode:"incr", value:incr}; } } - if (o.v.level != o.v.prevLevel) { + if (o.v.level!==o.v.prevLevel || o.v.level===0 || o.v.level===o.c.steps) { o.f.draw&&o.f.draw(o.v.level); cb(cbObj.mode, cbObj.value); } From 93112f40df86d1f3781987083d309d65f9ccfb06 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Mon, 9 Oct 2023 20:16:21 +0200 Subject: [PATCH 073/105] Slider: fix cbObj undefined --- modules/Slider.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index bf15594ed..8968c332e 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -101,7 +101,7 @@ try { // For making it possiblie to run the test app in the following catch stat if (o.v.timeoutID) {clearTimeout(o.v.timeoutID); o.v.timeoutID = undefined;} if (e.b==0 && !o.v.timeoutID && (o.c.timeout || o.c.timeout===0)) o.v.timeoutID = setTimeout(o.f.remove, 1000*o.c.timeout); - let cbObj; + o.v.cbObj; if (o.c.useMap && o.f.wasOnIndicator(exFirst)) { // If draging starts on the indicator, adjust one-to-one. let input = !o.c.horizontal? @@ -111,7 +111,7 @@ try { // For making it possiblie to run the test app in the following catch stat o.v.level = Math.min(Math.max(input,0),o.c.steps); - cbObj = {mode:"map", value:o.v.level}; + o.v.cbObj = {mode:"map", value:o.v.level}; } else if (o.c.useIncr) { // Heavily inspired by "updown" mode of setUI. @@ -126,12 +126,12 @@ try { // For making it possiblie to run the test app in the following catch stat o.v.level = Math.min(Math.max(o.v.level-incr,0),o.c.steps); - cbObj = {mode:"incr", value:incr}; + o.v.cbObj = {mode:"incr", value:incr}; } } if (o.v.level!==o.v.prevLevel || o.v.level===0 || o.v.level===o.c.steps) { o.f.draw&&o.f.draw(o.v.level); - cb(cbObj.mode, cbObj.value); + cb(o.v.cbObj.mode, o.v.cbObj.value); } o.v.prevLevel = o.v.level; o.v.ebLast = e.b; From 40c205c0422c67051edda9ec9d30156898d24805 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Mon, 9 Oct 2023 20:26:07 +0200 Subject: [PATCH 074/105] Slider: callback first, then draw as per: https://github.com/espruino/BangleApps/pull/2953#discussion_r1350097601 To still be able to draw on top of the slider, in the callback wrap the extra drawing inside a `setTimeout(extraDraw,0)` or similar. Thanks @bobrippling! --- modules/Slider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 8968c332e..d80a9f910 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -130,8 +130,8 @@ try { // For making it possiblie to run the test app in the following catch stat } } if (o.v.level!==o.v.prevLevel || o.v.level===0 || o.v.level===o.c.steps) { - o.f.draw&&o.f.draw(o.v.level); cb(o.v.cbObj.mode, o.v.cbObj.value); + o.f.draw&&o.f.draw(o.v.level); } o.v.prevLevel = o.v.level; o.v.ebLast = e.b; @@ -183,8 +183,8 @@ try { // For making it possiblie to run the test app in the following catch stat o.f.autoUpdate = ()=>{ o.v.level = o.v.autoInitLevel + Math.round((Date.now()-o.v.autoInitTime)/1000) if (o.v.level>o.c.steps) o.v.level=o.c.steps; - o.f.draw&&o.f.draw(o.v.level); cb("auto"); + o.f.draw&&o.f.draw(o.v.level); if (o.v.level==o.c.steps) {o.f.stopAutoUpdate();} }; o.f.initAutoValues = ()=>{ From 3adb21d0350b40dc9ac5a7f84a93f78317a495c4 Mon Sep 17 00:00:00 2001 From: thyttan <97237430+thyttan@users.noreply.github.com> Date: Tue, 10 Oct 2023 22:15:12 +0200 Subject: [PATCH 075/105] Slider: shorten conditional assignment logic Co-authored-by: Rob Pilling --- modules/Slider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index d80a9f910..a617f91f1 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -13,7 +13,7 @@ try { // For making it possiblie to run the test app in the following catch stat // Default configuration for the indicator, modified by parameter `conf`: o.c = Object.assign({ // constants go here. - currLevel:undefined, + currLevel:null, horizontal:false, xStart:R.x2-R.w/4-4, width:R.w/4, @@ -65,7 +65,7 @@ try { // For making it possiblie to run the test app in the following catch stat o.c.r = {x:o.c.xStart, y:o.c.yStart, x2:o.c.xStart+o.c.width, y2:o.c.yStart+o.c.height, w:o.c.width, h:o.c.height}; // Initialize the level - o.v.level = (o.c.currLevel||o.c.currLevel===0)?o.c.currLevel:o.c.steps/2; + o.v.level = o.c.currLevel!==null?o.c.currLevel:o.c.steps/2; // Only add interactivity if wanted. if (o.c.dragableSlider) { From 3afd9ac1261f6139e255dbe177ac0664b5d4a027 Mon Sep 17 00:00:00 2001 From: thyttan <97237430+thyttan@users.noreply.github.com> Date: Tue, 10 Oct 2023 22:27:15 +0200 Subject: [PATCH 076/105] Slider: remove unnecessary var initialization Co-authored-by: Rob Pilling --- modules/Slider.js | 1 - 1 file changed, 1 deletion(-) diff --git a/modules/Slider.js b/modules/Slider.js index a617f91f1..9a6667695 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -101,7 +101,6 @@ try { // For making it possiblie to run the test app in the following catch stat if (o.v.timeoutID) {clearTimeout(o.v.timeoutID); o.v.timeoutID = undefined;} if (e.b==0 && !o.v.timeoutID && (o.c.timeout || o.c.timeout===0)) o.v.timeoutID = setTimeout(o.f.remove, 1000*o.c.timeout); - o.v.cbObj; if (o.c.useMap && o.f.wasOnIndicator(exFirst)) { // If draging starts on the indicator, adjust one-to-one. let input = !o.c.horizontal? From 9b882c24bd4474aa809f0a41715527a851de798f Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 10 Oct 2023 23:47:16 +0200 Subject: [PATCH 077/105] Slider: refactor useIncr/Map -> mode:"incr"/"map"/ /"mapincr" Thanks @bobrippling --- modules/Slider.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 9a6667695..5c1c04093 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -23,8 +23,7 @@ try { // For making it possiblie to run the test app in the following catch stat dragableSlider:true, dragRect:R, - useIncr:true, - useMap:false, + mode:"incr", oversizeR:0, oversizeL:0, propagateDrag:false, @@ -93,6 +92,9 @@ try { // For making it possiblie to run the test app in the following catch stat eyFirst = o.c.horizontal?e.x:e.y; } + let useMap = (o.c.mode==="map"||o.c.mode==="mapincr")?true:false; + let useIncr = (o.c.mode==="incr"||o.c.mode==="mapincr")?true:false; + // Only react if on allowed area. if (o.f.wasOnDragRect(exFirst, eyFirst)) { o.v.dragActive = true; @@ -101,7 +103,7 @@ try { // For making it possiblie to run the test app in the following catch stat if (o.v.timeoutID) {clearTimeout(o.v.timeoutID); o.v.timeoutID = undefined;} if (e.b==0 && !o.v.timeoutID && (o.c.timeout || o.c.timeout===0)) o.v.timeoutID = setTimeout(o.f.remove, 1000*o.c.timeout); - if (o.c.useMap && o.f.wasOnIndicator(exFirst)) { // If draging starts on the indicator, adjust one-to-one. + if (useMap && o.f.wasOnIndicator(exFirst)) { // If draging starts on the indicator, adjust one-to-one. let input = !o.c.horizontal? Math.min((Y_MAX-e.y)-o.c.yStart-3*o.c.rounded/4, o.c.height): @@ -112,7 +114,7 @@ try { // For making it possiblie to run the test app in the following catch stat o.v.cbObj = {mode:"map", value:o.v.level}; - } else if (o.c.useIncr) { // Heavily inspired by "updown" mode of setUI. + } else if (useIncr) { // Heavily inspired by "updown" mode of setUI. o.v.dy += o.c.horizontal?-e.dx:e.dy; //if (!e.b) o.v.dy=0; From fae102549426d595d38023d2bee688f668ef9fd3 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 10 Oct 2023 23:57:08 +0200 Subject: [PATCH 078/105] Slider: fix Slider.md code blocks --- modules/Slider.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/Slider.md b/modules/Slider.md index 1069284cb..2af8f4c50 100644 --- a/modules/Slider.md +++ b/modules/Slider.md @@ -24,7 +24,7 @@ Bangle.on("drag", slider.f.dragSlider); `configObject` (second argument, optional) has the following defaults: -```JSON +```js R = Bangle.appRect; // For use when determining defaults below. { @@ -57,7 +57,7 @@ autoProgress: false, // The slider should be able to progress automati ``` A slider initiated in the Web IDE terminal window reveals its internals to a degree: -``` +```js >slider = require("Slider").create(()=>{}, {autoProgress:true}) ={ v: { level: 15, ebLast: 0, dy: 0 }, From 070d3d4f1d653885629b481c937e0014a6bc9cbe Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 11 Oct 2023 00:58:21 +0200 Subject: [PATCH 079/105] Slider: update Slider.md re mode:"incr"/"map" --- modules/Slider.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/modules/Slider.md b/modules/Slider.md index 2af8f4c50..4affa2757 100644 --- a/modules/Slider.md +++ b/modules/Slider.md @@ -28,7 +28,7 @@ Bangle.on("drag", slider.f.dragSlider); R = Bangle.appRect; // For use when determining defaults below. { -currLevel: undefined, // The level to initate the slider with. +currLevel: undefined, // The level to initialize the slider with. horizontal: false, // Slider should be horizontal? xStart: R.x2-R.w/4-4, // Leftmost x-coordinate. (Uppermost y-coordinate if horizontal) width: R.w/4, // Width of the slider. (Height if horizontal) @@ -38,12 +38,11 @@ steps: 30, // Number of discrete steps of the slider. dragableSlider: true, // Should supply the sliders standard interaction mechanisms? dragRect: R, // Accept input within this rectangle. -useIncr: true, // Use the incrementing feature? -useMap: false, // Use the mapping feature? +mode: "incr", // What mode of draging to use: "map", "incr" or "mapincr". oversizeR: 0, // Determines if the mapping area should be extend outside the indicator (Right/Up). oversizeL: 0, // Determines if the mapping area should be extend outside the indicator (Left/Down). propagateDrag: false, // Pass the drag event on down the handler chain? -timeout: 1, // Seconds untill the slider times out. +timeout: 1, // Seconds until the slider times out. drawableSlider: true, // Should supply the sliders standard drawing mechanism? colorFG: g.theme.fg2, // Foreground color. @@ -73,7 +72,7 @@ A slider initiated in the Web IDE terminal window reveals its internals to a deg startAutoUpdate: function () { ... }, stopAutoUpdate: function () { ... } }, - c: { useMap: false, useIncr: true, horizontal: false, xStart: 127, + c: { mode: "incr", horizontal: false, xStart: 127, width: 44, yStart: 28, height: 142, steps: 30, oversizeR: 0, oversizeL: 0, timeout: 1, colorFG: 65535, colorBG: 8, rounded: 20, propagateDrag: false, autoProgress: true, outerBorderSize: 2, innerBorderSize: 2, From 8cf9cd77bb07a94e45906b17a9b3dc3a5d8d3b6d Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 11 Oct 2023 01:19:50 +0200 Subject: [PATCH 080/105] Slider: add tip to Slider.md, and tweaks --- modules/Slider.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/modules/Slider.md b/modules/Slider.md index 4affa2757..70bb07a48 100644 --- a/modules/Slider.md +++ b/modules/Slider.md @@ -16,13 +16,13 @@ Bangle.on("drag", slider.f.dragSlider); // Bangle.prependListener("drag", slider.f.dragSlider); ``` -`callbackFunction` (first argument) determines what `slider` is used for. `slider` will pass two arguments, `mode` and `feedback`, into `callbackFunction` (if `slider` is interactive or auto progressing). The different `mode`/`feedback` combinations to expect are: +`callbackFunction` (`cb`) (first argument) determines what `slider` is used for. `slider` will pass two arguments, `mode` and `feedback` (`fb`), into `callbackFunction` (if `slider` is interactive or auto progressing). The different `mode`/`feedback` combinations to expect are: - `"map", o.v.level` | current level when interacting by mapping interface. -- `"incr", incr` | where incr = +-1, when interacting by incrementing interface. +- `"incr", incr` | where `incr` == +/-1, when interacting by incrementing interface. - `"remove", o.v.level` | last level when the slider times out. - `"auto"` | on its own, when auto progressing. -`configObject` (second argument, optional) has the following defaults: +`configObject` (`conf`) (second argument, optional) has the following defaults: ```js R = Bangle.appRect; // For use when determining defaults below. @@ -90,6 +90,10 @@ A slider initiated in the Web IDE terminal window reveals its internals to a deg } > ``` +Tips +---- + +You can implement custom graphics for a slider in the `callbackFunction`. The slider test app mentioned in the links below do this. To draw on top of the included slider graphics you need to wrap the drawing code in a timeout somewhat like so: `setTimeout(drawingFunction,0,fb)` (see [`setTimeout` documentation](https://www.espruino.com/Reference#l__global_setTimeout)). Links ----- From ac568fb332f1eecebf2b898f570fdf1a49976053 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 11 Oct 2023 01:39:14 +0200 Subject: [PATCH 081/105] Slider: change `currLevel` -> `initLevel` --- modules/Slider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 5c1c04093..e56ae075d 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -13,7 +13,7 @@ try { // For making it possiblie to run the test app in the following catch stat // Default configuration for the indicator, modified by parameter `conf`: o.c = Object.assign({ // constants go here. - currLevel:null, + initLevel:0, horizontal:false, xStart:R.x2-R.w/4-4, width:R.w/4, @@ -64,7 +64,7 @@ try { // For making it possiblie to run the test app in the following catch stat o.c.r = {x:o.c.xStart, y:o.c.yStart, x2:o.c.xStart+o.c.width, y2:o.c.yStart+o.c.height, w:o.c.width, h:o.c.height}; // Initialize the level - o.v.level = o.c.currLevel!==null?o.c.currLevel:o.c.steps/2; + o.v.level = o.c.initLevel; // Only add interactivity if wanted. if (o.c.dragableSlider) { From bbb2907a54106d044bd65a84f72d08ab2697c83b Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 11 Oct 2023 01:45:01 +0200 Subject: [PATCH 082/105] Slider:update `currLevel`->`initLevel`, and tweaks --- modules/Slider.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/Slider.md b/modules/Slider.md index 70bb07a48..b52436cb1 100644 --- a/modules/Slider.md +++ b/modules/Slider.md @@ -1,5 +1,5 @@ Slider Library -======================== +============== > Take a look at README.md for hints on developing with this library. @@ -28,7 +28,7 @@ Bangle.on("drag", slider.f.dragSlider); R = Bangle.appRect; // For use when determining defaults below. { -currLevel: undefined, // The level to initialize the slider with. +initLevel: 0, // The level to initialize the slider with. horizontal: false, // Slider should be horizontal? xStart: R.x2-R.w/4-4, // Leftmost x-coordinate. (Uppermost y-coordinate if horizontal) width: R.w/4, // Width of the slider. (Height if horizontal) @@ -76,7 +76,7 @@ A slider initiated in the Web IDE terminal window reveals its internals to a deg width: 44, yStart: 28, height: 142, steps: 30, oversizeR: 0, oversizeL: 0, timeout: 1, colorFG: 65535, colorBG: 8, rounded: 20, propagateDrag: false, autoProgress: true, outerBorderSize: 2, innerBorderSize: 2, - drawableSlider: true, dragableSlider: true, currLevel: undefined, + drawableSlider: true, dragableSlider: true, initLevel: undefined, dragRect: { x: 0, y: 24, w: 176, h: 152, x2: 175, y2: 175 }, _xStart: 131, _width: 36, _yStart: 32, _height: 134, STEP_SIZE: 3.36666666666, From ee5e08d8fe391e0b557be3433208be40e12a2451 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 11 Oct 2023 01:56:45 +0200 Subject: [PATCH 083/105] Slider: add level to auto callback --- modules/Slider.js | 2 +- modules/Slider.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index e56ae075d..aea3cba04 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -184,7 +184,7 @@ try { // For making it possiblie to run the test app in the following catch stat o.f.autoUpdate = ()=>{ o.v.level = o.v.autoInitLevel + Math.round((Date.now()-o.v.autoInitTime)/1000) if (o.v.level>o.c.steps) o.v.level=o.c.steps; - cb("auto"); + cb("auto", o.v.level); o.f.draw&&o.f.draw(o.v.level); if (o.v.level==o.c.steps) {o.f.stopAutoUpdate();} }; diff --git a/modules/Slider.md b/modules/Slider.md index b52436cb1..001880563 100644 --- a/modules/Slider.md +++ b/modules/Slider.md @@ -20,7 +20,7 @@ Bangle.on("drag", slider.f.dragSlider); - `"map", o.v.level` | current level when interacting by mapping interface. - `"incr", incr` | where `incr` == +/-1, when interacting by incrementing interface. - `"remove", o.v.level` | last level when the slider times out. -- `"auto"` | on its own, when auto progressing. +- `"auto", o.v.level` | when auto progressing. `configObject` (`conf`) (second argument, optional) has the following defaults: From 962d87442e67aa43a1533cc5fe8e3d6f514da883 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 11 Oct 2023 02:09:05 +0200 Subject: [PATCH 084/105] Slider: add `FIXME:` comment re error in callback --- modules/Slider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/Slider.js b/modules/Slider.js index aea3cba04..198b2d0f8 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -131,7 +131,7 @@ try { // For making it possiblie to run the test app in the following catch stat } } if (o.v.level!==o.v.prevLevel || o.v.level===0 || o.v.level===o.c.steps) { - cb(o.v.cbObj.mode, o.v.cbObj.value); + cb(o.v.cbObj.mode, o.v.cbObj.value); // FIXME: Can cause error when using "incr" since it's not sure that o.v.cbObj has been initialized thanks to how the while-logic above works. (Can also do callback with faulty feedback since it didn't update) o.f.draw&&o.f.draw(o.v.level); } o.v.prevLevel = o.v.level; From 9d532a82d974541f4ed63485ad72bd1feb196014 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 11 Oct 2023 02:18:18 +0200 Subject: [PATCH 085/105] Slider: fix callback running prematurely --- modules/Slider.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 198b2d0f8..856c6bed5 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -130,10 +130,11 @@ try { // For making it possiblie to run the test app in the following catch stat o.v.cbObj = {mode:"incr", value:incr}; } } - if (o.v.level!==o.v.prevLevel || o.v.level===0 || o.v.level===o.c.steps) { - cb(o.v.cbObj.mode, o.v.cbObj.value); // FIXME: Can cause error when using "incr" since it's not sure that o.v.cbObj has been initialized thanks to how the while-logic above works. (Can also do callback with faulty feedback since it didn't update) + if (o.v.cbObj && (o.v.level!==o.v.prevLevel||o.v.level===0||o.v.level===o.c.steps)) { + cb(o.v.cbObj.mode, o.v.cbObj.value); o.f.draw&&o.f.draw(o.v.level); } + o.v.cbObj = null; o.v.prevLevel = o.v.level; o.v.ebLast = e.b; } From b2a72dccc71be48f519b2d058239d1631bb6a097 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Thu, 12 Oct 2023 00:25:01 +0200 Subject: [PATCH 086/105] Slider: move let statement out of function scope --- modules/Slider.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 856c6bed5..ad3a54054 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -68,6 +68,10 @@ try { // For making it possiblie to run the test app in the following catch stat // Only add interactivity if wanted. if (o.c.dragableSlider) { + + let useMap = (o.c.mode==="map"||o.c.mode==="mapincr")?true:false; + let useIncr = (o.c.mode==="incr"||o.c.mode==="mapincr")?true:false; + const Y_MAX = g.getHeight()-1; // Should this take users screen calibration into account? o.v.ebLast = 0; @@ -92,9 +96,6 @@ try { // For making it possiblie to run the test app in the following catch stat eyFirst = o.c.horizontal?e.x:e.y; } - let useMap = (o.c.mode==="map"||o.c.mode==="mapincr")?true:false; - let useIncr = (o.c.mode==="incr"||o.c.mode==="mapincr")?true:false; - // Only react if on allowed area. if (o.f.wasOnDragRect(exFirst, eyFirst)) { o.v.dragActive = true; From 186832faa4dc17fee5681d4788d0185648216cf1 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Mon, 16 Oct 2023 00:37:55 +0200 Subject: [PATCH 087/105] Slider:make rounded mode dynamic, depend on width Fixes graphics for different size sliders. --- modules/Slider.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index ad3a54054..8c3851c70 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -56,9 +56,9 @@ try { // For making it possiblie to run the test app in the following catch stat o.c._width = o.c.width - 2*totalBorderSize; o.c._yStart = o.c.yStart + totalBorderSize; o.c._height = o.c.height - 2*totalBorderSize; - o.c.rounded = o.c.rounded?20:0; + o.c.rounded = o.c.rounded?o.c._width/2:0; - o.c.STEP_SIZE = ((!o.c.horizontal?o.c._height:o.c._width)-(!o.c.rounded?0:(2*o.c.rounded-7)))/o.c.steps; + o.c.STEP_SIZE = ((!o.c.horizontal?o.c._height:o.c._width)-(!o.c.rounded?0:(2*o.c.rounded)))/o.c.steps; // Add a rectangle object with x, y, x2, y2, w and h values. o.c.r = {x:o.c.xStart, y:o.c.yStart, x2:o.c.xStart+o.c.width, y2:o.c.yStart+o.c.height, w:o.c.width, h:o.c.height}; @@ -170,10 +170,10 @@ try { // For making it possiblie to run the test app in the following catch stat g.setColor(o.c.colorFG).fillRect(o.c.borderRect). // To get outer border... setColor(o.c.colorBG).fillRect(o.c.hollowRect). // ... and here it's made hollow. - setColor(0==level?o.c.colorBG:o.c.colorFG).fillRect(o.f.updateBar((!o.c.rounded?0:(2*o.c.rounded-7))+level*o.c.STEP_SIZE)); // Here the bar is drawn. + setColor(0==level?o.c.colorBG:o.c.colorFG).fillRect(o.f.updateBar((!o.c.rounded?0:(2*o.c.rounded))+level*o.c.STEP_SIZE)); // Here the bar is drawn. if (o.c.rounded && level===0) { // Hollow circle indicates level zero when slider is rounded. - g.setColor(o.c.colorFG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._width/2:o.c.rounded-2), o.c._yStart+o.c._height-o.c.rounded+2, o.c.rounded-o.c.innerBorderSize). - setColor(o.c.colorBG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._width/2:o.c.rounded-2), o.c._yStart+o.c._height-o.c.rounded+2, o.c.rounded-o.c.innerBorderSize-2); + g.setColor(o.c.colorFG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._width/2:o.c.rounded-2), o.c._yStart+o.c._height-o.c.rounded, o.c.rounded). + setColor(o.c.colorBG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._width/2:o.c.rounded-2), o.c._yStart+o.c._height-o.c.rounded, o.c.rounded-o.c.outerBorderSize); } //print(level); @@ -215,6 +215,6 @@ try { // For making it possiblie to run the test app in the following catch stat } catch (e) { print(e); - let appName = "spotrem"; + let appName = "slidertest"; eval(require("Storage").read(appName+".app.js")); } From 0a1e3a6590d1d5e4efb7c7f750f969cfb57e311d Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Mon, 16 Oct 2023 22:55:27 +0200 Subject: [PATCH 088/105] Slider: add initial comments --- modules/Slider.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/modules/Slider.js b/modules/Slider.js index 8c3851c70..e89ddeb1a 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -1,4 +1,15 @@ -try { // For making it possiblie to run the test app in the following catch statement. It would complain on `exports` not being defined when uploading from Web IDE and not run otherwise. +/* Copyright (c) 2023 Bangle.js contributors. See the file LICENSE for copying permission. */ + +// See Slider.md for documentation + +/* Minify to 'Slider.min.js' by: // FIXME: Should we do this for Slider module? + + * checking out: https://github.com/espruino/EspruinoDocs + * run: ../EspruinoDocs/bin/minify.js modules/Slider.js modules/Slider.min.js + +*/ + +try { // For making it possiblie to run the test app in the following catch statement. It would complain on `exports` not being defined when uploading from Web IDE and not run otherwise. // FIXME: This try-catch logic should be removed once development on this module slows down. exports.create = function(cb, conf) { From 0fbcb3489647044f359a0c16ef6f4ea1a7090e79 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Mon, 16 Oct 2023 23:07:11 +0200 Subject: [PATCH 089/105] Slider: remove two lines of debug --- modules/Slider.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index e89ddeb1a..2ba343217 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -186,9 +186,6 @@ try { // For making it possiblie to run the test app in the following catch stat g.setColor(o.c.colorFG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._width/2:o.c.rounded-2), o.c._yStart+o.c._height-o.c.rounded, o.c.rounded). setColor(o.c.colorBG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._width/2:o.c.rounded-2), o.c._yStart+o.c._height-o.c.rounded, o.c.rounded-o.c.outerBorderSize); } - - //print(level); - //print(process.memory().usage); }; } From ac27deba0f24119f2e392e4c72df981f7cd82e73 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Mon, 16 Oct 2023 23:56:48 +0200 Subject: [PATCH 090/105] Slider: scale default borders with appRect width --- modules/Slider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 2ba343217..d82c9f28d 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -44,8 +44,8 @@ try { // For making it possiblie to run the test app in the following catch stat colorFG:g.theme.fg2, colorBG:g.theme.bg2, rounded:true, - outerBorderSize:2, - innerBorderSize:2, + outerBorderSize:Math.round(2*R.w/176), // 176 is the # of pixels in a row on the Bangle.js 2's screen and typically also its app rectangles, used here to rescale to whatever pixel count is on the current app rectangle. + innerBorderSize:Math.round(2*R.w/176), autoProgress:false, },conf); From cd67e0d1434549e7b5a778cfa9779b1d68f02821 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 17 Oct 2023 00:39:41 +0200 Subject: [PATCH 091/105] Slider: add comment tags --- modules/Slider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index d82c9f28d..85c065443 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -2,7 +2,7 @@ // See Slider.md for documentation -/* Minify to 'Slider.min.js' by: // FIXME: Should we do this for Slider module? +/* Minify to 'Slider.min.js' by: // TODO: Should we do this for Slider module? * checking out: https://github.com/espruino/EspruinoDocs * run: ../EspruinoDocs/bin/minify.js modules/Slider.js modules/Slider.min.js @@ -83,7 +83,7 @@ try { // For making it possiblie to run the test app in the following catch stat let useMap = (o.c.mode==="map"||o.c.mode==="mapincr")?true:false; let useIncr = (o.c.mode==="incr"||o.c.mode==="mapincr")?true:false; - const Y_MAX = g.getHeight()-1; // Should this take users screen calibration into account? + const Y_MAX = g.getHeight()-1; // TODO: Should this take users screen calibration into account? o.v.ebLast = 0; o.v.dy = 0; From c4ba51a498fa786906f4956d04c198fe350f4b50 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 17 Oct 2023 01:15:21 +0200 Subject: [PATCH 092/105] Slider: fix logic re roundedness --- modules/Slider.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 85c065443..e3ad61684 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -50,6 +50,10 @@ try { // For making it possiblie to run the test app in the following catch stat autoProgress:false, },conf); + let totalBorderSize = o.c.outerBorderSize + o.c.innerBorderSize; + o.c.rounded = o.c.rounded?o.c.width/2:0; + if (o.c.rounded) o.c._rounded = (o.c.width-2*totalBorderSize)/2; + // If horizontal, flip things around. if (o.c.horizontal) { let mediator = o.c.xStart; @@ -62,14 +66,12 @@ try { // For making it possiblie to run the test app in the following catch stat } // Make room for the border. Underscore indicates the area for the actual indicator bar without borders. - let totalBorderSize = o.c.outerBorderSize + o.c.innerBorderSize; o.c._xStart = o.c.xStart + totalBorderSize; o.c._width = o.c.width - 2*totalBorderSize; o.c._yStart = o.c.yStart + totalBorderSize; o.c._height = o.c.height - 2*totalBorderSize; - o.c.rounded = o.c.rounded?o.c._width/2:0; - o.c.STEP_SIZE = ((!o.c.horizontal?o.c._height:o.c._width)-(!o.c.rounded?0:(2*o.c.rounded)))/o.c.steps; + o.c.STEP_SIZE = ((!o.c.horizontal?o.c._height:o.c._width)-(!o.c.rounded?0:(2*o.c._rounded)))/o.c.steps; // Add a rectangle object with x, y, x2, y2, w and h values. o.c.r = {x:o.c.xStart, y:o.c.yStart, x2:o.c.xStart+o.c.width, y2:o.c.yStart+o.c.height, w:o.c.width, h:o.c.height}; @@ -181,10 +183,10 @@ try { // For making it possiblie to run the test app in the following catch stat g.setColor(o.c.colorFG).fillRect(o.c.borderRect). // To get outer border... setColor(o.c.colorBG).fillRect(o.c.hollowRect). // ... and here it's made hollow. - setColor(0==level?o.c.colorBG:o.c.colorFG).fillRect(o.f.updateBar((!o.c.rounded?0:(2*o.c.rounded))+level*o.c.STEP_SIZE)); // Here the bar is drawn. + setColor(0==level?o.c.colorBG:o.c.colorFG).fillRect(o.f.updateBar((!o.c.rounded?0:(2*o.c._rounded))+level*o.c.STEP_SIZE)); // Here the bar is drawn. if (o.c.rounded && level===0) { // Hollow circle indicates level zero when slider is rounded. - g.setColor(o.c.colorFG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._width/2:o.c.rounded-2), o.c._yStart+o.c._height-o.c.rounded, o.c.rounded). - setColor(o.c.colorBG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._width/2:o.c.rounded-2), o.c._yStart+o.c._height-o.c.rounded, o.c.rounded-o.c.outerBorderSize); + g.setColor(o.c.colorFG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._rounded:o.c._rounded), o.c._yStart+o.c._height-o.c._rounded, o.c._rounded). + setColor(o.c.colorBG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._rounded:o.c._rounded), o.c._yStart+o.c._height-o.c._rounded, o.c._rounded-o.c.outerBorderSize); } }; } From eb52a9aca433e6606ae7cde9905253a8151ff89b Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 17 Oct 2023 01:30:48 +0200 Subject: [PATCH 093/105] Slider: update documentation at Slider.md --- modules/Slider.md | 71 ++++++++++++++++++++++++----------------------- 1 file changed, 36 insertions(+), 35 deletions(-) diff --git a/modules/Slider.md b/modules/Slider.md index 001880563..4b01d267d 100644 --- a/modules/Slider.md +++ b/modules/Slider.md @@ -28,30 +28,30 @@ Bangle.on("drag", slider.f.dragSlider); R = Bangle.appRect; // For use when determining defaults below. { -initLevel: 0, // The level to initialize the slider with. -horizontal: false, // Slider should be horizontal? -xStart: R.x2-R.w/4-4, // Leftmost x-coordinate. (Uppermost y-coordinate if horizontal) -width: R.w/4, // Width of the slider. (Height if horizontal) -yStart: R.y+4, // Uppermost y-coordinate. (Rightmost x-coordinate if horizontal) -height: R.h-10, // Height of the slider. (Width if horizontal) -steps: 30, // Number of discrete steps of the slider. +initLevel: 0, // The level to initialize the slider with. +horizontal: false, // Slider should be horizontal? +xStart: R.x2-R.w/4-4, // Leftmost x-coordinate. (Uppermost y-coordinate if horizontal) +width: R.w/4, // Width of the slider. (Height if horizontal) +yStart: R.y+4, // Uppermost y-coordinate. (Rightmost x-coordinate if horizontal) +height: R.h-10, // Height of the slider. (Width if horizontal) +steps: 30, // Number of discrete steps of the slider. -dragableSlider: true, // Should supply the sliders standard interaction mechanisms? -dragRect: R, // Accept input within this rectangle. -mode: "incr", // What mode of draging to use: "map", "incr" or "mapincr". -oversizeR: 0, // Determines if the mapping area should be extend outside the indicator (Right/Up). -oversizeL: 0, // Determines if the mapping area should be extend outside the indicator (Left/Down). -propagateDrag: false, // Pass the drag event on down the handler chain? -timeout: 1, // Seconds until the slider times out. +dragableSlider: true, // Should supply the sliders standard interaction mechanisms? +dragRect: R, // Accept input within this rectangle. +mode: "incr", // What mode of draging to use: "map", "incr" or "mapincr". +oversizeR: 0, // Determines if the mapping area should be extend outside the indicator (Right/Up). +oversizeL: 0, // Determines if the mapping area should be extend outside the indicator (Left/Down). +propagateDrag: false, // Pass the drag event on down the handler chain? +timeout: 1, // Seconds until the slider times out. -drawableSlider: true, // Should supply the sliders standard drawing mechanism? -colorFG: g.theme.fg2, // Foreground color. -colorBG: g.theme.bg2, // Background color. -rounded: true, // Slider should have rounded corners? -outerBorderSize: 2, // The size of the visual border. -innerBorderSize: 2, // The distance between visual border and the slider. +drawableSlider: true, // Should supply the sliders standard drawing mechanism? +colorFG: g.theme.fg2, // Foreground color. +colorBG: g.theme.bg2, // Background color. +rounded: true, // Slider should have rounded corners? +outerBorderSize: Math.round(2*R.w/176), // The size of the visual border. Scaled in relation to Bangle.js 2 screen width/typical app rectangle widths. +innerBorderSize: Math.round(2*R.w/176), // The distance between visual border and the slider. -autoProgress: false, // The slider should be able to progress automatically? +autoProgress: false, // The slider should be able to progress automatically? } ``` @@ -59,7 +59,7 @@ A slider initiated in the Web IDE terminal window reveals its internals to a deg ```js >slider = require("Slider").create(()=>{}, {autoProgress:true}) ={ - v: { level: 15, ebLast: 0, dy: 0 }, + v: { level: 0, ebLast: 0, dy: 0 }, f: { wasOnDragRect: function (exFirst,eyFirst) { ... }, wasOnIndicator: function (exFirst) { ... }, @@ -72,20 +72,21 @@ A slider initiated in the Web IDE terminal window reveals its internals to a deg startAutoUpdate: function () { ... }, stopAutoUpdate: function () { ... } }, - c: { mode: "incr", horizontal: false, xStart: 127, - width: 44, yStart: 28, height: 142, steps: 30, oversizeR: 0, - oversizeL: 0, timeout: 1, colorFG: 65535, colorBG: 8, rounded: 20, - propagateDrag: false, autoProgress: true, outerBorderSize: 2, innerBorderSize: 2, - drawableSlider: true, dragableSlider: true, initLevel: undefined, - dragRect: { x: 0, y: 24, w: 176, h: 152, + c: { initLevel: 0, horizontal: false, xStart: 127, width: 44, + yStart: 4, height: 166, steps: 30, dragableSlider: true, + dragRect: { x: 0, y: 0, w: 176, h: 176, x2: 175, y2: 175 }, - _xStart: 131, _width: 36, _yStart: 32, _height: 134, STEP_SIZE: 3.36666666666, - r: { x: 127, y: 28, x2: 171, y2: 170, - w: 44, h: 142 }, - borderRect: { x: 127, y: 28, w: 44, h: 142, - r: 20 }, - hollowRect: { x: 129, y: 30, w: 40, h: 138, - r: 20 } + mode: "incr", + oversizeR: 0, oversizeL: 0, propagateDrag: false, timeout: 1, drawableSlider: true, + colorFG: 63488, colorBG: 8, rounded: 22, outerBorderSize: 2, innerBorderSize: 2, + autoProgress: true, _rounded: 18, _xStart: 131, _width: 36, _yStart: 8, + _height: 158, STEP_SIZE: 4.06666666666, + r: { x: 127, y: 4, x2: 171, y2: 170, + w: 44, h: 166 }, + borderRect: { x: 127, y: 4, w: 44, h: 166, + r: 22 }, + hollowRect: { x: 129, y: 6, w: 40, h: 162, + r: 22 } } } > From 7e014497051c25edd54cb6d84b16e628c22f55e8 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 17 Oct 2023 01:40:07 +0200 Subject: [PATCH 094/105] Slider: remove unnecessary condition check --- modules/Slider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index e3ad61684..074b2d85f 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -185,8 +185,8 @@ try { // For making it possiblie to run the test app in the following catch stat setColor(o.c.colorBG).fillRect(o.c.hollowRect). // ... and here it's made hollow. setColor(0==level?o.c.colorBG:o.c.colorFG).fillRect(o.f.updateBar((!o.c.rounded?0:(2*o.c._rounded))+level*o.c.STEP_SIZE)); // Here the bar is drawn. if (o.c.rounded && level===0) { // Hollow circle indicates level zero when slider is rounded. - g.setColor(o.c.colorFG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._rounded:o.c._rounded), o.c._yStart+o.c._height-o.c._rounded, o.c._rounded). - setColor(o.c.colorBG).fillCircle(o.c._xStart+(!o.c.horizontal?o.c._rounded:o.c._rounded), o.c._yStart+o.c._height-o.c._rounded, o.c._rounded-o.c.outerBorderSize); + g.setColor(o.c.colorFG).fillCircle(o.c._xStart+o.c._rounded, o.c._yStart+o.c._height-o.c._rounded, o.c._rounded). + setColor(o.c.colorBG).fillCircle(o.c._xStart+o.c._rounded, o.c._yStart+o.c._height-o.c._rounded, o.c._rounded-o.c.outerBorderSize); } }; } From 0c12bfab8ac61b064fed55ef93b50018c0a62df9 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 17 Oct 2023 01:49:23 +0200 Subject: [PATCH 095/105] Slider: move and refactor step size calculation --- modules/Slider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 074b2d85f..42b2f15ca 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -54,6 +54,8 @@ try { // For making it possiblie to run the test app in the following catch stat o.c.rounded = o.c.rounded?o.c.width/2:0; if (o.c.rounded) o.c._rounded = (o.c.width-2*totalBorderSize)/2; + o.c.STEP_SIZE = ((o.c.height-2*totalBorderSize)-(!o.c.rounded?0:(2*o.c._rounded)))/o.c.steps; + // If horizontal, flip things around. if (o.c.horizontal) { let mediator = o.c.xStart; @@ -71,8 +73,6 @@ try { // For making it possiblie to run the test app in the following catch stat o.c._yStart = o.c.yStart + totalBorderSize; o.c._height = o.c.height - 2*totalBorderSize; - o.c.STEP_SIZE = ((!o.c.horizontal?o.c._height:o.c._width)-(!o.c.rounded?0:(2*o.c._rounded)))/o.c.steps; - // Add a rectangle object with x, y, x2, y2, w and h values. o.c.r = {x:o.c.xStart, y:o.c.yStart, x2:o.c.xStart+o.c.width, y2:o.c.yStart+o.c.height, w:o.c.width, h:o.c.height}; From 6c1fb8cc18b540ab485217a770feb4e585742080 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 17 Oct 2023 22:19:13 +0200 Subject: [PATCH 096/105] Slider: shrink borders if too big ... which would cause glitches. --- modules/Slider.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/modules/Slider.js b/modules/Slider.js index 42b2f15ca..8e563d3e0 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -50,6 +50,14 @@ try { // For making it possiblie to run the test app in the following catch stat autoProgress:false, },conf); + // If borders are bigger than the configured width, make them smaller to avoid glitches. + while (o.c.width <= 2*(o.c.outerBorderSize+o.c.innerBorderSize)) { + o.c.outerBorderSize--; + o.c.innerBorderSize--; + } + o.c.outerBorderSize = Math.max(0,o.c.outerBorderSize) + o.c.innerBorderSize = Math.max(0,o.c.innerBorderSize) + let totalBorderSize = o.c.outerBorderSize + o.c.innerBorderSize; o.c.rounded = o.c.rounded?o.c.width/2:0; if (o.c.rounded) o.c._rounded = (o.c.width-2*totalBorderSize)/2; From 4d6edb129278ac18a10b8e2a6d149e02a1af01ec Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Tue, 17 Oct 2023 23:21:04 +0200 Subject: [PATCH 097/105] Slider: add missing semicolons --- modules/Slider.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 8e563d3e0..ef1527f5d 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -55,8 +55,8 @@ try { // For making it possiblie to run the test app in the following catch stat o.c.outerBorderSize--; o.c.innerBorderSize--; } - o.c.outerBorderSize = Math.max(0,o.c.outerBorderSize) - o.c.innerBorderSize = Math.max(0,o.c.innerBorderSize) + o.c.outerBorderSize = Math.max(0,o.c.outerBorderSize); + o.c.innerBorderSize = Math.max(0,o.c.innerBorderSize); let totalBorderSize = o.c.outerBorderSize + o.c.innerBorderSize; o.c.rounded = o.c.rounded?o.c.width/2:0; @@ -202,7 +202,7 @@ try { // For making it possiblie to run the test app in the following catch stat // Add logic for auto progressing the slider only if wanted. if (o.c.autoProgress) { o.f.autoUpdate = ()=>{ - o.v.level = o.v.autoInitLevel + Math.round((Date.now()-o.v.autoInitTime)/1000) + o.v.level = o.v.autoInitLevel + Math.round((Date.now()-o.v.autoInitTime)/1000); if (o.v.level>o.c.steps) o.v.level=o.c.steps; cb("auto", o.v.level); o.f.draw&&o.f.draw(o.v.level); From 5156b8a3e5dad6f0389c970bffb7a2ee7d9e6d0b Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 18 Oct 2023 00:15:04 +0200 Subject: [PATCH 098/105] Slider:add param for auto progress update interval --- modules/Slider.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index ef1527f5d..a153e94ab 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -212,11 +212,12 @@ try { // For making it possiblie to run the test app in the following catch stat o.v.autoInitTime=Date.now(); o.v.autoInitLevel=o.v.level; }; - o.f.startAutoUpdate = ()=>{ + o.f.startAutoUpdate = (intervalSeconds)=>{ + if (!intervalSeconds) intervalSeconds = 1; o.f.stopAutoUpdate(); o.f.initAutoValues(); o.f.draw&&o.f.draw(o.v.level); - o.v.autoIntervalID = setInterval(o.f.autoUpdate,1000); + o.v.autoIntervalID = setInterval(o.f.autoUpdate,1000*intervalSeconds); }; o.f.stopAutoUpdate = ()=>{ if (o.v.autoIntervalID) { From 4d7bcce070994f7bf2c5bab419e49bb48e967136 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 18 Oct 2023 00:25:21 +0200 Subject: [PATCH 099/105] Slider: remove unnecessary spaces --- modules/Slider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index a153e94ab..030d13634 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -88,7 +88,7 @@ try { // For making it possiblie to run the test app in the following catch stat o.v.level = o.c.initLevel; // Only add interactivity if wanted. - if (o.c.dragableSlider) { + if (o.c.dragableSlider) { let useMap = (o.c.mode==="map"||o.c.mode==="mapincr")?true:false; let useIncr = (o.c.mode==="incr"||o.c.mode==="mapincr")?true:false; @@ -172,7 +172,7 @@ try { // For making it possiblie to run the test app in the following catch stat } // Add standard slider graphics only if wanted. - if (o.c.drawableSlider) { + if (o.c.drawableSlider) { // Function for getting the indication bars size. o.f.updateBar = (levelHeight)=>{ From 04c5cbd51692906f3c159d5b912988938604ba4b Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 18 Oct 2023 01:05:32 +0200 Subject: [PATCH 100/105] Slider: update documentation --- modules/Slider.js | 2 ++ modules/Slider.md | 12 +++++++----- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 030d13634..70f6bb88a 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -1,5 +1,7 @@ /* Copyright (c) 2023 Bangle.js contributors. See the file LICENSE for copying permission. */ +// At time of writing in October 2023 this module is new and things are more likely to change during the coming weeks than in a month or two. + // See Slider.md for documentation /* Minify to 'Slider.min.js' by: // TODO: Should we do this for Slider module? diff --git a/modules/Slider.md b/modules/Slider.md index 4b01d267d..b06038fd7 100644 --- a/modules/Slider.md +++ b/modules/Slider.md @@ -1,6 +1,8 @@ Slider Library ============== +*At time of writing in October 2023 this module is new and things are more likely to change during the coming weeks than in a month or two.* + > Take a look at README.md for hints on developing with this library. Usage @@ -57,7 +59,7 @@ autoProgress: false, // The slider should be able to progress A slider initiated in the Web IDE terminal window reveals its internals to a degree: ```js ->slider = require("Slider").create(()=>{}, {autoProgress:true}) +slider = require("Slider").create(()=>{}, {autoProgress:true}) ={ v: { level: 0, ebLast: 0, dy: 0 }, f: { @@ -69,7 +71,7 @@ A slider initiated in the Web IDE terminal window reveals its internals to a deg draw: function (level) { ... }, autoUpdate: function () { ... }, initAutoValues: function () { ... }, - startAutoUpdate: function () { ... }, + startAutoUpdate: function (intervalSeconds) { ... }, stopAutoUpdate: function () { ... } }, c: { initLevel: 0, horizontal: false, xStart: 127, width: 44, @@ -79,8 +81,8 @@ A slider initiated in the Web IDE terminal window reveals its internals to a deg mode: "incr", oversizeR: 0, oversizeL: 0, propagateDrag: false, timeout: 1, drawableSlider: true, colorFG: 63488, colorBG: 8, rounded: 22, outerBorderSize: 2, innerBorderSize: 2, - autoProgress: true, _rounded: 18, _xStart: 131, _width: 36, _yStart: 8, - _height: 158, STEP_SIZE: 4.06666666666, + autoProgress: true, _rounded: 18, STEP_SIZE: 4.06666666666, _xStart: 131, _width: 36, + _yStart: 8, _height: 158, r: { x: 127, y: 4, x2: 171, y2: 170, w: 44, h: 166 }, borderRect: { x: 127, y: 4, w: 44, h: 166, @@ -89,7 +91,7 @@ A slider initiated in the Web IDE terminal window reveals its internals to a deg r: 22 } } } -> +> ``` Tips ---- From bdf7aab65c2d47d2b4a44dda9f7be20143138ab0 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 18 Oct 2023 01:15:35 +0200 Subject: [PATCH 101/105] Slider: remove development try-catch statement --- modules/Slider.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 70f6bb88a..2fe3cddb3 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -11,8 +11,6 @@ */ -try { // For making it possiblie to run the test app in the following catch statement. It would complain on `exports` not being defined when uploading from Web IDE and not run otherwise. // FIXME: This try-catch logic should be removed once development on this module slows down. - exports.create = function(cb, conf) { const R = Bangle.appRect; @@ -233,9 +231,3 @@ try { // For making it possiblie to run the test app in the following catch stat return o; }; - -} catch (e) { - print(e); - let appName = "slidertest"; - eval(require("Storage").read(appName+".app.js")); -} From 03a1f10d45404a7ba1863e43cdff9ae3b05f9730 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 18 Oct 2023 01:18:23 +0200 Subject: [PATCH 102/105] Slider: auto indentation --- modules/Slider.js | 366 +++++++++++++++++++++++----------------------- 1 file changed, 183 insertions(+), 183 deletions(-) diff --git a/modules/Slider.js b/modules/Slider.js index 2fe3cddb3..7fa2adba8 100644 --- a/modules/Slider.js +++ b/modules/Slider.js @@ -11,223 +11,223 @@ */ - exports.create = function(cb, conf) { +exports.create = function(cb, conf) { - const R = Bangle.appRect; + const R = Bangle.appRect; - // Empty function added to cb if it's undefined. - if (!cb) cb = ()=>{}; + // Empty function added to cb if it's undefined. + if (!cb) cb = ()=>{}; - let o = {}; - o.v = {}; // variables go here. - o.f = {}; // functions go here. + let o = {}; + o.v = {}; // variables go here. + o.f = {}; // functions go here. - // Default configuration for the indicator, modified by parameter `conf`: - o.c = Object.assign({ // constants go here. - initLevel:0, - horizontal:false, - xStart:R.x2-R.w/4-4, - width:R.w/4, - yStart:R.y+4, - height:R.h-10, - steps:30, + // Default configuration for the indicator, modified by parameter `conf`: + o.c = Object.assign({ // constants go here. + initLevel:0, + horizontal:false, + xStart:R.x2-R.w/4-4, + width:R.w/4, + yStart:R.y+4, + height:R.h-10, + steps:30, - dragableSlider:true, - dragRect:R, - mode:"incr", - oversizeR:0, - oversizeL:0, - propagateDrag:false, - timeout:1, + dragableSlider:true, + dragRect:R, + mode:"incr", + oversizeR:0, + oversizeL:0, + propagateDrag:false, + timeout:1, - drawableSlider:true, - colorFG:g.theme.fg2, - colorBG:g.theme.bg2, - rounded:true, - outerBorderSize:Math.round(2*R.w/176), // 176 is the # of pixels in a row on the Bangle.js 2's screen and typically also its app rectangles, used here to rescale to whatever pixel count is on the current app rectangle. - innerBorderSize:Math.round(2*R.w/176), + drawableSlider:true, + colorFG:g.theme.fg2, + colorBG:g.theme.bg2, + rounded:true, + outerBorderSize:Math.round(2*R.w/176), // 176 is the # of pixels in a row on the Bangle.js 2's screen and typically also its app rectangles, used here to rescale to whatever pixel count is on the current app rectangle. + innerBorderSize:Math.round(2*R.w/176), - autoProgress:false, - },conf); + autoProgress:false, + },conf); - // If borders are bigger than the configured width, make them smaller to avoid glitches. - while (o.c.width <= 2*(o.c.outerBorderSize+o.c.innerBorderSize)) { - o.c.outerBorderSize--; - o.c.innerBorderSize--; - } - o.c.outerBorderSize = Math.max(0,o.c.outerBorderSize); - o.c.innerBorderSize = Math.max(0,o.c.innerBorderSize); + // If borders are bigger than the configured width, make them smaller to avoid glitches. + while (o.c.width <= 2*(o.c.outerBorderSize+o.c.innerBorderSize)) { + o.c.outerBorderSize--; + o.c.innerBorderSize--; + } + o.c.outerBorderSize = Math.max(0,o.c.outerBorderSize); + o.c.innerBorderSize = Math.max(0,o.c.innerBorderSize); - let totalBorderSize = o.c.outerBorderSize + o.c.innerBorderSize; - o.c.rounded = o.c.rounded?o.c.width/2:0; - if (o.c.rounded) o.c._rounded = (o.c.width-2*totalBorderSize)/2; + let totalBorderSize = o.c.outerBorderSize + o.c.innerBorderSize; + o.c.rounded = o.c.rounded?o.c.width/2:0; + if (o.c.rounded) o.c._rounded = (o.c.width-2*totalBorderSize)/2; - o.c.STEP_SIZE = ((o.c.height-2*totalBorderSize)-(!o.c.rounded?0:(2*o.c._rounded)))/o.c.steps; + o.c.STEP_SIZE = ((o.c.height-2*totalBorderSize)-(!o.c.rounded?0:(2*o.c._rounded)))/o.c.steps; - // If horizontal, flip things around. - if (o.c.horizontal) { - let mediator = o.c.xStart; - o.c.xStart = o.c.yStart; - o.c.yStart = mediator; - mediator = o.c.width; - o.c.width = o.c.height; - o.c.height = mediator; - delete mediator; - } + // If horizontal, flip things around. + if (o.c.horizontal) { + let mediator = o.c.xStart; + o.c.xStart = o.c.yStart; + o.c.yStart = mediator; + mediator = o.c.width; + o.c.width = o.c.height; + o.c.height = mediator; + delete mediator; + } - // Make room for the border. Underscore indicates the area for the actual indicator bar without borders. - o.c._xStart = o.c.xStart + totalBorderSize; - o.c._width = o.c.width - 2*totalBorderSize; - o.c._yStart = o.c.yStart + totalBorderSize; - o.c._height = o.c.height - 2*totalBorderSize; + // Make room for the border. Underscore indicates the area for the actual indicator bar without borders. + o.c._xStart = o.c.xStart + totalBorderSize; + o.c._width = o.c.width - 2*totalBorderSize; + o.c._yStart = o.c.yStart + totalBorderSize; + o.c._height = o.c.height - 2*totalBorderSize; - // Add a rectangle object with x, y, x2, y2, w and h values. - o.c.r = {x:o.c.xStart, y:o.c.yStart, x2:o.c.xStart+o.c.width, y2:o.c.yStart+o.c.height, w:o.c.width, h:o.c.height}; + // Add a rectangle object with x, y, x2, y2, w and h values. + o.c.r = {x:o.c.xStart, y:o.c.yStart, x2:o.c.xStart+o.c.width, y2:o.c.yStart+o.c.height, w:o.c.width, h:o.c.height}; - // Initialize the level - o.v.level = o.c.initLevel; + // Initialize the level + o.v.level = o.c.initLevel; - // Only add interactivity if wanted. - if (o.c.dragableSlider) { + // Only add interactivity if wanted. + if (o.c.dragableSlider) { - let useMap = (o.c.mode==="map"||o.c.mode==="mapincr")?true:false; - let useIncr = (o.c.mode==="incr"||o.c.mode==="mapincr")?true:false; + let useMap = (o.c.mode==="map"||o.c.mode==="mapincr")?true:false; + let useIncr = (o.c.mode==="incr"||o.c.mode==="mapincr")?true:false; - const Y_MAX = g.getHeight()-1; // TODO: Should this take users screen calibration into account? + const Y_MAX = g.getHeight()-1; // TODO: Should this take users screen calibration into account? - o.v.ebLast = 0; - o.v.dy = 0; + o.v.ebLast = 0; + o.v.dy = 0; - o.f.wasOnDragRect = (exFirst, eyFirst)=>{ - "ram"; - return exFirst>o.c.dragRect.x && exFirsto.c.dragRect.y && eyFirst{ + "ram"; + return exFirst>o.c.dragRect.x && exFirsto.c.dragRect.y && eyFirst{ - "ram"; - if (!o.c.horizontal) return exFirst>o.c._xStart-o.c.oversizeL*o.c._width && exFirsto.c._yStart-o.c.oversizeL*o.c._height && exFirst{ + "ram"; + if (!o.c.horizontal) return exFirst>o.c._xStart-o.c.oversizeL*o.c._width && exFirsto.c._yStart-o.c.oversizeL*o.c._height && exFirst{ - "ram"; - if (o.v.ebLast==0) { - exFirst = o.c.horizontal?e.y:e.x; - eyFirst = o.c.horizontal?e.x:e.y; - } + // Function to pass to `Bangle.on('drag', )` + o.f.dragSlider = e=>{ + "ram"; + if (o.v.ebLast==0) { + exFirst = o.c.horizontal?e.y:e.x; + eyFirst = o.c.horizontal?e.x:e.y; + } - // Only react if on allowed area. - if (o.f.wasOnDragRect(exFirst, eyFirst)) { - o.v.dragActive = true; - if (!o.c.propagateDrag) E.stopEventPropagation&&E.stopEventPropagation(); + // Only react if on allowed area. + if (o.f.wasOnDragRect(exFirst, eyFirst)) { + o.v.dragActive = true; + if (!o.c.propagateDrag) E.stopEventPropagation&&E.stopEventPropagation(); - if (o.v.timeoutID) {clearTimeout(o.v.timeoutID); o.v.timeoutID = undefined;} - if (e.b==0 && !o.v.timeoutID && (o.c.timeout || o.c.timeout===0)) o.v.timeoutID = setTimeout(o.f.remove, 1000*o.c.timeout); + if (o.v.timeoutID) {clearTimeout(o.v.timeoutID); o.v.timeoutID = undefined;} + if (e.b==0 && !o.v.timeoutID && (o.c.timeout || o.c.timeout===0)) o.v.timeoutID = setTimeout(o.f.remove, 1000*o.c.timeout); - if (useMap && o.f.wasOnIndicator(exFirst)) { // If draging starts on the indicator, adjust one-to-one. + if (useMap && o.f.wasOnIndicator(exFirst)) { // If draging starts on the indicator, adjust one-to-one. - let input = !o.c.horizontal? - Math.min((Y_MAX-e.y)-o.c.yStart-3*o.c.rounded/4, o.c.height): - Math.min(e.x-o.c.xStart-3*o.c.rounded/4, o.c.width); - input = Math.round(input/o.c.STEP_SIZE); + let input = !o.c.horizontal? + Math.min((Y_MAX-e.y)-o.c.yStart-3*o.c.rounded/4, o.c.height): + Math.min(e.x-o.c.xStart-3*o.c.rounded/4, o.c.width); + input = Math.round(input/o.c.STEP_SIZE); - o.v.level = Math.min(Math.max(input,0),o.c.steps); + o.v.level = Math.min(Math.max(input,0),o.c.steps); - o.v.cbObj = {mode:"map", value:o.v.level}; + o.v.cbObj = {mode:"map", value:o.v.level}; - } else if (useIncr) { // Heavily inspired by "updown" mode of setUI. + } else if (useIncr) { // Heavily inspired by "updown" mode of setUI. - o.v.dy += o.c.horizontal?-e.dx:e.dy; - //if (!e.b) o.v.dy=0; + o.v.dy += o.c.horizontal?-e.dx:e.dy; + //if (!e.b) o.v.dy=0; - while (Math.abs(o.v.dy)>32) { - let incr; - if (o.v.dy>0) { o.v.dy-=32; incr = 1;} - else { o.v.dy+=32; incr = -1;} - Bangle.buzz(20); + while (Math.abs(o.v.dy)>32) { + let incr; + if (o.v.dy>0) { o.v.dy-=32; incr = 1;} + else { o.v.dy+=32; incr = -1;} + Bangle.buzz(20); - o.v.level = Math.min(Math.max(o.v.level-incr,0),o.c.steps); + o.v.level = Math.min(Math.max(o.v.level-incr,0),o.c.steps); - o.v.cbObj = {mode:"incr", value:incr}; - } + o.v.cbObj = {mode:"incr", value:incr}; } - if (o.v.cbObj && (o.v.level!==o.v.prevLevel||o.v.level===0||o.v.level===o.c.steps)) { - cb(o.v.cbObj.mode, o.v.cbObj.value); - o.f.draw&&o.f.draw(o.v.level); - } - o.v.cbObj = null; - o.v.prevLevel = o.v.level; - o.v.ebLast = e.b; } - }; - - // Cleanup. - o.f.remove = ()=> { - Bangle.removeListener('drag', o.f.dragSlider); - o.v.dragActive = false; - o.v.timeoutID = undefined; - cb("remove", o.v.level); - }; - } - - // Add standard slider graphics only if wanted. - if (o.c.drawableSlider) { - - // Function for getting the indication bars size. - o.f.updateBar = (levelHeight)=>{ - "ram"; - if (!o.c.horizontal) return {x:o.c._xStart,y:o.c._yStart+o.c._height-levelHeight,w:o.c._width,y2:o.c._yStart+o.c._height,r:o.c.rounded}; - if (o.c.horizontal) return {x:o.c._xStart,y:o.c._yStart,w:levelHeight,h:o.c._height,r:o.c.rounded}; - }; - - o.c.borderRect = {x:o.c._xStart-totalBorderSize,y:o.c._yStart-totalBorderSize,w:o.c._width+2*totalBorderSize,h:o.c._height+2*totalBorderSize,r:o.c.rounded}; - - o.c.hollowRect = {x:o.c._xStart-o.c.innerBorderSize,y:o.c._yStart-o.c.innerBorderSize,w:o.c._width+2*o.c.innerBorderSize,h:o.c._height+2*o.c.innerBorderSize,r:o.c.rounded}; - - // Standard slider drawing method. - o.f.draw = (level)=>{ - "ram"; - - g.setColor(o.c.colorFG).fillRect(o.c.borderRect). // To get outer border... - setColor(o.c.colorBG).fillRect(o.c.hollowRect). // ... and here it's made hollow. - setColor(0==level?o.c.colorBG:o.c.colorFG).fillRect(o.f.updateBar((!o.c.rounded?0:(2*o.c._rounded))+level*o.c.STEP_SIZE)); // Here the bar is drawn. - if (o.c.rounded && level===0) { // Hollow circle indicates level zero when slider is rounded. - g.setColor(o.c.colorFG).fillCircle(o.c._xStart+o.c._rounded, o.c._yStart+o.c._height-o.c._rounded, o.c._rounded). - setColor(o.c.colorBG).fillCircle(o.c._xStart+o.c._rounded, o.c._yStart+o.c._height-o.c._rounded, o.c._rounded-o.c.outerBorderSize); + if (o.v.cbObj && (o.v.level!==o.v.prevLevel||o.v.level===0||o.v.level===o.c.steps)) { + cb(o.v.cbObj.mode, o.v.cbObj.value); + o.f.draw&&o.f.draw(o.v.level); } - }; - } + o.v.cbObj = null; + o.v.prevLevel = o.v.level; + o.v.ebLast = e.b; + } + }; - // Add logic for auto progressing the slider only if wanted. - if (o.c.autoProgress) { - o.f.autoUpdate = ()=>{ - o.v.level = o.v.autoInitLevel + Math.round((Date.now()-o.v.autoInitTime)/1000); - if (o.v.level>o.c.steps) o.v.level=o.c.steps; - cb("auto", o.v.level); - o.f.draw&&o.f.draw(o.v.level); - if (o.v.level==o.c.steps) {o.f.stopAutoUpdate();} - }; - o.f.initAutoValues = ()=>{ - o.v.autoInitTime=Date.now(); - o.v.autoInitLevel=o.v.level; - }; - o.f.startAutoUpdate = (intervalSeconds)=>{ - if (!intervalSeconds) intervalSeconds = 1; - o.f.stopAutoUpdate(); - o.f.initAutoValues(); - o.f.draw&&o.f.draw(o.v.level); - o.v.autoIntervalID = setInterval(o.f.autoUpdate,1000*intervalSeconds); - }; - o.f.stopAutoUpdate = ()=>{ - if (o.v.autoIntervalID) { - clearInterval(o.v.autoIntervalID); - o.v.autoIntervalID = undefined; - } - o.v.autoInitLevel = undefined; - o.v.autoInitTime = undefined; - }; - } + // Cleanup. + o.f.remove = ()=> { + Bangle.removeListener('drag', o.f.dragSlider); + o.v.dragActive = false; + o.v.timeoutID = undefined; + cb("remove", o.v.level); + }; + } - return o; - }; + // Add standard slider graphics only if wanted. + if (o.c.drawableSlider) { + + // Function for getting the indication bars size. + o.f.updateBar = (levelHeight)=>{ + "ram"; + if (!o.c.horizontal) return {x:o.c._xStart,y:o.c._yStart+o.c._height-levelHeight,w:o.c._width,y2:o.c._yStart+o.c._height,r:o.c.rounded}; + if (o.c.horizontal) return {x:o.c._xStart,y:o.c._yStart,w:levelHeight,h:o.c._height,r:o.c.rounded}; + }; + + o.c.borderRect = {x:o.c._xStart-totalBorderSize,y:o.c._yStart-totalBorderSize,w:o.c._width+2*totalBorderSize,h:o.c._height+2*totalBorderSize,r:o.c.rounded}; + + o.c.hollowRect = {x:o.c._xStart-o.c.innerBorderSize,y:o.c._yStart-o.c.innerBorderSize,w:o.c._width+2*o.c.innerBorderSize,h:o.c._height+2*o.c.innerBorderSize,r:o.c.rounded}; + + // Standard slider drawing method. + o.f.draw = (level)=>{ + "ram"; + + g.setColor(o.c.colorFG).fillRect(o.c.borderRect). // To get outer border... + setColor(o.c.colorBG).fillRect(o.c.hollowRect). // ... and here it's made hollow. + setColor(0==level?o.c.colorBG:o.c.colorFG).fillRect(o.f.updateBar((!o.c.rounded?0:(2*o.c._rounded))+level*o.c.STEP_SIZE)); // Here the bar is drawn. + if (o.c.rounded && level===0) { // Hollow circle indicates level zero when slider is rounded. + g.setColor(o.c.colorFG).fillCircle(o.c._xStart+o.c._rounded, o.c._yStart+o.c._height-o.c._rounded, o.c._rounded). + setColor(o.c.colorBG).fillCircle(o.c._xStart+o.c._rounded, o.c._yStart+o.c._height-o.c._rounded, o.c._rounded-o.c.outerBorderSize); + } + }; + } + + // Add logic for auto progressing the slider only if wanted. + if (o.c.autoProgress) { + o.f.autoUpdate = ()=>{ + o.v.level = o.v.autoInitLevel + Math.round((Date.now()-o.v.autoInitTime)/1000); + if (o.v.level>o.c.steps) o.v.level=o.c.steps; + cb("auto", o.v.level); + o.f.draw&&o.f.draw(o.v.level); + if (o.v.level==o.c.steps) {o.f.stopAutoUpdate();} + }; + o.f.initAutoValues = ()=>{ + o.v.autoInitTime=Date.now(); + o.v.autoInitLevel=o.v.level; + }; + o.f.startAutoUpdate = (intervalSeconds)=>{ + if (!intervalSeconds) intervalSeconds = 1; + o.f.stopAutoUpdate(); + o.f.initAutoValues(); + o.f.draw&&o.f.draw(o.v.level); + o.v.autoIntervalID = setInterval(o.f.autoUpdate,1000*intervalSeconds); + }; + o.f.stopAutoUpdate = ()=>{ + if (o.v.autoIntervalID) { + clearInterval(o.v.autoIntervalID); + o.v.autoIntervalID = undefined; + } + o.v.autoInitLevel = undefined; + o.v.autoInitTime = undefined; + }; + } + + return o; +}; From 05e2ff899cdf8d76774b6d151c43d6dd9d736c94 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 18 Oct 2023 21:55:06 +0200 Subject: [PATCH 103/105] Slider: add to documentation Slider.md --- modules/Slider.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/modules/Slider.md b/modules/Slider.md index b06038fd7..07e7010b3 100644 --- a/modules/Slider.md +++ b/modules/Slider.md @@ -8,7 +8,7 @@ Slider Library Usage ----- -```JS +```js var Slider = require("Slider"); var slider = Slider(callbackFunction, configObject); @@ -63,16 +63,16 @@ slider = require("Slider").create(()=>{}, {autoProgress:true}) ={ v: { level: 0, ebLast: 0, dy: 0 }, f: { - wasOnDragRect: function (exFirst,eyFirst) { ... }, - wasOnIndicator: function (exFirst) { ... }, - dragSlider: function (e) { ... }, - remove: function () { ... }, - updateBar: function (levelHeight) { ... }, - draw: function (level) { ... }, - autoUpdate: function () { ... }, - initAutoValues: function () { ... }, - startAutoUpdate: function (intervalSeconds) { ... }, - stopAutoUpdate: function () { ... } + wasOnDragRect: function (exFirst,eyFirst) { ... }, // Used internally. + wasOnIndicator: function (exFirst) { ... }, // Used internally. + dragSlider: function (e) { ... }, // The drag handler. + remove: function () { ... }, // Used to remove the drag handler and run the callback function. + updateBar: function (levelHeight) { ... }, // Used internally to get the variable height rectangle for the indicator. + draw: function (level) { ... }, // Draw the slider with the supplied level. + autoUpdate: function () { ... }, // Used to update the slider when auto progressing. + initAutoValues: function () { ... }, // Used internally. + startAutoUpdate: function (intervalSeconds) { ... }, // `intervalSeconds` defaults to 1 second if it's not supplied when `startAutoUpdate` is called. + stopAutoUpdate: function () { ... } // Stop auto progressing and clear some related values. }, c: { initLevel: 0, horizontal: false, xStart: 127, width: 44, yStart: 4, height: 166, steps: 30, dragableSlider: true, From 8bd1cbb2a8a61f7d1bbe3189a02b27180731a9ac Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 18 Oct 2023 22:56:09 +0200 Subject: [PATCH 104/105] Slider: add to documentation re timeout --- modules/Slider.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/Slider.md b/modules/Slider.md index 07e7010b3..86b95aa01 100644 --- a/modules/Slider.md +++ b/modules/Slider.md @@ -44,7 +44,7 @@ mode: "incr", // What mode of draging to use: "map", " oversizeR: 0, // Determines if the mapping area should be extend outside the indicator (Right/Up). oversizeL: 0, // Determines if the mapping area should be extend outside the indicator (Left/Down). propagateDrag: false, // Pass the drag event on down the handler chain? -timeout: 1, // Seconds until the slider times out. +timeout: 1, // Seconds until the slider times out. If set to `false` the slider stays active. The callback function is responsible for repainting over the slider graphics. drawableSlider: true, // Should supply the sliders standard drawing mechanism? colorFG: g.theme.fg2, // Foreground color. From 71a445c96ecc8d2cbbf84ebe61647aa97650b6e7 Mon Sep 17 00:00:00 2001 From: thyttan <6uuxstm66@mozmail.com⁩> Date: Wed, 18 Oct 2023 23:20:00 +0200 Subject: [PATCH 105/105] Slider: formatting Slider.md --- modules/Slider.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/modules/Slider.md b/modules/Slider.md index 86b95aa01..eb2291d25 100644 --- a/modules/Slider.md +++ b/modules/Slider.md @@ -63,16 +63,16 @@ slider = require("Slider").create(()=>{}, {autoProgress:true}) ={ v: { level: 0, ebLast: 0, dy: 0 }, f: { - wasOnDragRect: function (exFirst,eyFirst) { ... }, // Used internally. - wasOnIndicator: function (exFirst) { ... }, // Used internally. - dragSlider: function (e) { ... }, // The drag handler. - remove: function () { ... }, // Used to remove the drag handler and run the callback function. - updateBar: function (levelHeight) { ... }, // Used internally to get the variable height rectangle for the indicator. - draw: function (level) { ... }, // Draw the slider with the supplied level. - autoUpdate: function () { ... }, // Used to update the slider when auto progressing. - initAutoValues: function () { ... }, // Used internally. + wasOnDragRect: function (exFirst,eyFirst) { ... }, // Used internally. + wasOnIndicator: function (exFirst) { ... }, // Used internally. + dragSlider: function (e) { ... }, // The drag handler. + remove: function () { ... }, // Used to remove the drag handler and run the callback function. + updateBar: function (levelHeight) { ... }, // Used internally to get the variable height rectangle for the indicator. + draw: function (level) { ... }, // Draw the slider with the supplied level. + autoUpdate: function () { ... }, // Used to update the slider when auto progressing. + initAutoValues: function () { ... }, // Used internally. startAutoUpdate: function (intervalSeconds) { ... }, // `intervalSeconds` defaults to 1 second if it's not supplied when `startAutoUpdate` is called. - stopAutoUpdate: function () { ... } // Stop auto progressing and clear some related values. + stopAutoUpdate: function () { ... } // Stop auto progressing and clear some related values. }, c: { initLevel: 0, horizontal: false, xStart: 127, width: 44, yStart: 4, height: 166, steps: 30, dragableSlider: true,