fontHeight not working in E.showMenu()

@TTBangler

I did some poking and playing around, and conclude: font selection and sizing works on PixlJS only... :\ .... that's also the device that introduced graphical menu in the first place...

Here is the PixlJS working code - of course not much help to you, but it shows how to deal with fonts (1st code block and 1st attachment). You still can use the different fonts in BangleJS, just not - as it looks to me - in menu (2nd code block and 2nd attachment). Note the .flip()s in lines 15 and 16: they are there because PixlJS has a buffered display and the 'flips' dump the buffer to the display. BangleJS has an unbuffered display and any operations on global graphics object g (available as gfx in menu item function) - which references the display (or the buffer of it depending on the driver) -are rendered immediately in the display. Looking at the BangleJS menu and the drawn string, you notice that the menu font is a 6x8 font scaled by 2 (double the pixles).

Why does fonts and size thereof not work in BangleJS menu? no clue... (have though some guesses / suspicions).

// menuFontPlay.js
require("Font6x8").add(Graphics);
require("Font8x12").add(Graphics);
require("Font8x16").add(Graphics);
var mainMenu = {
      "" : { "title" : "-- Main Menu --", 
             "fontHeight": 8, 
             "predraw" : function(gfx) {
                 gfx.setFont("6x8");
                 LED1.set();
               }
            },
      "On" : function() { LED1.set(); },
      "Off" : function() { LED1.reset(); },
      "6x8": function() { g.setFont("6x8")
                           .drawString("in 6x8",16,52).flip();  },
      "8x12": function() { g.setFont("8x12")
                            .drawString("in 8x12",64,48).flip();  }
};
function ini() {
  setWatch(function(){
      E.showMenu(mainMenu);
    }, BTN2, { repeat:true, edge: "rising" } );  
}

function onInit() {
  ini();
}

setTimeout(onInit,999);

// menuFontPlay2.js
require("Font6x8").add(Graphics);
require("Font8x12").add(Graphics);
require("Font8x16").add(Graphics);
var mainMenu = {
      "" : { "title" : "-- Main Menu --", 
             "fontHeight": 8, 
             "predraw" : function(gfx) {
                 gfx.setFont("6x8");
                 LED1.set();
               }
            },
      "On" : function() { LED1.set(); },
      "Off" : function() { LED1.reset(); },
      "6x8": function() { g.setFont("6x8").setColor(1,1,1)
                           .drawString("in 6x8",16,152);  },
      "8x12": function() { g.setFont("8x12").setColor(1,1,1)
                            .drawString("in 8x12",64,148);  }
};
function ini() {
  setWatch(function(){
      E.showMenu(mainMenu);
    }, BTN2, { repeat:true, edge: "rising" } );  
}

function onInit() {
  ini();
}

setTimeout(onInit,999);

NOTE: Also saw another difference in behavior of PixlJS and BangleJS: PixlJS keeps the buffer - as epxected - but BangleJS somehow erases the the space where the strings are drawn, because for pixle both can show, where in bangle only the last chosen shows.... (playing a bit more with BangleJS menu implementation: It seems to me that on menu item selection, screen is cleared, menu time function is executed, and menu is drawn again... can confirm that, because the real banlge is not as fast as the emulator and one can notice the clear screen, the drawstring, and then the menu... see 3rd attachment) ... @Gordon?

PS: Forgot to tell that both PixleJS and BangleJS have already built-in fonts. Therefore, some of my lines requiring fonts can be omitted.

3 Attachments