Arduino Adafruit GFX Drawing Characters

Drawing a Single Character with Adafruit GFX

There are two ways to put text onto a TFT display using the Adafruit GFX Library.   The first is to draw a single character and the second is to print to the screen in much the same way we do when we use the serial monitor.

This section focuses on drawing  single character.   Drawing a character is easy,  but getting predictable results requires an understanding of what the drawChar() command specifies.

Stuff you will want to know first

You can put this Adafruit command to use pretty quickly if you know a couple of things first:

How to Specify 16 bit Color

The Graphics Coordinate System

My Hardware Set Up

I’m used a low cost 1.44 inch TFT display as seen in THIS ARTICLE.   It can be found at any of the following locations:

eBay      Amazon

 

Important drawChar() Concepts

The Draw Character Space and Color

When we draw a character using the standard Adafruit GFX font with its default size of one,  we are telling the display to draw a character in a space on the display that is six pixels wide and eight pixels high.

The pixels that are painted with the character color are defined by the font.   Whatever is not painted with the pixel color is painted with the painted with the background color.

In the case of an uppercase character,  that almost always means that the right most column of pixels and the bottom most row of pixels will be painted with the background color.

In the case of some lowercase characters like ‘p’,  ‘q’, and ‘y’,   some of the bottom pixels may be painted.

It is important to understand if you choose to draw characters that are side by side or one above the other.  Otherwise, the readability of your display may be impaired.

Adafruit GFX Character Space

Specifying Character Size

The character size (which is always an integer) will change the character space.  As noted above,  specifying a character size of ‘1’ means that the character space will be ‘6’ pixels wide by eight pixels high.

Specify a character size of ‘2’ doubles the size to 12 pixels wide to 16 pixels high

Similarly a character size of ‘3’ will specify a character space of 28 by 24 pixels.

As you can imagine,  changing the size not only affects the character space,  but the thickness of character itself.   With a size of 2,  a character drawn using a vertical line, will now have a line thickness of 2 pixels.

Adafruit GFX drawChar()

What is Does

Draws a character on a TFT display

How to Use It

You will need to specify the following:

  • An X-Y coordinate ( a pair of integers) for the upper left hand corner of the space that your character will occupy.
  • A character to display.  Enclose it in single quotes
  • A 16 bit character color
  • A a 16 bit color for the background
  • An integer for the character size

Adafruit GFX drawChardrawChar() Sample Sketch

This is a basic “HELLO WORLD” that not only demonstrates drawChar(),  but reinforces the key concepts discussed with respect to character space and size and how to use them to establish spacing.

// Henry's Bench
//  Adafruit GFX drawChar
#include <SPI.h>
#include <Adafruit_GFX.h>
#include <TFT_ILI9163C.h>


// Pallete - Where you assign names to colors you like
#define BACKCOLOR 0x841F 
#define CHARCOL 0xFFFF
#define CHARBACK 0x0000

#define CS 10
#define DC 9

// Declare an instance of the ILI9163

TFT_ILI9163C tft = TFT_ILI9163C(CS, 8, DC);

void setup() {
  
  tft.begin();
  tft.fillScreen(BACKCOLOR);
  
  tft.drawChar(5, 10, 'H', CHARCOL, CHARBACK, 4);
  tft.drawChar(29, 10, 'E', CHARCOL, CHARBACK, 4);
  tft.drawChar(53, 10, 'L', CHARCOL, CHARBACK, 4);
  tft.drawChar(77, 10, 'L', CHARCOL, CHARBACK, 4);
  tft.drawChar(101, 10, 'O', CHARCOL, CHARBACK, 4);
  
  tft.drawChar(5, 42, 'W', CHARCOL, CHARBACK, 4);
  tft.drawChar(29, 42, 'O', CHARCOL, CHARBACK, 4);
  tft.drawChar(53, 42, 'R', CHARCOL, CHARBACK, 4);
  tft.drawChar(77, 42, 'L', CHARCOL, CHARBACK, 4);
  tft.drawChar(101, 42, 'D', CHARCOL, CHARBACK, 4);    
}

void loop(){


}