Download PDF Parts List View on YouTube Download Code

Today, we will take an in-depth look at the new Arduino GIGA Display Shield. This useful peripheral adds a touchscreen GUI to your Arduino GIGA board, along with a microphone, IMU, and a handy connection for a video camera.



We have already looked at the Arduino GIGA board, an incredibly powerful microcontroller in the same format as the classic Arduino Mega 2560.  Today we will look at an upgrade for the GIGA, a “shield” that is actually more of a “reverse shield” (this will make more sense as you read on, trust me!).

This new board will allow you to construct great-looking user interfaces for your projects. It makes a powerful combination when added to the GIGA’s already impressive list of features.

Arduino GIGA Display Shield

The GIGA Display Shield is a 480 x 800 touchscreen display that snaps onto the back of the Arduino GIGA.

There is a silk-screened outline on the back of the display board to assist you in orienting the GIGA correctly. This is a different mounting arrangement from that used by “regular” shields that mount on the female Dupont connectors on the top of the board.  You can still mount conventional shields on the board with the display installed.


In addition to the display, the GIGA Display Shield also has an onboard MEMS microphone. This allows for the construction of point-of-entry terminals and audio analysis tools.

The board also has an IMU capable of sensing motion and acceleration. You can use this to adjust display orientation or even to build a game.

An onboard RGB LED, as is an extension for the SPI camera connector, is also included. The latter is compatible with a number of Arducam camera modules.

Getting Started

Let’s get started with your new display! 

Before starting working with the display, we must ensure that our system is set up correctly for the Arduino GIGA WiFi boards. We must also install several libraries to utilize all the display features fully.

Setting up the Arduino GIGA WiFi

We have covered working with the Arduino GIGA WiFi board in the video and article dedicated to it, so I’ll refer you to that if you want some additional information.

Otherwise, installing the Arduino GIGA board manager is the only step you need to take. Search for “GIGA” in the Arduino IDE Boards Manager window and install the resulting file.  The board manager will also install many example sketches, a few of which we will use later.

If you are on Linux, you may encounter an error when uploading to the GIGA board. This known bug can be resolved by creating a simple text file.  You will find all the details in the previous GIGA article.

Installing the Libraries

In addition to the files installed by the board manager, we will need to install some libraries. Lots of libraries. Nine, to be exact!

But don’t worry, it’s not as much work as you might expect, as one of the libraries will also install seven more. So, you only need to perform two installations if you execute them correctly. 

All the libraries can be installed using the Library Manager in the Arduino IDE.  Open it up and search for the “Arduino_GigaDisplay” library.  You will get a list of items; install the first one.

You will also be prompted to install some other libraries upon which the Arduino_GigaDisplay” library is dependent.   In total, you will be installing the following libraries:

  • Arduino_GigaDisplay
  • Adafruit BusIO
  • Adafruit GFX Library
  • ArduinoGraphics
  • Arduino_BMI270_BMM150
  • Arduino_GigaDisplayTouch
  • Arduino_GigaDisplay_GFX
  • lvgl

Note that you may already have some of these libraries installed in your IDE; only the missing ones will be installed. Ensure that any existing installed libraries are updated to the most recent version.

Once you have everything installed, we can start testing the display shield!

Testing the IMU

The Bosch BMI270 6 Axis IMU (Inertial Measurement Unit) is well suited for use on the GIGA display, as it can provide precise acceleration and angular rate measurement. It also has on-chip motion-triggered interrupt features.

We can use the IMU to control the display orientation to behave like a phone or tablet.  It could also be very useful if you want to design a game or create an interactive controller.

To measure acceleration, we can use the Arduino_BMI270_BMM150 library. It provides a very simple method of getting acceleration data for all three of the axis measurements.

Here is a sketch that will provide this data:

We start the sketch by including the library and then defining an IMU object. Note that we use the Wire1 interface, the second I2C bus.

In Setup, we start the Serial Monitor and also start the IMU.

