• ----- 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

    • startupExample.png

Avatar for allObjects @allObjects started