Arduino Adafruit GFX Pixels and Lines

What You Will Need To Know

Adafruit GFX Pixels and LinesThis user guide will show you how to put the Adafruit GFX TFT drawing routines to immediate use.   To use this reference,  you will need to:

UNDERSTAND THE COORDINATE SYSTEM –   In other words, you will need to know how to position the graphics on the screen.  Its a five minute read at best.

KNOW HOW TO SPECIFY 16 BIT COLOR –   Fortunately there are easy to use internet utilities for specifying color.   This article not only explains what 16 bit color is, but shows you how to specify it.  It’s easy.

The Set Up I Used

See this article to see the low cost TFT Display I used. The article has a link to the necessary libraries and a start up sketch to test your connections

The display I used cab be found at any of the following locations:

eBay Amazon

 

Adafruit GFX drawPixel()

What is Does

Causes a single dot (or pixel) on the display to show a specified color.

How to Use It

To use this command, you provide:

  • An integer representing the horizontal position of the pixel
  • An integer representing the vertical position of the pixel
  • A sixteen bit color code specifying the color

 

drawPixeldrawPixel() Sample Sketch

This example sketch draws a animated dot that moves across the screen horizontal.  Basically we:

  • ‘Light’ a pixel
  • Delay for a little bit
  • Turn the Pixel Off
  • Then light the pixel to it’s immediate right.

 

// Henry's Bench
//  Adafruit GFX drawPixel

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <TFT_ILI9163C.h>


// Pallete - Where you assign names to colors you like
#define BACKCOLOR 0x0000 // Black
#define PIXELCOLOR 0xFFFF  // White

#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);  
}

void loop(){ 
  
  // 128 represents screen width
  for(int x = 0; x < 128; x++){
    tft.drawPixel( x, 50, PIXELCOLOR);
    delay(50);  // increase to make the dot move slower.  Decrease to move faster
    tft.drawPixel(x,50,BACKCOLOR);    
  }   
}
  

Adafruit GFX drawLine()

What it Does

It draws a line of the specified color with a starting and ending point that you provide

How to Use It

To use this command, you provide:

  • A pair on integers that specify the x and y position of the line’s starting point.
  • A pair on integers that specify the x and y position of the line’s ending point.
  • A sixteen bit color code specifying the color of the line.

Adafruit GFX drawLine

drawLine() Sample Sketch

In this example,  we’re going to draw an animated line that always starts from same point.   It will have the appearance of rotating, while shortening and lengthening.   We will do this by varying the end point X value and keeping the end point Y value constant.

// Henry's Bench
//  Adafruit GFX drawLine

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <TFT_ILI9163C.h>


// Pallete - Where you assign names to colors you like
#define BACKCOLOR 0xFFFF // White
#define PIXELCOLOR 0x0000  // Black

#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);  
}

void loop(){ 
  
  // 128 represents screen width
  for(int x = 0; x < 128; x++){
    tft.drawLine( 63, 63, x, 10, PIXELCOLOR);
    delay(20);  // increase to make the lin move slower.  Decrease to move faster
    tft.drawLine( 63, 63, x, 10, BACKCOLOR);    
  }   
}
  

Adafruit GFX drawFastVLine()

What is Does

It draws a vertical line of the length and color you specify.    The key to using this routine is that this is a line that goes downward from your specified origin.   The benefit of this routine is that it is faster than drawLine.

The weakness is that you can not use it to draw diagonal lines.

How to Use It

To use this command, you provide:

  • Two integers representing the horizontal and vertical position of the origin
  • A line length
  • A 16 bit color

Adafruit GFX drawFastVLineb

 

drawFastVLine() Sample Sketch

This sketch simply draws an animated vertical line that is 30 pixels long.  It moves from the top center of the display to the bottom center of the display.

// Henry's Bench
//  Adafruit GFX drawFastVLine

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <TFT_ILI9163C.h>


// Pallete - Where you assign names to colors you like
#define BACKCOLOR 0xFFFF // White
#define PIXELCOLOR 0x0000  // Black

#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);  
}

void loop(){ 
  
  // 128 represents screen width
  for(int y = 0; y < 128; y++){
    tft.drawFastVLine( 63, y, 30, PIXELCOLOR);
    delay(5);  // increase to make the lin move slower.  Decrease to move faster
    tft.drawFastVLine( 63, y, 30, BACKCOLOR);    
  }   
}
  

Adafruit GFX drawFastHLine()

What is Does

It draws a horizontal line of the length and color you specify.    The key to using this routine is that this is a line that goes from left to right.  Like drawFastVLine(),  it is faster than drawLine().

How to Use It

To use this command, you insert:

  • Two integers representing the horizontal and vertical position of the origin
  • A line length
  • A 16 bit color

Adafruit GFX drawFastHLinedrawFastHLine() Sample Sketch

Draws a horizontal line that is 30 pixels long and moves in across the screen.

// Henry's Bench
//  Adafruit GFX drawFastHLine

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <TFT_ILI9163C.h>


// Pallete - Where you assign names to colors you like
#define BACKCOLOR 0xFFFF // White
#define PIXELCOLOR 0x0000  // Black

#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);  
}

void loop(){ 
  
  // 128 represents screen width
  for(int x = 0; x < 128; x++){
    tft.drawFastHLine( x, 63, 30, PIXELCOLOR);
    delay(5);  // increase to make the line move slower.  Decrease to move faster
    tft.drawFastHLine( x, 63, 30, BACKCOLOR);    
  }   
}