In the Loop, we simply define variables for the X, Y, and Z axis and then read and print the values.

Load the sketch and move the display around while observing the serial monitor readings. You should see that they correlate to the movements you are making.

Working with the RGB LED

The display module also has a surface-mount RGB LED, which can be controlled through the Arduino_GigaDisplay library.

Here is a sketch that demonstrates its operation:

This is a very simple sketch that uses the Arduino_GigaDisplay library. We include the library and then define an RGB object.  In Setup, we simply initialize that object.

The Loop is where we manipulate the three segments of the display, and it is pretty self-explanatory.

We can turn the display on and pass it RGB values to select the color.  Or we can turn the display off.

Otherwise, the sketch is really just like an advanced “blink” sketch, turning the LED on and off every second in a different color.

The RGB LED would make a good status display for your project.

Microphone with Level Display

Another peripheral included with the Arduino GIGA Display Module is a microphone.  This is an MP34DT06JTR MEMS microphone module, an omnidirectional capacitive-sensing device with low noise and high sensitivity.

The output of the microphone is PDM or Pulse Density Modulation.   Arduino has a PDM Library for working with devices like this.

Until now, we have demonstrated the GIGA Display components by showing their output on the serial monitor. We could continue this trend with the microphone, displaying its output level on the monitor, but that’s a bit boring.  And as we have a display to evaluate, why not use it instead of the serial monitor?

The following sketch, using code provided by Arduino, will do the trick. It will display the microphone output level on a bargraph on the display.

The code includes the PDM Library for working with digital audio and the Arduino H7 video library. The LVGL library is also included to provide the graphics (we will learn more about LVGL in a bit).

This is filled by a function that sets the slider value.

We then define some audio parameters; then we move to the Setup.

In Setup, we initialize the display. We then set the PDM object to have a callback function, which will be called every time that audio is received. After that, we start the PDM.

We also set up both the bargraph and the animation for the bar.

In the Loop, we check whether any samples have been read. If they have, we create an array with the samples. We then read that array, one element at a time, and use the value to operate the bargraph.

We then clear the samples, add a short delay, and wait again.

Note that the final line in the Loop, a call to the lv_timer_handler, is required for LVGL. We will see more of that later.

The onPDMData function is the callback handler, called whenever data is available. It reads the data into a sample buffer, 2 bytes at a time, as it is 16-bit.

You’ll see a bargraph on the display when you load up the sketch. Make some noise, and you should see the bar move. You can adjust the divisor on line 79 (current value is 10) to increase or decrease the sensitivity.

Using the Display for Graphics

So, now that we have looked at the included peripherals, it’s time to focus on the display itself.  And by that, I mean we need to learn how to place graphics, images, and text onto the screen.

There are three graphics libraries that you can use to work with the display:

  • ArduinoGraphics Library
  • GFX Library
  • LVGL Library & Framework

Graphics 1 – ArduinoGraphics Library

The ArduinoGraphics library allows you to draw and write on the display with “graphical primitives,” basic shapes like circles and rectangles.

This library has syntax similar to the Processing 3 GUI design tool.

ArduinoGraphics Simple Demo

To illustrate just how easy it is to use the ArduinoGraphics library, I have put together a very simple demonstration.  Here is the sketch:

The sketch starts by including the two libraries we need. The Arduino_H7_Video library is the library that drives the GIGA Display.

We then create an object to represent the display.

From here on, everything is done in the Setup routine.  We start by initializing the display and then begin our drawing.

After that, we draw a rectangle that fits the entire display; this is a method of changing the background color.

The line “Display.fill(255, 0, 0)” sets the color. You can change the RGB values if you want a different color. Currently, it is set to red.   The Display.rect command draws a rectangle with bottom left coordinates at 0,0, and the size of the rectangle which is equal to the display screen size.

Next is a circle. All that is required here is to fill the display with the desired color, which, in this case, is blue.  We then use a to create our circle, specifying the diameter and the location of the circle’s center. 

After that, we repeat the circle process, this time with a 300px green circle at coordinates 500,300.

