Bus Pirate prototype “Ultra” v1b has an IPS LCD to show pinout labels, voltage levels, and other useful info. The background image was done in Photoshop and is stored in the 32Mbit flash chip on the board. Pin labels and voltage readings are drawn on top of the background image with a fixed-width font.
Most LCD fonts represent each pixel with a single bit (on or off). This is an efficient way to store a font, but the results look jagged and unprofessional. To get a better look, we anti aliased an open source font and then extracted two bits per pixel of color data. The results, shown above, use a four color lookup table to represent the background, text color, and two intermediate colors for anti aliased pixels.
Anti aliasing smooths the edges of each letter with a few pixels in intermediate colors. The bottom line of text is not processed at all, angular and circular edges look jagged and stepped. The top four lines of text use various styles of anti aliasing and the edges appear smoother on a small display.
Real-time anti aliasing on the MCU will take too many resources, so we made a pre-anti aliased font. Instead of storing each pixel as a single bit, we use 2bits of data per pixel and a four color lookup table to draw the characters. The resulting font takes twice as much space as a one bit font, but the extra bit (two extra colors) are used for those nice fuzzy edges.
The background image is designed for characters 14 pixels tall. It’s important to choose a fixed-width monospaced font so that each character has even spacing. We used DejaVu Mono, an open source fixed-width font that is used in Linux. At 14 pixels tall the characters are 10 pixels wide. Our characters will be 10×14 at 2 bits per pixel, that’s 35 bytes each.
In Photoshop we used View->New Guide Layout to create a 10×14 pixel grid, then added the typical range of ASCII characters. We skipped a box between each character so that any stray anti aliased pixels that fall outside the box don’t get included in a neighboring character. We tried several types of anti aliasing, and decided “Windows LCD” looks best on our small display.
At this point we have a grid of nicely anti aliased characters, but Photoshop is using dozens of different colored pixels to make those smooth edges. Before we process the character set we need to reduce that to something manageable. The simplest enhancement to a 1 bit font is to add an extra bit. 2 bits per pixel provides a four color pallet: text, background, and two shades of grey for the anti aliased pixels. We converted the characters to a four color pallet in Photoshop with Image->Mode->Indexed color, then assigned a four color custom pallet and saved the result as a 8bit color bitmap.
Bus Terminal has become a dumping ground for our utility scripts. A small addition loads the font image, crops each character, and outputs the font variables as HEX numbers. The font output goes into a font.h file to include in the Bus Pirate firmware.
lcd.c demonstrates how to use the 2 bit font. Our display uses 16 bits per pixel in 565RGB mode. font_lut16RGB contains our pallet of 4 16 bit color codes. We prefer to start with 24 bit color codes because they’re ubiquitous, so we enter our colors into font_lut24 and pre-calculate the 16 bit color values during initialization. Our color pallet includes the background image color, a white shade for the character, and two grey tones for the anti aliased pixels.
To write a character we loop through the 35 bytes of data, pulling out 2 bits at a time. Each two bit set is used to lookup a color code in the lookup table. The color code is sent to the display via SPI. A lot of data has to be moved to write a single character, 280 bytes each for this font.
This is an example of different anti aliasing methods (sharp/crisp/strong/smooth) using 2 bits/pixel. The line on the bottom has no anti aliasing. Without anti aliasing the bottom line is jagged and rough. The other lines add one bit (two indexed colors) for anti aliasing and look remarkably better, even without tweaking.
Taking it further
The 2 bit font looks much better than a 1 bit font. This same technique could be used to extract 3 or more bits of color data per pixel, but that eventually feels like reinventing the PNG.
This is very much a hack in progress. A few tweaks the pallet during conversion to indexed color that will probably make it look much nicer. Some of the characters in the set hang below the outline, so g, q and p are cut off. While Photoshop is good for extensive tweaking, it’s going to take a lot of effort to make font in different sizes.
It seems possible to render each character, anti alias it, and reduce it to indexed color using Qt libraries like QPaint and QPixelmap. The Photoshop side could be automated in Qt to export any system font in any size with minimal hassle.