|
| 1 | +--- |
| 2 | +title: 'GIGA Display Shield Touch Interface' |
| 3 | +description: 'Learn how to use the touch interface on the GIGA Display Shield.' |
| 4 | +author: Karl Söderby |
| 5 | +tags: [Display, Touch Screen] |
| 6 | +--- |
| 7 | + |
| 8 | +The [GIGA Display Shield](/hardware/giga-display-shield) has an advanced touch interface, supported via the [Arduino_GigaDisplayTouch]() library. |
| 9 | + |
| 10 | +This library is used to return the number of contact points, and the `x,y` coordinates for each of these. For example, touching the screen with two fingers somewhere on the screen would generate the following: |
| 11 | + |
| 12 | +- `x` - 0-480 (x-axis) |
| 13 | +- `y` - 0-800 (y-axis) |
| 14 | +- `contacts` - number of touchpoints (fingers on the screen). |
| 15 | + |
| 16 | +***Please note that any example with the GIGA Display Shield requires a GIGA R1 WiFi board. To get started with the shield, visit the [Getting Started with GIGA Display Shield](/tutorials/giga-display-shield/getting-started).*** |
| 17 | + |
| 18 | +## Hardware & Software Needed |
| 19 | + |
| 20 | +- [GIGA R1 WiFi](/hardware/giga-r1). |
| 21 | +- [GIGA Display Shield](/hardware/giga-display-shield) |
| 22 | +- [Arduino IDE](https://www.arduino.cc/en/software) |
| 23 | + |
| 24 | +## Install Arduino_GigaDisplayTouch |
| 25 | + |
| 26 | +The [Arduino_GigaDisplayTouch](https://www.arduino.cc/reference/en/libraries/arduino_gigadisplaytouch/) is used to read touchpoints across the screen, and returns the number of **contacts** and **coordinates**. |
| 27 | + |
| 28 | + |
| 29 | + |
| 30 | +***For source code and issues with the Arduino_GigaDisplayTouch library, please see the [GitHub repository](https://github.com/arduino-libraries/Arduino_GigaDisplayTouch).*** |
| 31 | + |
| 32 | +## LVGL |
| 33 | + |
| 34 | +This library works with the [lvgl](https://github.com/lvgl/lvgl) framework, which provides a rich set of interactive widgets like buttons, dropdowns, radio buttons etc. This requires a touch interface, and the **Arduino_GigaDisplayTouch** provides just that. |
| 35 | + |
| 36 | +***Learn more about how to use the lvgl framework with the GIGA Display Shield in [this tutorial](/tutorials/giga-display-shield/lvgl-guide).*** |
| 37 | + |
| 38 | +## Print Coordinates Example |
| 39 | + |
| 40 | +To retrieve the coordinates when touching the display, we can use the **Touch_Polling** example from the library. You will find it at **Arduino_GigaDisplayTouch > Touch_Polling** in the IDE (library needs to be installed), or you will find it just below: |
| 41 | + |
| 42 | +<CodeBlock url="https://github.com/arduino-libraries/Arduino_GigaDisplayTouch/tree/main/examples/Touch_Polling" className="arduino"/> |
| 43 | + |
| 44 | +Upload the example to your GIGA R1 WiFi board, and open the **Serial Monitor** tool. If there any initialization issues, it will be printed here. Otherwise, you should see: |
| 45 | + |
| 46 | +``` |
| 47 | +Touch controller init - OK |
| 48 | +``` |
| 49 | + |
| 50 | +Seeing this, you can start touching the display area with one or more fingers. The serial monitor will print out how many "contacts" aka fingers you are using, and the coordinates for each point. Here's an example response: |
| 51 | + |
| 52 | +``` |
| 53 | +Contacts: 2 |
| 54 | +245 346 |
| 55 | +178 473 |
| 56 | +``` |
| 57 | + |
| 58 | +In this case, we have two touchpoints, and the coordinates for each of them printed below (`x`,`y`). And that's pretty much it to obtain a successful reading from the touch interface. |
| 59 | + |
| 60 | +You can use this to build customised gestures on the screen such as swiping two fingers left to trigger an animation, or three fingers up to change the background color. |
| 61 | + |
| 62 | +## Summary |
| 63 | + |
| 64 | +In this tutorial, we have explored the **Arduino_GigaDisplayTouch** library and tested out an example that allows us to read the coordinates of our touches. |
0 commit comments