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

[espruino-discuss2]

Posted at 2014-11-01 by @allObjects

9/2016: For updated and complemented, higly modularized and extensible version with slider, input field, keypad, radio button, check box, and button ui elements see Modular and extensible UI framework and ui elements conversation (sneak peek pic attached).

Something like attached module code I intend to use with my display with resistive touch screen. So far it support Buttons and Chechboxes w/ and w/o borders and w/ and w/o labels.

The touch controller is a software controller running on Espruino as well. The module code is described in post Resistive Touchscreen directly (no touch controller) at http://forum.espruino.com/comments/11918647/. Espruino touch screen moudule ADS7843 for same named hardware controller can be used as well.

Next UI elements in mind are: Slider, Spinner, and kind of Input and Output Field.

A screenshot and file with ready to run (inline module and example) code is attached. Narrow forum formatting not suitable for longer code lines, therefore click the link to get the code.

The example UI includes as ui elements 6 buttons and 2 checkboxes. Half of the buttons have a text label. Each element has its own callback. They create following console output:

1v70 Copyright 2014 G.Williams
>echo(0);
=undefined
chk2 0
btn1
chk1 1
btn2
btn3
btn5
chk2 1
> 

Each element shows its name (hardcoded in the dedicated callback). The chckboxes show their status:

• 0 - unchecked
• 1 - checked

The callback are called on un-touch when received focus before. Touching or dragging into an element's display real estate gives focus to the element. Touching and dragging out of an element and dragging 'through' (in and out in) and then un-touching does not trigger callbacks.

Attachments:

• TOUCHUI_inline.js
  
• touchUI.png
  
• ui_displayR.jpg

[espruino-discuss2]

Posted at 2014-11-01 by @allObjects

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,function(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.

[gfwilliams]

Posted at 2014-11-01 by @gfwilliams

Wow, this looks really good. Really compact too!

It'd be great to get this added to the standard module list.

[espruino-discuss2]

Posted at 2016-09-18 by @allObjects

Finally, something has happened continuation of this UI module got reworked, modularized, and somewhat generalized in conversation about Modular and extensible UI framework and ui elements.