Doubling bitmap font size (big fonts)

[gfwilliams]

Posted at 2018-11-01 by @gfwilliams

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.

[espruino-discuss]

Posted at 2018-11-02 by @allObjects

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

[espruino-discuss]

Posted at 2018-11-03 by @MaBecker

Wow, thanks for sharing this function.

Maybe you remember this one

[gfwilliams]

Posted at 2018-11-04 by @gfwilliams

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 :)

[espruino-discuss]

Posted at 2018-11-04 by @MaBecker

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

[espruino-discuss]

Posted at 2019-11-29 by @MaBecker

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);
}

---

Attachments:

• Bildschirmfoto 2019-11-29 um 06.52.04.jpg

[espruino-discuss]

Posted at 2020-02-17 by @MaBecker

What about custom fonts, is there a possibility to scale them with using g.setFont("Name",scaleFactor)?

[gfwilliams]

Posted at 2020-02-24 by @gfwilliams

Not yet, but soon :) http://forum.espruino.com/conversations/344013/