GIGA Display Shield GFX Guide

The GIGA Display Shield is compatible with the Adafruit_GFX graphics core library.

To access it, we can use a layer library called Arduino_GigaDisplay_GFX designed specifically for the shield. In this guide, we will get started with some of the essential methods of the library, that will allow us to e.g. print values, text, draw shapes.

Goals

In this guide we will cover:

• Learn how to draw and print to the display.
• How to draw basic shapes (circles, rectangles etc).
• How to update values on the screen.

Hardware & Software Needed

• Arduino GIGA R1 WiFi
• Arduino GIGA Display Shield
• Arduino IDE

Installation

To install the library, open the Arduino IDE and search for the Arduino_GigaDisplay_GFX library in the Library Manager.

You can also manually download the library in the official GitHub repository. For any issues with the libraries, please report them here as well.

• Arduino_GigaDisplay_GFX

Basic Example

The Arduino_GigaDisplay_GFX is a layer library for the Adafruit_GFX library that's been around for some years now. The full documentation for this library can be found here.

The library provides graphic functions for drawing individual pixels, rectangles, circles, lines and other geometrical shapes. It also provides support for printing numeric values & strings directly on the display.

To use the library, we simply need to create a display object, initialize the library, change something and print it on the display. See this minimal example below:

Copy
1#include "Arduino_GigaDisplay_GFX.h"
2
3GigaDisplay_GFX display; // create the object
4
5void setup() {
6  display.begin(); //init library
7  
8  display.setCursor(10,10); //x,y
9  display.setTextSize(5); //adjust text size
10  display.print("Hello World!"); //print
11}
12void loop(){}

The above example will simply print

Hello World!

x

y

Methods Overview

There are several methods available. In this section, we will list out a number of useful ones. To see the full list, check out Adafruit's documentation of this library in this page.

Coordinates

The coordinates in the GFX library are easy to work with. Most methods have the coordinates as parameters (x,y). To set the cursor (position) on the display, you can utilize the following method:

• setCursor(x, y)

  - set the cursor on the display.

Color

To change color of text, pixels, background etc, you can first define the color using the RGB565 format:

• #define YELLOW 0xFFE0

Then use it anywhere in the code for coloring, such as:

• fillScreen(YELLOW)

  - sets the background color for the display.

• drawPixel(x, y, YELLOW)

  - color a single pixel.

• setTextColor(YELLOW)

  - color the text.

• fillRect(x, y, width, height, YELLOW)

  color a rectangle.

Read more about the color format and generate the colors your want at the following page:

• RGB Color Picker (external link)

Text

To display text on the screen, use the following methods:

• setTextSize(size)

  - set the size for the text. Any number between

  1

  (very small) to

  80

  (one digit covers the screen) works on this display.

• setTextColor(color,background_color)

  - sets color and optionally background color. This is useful when overwriting an existing number (like printing sensor values continuously).

• print(content)

  print something to the screen.

A minimal example for using text methods can be found below:

Copy
1#include "Arduino_GigaDisplay_GFX.h"
2
3GigaDisplay_GFX display; // create the object
4
5#define BLACK 0x0000
6
7void setup() {
8  display.begin();
9  display.fillScreen(BLACK);
10  display.setCursor(10,10); //x,y
11  display.setTextSize(5); //adjust text size
12  display.print("Hello World!"); //print
13}
14void loop(){}

Pixels & Shapes

To draw pixels and shapes, use the following methods.

• drawPixel(x, y, color)

  - draws a pixel at the coordinates specified.

• drawRect(x, y, height, width, color)

  - draws a rectangle at the coordinates with the height and width & color specified.

• drawRoundRect(x, y, height, width, border-radius, color)

  - rounded rectangle with the border-radius specified.

• drawTriangle(x0, y0, x1, y1, x2, y2, color)

  - draws a triangle at the coordinates specified.

• drawCircle(x, y, radius, color)

  - draws a circle with specified radius.

The above methods will draw the desired shape's outline, but it will not fill it. To do so, simply use

fillRect()

fillTriangle()

A minimal example for drawing geometrical shapes can be seen below:

Copy
1#include "Arduino_GigaDisplay_GFX.h"
2
3GigaDisplay_GFX display;
4
5#define WHITE 0xffff
6#define BLACK 0x0000
7
8void setup() {
9  display.begin();
10  display.fillScreen(WHITE);
11  display.drawTriangle(100, 200, 300, 400, 300, 600, BLACK);
12  display.drawCircle(100, 100, 50, BLACK);
13  display.drawRect(10, 650, 300, 80, BLACK);
14  display.drawRoundRect(300, 50, 100, 100, 30, BLACK);
15}
16void loop() {}

GFX & Touch Example

The GFX library can be used together with the Arduino_GigaDisplay_Touch library. The below example demonstrates how to read a touch point and trigger a function, using a simple if statement.

The example below is very minimal, and it simply switches on and off a boolean whenever the screen is touched. But it is a good example to get started with if you plan to build your own UI with a touch interface.

Copy
1#include "Arduino_GigaDisplay_GFX.h"
2#include "Arduino_GigaDisplayTouch.h"
3
4Arduino_GigaDisplayTouch touchDetector;
5GigaDisplay_GFX display;
6
7#define WHITE 0xffff
8#define BLACK 0x0000
9
10#define screen_size_x 480
11#define screen_size_y 800
12
13int touch_x;
14int touch_y;
15
16//increase or decrease the sensitivity of the touch.
17int trigger_sensitivity = 5;
18bool switch_1;
19int counter;
20
21void setup() {
22  // put your setup code here, to run once:
23  Serial.begin(9600);
24  display.begin();
25
26  if (touchDetector.begin()) {
27    Serial.print("Touch controller init - OK");
28  } else {
29    Serial.print("Touch controller init - FAILED");
30    while (1)
31      ;
32  }
33}
34
35void loop() {
36  uint8_t contacts;
37  GDTpoint_t points[5];
38  contacts = touchDetector.getTouchPoints(points);
39  
40  if (contacts > 0) {
41    Serial.print("Contacts: ");
42    Serial.println(contacts);
43
44    counter++;
45
46    //record the x,y coordinates 
47    for (uint8_t i = 0; i < contacts; i++) {
48      touch_x = points[i].x;
49      touch_y = points[i].y;
50    }
51
52    //as the display is 480x800, any time you touch the screen it will trigger
53    //the trigger sensitivity is set to "5". 
54    if (touch_x < screen_size_x && touch_y < screen_size_y && counter > trigger_sensitivity) {
55      switch_1 = !switch_1;
56      Serial.println("switched");
57      changeSwitch();
58      delay(250);
59    }
60  }
61}
62
63void changeSwitch() {
64  if (switch_1) {
65    display.fillScreen(BLACK);
66    display.setTextColor(WHITE);
67  } else {
68    display.fillScreen(WHITE);
69    display.setTextColor(BLACK);
70  }
71  display.setCursor(50, screen_size_y/2);
72  display.setTextSize(5);
73  display.print("Switched");
74  counter = 0;
75}

Learn more about the GIGA Display's touch interface in the Touch Interface Guide.

Summary

In this guide we have covered some basic methods of the GFX library, such as writing text, drawing rectangles and changing colors & text sizes. The GFX library is easy to get started with for beginners, but can also be used to build sophisticated and powerful UIs with advanced usage.

For more tutorials, visit the documentation page for GIGA Display Shield.