Dangerous Prototypes Showcases a Neat Trick to Smoother Fonts for Microcontroller Projects
"This same technique could be used to extract 3 or more bits of color data," Lesnet says, but that "feels like reinventing the PNG."
Dangerous Prototypes' Ian Lesnet is continuing a pre-launch retrospective series of the design that has gone into the iCE40-based Bus Pirate Ultra, which began earlier this month, and has revealed his technique for getting high-quality anti-aliased fonts on a microcontroller.
Displaying text on an LCD connected to a microcontroller is, usually, pretty straightforward: A single-color, typically low-resolution, font is drawn and encoded into the program then used to turn the text into a bitmap image. The trouble is aliasing — those jaggy staircase-style edges you get on diagonals and curves. On a desktop, laptop, or smartphone, the font can have antialiasing applied on-the-fly to smooth those edges - but without so much computational power, that's not an option for a rapidly-changing display on a microcontroller.
"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," Lesnet explains. "To get a better look, we anti aliased an open source font and then extracted two bits per pixel of color data. The results use a four color lookup table to represent the background, text color, and two intermediate colors for anti aliased pixels.
"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 color) are used for those nice fuzzy edges."
Lesnet explains the process of creating the font, and the neat color background which goes with it, using Adobe's Photoshop image editing software to apply anti-aliasing to the font's characters and reduce it to a two-bit-per-pixel indexed color mode before loading it into the Bus Pirate Ultra firmware and using it to output text to the onboard LCD.
"The 2 bit font looks much better than a 1 bit font," Lesnet explains, describing the work as a "hack in progress" with some tweaks still outstanding. "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."
Lesnet's full write-up is available on the Dangerous Prototypes blog.