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."

ghalfacree
over 4 years ago Displays

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.

The Bus Pirate Ultra gets smooth fonts, thanks to a clever trick. (📷: Dangerous Prototypes)

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 experimented with a range of anti-aliasing methods. (📷: Dangerous Prototypes)

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.

ghalfacree

Freelance journalist, technical author, hacker, tinkerer, erstwhile sysadmin. For hire: freelance@halfacree.co.uk.

Latest Articles