• ----- 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 Fonts are to use the same ways as custom colors: 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-pPixl 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 Pixle.

    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:deb­ounce} );
    };
    
    
    // ------- 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.subs­tr(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

About

Avatar for allObjects @allObjects started