Doubling bitmap font size (big fonts)

Posted on
  • There might be a case where you need to take a small font in Espruino and double the size of it (maybe to save memory, maybe because it looks cool).

    There's nothing built in, but this bit of code might be handy and is reasonably fast:

    // txt=text string, px=>x position, py=>y position, h=height of font
    Graphics.prototype.drawStringDbl = (txt,px,py,h)=>{
      var g2 = Graphics.createArrayBuffer(128,h,2,{msb:true});
      // set your custom font here if you need to
      var w = g2.stringWidth(txt);
      var c = (w+3)>>2;
      g2.drawString(txt);
      var img = {width:w*2,height:1,transparent:0,buffer:new ArrayBuffer(c)};
      var a = new Uint8Array(img.buffer);
      for (var y=0;y<h;y++) {    
        a.set(new Uint8Array(g2.buffer,32*y,c));
        this.drawImage(img,px,py+y*2);
        this.drawImage(img,px,py+1+y*2);
      }
    };
    
    g.clear()
    g.drawStringDbl("Hello",0,0,5)
    g.flip()
    

    The built-in font is very small and upscaling it isn't ideal, but some of the fonts from http://www.espruino.com/Fonts upscale a lot better.

  • ...is this how Pixl is pixeld? ...or pickeld? ...on welcome screen... - LOL

  • Wow, thanks for sharing this function.

    Maybe you remember this one

  • I know - it's tempting to re-open - although at the moment it's a bit painful in Espruino because there are 3 different font drawing paths (vector, inbuilt bitmap, custom bitmap).

    The issue I had was I wanted a font that did the >=128 char codes for accented characters and stuff, but those get quite bit with 256 characters in them - and get extremely large when you want them 20px high :)

  • At the moment I use vector font and will try that new function in the next days and Post some pictures ;-)

  • Well not days but a year ;-)

    With the latest travis build it is now possible to used scaled bitmap fonts.

    Just give it a try using the Espruino Web IDE for Bangle.js.

    g.clear();
    var pos = {x:0,y:0};
    for (var i=1;i< 7;i++){ 
          pos.y += (i-1) *8 + 2;
          g.setFont("6x8",i).drawString("Scaled",pos.x,pos.y,true);
    }
    

    1 Attachment

    • Bildschirmfoto 2019-11-29 um 06.52.04.jpg
  • What about custom fonts, is there a possibility to scale them with using g.setFont("Name",scaleFactor)?

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

Doubling bitmap font size (big fonts)

Posted by Avatar for Gordon @Gordon

Actions