# A Primitive for a Finished Look

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

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.

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

## 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

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

}

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

## 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
#include <SPI.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(){

}