Modular and extensible UI framework and ui elements.

----- ui on Pixl.js ------------------------- 20190927 - *** PREVIEW ***

First of all: Espruino Pixl.js is just cool... - I guess you know that... so:

I created and example for Pixl... worked right out of box... with proper color converter as soon as I understood Pixl's color philosophy and designing the ui in black&white. Vector fonts do not work out that great in the desired (small) size.... and with that some changes arose. The solution approach for fonts is the same ways as custom colors: fonts are added into an array and referenced with 'negative font vector (sizes): -1 as font means: pick the font that has been added as the first one. The changes made so far have not been back-ported and tested yet for non-Pixl displays, but they will... and they will enhance actually the overall framework. Because Pixl is a bit shorter on memory than PICO and I wanted still to work on the un-minified sources, I produced _U - uncommented versions.... and so far, these include the changes needed for Pixl.

So that you can start to play with the ui framework on Pixle, I added the sandbox _sbx that holds all what you need for this example - foremost the _U versions.

Below code of the uiExamplePixl.js project file that produces the UI shown in attached screenshot. I chose three (3) buttons to control the ui: BTN1 (left top) and BTN2 (right top) jump between ui elements - previous and next - und BTN3 (right bottom) is the enter / touch button. In attached screenshot, you see the first - unchecked -checkbox ui element selected. Pressing BTN3 will check the checkbox and fire the callback.

// uiExamplePixl.js - pixl - example

// 20190930 - allObjects - variables: ~ / ~

// ----- setup lon and log() (considering emulating _eConsole)
var lon = true // logging is on / off
  , log = function() { if (lon) { var lgr;(lgr=(typeof _eConsole
       =="object")?_eConsole:console).log.apply(lgr,arguments);}};

// ----- pull in ui base and ui element(s) - (..._U = uncommented)
var ui = require("ui_U")                 // basic module _U(ncommented)
    .adx(require("uiExt_U"),-1,"uiExt_U") // basic extension
    .adx(require("uiEBC_U"),-1,"uiEBC_U") // button controlled ui extension
    .adx(require("uiBtn_U"),-1,"uiBtn_U") // ui button element
    .adx(require("uiChk_U"),-1,"uiChk_U") // ui checkbox element
    .adx(require("Font6x8"),-2,"Font6x8") // pixl suitable bitmap font
    ;
// define Pixl Button 'clazz'
var uiPBt = function(btn,downCb,upCb,debounce) {
  var t=0;
  setWatch( function(e){ if (! t) { t=Math.round(e.time*1000); if (downCb) downCb(t); }}
          , btn, {edge:"rising" ,repeat:true, debounce:debounce} );
  setWatch( function(e){ if (  t) { upCb(Math.round(e.time*1000)-t); t=0; }}
          , btn, {edge:"falling",repeat:true,debounce:debounce} );
};


// ------- uiPBt -----------------------------------

// ----- define callback(s): preferred (untouch) / generic (all) touch event(s)
var cb = function(id, v, _, e, t) { log( "id:",id,"val:",v
        ,(t)?((t.t)?"":"un")+"touch focused":t); }
  , ca = ( (typeof ca === "undefined")
         ? function(id, v, _, e, t) { var s=(t.f|65536).toString(2); // log flags
             log("c:",e[1],"c:",e[1],"id:",id,"v:",v,"f:",[s.substr(5,4),s.substr(9,4),s.substr(13,4)].join(" "),t.f); }
         : ca )
  , u; // for space / memory / var saving value of * undefined *

// ----- define UI (in level 0 - built to be saved)

//---------- Button examples ----------
//
//    0  1     2       3   4   5   6   7   8  9       10  11                         12
// flgs  clazz id      x   y   w   h  bc  fc  valObj  cb,  l (label array obj)
//       btn                ->x2->y2                        fv tc    x  y label txt  ca
ui.c( 3,"btn","b1"  ,  0, 20, 30, 19,  0,  0, "B_1",  cb,  [-1, 7,   7, 6, "RED" ]);
ui.c( 3,"btn","b2"  , 29, 20, 41, 19,  0,  7, {v:1},  ca , [-1, 0,   7, 6, "Y-w-B"], ca);

// ---------- Checkbox examples ----------
//    0  1      2      3   4   5   6   7   8  9       10  11                         12
// flgs  clazz id      x   y   w   s  bc  fc  valObj  cb,  l (label array obj)
//       chk                ->x2+>y2~------->[s,vOjb]       fv tc    x  y label txt
ui.c( 3,"chk","c1"  , 69, 20, 19,  0,  0,  7, "H",    cb,  [-1, 0,   1, 6, "On"   ]);
ui.c( 3,"chk","c2"  , 99, 20, 19,  1,  0,  0, "X",    u ,  [-1, 0,   1, 6, "Up"   ], ca);

//----- Pixl sepcifics
var dsp = g, dspW=128, dspH=64 // ...to keep var names as usual
  ;
ui.bc=7; // set ui background color to white
ui.tc=0; // set ui touch color to black
ui.clrs= // set white to pixl color 
    [function(c,i){ var v=(i)?c^7:c; return [(v&&4)?0:1]; }.bind(ui)
    ];
var flp;

// ----- run UI
function onInit() {
  dsp.clear(); LED.set(); // display clear and turn back light on
  setTimeout(function(){
    // connect ui to dsp and display it
    ui.connect(dsp)
      .w(0,0,dspW-1,dspH-1) // wipe screen (rect) w/ default / bg color
      .d()                  // display all elements
      .di = true            // set display changes to immediate
      ;
    flp = function(){ dsp.flip(); };
    flp();
    new uiPBt(BTN1,0,function(t){console.log(1);ui.sp();flp();}); // sel prev on BTN1
    new uiPBt(BTN2,0,function(t){console.log(2);ui.sn();flp();}); // sel next on BTN2
    new uiPBt(BTN3,0,function(t){console.log(3);ui.st(t+70,t);setTimeout(flp,t+140);});
  },1000);
}
setTimeout(onInit,999); // for dev only, remove before save()

Remaining ui elements will be adjusted to work also on Pixl and changes will be back ported, examples updated, documentation adjusted... and emulation will follow thereafter. This all will take 'a few' days. In the mean time:

• happy Pixl-ing @ allObjects - w/ attached sandbox.
  
  

Attached: _sbx - Sandbox folder with all what Pixl needs... and a screenshot (related to chosen font size... can go smaller or larger... all a simple matter of the UI definitions...).

2 Attachments

• _sbx_Pixl_20190930_sneakpeek.zip
•