2 questions regarding Button and touch event

EDIT: 2020.1210 - issue with backspace and vertical key navigation

I played a bit around with code in post #10 and ended up with this fragment for a Soft Keyboard for BangleJS, 2020v1210_ao . - I changed the code to just use touch, touch duration. single left or right, both left and right touch, touch events within time windows, action on untouch, character auto-posted on delay:

• short_left/right navigates horizontally left/right and around (end to beg / beg to end).
  
• short_both (left+right at the same time) navigates vertically down and around (bot to top).
  
• staying on a key for longer than scd -send character delayed [ms] sends character.
  
• medium_long_left sends or calls (tbd) backspace / 0x08
  
• medium_long_right sens space / blank / 0x20
  
• long left puts focus back on entry field to, for ex., move 'cursor' around (tbd).
  
• long_right changes keyboard to the next set of keys, like #, etc. and around (last to first).
  
• to send same character multiple times, move one key away and return right back.
  
  

Conclusion: to play with touch combinations, timing and sequencing, it gets pretty quickly complicated not just for the programmer but also for the user. user is easier to train, though. With increasing complexity and number of timeouts, behavior can get a bit iffy...

NB: There is no overlap in emulation and therefore touch both is not working... I ran it on a real Bangle for that! (would be nice to have overlapping or center defined zones, that fires events, for example when a bit to the left of the middle, left first, then right, and when slightly to the right of the center / in a band of a few pixels wide right to the center, fires right and then left... with same for both touch and untouch and not swipe as long as staying within the band...)

// BKbd9.js
// 2020v1210_ao
// Soft Keyboard for BangleJS - spike

var K // keyboard keys in rows
    = [ 'QWERTYUIOP' // key-set 0 (base B=0) of 30 keys in 3 rows
      , 'ASDFGHJKL;'
      , 'ZXCVBNM,.//'
      , '1234567890'  // key-set 1 (basee B=10) of 30 keys in 3 rows
      , '!@#$%^&*()'
      , '_-+=[]|{}\\'
      ]; 

var B =   0 // base of kbd (1st/top row)
  , R =   3 // key rows displayed at one time
  , C =  10 // key cols
  , X =   3 // left border of kbd
  , Y =  20 // top border of kbd
  , S =  20 // key spacing
  , Z =  16 // key size
  , F = ()=>g.setFont("6x8",2) // key font
  , kx = 0, ky = 0 // current kye's x and (relative) y
  ;

function drawKey(x,y,f) {
  var px=X+x*S,py=Y+y*S;
  g.setColor(f?-1:0).fillRect(px, py, px+Z-2, py+Z);
  g.setColor(f?0:-1).drawString(K[B+y][x],px+2,py);
  g.setColor(-1); }
function drawKB(n) { // n-th set of keys, default: 0
  B=((n||0)%(K.length/R))*R; // no arg: default
  F(); for (var y=0;y<R;y++) for (var x=0;x<C;x++)
  drawKey(x,y,0); drawKey(kx,ky,1); }
function mk(x,y) { // move key focus  by x+y (clear old, calc new x+y and draw)
  drawKey(kx,ky,0);
  kx=((kx+=x)<C)?((kx<0)?C-1:kx):0; ky=((ky+=y)<R)?((ky<0)?R-1:ky):0;
  drawKey(kx,ky,1); }

var wtb=0.1  // window for touch both a same time [s]
  , wse=0.2  // window for short event
  , wme=0.8  // window for medium event (any beyond is long)
  , lul=0.0  // last touch left unevent (touch)
  , lur=0.0  // last touch right unevent (touch)
  , ltl=0.0  // last touch left event (untouch, release)
  , ltr=0.0  // last touch right event (untouch, release)
  , scd=330  // send char delay/timeout to pass selected
  , sci=null // send char timeout id
;
function bs() { console.log("<<<==bcksp=="); } // send/call 0x08
function bl() { console.log(" "); } // send blank
function sc() { console.log(K[B+ky][kx]); sci=0; } // send s'd chr
function ul() { lul=getTime(); if (sci) sci=clearTimeout(sci); }
function ur() { lur=getTime(); if (sci) sci=clearTimeout(sci); }
function tl() {
  if (lul!=0.0) { // regular single / both touch event
    if ((ltl=getTime())-ltr>wtb) { 
      if (ltl-lul<wse) { mk(-1,0); // single short: h nav l
        sci=setTimeout(sc,scd);
      } else { if (ltl-lul<wme) { bs(); // bs - backspace
               } else { } } // leave keyboard, go in to field
    } else { mk( 0, 1); ltl=ltr=0.0; // both short: vert nav down
        sci=setTimeout(sc,scd); } lul=0.0;
  } else {
  } }
function tr() {
  if (lur!=0.0) { // regular single / both touche event
    if ((ltr=getTime())-ltl>wtb) { 
      if (ltr-lur<wse) { mk( 1,0); // single short: h nav r
        sci=setTimeout(sc,scd);
      } else { if (ltr-lur<wme) { bl(); // send blank 0x20
               } else { drawKB(B/R+1); } } // next key rows
    } else { mk( 0, 1); ltr=ltl=0.0; // both short: vert nav down
        sci=setTimeout(sc,scd); } lur=0.0;
  } else {
  } }
function onInit() {
  g.clear();
  drawKB();
  setWatch(ul,BTN4,{repeat:true, edge:"rising" });
  setWatch(ur,BTN5,{repeat:true, edge:"rising" });
  setWatch(tl,BTN4,{repeat:true, edge:"falling"});
  setWatch(tr,BTN5,{repeat:true, edge:"falling"});
}

setTimeout(onInit,999);

1 Attachment