Pixl.js Menu Font size

Posted on
  • Hi everybody,

    is there a way to enlarge the font size of the Pixl.menu() function/module? I found the option "fontHeight" : 10 (example), but this gives me an enlarged line height (free space between the letters in vertical dimension, like larger line spacing), but I'd like to get larger letters.
    Executing

    g.setFontVector(40);
    Pixl.menu(mainmenu);
    

    does not alter font size.
    Thanks for any help,

    Joost

  • ...looks like menu uses its own font size as defined inside every time it writes/displays... you may need to change it in the module itself... if it is accessible... and there may be other things in need of change... it all depends how it is built. Need to take a closer look myself.

  • Yeah, I was looking already for the Pixl.menu() code, but did not find a separate module, just the (seemingly slightl different) graphical_menu. Perhaps I'll have to adapt that one to include a larger font setting.

  • The Pixl.js menu code is basically a wrapper around graphical_menu that adds the icons and button support, so you should be able to use the functionality from there like fontHeight: http://www.espruino.com/graphical_menu

    However Pixl.menu tries to reset the font when it starts, so you have to use Pixl.menu, then set the font, then re-render - but otherwise it works:

    var mainmenu = {
      "" : {
        "title" : "-- Main Menu --",
        "fontHeight" : 12
      },
      "Backlight On" : function() { LED1.set(); },
      "Backlight Off" : function() { LED1.reset(); },
      "Exit" : function() { Pixl.menu(); },
    };
    
    require("Font8x12").add(Graphics);
    m=Pixl.menu(mainmenu);
    g.setFont8x12();
    m.draw();
    

    If I added a predraw option for graphical_menu then it'd be tidier though - you could just set the font in that...

    edit: just added predraw, so versions of Pixl.js after 1v99 will have that in and:

    var mainmenu = {
      "" : {
        "title" : "-- Main Menu --",
        "fontHeight" : 12,
        "predraw": function(g) {g.setFont8x12();}
      },
      "Backlight On" : function() { LED1.set(); },
      "Backlight Off" : function() { LED1.reset(); },
      "Exit" : function() { Pixl.menu(); },
    };
    require("Font8x12").add(Graphics);
    m=Pixl.menu(mainmenu);
    

    should work

  • This works marvellously, thank you!
    I am using "fontheight": 10 now for my project, which imho works pretty good on the Pixl display.

  • @Gordon, what about an optional font (spec) option for custom font in (sub)menu declaration? ...rather than an extra pre-draw()?

  • @allObjects I don't think it's that easy. You'd have to add some really nasty code like g["setFont"+fontName]() in there. Having the callback allows you to make other changes too, like modifying the colour.

  • Ic. ...I misunderstood predraw()... it is not drawing something, it is a hook just before drawing... and that is in deed more powerful, especially when every font is a method rather than a method w/ parameters...

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview
About

Pixl.js Menu Font size

Posted by Avatar for Joost @Joost

Actions