UI Example - ui control w/ physical push buttons

Example includes ui control w/ physical push buttons vs touch screen.

Source Code

// ----- 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)
var ui = require("ui")
      .adx(require("uiBtn"))
      .adx(require("uiChk"))
      .adx(require("uiExt")) // prereq for uiRad and keyboard callback example
      .adx(require("uiRad"))
      .adx(require("uiSli"))
      .adx(require("uiInp"))
      .adx(require("uiEBC")) // prereq for ui control w/ buttons vs touch screen
      ;
ui.clrs = // imply color depth and table w/ converter and define user colors / palette
  [function(c,i) { // color info to [r,g,b] converter at index 0 (ui.clrs[0](...))
      var v, s=isNaN(c); if (s || c<0) { // c<0 (looked up [R,G,B]) or c=[R,G,B]
        return (((s) ? c : this.clrs[-c]).map(function(v){ return ((i)?v^255:v)/256; }));
      } else { // c>=0 bit coded rgb color (default 1 bit color depth 2^1^3=8 colors)
        v = (i) ? c^7 : c; return [v>>2&1,v>>1&1,v&1]; } }.bind(ui)
  ,[216,216,216] // user color -1: light grey // keyboard bottom right special keys
  ,[192,192,192] // user color -2: medium light grey
  ,[128,128,128] // user color -3: medium gray
  ,[192,128,192] // user color -4: light purple
  ,[0  ,160, 64] // user color -5: kind of a 'darker' green
  ];

// ----- 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)?(t.f|65536):0).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)

// ---------- Input field example ----------
//
//    0  1     2       3   4   5   6   7   8  9       10  11
// flgs  clazz id      x   y   w   h  bc  fc  valObj  cb   ls (arr of label ([[..],..]))
//       btn                ->x2->y2                  callback clears on tap > 550ms
ui.c( 3,"inp","i1"  , 45,  7,195, 28,  3,  7,"modular UI"
       ,function(i,v,_,e){ if (getTime()-_.tt>0.55   // [0] fs tc    x  y  mxLen typ fmt
                           && v.length) _.u(e,""); } // [1] fs tc    x  y  label text
                                                         ,[[13, 0,   5, 6, 16,   0,  0]
                                                          ,[13, 7,-233, 6, "Field"    ]
                                                          ]);

// ---------- 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                        fs tc    x  y  label txt ca
ui.c( 3,"btn","b1"  ,  5, 40, 60, 35,  4,  4, "B_1",  cb,  [15, 7,  10, 8, "RED"  ]);
ui.c( 3,"btn","b2"  , 65, 40, 75, 35,  5,  6, {v:1},  u ,  [15, 0,  10, 8, "BoYbg"], ca);

// ---------- Check box 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,vObj]       fs tc    x  y  label txt
ui.c( 3,"chk","c1"  ,140, 45, 25,  0, -5,  7, "H",    cb,  [12, 7,   3, 6, "On"   ]);
ui.c( 3,"chk","c2"  ,192, 45, 25,  1,  1,  1, "X",    u ,  [12, 7,   3, 6, "Up"   ], ca);

// ---------- Radio button examples ----------
//
//    0  1     2       3   4   5   6   7   8  9       10  11                         12
// flgs  clazz id.grp  x   y   w   s  bc  fc   valObj cb,  l (label array obj)
//       rad                ->x2+>y2~------->[s,vOjb][g,cb,]fs tc    x  y  label txt ca
ui.c( 3,"rad","r1.a",  5, 80, 37,  0,  6,  2, "L",    cb,  [12, 7,   5,10, "Large"]);
ui.c( 3,"rad","r1.b", 95, 85, 27,  1,  3,  1, "M",    0 ,  [12, 7,   5, 7, "Med"  ]);
ui.c( 3,"rad","r1.c",170, 90, 17,  1,  5,  2, "S",    0 ,  [12, 7,   5, 2, "Small"]);
ui.c( 3,"rad","r2.a",  5,120, 23,  0,  1,  2, "L",    u ,  [12, 7,   5, 4, "Land" ], ca);
ui.c( 3,"rad","r2.b", 95,120, 23,  0, -3, -3, "W",    0 ,  [12, 7,   5, 4, "Water"]);
ui.c( 3,"rad","r2.c",170,120, 23,  1,  1,  1, "A",    0 ,  [12, 7,   5, 4, "Air"  ]);