Finally, we finish drawing with Display.endDraw().  This will complete the job and print on the display.

That finishes the program; there is nothing in the Loop.

Here is what the final result is.

Displaying Images with ArduinoGraphics

Another thing we can do with the ArduinoGraphics library is to display images.

We will use the ArduinoLogo example installed when you added the GIGA Boards Manager.  You will find it at this location:

File/Examples/Examples for Arduino Giga R1/Arduino_H7_Video/ArduinoLogo

The sketch is pretty simple; it loads the same two libraries we used earlier.  It also includes the “img_arduinologo.h” file; this is the actual Arduino logo graphic converted to a C file.

The file incbin.h is also included but isn’t actually used to display the Arduino Logo. It’s used when displaying binary graphics files, which we will do in a moment when we substitute the Arduino logo for an image of our own.

Once again, we set up a display object. We also set up an image object, pointing to the “img_arduinologo.h” file.

In Setup, the display is started, and we begin the drawing.  We then use the Display.image command to display the image, providing the image, its width and height, and the position we want to place it.

We finish the same way we did before, with Display.endDraw().

The results are shown here:

Displaying Your Own Image

Displaying the Arduino logo is fine, but I’m sure you would rather display your own images. The sketch we just used can be modified to do that.  You’ll note some instructions in the remarks at the beginning of the code.

Before you run the next sketch, you must prepare your image. It will need to be correctly sized to fit onto the display, and it will also have to be converted into a binary format.

You can use any photo editor to resize the image if it’s necessary; the screen is 480×800.  Make note of the actual image size, as you will need that in the code.

To convert it to a binary format, you can use the LVGL Graphics Converter. Although it is provided for use with LVGL, it can also be used to convert graphics for other libraries.

Use the graphics converter as follows:

  • Use the Browse button to select your BMP, JPG, PNG, or SVG graphic file.
  • Leave the Color Format at CF_TRUE_COLOR.
  • Change the Output Format to Binary RGB565.
  • Click the Convert button. You’ll get an image to download to your local drive.

The resulting file will be a binary file with a “.bin” extension. Ensure you note where it has been saved, as you’ll need the file path when you create the code.

The ArduinoLogo that we just looked at has instructions for using your own file. Here is a sketch written using those examples:

Note that you will still need the cabin.h file; however, you no longer need the Arduino logo file.

The method of calling the binary file is a bit different from the previous example; it’s actually very simple.  Here is what you need to change to use it with your graphic file:

  • On line 24, you must change the file’s location to your downloaded file location.
  • On line 32, change the size dimensions of the image to match your image.

You can also change the coordinates used by Display.image to move the image away from the display center.

If all is well, you should be rewarded with a display of your custom image!

Graphics 2 – GFX Library

Another method of manipulating the display is to use the popular GFX Graphics Library.  This graphics library by Adafruit is a highly popular and versatile tool for creating graphical interfaces and displays for microcontroller-based projects.

Initially, the GFX Graphics Library only supported Adafruit displays; however, it has now been expanded to work with a wide range of displays from multiple manufacturers, including OLEDs, TFTs, and LCDs.

Running the GFX Graphics Demo

A great way to become familiar with the GFX Graphics Library is to run the demo sketch. This is a standard demonstration that cycles the display through a number of shapes and functions. We have used this sketch with other displays, so it’s a great way to see how to adapt other GFX codes to the Arduino GIGA Display Shield.

You can grab the sketch from the following location:

File/Examples/Examples From Custom Libraries/Arduino_GigaDisplay_GFX/Demo

The sketch uses the Arduino_GigaDisplay_GFX Library.

We start by defining an object to represent the display, followed by a number of color definitions. 

Then we move to Setup. Here, we start the serial monitor and the display; then, we call a number of functions. These functions, defined at the bottom of the sketch, cycle the display through various patterns and sequences. 

You can examine each function to see the commands used to create the display pattern.

