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

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/11918­647/. 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.

3 Attachments

• TOUCHUI_inline.js
• 
•