UI Module w/ Buttons, Checkboxes,... for Display w/ Touchscreen

Example code - re-formatted for narrow forum format - and explained:

var ui,touchr;
SPI1.setup({sck:B3, miso:B4, mosi:B5, baud: 1000000});
var lcd = require("ILI9341").connect(SPI1, B6, B8, B7, function() {
  lcd.clear(); B2.set();
  ui = uiModule.connect(lcd);
  touchr = touchrModule.connect(C0,C1,C2,C3,functio­n(x,y,t){
    ui.evt(x,y,t); // for ADS7843 module use: ui.evt(x,y,{t:!!x});
   });
  // UI definition (bc=border|fc=fill|tc=text color 0..7 
  //               (<0 no border); xo|yo=x|y label offset
  
  // active  x   y   w  h bc fc 
  //                callback on up                
  //                     fontVector tc xo yo label/text
  
  ui.btn(1, 30, 40, 75,40,-1, 4
                   ,function(e){ console.log("btn1");    
                               },20, 7, 5, 8,"BTN1");
  
  ui.chk(1, 30, 90, 40, 0, 2, 7
                   ,function(e,s){ console.log("chk1",s); 
                               },20, 7, 5, 8,"OK?");
  
  ui.chk(1,140, 90, 40, 1,-1, 1
                   ,function(e,s){ console.log("chk2",s); 
                               },20, 7, 5, 8,"Up?");
  
  ui.btn(1, 30,140, 90,40, 1, 6
                   ,function(e){ console.log("btn2");    
                               },20, 0,12, 8,"BTN2");
  
  ui.btn(1, 30,190,160,40,-1, 7
                   ,function(e){ console.log("btn3");    
                               },20, 0,16, 8,"Time to go!");
  
  ui.btn(1, 30,240, 60,60,-1, 5
                   ,function(e){ console.log("btn4");    
                               });
  
  ui.btn(1,100,240, 60,60,-1, 3
                   ,function(e){ console.log("btn5");    
                               });

  ui.btn(1,170,240, 60,60,-1, 6
                   ,function(e){ console.log("btn6");    
                               });
  
  touchr.listen(true); // not needed for ADS7843 module
 });

Lines 2..4 are standard setup for ILI9341 module for TFT LCD module.

Line 5 connects the display as output medium to the TOUCH UI module.

Lines 6..8 connects the TOUCHR module to the the touch screen for the input - line 6 - and to the UI as the input handler by a callbck that callse the TOUCHUI's evt() method. Event information passed is:

1. x coordinate of the touch or tracked drag
   
2. y coordinate of the touch or tracked drag
   
3. software touch controller object
   
   

Un-touch is detectable by x and y being undefined and by !t.t - !touchController.touching;

UI module evt() iterates through all registered UI elements to find the one that 'owns' the touching spot and act on it.

Lines 16,20,24,28,... begin with a definition of a ui element.

For each element type the UI module has a method for creation, registration, visualisation, and callback invocation.

For creation 8 required parameters are passed (parameters 9 and following are optional for labeling (and other purposes)).

1. UI element is active/enabled (1) or disabled(0)
   
2. x coordinate of the top left corner (...indent)
   
3. y coordinate of the top left corner (...r0w)
   
4. width of the element
   
5. height of the element for buttons and initial check status for checkbox (0/1=un/checked).
   
6. border color 0..9 (-1 means no border color specified and none drawn)
   
7. fill color 0..9 (-1 means no fill color specified and none drawn/filled)
   
8. callback function to talk to the application (on un-touch / release)
   
9. vector font for the label (if absent, undefined, null, false,...no label is crated.
   
10. text / label font color 0..9
    
11. x offset for text / label from top-left corner of ui element
    
12. y offset for text / label from top-left corner of ui element
    
13. text / label as string.