Espruino usually has multiple fonts built-in.
4x6
is built into all devices, it is 4px wide and 6px high.6x8
is built into devices like Bangle.js. It is a much more readable 6px wide, 8px high font that contains ISO Latin characters see Character SetsThese fonts are part of Espruino's built-in Graphics library.
You can use g.getFonts()
to list the available fonts.
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.setFont("Vector",height)
where height
is the height in pixels. Assuming you've set up Graphics as a variable called g
you can do:
g.clear();
g.setFont("Vector",40);
g.drawString("Hello",0,0); // 40px high
g.setFont("Vector", 60);
g.drawString("World",40,40); // 60px high
Note: g.setFontVector(height)
can be used, but is deprecated and g.setFont("Vector", 60);
is preferred.
The built-in vector font contains contains the ASCII characters 0-255 in the ISO8859-1 codepage (see Character Sets).
While the vector font is meant to look good at larger sizes, it doesn't scale down in size very well below about 20 pixels high, so there's the Bitmap Font.
Bitmap fonts are designed to be small while still legible. These are the default font, but if you've already switched away from a Vector font, you can switch back to it with:
g.setFont("4x6");
g.drawString("Hello",0,0);
// double the size of the font to 8x12 with:
g.setFont("4x6",2);
g.drawString("2x Hello",0,10);
If your device has the 6x8
font built in you can use g.setFont("6x8");
4x6
font contains the ASCII characters 0-127 (eg. English text):6x8
font contains ISO Latin characters see Character Sets:Note: g.setFontBitmap()
can be used, but is deprecated and g.setFont("Bitmap", scale);
is preferred.
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:
Font Map | Name | Description |
---|---|---|
require("Font4x4Numeric").add(Graphics); g.setFont("4x4Numeric"); |
Font4x4Numeric (About Modules) | Tiny 4x4 fixed width font with no space between characters (only digits 0-9) |
require("Font4x4").add(Graphics); g.setFont("4x4"); |
Font4x4 (About Modules) | Tiny 4x4 fixed width font by jose1711 |
require("Font4x5Numeric").add(Graphics); g.setFont("4x5Numeric"); |
Font4x5Numeric (About Modules) | 4x5 variable width font (only ./0123456789 ) |
require("Font4x5").add(Graphics); g.setFont("4x5"); |
Font4x5 (About Modules) | Tiny 4x5 fixed width font |
require("Font4x8Numeric").add(Graphics); g.setFont("4x8Numeric"); |
Font4x8Numeric (About Modules) | 4x8 fixed width font (only digits 0-9) |
require("Font5x7Numeric7Seg").add(Graphics); g.setFont("5x7Numeric7Seg"); |
Font5x7Numeric7Seg (About Modules) | 5x7 7 segment-style font (only -.0123456789:ABCDEF ) |
require("Font5x9Numeric7Seg").add(Graphics); g.setFont("5x9Numeric7Seg"); |
Font5x9Numeric7Seg (About Modules) | 5x9 7 segment-style font (only -.0123456789:ABCDEF ) |
require("Font7x11Numeric7Seg").add(Graphics); g.setFont("7x11Numeric7Seg"); |
Font7x11Numeric7Seg (About Modules) | 7x11 7 segment-style font (only -.0123456789:ABCDEF ) |
require("FontCopasetic40x58Numeric").add(Graphics); g.setFont("Copasetic40x58Numeric"); |
FontCopasetic40x58Numeric (About Modules) | 40x58 numeric font (only 0123456789 ) by abhigkar |
require("Font6x8").add(Graphics); g.setFont("6x8"); |
Font6x8 (About Modules) | Variable width 8px high font |
require("Font6x12").add(Graphics); g.setFont("6x12"); |
Font6x12 (About Modules) | Variable width 12px high font |
require("Font8x12").add(Graphics); g.setFont("8x12"); |
Font8x12 (About Modules) | Wider variable width 12px high font |
require("Font8x16").add(Graphics); g.setFont("8x16"); |
Font8x16 (About Modules) | Variable width 16px high font |
require("FontDennis8").add(Graphics); g.setFont("Dennis8"); |
FontDennis8 (About Modules) | An 8 pixel high font by Dennis Bemmann for non-english languages - see Character Sets |
require("FontCherry6x10").add(Graphics); g.setFont("Cherry6x10"); |
FontCherry6x10 (About Modules) | Variable width font with most characters for non-english languages - see Character Sets (originally from https://github.com/turquoise-hexagon/cherry) |
require("FontDylex7x13").add(Graphics); g.setFont("Dylex7x13"); |
FontDylex7x13 (About Modules) | Variable width font with most characters for non-english languages, see Character Sets (originally from https://github.com/dylex/fonts) |
require("FontHaxorNarrow7x17").add(Graphics); g.setFont("HaxorNarrow7x17"); |
FontHaxorNarrow7x17 (About Modules) | Variable width font with most characters for non-english languages, see Character Sets (originally from https://github.com/metan-ucw/fonts) |
require("FontSinclair").add(Graphics); g.setFont("Sinclair"); |
FontSinclair (About Modules) | Fixed width 8x8 Retro Sinclair font by Steve Anderson, Copyright Sinclair Research, non-commercial use approved. |
require("FontTeletext10x18Ascii").add(Graphics); g.setFont("Teletext10x18Ascii"); |
FontTeletext10x18Ascii (About Modules) | Fixed width Teletext / BBC Micro "MODE 7" font, 7-bit ASCII, with interpolated pixels as intended |
require("FontTeletext10x18Mode7").add(Graphics); g.setFont("Teletext10x18Mode7"); |
FontTeletext10x18Mode7 (About Modules) | Fixed width Teletext / BBC Micro "MODE 7" font, UK character set, with interpolated pixels as intended |
require("FontTeletext5x9Ascii").add(Graphics); g.setFont("Teletext5x9Ascii"); |
FontTeletext5x9Ascii (About Modules) | Fixed width Teletext / BBC Micro "MODE 7" font, 7-bit ASCII, with original structural pixels only |
require("FontTeletext5x9Mode7").add(Graphics); g.setFont("Teletext5x9Mode7"); |
FontTeletext5x9Mode7 (About Modules) | Fixed width Teletext / BBC Micro "MODE 7" font, UK character set, with original structural pixels only |
require("FontVGA8").add(Graphics); g.setFont("VGA8"); |
FontVGA8 (About Modules) | Fixed width 8x8 PC VGA-style font |
require("FontVGA16").add(Graphics); g.setFont("VGA16"); |
FontVGA16 (About Modules) | Fixed width 8x16 PC VGA-style font |
Use these as follows:
// On initialisation...
require("Font8x12").add(Graphics);
// When drawing...
g.setFont8x12();
// or use: g.setFont("8x12")
g.drawString("Hello World!",0,0);
// Or double-size!
g.setFont("8x12",2);
g.drawString("Hello World!",0,20);
For instance if using FontDennis8 (About Modules), use require("FontDennis8")
and g.setFontDennis8();
or g.setFont("Dennis8")
.
Espruino does not support unicode natively (and even if it did there wouldn't be enough memory for every character). Espruino's strings are 8 bits only, so while Espruino can store UTF-8, it doesn't interpret it in any useful way.
To deal with Latin languages, Espruino uses an 8 bit Latin codepage. This is effectively the following:
There are some minor differences between the two (eg. the Euro symbol at char code 128) but on the whole they are identical.
To convert text to ISO8859-1 on the desktop you can usually just use
String.charCodeAt(position)
. Since character codes returned are
Unicode, if the character code is between 0 and 255 it should map
directly to Espruino's font.
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.
We now have a Font Converter page that allows you to create fonts for Espruino based on a Web Font.
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.
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.setFont("Vector",20);
g.drawString(big, x, y);
x += g.stringWidth(big);
g.setFont("4x6");
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);
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).
As of Espruino 2v05 can now just use g.setFont(fontName, scaleFactor)
.
However in older Espruino versions you could use this (slower) code:
// 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.