// ---------- Slider examples ----------
//
//....0  1     2       3   4   5   6   7   8  9       10  11                         12
//.flgs  clazz id      x   y   w   h  bc fcs  value   cb, ls (arr of labels ([[...],..]))
//       sli                ->x2->y2                    [0] fs tc    x  y  txt fmt   ca
ui.c( 3,"sli","s1"  , 10,145,220, 20, -3,[4,-5], 0,  cb,   u, u,   u, u, u,  u
//                                                          min max si  o a flgs
                                                           ,-10, 10,[3],0,0,  24);
//
var s2 = // hold on to "s2" slider ui element for direct access app later on.
// non-pixl:
//....0  1     2       3   4   5   6   7   8  9       10  11                         12
//.flgs  clazz id      x   y   w   h  bc fcs  value   cb, ls (arr of labels ([[...],..]))
//       sli                ->x2->y2                    [0] fs tc    x  y  txt fmt
ui.c( 3,"sli","s2"  ,  3,170,234, 32, -4,[-4,0],25,   ca, [[12, 6,  90,12, u
                                                           ,function(v,_,l){ // v,ui,labl
       var s="", f=_.te.f; return (!(f===0 || f&184)) ? s : ((v<1)?"0":"") // 128+32+16+8
                   +(s=_.mr(v*10)+"%").substr(0,s.length-2)+"."+s.substr(-2); } // #.##%
//                     _.mr=Math.round                      min max si  o a flgs
                                                           ,  0,100,[3],0,0, 168
//                                                          left top right bot margins
                                                           ,  27,  6,   27]
//                                                     [>0] fs tc    x  y  txt fmt
                                                          ,[12, 7,   2,12, "%:0"] // frnt
                                                          ,[12, 7, 207,12, "100"] // back
                                                          ]);

//// pixl or 2 colors only adjusting 'on-top' label placement (colors for TFT, flip'm for LCD):
//
//// Pixl or 2 colors only adjusting 'on-top' label placing (colors for TFT, flip'm for LCD):
//// AND creating extra left and right margins for large min and max touch areas
////....0  1     2       3   4   5   6   7   8  9       10  11                         12
////.flgs  clazz id      x   y   w   h  bc fcs  value   cb, ls (arr of labels ([[...],..]))
////       sli                ->x2->y2                    [0] fs tc    x  y  txt fmt
//ui.c( 3,"sli","s3"  , 30, 90,180, 26,  7,[7,0] ,33,  ca,  [[12, u,  70, 6,   u // formatter
//                                                           ,function(v,_,l){ // val,ui,labl
//         var s="", f=_.te.f; return (!(f===0 || f&184)) ? s : ((v<1)?"0":"") // 128+32+16+8
//                 +(s=_.mr(v*10)+"%").substr(0,s.length-2)+"."+s.substr(-2); } // val label
////                   _.mr=Math.round                        min max s o a flgs
//                                                           ,  0,100,3,0,1, 168
////                                                          left top right bot margin
//                                                           ,   9,  0,    8,  0]
////                                                     [>0] fs tc    x  y  txt fmt
//                                                          ,[12, 7, -25, 6,"%:0"] // frnt
//                                                          ,[12, 7, 182, 6,"100"] // back
//                                                          ]);

////....0  1     2       3   4   5   6   7   8  9       10  11                         12
////.flgs  clazz id      x   y   w   h  bc fcs  value   cb, ls (arr of labels ([[...],..]))
////       sli                ->x2->y2                    [0] fs tc    x  y  min max s flgs a
//ui.c( 3,"sli","s2"  , 30,175,180, 26,  7,[7,0] ,33,  ca,  [[12, u,  70, 6,   0,100,3, 168,1
////                                                      [0][13] format (function)
//                                                           ,function(v,_,l){ // val,ui,lab
//       var s="", f=_.te.f; return (!(f===0 || f&184)) ? s : ((v<1)?"0":"") // 128+32+16+8
//                   +(s=_.mr(v*10)+"%").substr(0,s.length-2)+"."+s.substr(-2); } ] // val
////                      _.mr=Math.round                [>0] fs tc    x  y  label text
//                                                          ,[12, 7, -25, 6, "%:0"] // frnt
//                                                          ,[12, 7, 182, 6, "100"] // back
//                                                          ]);


//---------- Keyboard / Keypad example ----------