After running through Setup, we finish in the Loop. Here, we display some test text (Vogon poetry from The Hitchhiker’s Guide to the Galaxy) in different fonts. The display will cycle through this text in different orientations until it is reset or powered off.

Load it up and watch it work. Then, try modifying the code and observe the results.

You can learn more about working with this library in the Arduino GIGA Display Shield GFX Guide.

Graphics 3 – LVGL

The Light and Versatile Graphics Library, or LVGL, is more than just a library. This is a complete graphics framework that can be used to create some very sophisticated displays.

LVGL has over 30 built-in widgets, a layout manager, and a style system. It also integrates with SquareLine Studio, a professional GUI design application with a drag-and-drop editor. 


Once again, we will run a sketch demonstrating this graphics library’s capabilities. This demo produces an interface screen divided into quadrants. Each section has different controls – an image, a working slider, some buttons and checkboxes, and a bargraph.

You’ll find the demonstration sketch at this location in the Arduino IDE:

File/Examples/Examples for Arduino Giga R1/Arduino_H7_Video/LVGLDemo

The sketch makes use of three libraries:

  • Arduino_H7_Video  – The library for the GIGA Display Shield.
  • Arduino_GigaDisplayTouch – The touchscreen library
  • lvgl – The LVGL Library

We start by defining both the display and the touch detector. 

The next bit of code is a callback function, called whenever the button control is clicked.   The function that follows sets the value of the slider control.

We then move into Setup, where most of the code is executed.  After starting the serial monitor, display and touch detector, we define a container with a 2×2 grid. This is the container for our graphics display.

Next, we specify the objects that go into each segment of the display grid.

  • Grid 0,0 – An Arduino logo image is displayed here.
  • Grid 1,0 – A couple of checkboxes, some radio buttons, and a pushbutton.
  • Grid 0,1 – A working slider control.
  • Grid 1,1 – An animated bargraph.

You can examine the LVGL code statements to see how these objects are created.

The Loop only contains one function, but it is an important one. The call to lv_timer_handler() is performed periodically to keep the graphics engine functioning. You will need to include this in any code you write that uses e LVGL.

Load the code to the GIGA and observe the display. You should have a professional looking interface with working controls.


We can combine the display with the IMU readings to perform special effects. In this example, we will use the IMU to keep the display level, even when it is tilted.

You’ll find this example in the Arduino IDE at File/Examples/Examples From Custom Libraries/Arduino_GigaDisplay/lvgl/imu_orientation

The sketch includes a second file, the Arduino logo image we are displaying.

Three libraries are used, including the library for the IMU.  After including the libraries, we create objects to represent the display, IMU, and the image itself.

In Setup, we start the serial monitor, display, and IMU. We then define the image and set its position and orientation.

In the Loop, we get the IMU values and determine the rotation value for the x, y, and z-axis.   We then use those values to calculate the correct image orientation.

Once again, the lv_timer_handler() is called to keep the LVGL graphics operational.

Load the sketch to the Arduino GIGA and observe the image. Now try rotating the display. The image should track the rotation and steady itself.

This technique has applications for both interfaces and games.

Using the Touch Screen

The Arduino GIGA Display Shield employs a Goodix GT911 capacitive touch controller.  This provides up to five concurrent touchpoints, allowing for advanced controls such as gestures.

The touch screen can operate in either a polled or interrupt-driven mode. We will look at code samples for each mode.


Touch Screen – Polling Mode

In polling mode, we continuously check the touch screen to see if it has been touched. If it has, we grab up to five sets of coordinates.

Open the sample code at File/Examples/Examples From Custom Libraries/Arduino_GigaDisplayTouch/Touch_Polling

As you can see, this is pretty straightforward code.  It uses the Arduino_GigaDisplayTouch library, which is used to create an object representing the touch detector. 

In Setup, we start the serial monitor and detector. 

In the Loop, we define an array to represent up to five contact coordinates.  Then, we simply use the touchDetector.getTouchPoints function to populate that array if there are indeed points to record.

