Fonts

Espruino has two main fonts built-in. A vector font, and a bitmap font.

These are part of Espruino's built-in Graphics library.

Vector Font

The Vector font is made out of polygons, and it can be resized to any size. This makes it great for displaying big text like numbers.

Note: Some non-official Espruino boards don't have vector font support built-in, so all you'll have available is the bitmap font (see below).

To use it, just use Graphics.setFontVector(size). Assuming you've set up Graphics as a variable called g you can do:

g.clear();
g.setFontVector(40);
g.drawString("Hello",0,0); // 40px high
g.setFontVector(60);
g.drawString("World",40,40); // 60px high

While the vector font is meant to look great at larger sizes, it doesn't scale down in size very well below about 20 pixels high, so there's the Bitmap Font.

Bitmap Font

The bitmap font is designed to be extremely small while still legible. This is the default font, but if you've already switched away from a Vector font, you can switch back to it with:

g.setFontBitmap();
g.drawString("Hello",0,0);

Font Modules

Often you may want a font that is bigger than the built-in font, but smaller than the vector font. For this, you can use one of the font modules.

Current modules are:

FontDennis8.png

Use these as follows:

// On initialisation...
require("Font8x12").add(Graphics);

// When drawing...
g.setFont8x12();
g.drawString("Hello World!",0,0);

For instance if using FontDennis8 (About Modules), use require("FontDennis8") and g.setFontDennis8();.

Custom Fonts

You can also create your own fonts. To do this, see g.setFontCustom(...)

You'll need a string containing a column-first, most significant bit first, 1 bit per pixel bitmap containing the font bitmap. Optionally you can also have another string containing the widths of each character.

Matt Brailsford has made an excellent online font converter specifically for creating fonts for Espruino. ... or for an example of how to create the data programmatically, take a look at the JS file used to make Espruino's font modules.

Font Widths

Often it's extremely useful to know the size of a piece of text - either so that you can position it centrally, or so that you can position other text at the end. For this, you can use g.stringWidth().

For example you may want to draw some small text right after some big text:

function bigThenSmall(big, small, x, y) {
  g.setFontVector(20);
  g.drawString(big, x, y);
  x += g.stringWidth(big);
  g.setFontBitmap();
  g.drawString(small, x, y);
}
bigThenSmall("Hello", " World", 0,0);

or you may just want to draw text centrally:

function central(text, y) {
  g.drawString(text, (g.getWidth() - g.stringWidth(text))/2, y);
}
central("Hello", 0);

Doubling Font Size

There might be a case where you need to take a small font and double the size of it (to save memory, or because it can look interesting).

There's nothing built in to Espruino, but this bit of code will render a font at double size 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 code works with a maximum text width of 128px, which means 256px in double-size font.

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