// example requires uiExt module to be loaded
// get the keyboard and connect it to entry field - part of the UI definition
// {"uiKbd3x10B"}.connect(              ui,x,  y, w, h,bc,fc,sc,mx,my,fs,tc,tx,ty,cb) {
var kbd = require("uiKbd3x10B").connect(ui,0,210,24,24, 7, 7,-2,-1,-1,10 ,0, 4, 6,function(c){
 // keyboard callback key c has been tapped (touch and un-touch on same 'spot')
 log("kbd:",c);
 var s = ui.g("i1"); // get value of ui elt w/ id "i1" - string of input field i1
 if (c.length === 1) { // regular key / char was tapped (length === 1) ...
   ui.u("i1",s + "" + c); // ...append char and update ui elt value w/ new string
 } else if (c === "bs") { // else - special key - back space - was tapped ...
   if (s.length > 0) { ui.u("i1",s.substr(0,s.length - 1)); } // ...do backspace
 }
});

//---------- more buttons ----------
//
//    0  1     2       3   4   5   6   7   8  9       10
// flgs  clazz id      x   y   w   h  bc  fc  valObj  cb
//       btn                ->x2->y2
ui.c( 3,"btn","b3"  ,  3,287, 30, 30,  4, 4,"100clr4",cb);
ui.c( 3,"btn","b4"  , 37,287, 30, 30,  2, 2,"010clr2",cb);
ui.c( 3,"btn","b5"  , 71,287, 30, 30,  1, 1,"001clr1",cb);
ui.c( 3,"btn","b6"  ,105,287, 30, 30,  7, 7,"111clr7",cb);
ui.c( 3,"btn","b7"  ,139,287, 30, 30,  6, 6,"110clr6",cb);
ui.c( 3,"btn","b8"  ,173,287, 30, 30,  5, 5,"101clr5",cb);
ui.c( 3,"btn","b9"  ,207,287, 30, 30,  3, 3,"011clr3",cb);

//---------- extra drawings ----------
//
// function for extra / complementary drawings on initial and re-drawings
// of display,  such as:
var xDs = function(ui) { // e (2nd arg of no use on draw all)
  var d = ui.dsp; // display - Espruino Graphics object

  // - ticks for slider ui elt with id "s2c" (that has top margin to put them)
  var e = ui.e("s2") // get slider w/ id s2c as ui element e
    , m = e[11][0]   // to access margins 12,13,14/left,top,right
    , b = e[3]+2+m[12]     // start of slider bar (border, value 0)
    , l = e[4]+2+m[13]     // get e's top-1=y-1=lower y of tick (1 pixel above  bar)
    , w = e[5]-b-2-1-m[14] // get e's slider bar width (right border (-1?), val 100)
    , v = w/100  // pixels per 1% (100% = w pixels)
    , u = l-6    // upper y of tick, use all 4 margin pixels betw. bar & sel/focus line
    , t // tick pos
    ;
  ui.clr(e[7]); // same as slider bar's border color
  for (var i=0;i<=100;i+=10) {
    t = ui.mc(b + i * v) + 0.5; // weird +0.5, only in emulation / canvas
    d.drawLine(t,l,t,u+((i % 50)?3:0)); // short (2px) and long (4px) ticks
  }
// ...more extra drawings...
// ..
// .
};


// ----- pull in display w/ width / height and touch screen
var dsp,   dspMod   = require("ILI9341"), dspW=240, dspH=320
  , touch, touchMod = require("XPT2046")
  ;
// ----- run UI
function onInit() { // on power on/save() setting up all from scratch
  // setup and connect display, then ui and input (touch | phys btns)
  SPI2.setup({sck:B13, miso:B14, mosi:B15, baud: 1000000}); // display
  dsp = dspMod.connect(SPI2, B10, B1,  A4, function() { // using...
                  // ...spi,  dc, cs, rst, callback
    dsp.clear(); A1.set();  // display clear and turn back light on
    ui.connect(dsp)         // connect ui to dsp and display it
      .w(0,0,dspW-1,dspH-1) // wipe screen (rect) w/ default / bg color
      .d(u,xDs)             // display all elements and extra drawings
      .di = true;           // set display changes to immediate
    SPI1.setup({sck:A5, miso:A6, mosi:A7, baud: 2000000}); // touch inp
    touch = touchMod.connect(SPI1, A3,  A2, function(x,y){ ui.evt(x,y);}
                        // ...spi, cs, irq, callback, /. calibrated...
        , function(yr, xr, d) { // ...function, maps touch to x/y of dsp
            return [ Math.round(xr / -121.44          + 259.70685111989)
                   , Math.round(yr /   88.90357142857 + -19.78130398103)
                   ];
    } ).listen(); // for XPT2046 module (ADS7843: not needed/supported)
  } );
} // /onInit()

setTimeout(onInit,999); // for dev only, remove before upload for save()

This page is auto-generated from GitHub. If you see any mistakes or have suggestions, please let us know.