Modular and extensible UI framework and ui elements.

----- ui_ ------------------------- 20190927 - intro

*** modular and extensible (graphical) ui framework - regular version.

The framework consists of a bases module which provides the infrastructure
for individual out of box and custom ui elements and utility extensions.
Out of box ui elements include (for now):

• plain button
  
• check box
  
• radio button
  
• slider
  
• input field
  
• keyboard (soft keyboard / touch keyboard)
  
  

An out of box extension provides utility and convenience functions and
is required for more complex ui elements - for now - for - out of box -
radio button, and is also useful for the application to easy access
ui elements.

Creating and integrating custom ui elements and extensions as needed
is easy based on the architecture and available documentation and
ready to run examples. Examples can be run on actual Espruino and
display with and - soon also - without touch screen. Most of the
examples run also emulated in cross development environment in any browser
as html sharing the Espruino JavaScript files - that's how and where
the ui framework and ui elements are developed and maintained for most
of their functionality.

All ui elements handled by ui framework have roughly 12 (13) common
properties in same and similar structure(s):

• flags - hidden/displayed, touch active, read/display-only, in focus,...
  
• clazz - btn-Button, chk-Checkbox, rad-Radiobutton, sli-Slider, inp-Inputfield,...
  
• id of ui element - enabling sharing callbacks and other nifty things,
  such as keeping additional, application specific state and behavior
  the ui framework does not cater for (yet) or will never do or can...
  
• x and y position - left-top of ui elements bounding box
  
• width and height
  
• border and fill colors
  
• a value (object) enabling sharing callbacks and other nifty things
  
• a preferred callback - fired on untouch after touch down on same ui element
  
• some label object(s) - plain, static text but also as renders (functions)
  
• (optional, NON-preferred, experimental callback called on all touch events)
  
  

Only the 1st 9 of the 12 (13) properties are really mandatory. Same
values in same structures have lead to an implementation of the ui
elements as light weight, lean 'array objects' in order to save memory
/ variables.

Details about the ui element specific properties for construction and
runtime are documented for each ui element separately.

The ui communicates input (and other) events through callbacks. The
callback arguments include all pertinent information to allow a straight
forward, from simple to sophisticated use in the application and keep the
code terse in order to save memory / variables:

• id of ui element
  
• value (object) of ui element
  
• ui singleton (module) for accessing all statuses / ui elements / ui aspects
  
• ui element subject to touch event (for optional query/change by application)
  
• touch event object (touch/untouch and position on display / ui element, flags)
  
  

Attached shot: ui start up w/ all ui element types and keyboard (in emulation).

1 Attachment