After that, we cycle through the array, displaying the coordinates on the serial monitor.

Load the sketch and give it a try. See what happens when you press more than one point.

Touch Screen – Interrupt Mode

Another method of using the touch screen is interrupt mode. In this mode, an interrupt is generated every time the screen is touched.

This method has many advantages over polling mode, especially in a large sketch where polling could produce erratic results.

Our example is located at File/Examples/Examples From Custom Libraries/Arduino_GigaDisplayTouch/Touch_IRQ 

The sketch starts off identically to the polling example.  One difference is that there is a function defined as a “callback function.” This is called every time that a touch has been detected. In the callback, you will grab the coordinates to be used in your code. 

The gigaTouchHandler function is our callback. In this demo, it just prints the number of touchpoints plus the coordinates of the first one.

Since the handler contains the bulk of the code, Setup is pretty simple. We start the serial monitor and touch display, then set the callback function.  And there is no code in the Loop at all!

Load the sketch and go through the same exercise you did for the last sketch. The results will be similar.  Note that only the first coordinate is printed when multiple points are touched; this is done to reduce the time the sketch spends inside the callback function.

Using the Video Camera

The Arduino GIGA Display Shield has an extension for the existing Arducam-compatible camera connector.  This allows you to mount a camera facing the display operator.

There are currently four Arducam cameras that can be used with the display:





To demonstrate the camera, we can use the sketch found here:

File/Examples/Examples from Custom Libraries/Arduino_GigaDisplay/camera/display_camera

The sketch is written for the Arducam HM01B0 camera but can be modified to use one of the other three cameras.   To modify the sketch for a different camera, change line 8 as follows:

  • HM01B0: #define ARDUCAM_CAMERA_HM01B0
  • HM0360: #define ARDUCAM_CAMERA_HM0360
  • GC2145: #define ARDUCAM_CAMERA_GC2145
  • OV7675: #define ARDUCAM_CAMERA_OV767x

The code creates a buffer and dumps frames of video into the buffer. These are then moved to a second display buffer and then shown on the display.

When I tried the sketch with an Arducam OV7675 it worked, but the video I displayed was upside down and mirror imaged (I can see why the mirroring would be desirable, but the upside down is an error).  I tried two cameras with the same results.

Nonetheless, the code does work and illustrates how you can incorporate a camera into your projects that use the Arduino GIGA Display Shield.


The Arduino GIGA Display Shield is undoubtedly a high-performance display. When coupled with the powerful Arduino GIGA R1, it can be used to create some very sophisticated designs.   Using LVGL, you can easily create a GUI rivaling commercial devices.

The downside of this display is, of course, its price. While it isn’t too expensive considering its features, it can only be used with the relatively expensive Arduino GIGA R1.  Similar LCD solutions that use the Mega 2560 are much less expensive, but they are also not as powerful.

If you need a high-performance display and can justify the price tag, then the Arduino GIGA Display Shield certainty fits the bill. It’s easy to use and even leaves the standard Arduino GIGA connectors available for additional shields.

All in all, it’s an impressive device!


Parts List

Here are some components you might need to complete the experiments in this article. 

Arduino GIGA Display Shield Arduino Store

Arduino GIGA R1 Arduino Store

Arducam OV7675 Camera Arduino Store




Code Samples – All the code used in this article in one easy-to-use ZIP file!

Article PDF – A PDF version of this article in a ZIP file.

GIGA Display Documentation – Arduino guide to using the GIGA Display Shield.

LVGL – The Light and Versatile Graphics Library.

SquareLine Studio – GUI design utility.


Arduino GIGA Display Shield
Arduino GIGA Display Shield
Article Name
Arduino GIGA Display Shield
The Arduino GIGA Display Shield is an advanced TFT display with an integrated IMU, microphone and RGB LED. Today, we will learn how to use this 800x480 capacitive touchscreen display.
Publisher Name
DroneBot Workshop
Publisher Logo
Tagged on:
Notify of

Inline Feedbacks
View all comments