Arduino Adafruit GFX Rectangles

Things You Should Understand

This user guide will show you how to put the rectangle drawing Adafruit GFX TFT drawing routines to immediate use.    It may also give you some ideas on how you might be able to creatively use this otherwise boring shape.

Before starting,  you will want to:

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

BE ABLE 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.

My Hardware

In this this guide,  I used a low cost ILI9163 Display.   I show you how to configure one HERE.

These displays can be found at any of the following locations:

eBay    Amazon

Adafruit GFX drawRect()

What is Does

Draws a rectangle with a single line.

How to Use It

To use this command, you provide:

  • Two integers representing the horizontal and vertical position of the rectangle
  • An integer representing the width
  • An integer representing the height
  • A sixteen bit color code specifying the rectangle line color

Adafruit GFX RectanglesdrawRect Sample Sketch

Adafruit GFX Rectangle ExampleFor demonstration purposes this program runs entirely in setup().    Part of what is being shown here is that drawRect(),  when used creatively,  provides more than just the ability to draw boxes around stuff.

The sketch includes a series of rectangles drawn successively small to give the appearance of a rectangle with thick borders.  The sketch is paused so that you can actually view the rectangle.

Next, four small rectangles are drawn using the background color.  This gives the appearance of there being eight separate fill rectangles.   This Boolean approach to drawing allows you to create some pretty cool shapes.

 

// Henry's Bench
//  Adafruit GFX drawRect
#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 LINECOLOR1 0xEBD5  


#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);
  
  // Make a Big Thick Rectangle
  tft.drawRect(10,10, 108, 108, LINECOLOR1);
  tft.drawRect(11,11, 106, 106, LINECOLOR1);
  tft.drawRect(12,12, 104, 104, LINECOLOR1);
  tft.drawRect(13,13, 102, 102, LINECOLOR1);
  tft.drawRect(14,14, 100, 100, LINECOLOR1);
  tft.drawRect(15,15, 98, 98, LINECOLOR1);
  tft.drawRect(16,16, 96, 96, LINECOLOR1);
  tft.drawRect(17,17, 94, 94, LINECOLOR1);
  
  // delay so you have time to view it
  delay(1000);
  
  // Create some embellishments on our Rectangle
  
  tft.drawRect(10,10,8,8,BACKCOLOR);
  tft.drawRect( 110,10,8,8, BACKCOLOR);
  tft.drawRect(10,110,8,8,BACKCOLOR);
  tft.drawRect( 110,110,8,8, BACKCOLOR);  
}

void loop(){   
     
}

Adafruit GFX fillRect()

What is Does

This is almost identical to drawRect().  The difference is the rectangle is filled with the specified color.

How to Use It

This command requires:

  • Two integers representing the horizontal and vertical position of the rectangle
  • An integer representing the width
  • An integer representing the height
  • A sixteen bit color code specifying the rectangle color

Adafruit GFX Filled Rectangleb

 

fillRect() Sample Sketch

Adafruit GFX Filled Rectangle ExampleIn this example, we’re going to ‘layer’ squares to create a ‘drop’ shadow that makes it feel as though the blue rectangle is lifting off the page.

The first thing we do is draw a filled black square.  This will be our shadow.  I chose black, but a smokey gray wouldn’t worked just as well.

The next thing we will do is add a blue square of the same size that is offset ten pixels up and to the left.

// Henry's Bench
//  Adafruit GFX fillRect
#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 FILLCOLOR1 0x001F // BLUE
#define FILLCOLOR2 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);
  
  // Make a Filled Rectangle
  tft.fillRect(30,30, 88, 88, FILLCOLOR2);
  delay(500);
  tft.fillRect(20,20, 88, 88, FILLCOLOR1);
  
  
}

void loop(){   
     
}