Arduino Adafruit GFX Rounded Rectangles

A Primitive for a Finished Look

Adafruit GFX Round Rectangle GuideThis guide introduces the use of the Adafruit GFX rounded rectangles.

Rounded rectangles are a pretty familiar sight on graphical interfaces.

They give a finished appearance by acting as borders or containers to information on that display.

If you’re not already familiar with graphic coordinates and 16 bit color,  you may wish to take a peek at the following articles.

 

Adafruit GFX Coordinates Explained

16 Bit RGB Color

Hardware Used For My Samples

The beauty of the Adafruit library is that it can be adapted to several commonly available TFT displays.

I use a low cost 1.44 inch display.

eBay   Amazon

You can read about how to configure this display HERE.

Rounded Rectangle Basics Using Adafruit GFX

A rounded rectangle is a rectangle with rounded corners.  In fact, drawing the rounded rectangle is almost exactly like drawing the standard rectangle.   You still specify the upper left hand corner and you still specify a width and a height.

The only difference is that you specify a radius that tells display how much the corners are rounded.

Adafruit GFX Round Rectangles

Adafruit GFX drawRoundRect()

What is Does

Draws a rounded rectangle onto your TFT display using the color you specify.

How to Use It

You will need to specify three points of the triangle and a color:

  • An X-Y coordinate ( a pair of integers) for the upper left hand corner our your rectangle.
  • An integer for the width
  • An integer or the height
  • A 16 bit Color that specifies the line color

Adafruit GFX drawRoundRect

drawRoundRect Sample Sketch

This very simple sketch starts by drawing an animated square using drawRoundRect that starts with a corner radius of zero.

The radius is then increased by 1 in the loop until the radius is equal to exactly half of the width (an height).

The result is that the square eventually becomes a circle.

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


// Pallete - Where you assign names to colors you like
#define BACKCOLOR 0x841F 
#define LINECOLOR 0xFFE0



#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(){
  
 for( int r = 0; r < 51; r++){
   tft.drawRoundRect(13, 13, 100, 100, r, LINECOLOR);
   delay(10);
   tft.drawRoundRect(13, 13, 100, 100, r, BACKCOLOR);
  }
  
}

Adafruit GFX fillRoundRect()

What is Does

Draws a rounded rectangle onto your TFT display that is filled with the color you specify.

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 our your rectangle.
  • An integer for the width
  • An integer or the height
  • A 16 bit Color that specifies the fill color for the rectangle.

Adafruit GFX fillRoundRect

fillRoundRect Sample Sketch

In this example we make a 3D button.   Its creating using a series of three rounded rectangles.

The entire sketch runs in setup and includes delays so that you can see the assembly of the button.

 

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


// Pallete - Where you assign names to colors you like
#define BACKCOLOR 0x841F 
#define FILL1 0xFFFF
#define FILL2 0x0000
#define FILL3 0xC618



#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.fillRoundRect(13, 13, 100, 100, 10, FILL1);
  delay(300);
  tft.fillRoundRect(16, 16, 97, 97, 10, FILL2);
  delay(300);
  tft.fillRoundRect(15, 15, 95, 95, 10, FILL3);
  
}

void loop(){

}