Merge pull request #533 from arduino/benjamindannegard/giga-display-shield-tutorial-reviews

[GIGA Display Shield] tutorial reviews

Author: BenjaminDannegard

content/hardware/10.mega/shields/giga-display-shield/features.md

@@ -1,6 +1,6 @@
 <FeatureDescription>
 
-The GIGA Display Shield has a 3.97” 480x800 RGB touch screen, a digital microphone, a 6 Axis IMU and an RGB. The shield can easily be mounted on the GIGA R1 WiFi board.
+The GIGA Display Shield has a 3.97” 480x800 RGB touch screen, a digital microphone, a 6 Axis IMU and an RGB LED. The shield can easily be mounted on the GIGA R1 WiFi board.
 
 Utilizing the GIGA R1 WiFi's fast 480 MHz microcontroller, you can build powerful UIs, use interactive 3D animations, display camera feed and much more. The shield is compatible with a wide range of graphics libraries, including [LVGL](https://github.com/lvgl/lvgl), [GFX](https://github.com/bcmi-labs/Arduino_GigaDisplay_GFX/) and [ArduinoGraphics](https://github.com/arduino-libraries/ArduinoGraphics/).
 

content/hardware/10.mega/shields/giga-display-shield/tutorials/basic-draw-and-image/content.md

@@ -23,6 +23,8 @@ This is a great tutorial for getting started with your shield and exploring what
 
 Make sure the latest GIGA Core is installed in the Arduino IDE. **Tools > Board > Board Manager...**. Here you need to look for the **Arduino Mbed OS Giga Boards** and install it, the [Arduino_H7_Video library](https://github.com/arduino/ArduinoCore-mbed/tree/main/libraries/Arduino_H7_Video) is included in the core and is needed for the examples to work. Now you have to install the library needed for the graphical display features. To do this, go to **Tools > Manage libraries..**, search for **ArduinoGraphics**, and install it.
 
+For more information about libraries and how to install them with the IDE, visit our [libraries tutorial](/software/ide-v2/tutorials/ide-v2-installing-a-library).
+
 ## Using Draw Feature in a Sketch
 
 First, we need to include the library that we will be using and define the display screen:

content/hardware/10.mega/shields/giga-display-shield/tutorials/basic-touch/basic-touch.md

@@ -7,7 +7,7 @@ tags: [Display, Touch Screen]
 
 The [GIGA Display Shield](/hardware/giga-display-shield) has an advanced touch interface, supported via the [Arduino_GigaDisplayTouch](https://github.com/arduino-libraries/Arduino_GigaDisplayTouch) library.
 
-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:
+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 would generate the following:
 
 - `x` - 0-480 (x-axis)
 - `y` - 0-800 (y-axis)
@@ -17,13 +17,13 @@ This library is used to return the number of contact points, and the `x,y` coord
 
 ## Hardware & Software Needed
 
-- [GIGA R1 WiFi](/hardware/giga-r1).
+- [GIGA R1 WiFi](/hardware/giga-r1-wifi).
 - [GIGA Display Shield](/hardware/giga-display-shield)
 - [Arduino IDE](https://www.arduino.cc/en/software)
 
 ## Install Arduino_GigaDisplayTouch
 
-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**. 
+The [Arduino_GigaDisplayTouch library](https://www.arduino.cc/reference/en/libraries/arduino_gigadisplaytouch/) is used to read touchpoints across the screen, returning the number of **contacts** and **coordinates**. 
 
 ![Install Arduino_GigaDisplayTouch](assets/install-touchlib.png)
 
@@ -47,7 +47,7 @@ Upload the example to your GIGA R1 WiFi board, and open the **Serial Monitor** t
 Touch controller init - OK
 ```
 
-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:
+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:
 
 ```
 Contacts: 2 <---- two fingers used
@@ -57,8 +57,48 @@ Contacts: 2 <---- two fingers used
 
 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. 
 
-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.
+You can use this to build customized gestures on the screen, such as swiping two fingers left to trigger an animation or three fingers up to change the background color.
+
+### Full Sketch
+
+```arduino
+#include "Arduino_GigaDisplayTouch.h"
+
+Arduino_GigaDisplayTouch touchDetector;
+
+void setup() {
+  Serial.begin(115200);
+  while(!Serial) {}
+
+  if (touchDetector.begin()) {
+    Serial.print("Touch controller init - OK");
+  } else {
+    Serial.print("Touch controller init - FAILED");
+    while(1) ;
+  }
+}
+
+void loop() {
+  uint8_t contacts;
+  GDTpoint_t points[5];
+  
+  contacts = touchDetector.getTouchPoints(points);
+
+  if (contacts > 0) {
+    Serial.print("Contacts: ");
+    Serial.println(contacts);
+
+    for (uint8_t i = 0; i < contacts; i++) {
+      Serial.print(points[i].x);
+      Serial.print(" ");
+      Serial.println(points[i].y);
+    }
+  }
+
+  delay(1);
+}
+```
 
 ## Summary
 
-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. This library is essential for developing sophisticated touch displays using the lvgl framework.
+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. This library is essential for developing sophisticated touch displays using lvgl or other supported frameworks.

content/hardware/10.mega/shields/giga-display-shield/tutorials/camera-tutorial/content.md

@@ -35,6 +35,8 @@ Connect the camera to the connector on the front of the display shield as shown
 
 ![Camera connected to the GIGA Display Shield](assets/camera-connected.svg)
 
+***Note the direction of the shield, physically the connector can be plugged in from both directions, but it will only work when facing the same direction as the display.***
+
 ## Full Sketch
 
 Open the example sketch by going to **File > Examples > Camera > GigaCameraDisplay** in the Arduino IDE.

content/hardware/10.mega/shields/giga-display-shield/tutorials/gfx-guide/assets/shapes-on-display.svg

@@ -13,12 +13,12 @@ To access it, we can use a layer library called [Arduino_GigaDisplay_GFX](https:
 
 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,
+- How to draw basic shapes (circles, rectangles etc)
+- How to update values on the screen,
 
 ## Hardware & Software Needed
 
-- [GIGA R1 WiFi](/hardware/giga-r1).
+- [GIGA R1 WiFi](/hardware/giga-r1-wifi).
 - [GIGA Display Shield](/hardware/giga-display-shield)
 - [Arduino IDE](https://www.arduino.cc/en/software)
 
@@ -60,7 +60,7 @@ There are several methods available. In this section, we will list out a number
 
 ### Coordinates
 
-The coordinates in the GFX library is 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: 
+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.
 
@@ -106,6 +106,8 @@ void setup() {
 void loop(){}
 ```
 
+![Text sketch running on the GIGA Display Shield](assets/text-on-display.svg)
+
 ### Pixels & Shapes
 
 To draw pixels and shapes, use the following methods.
@@ -139,6 +141,8 @@ void setup() {
 void loop() {}
 ```
 
+![Shapes sketch running on the GIGA Display Shield](assets/shapes-on-display.svg)
+
 ## GFX & Touch Example
 
 The GFX library can be used together with the [Arduino_GigaDisplay_Touch](https://github.com/arduino-libraries/Arduino_GigaDisplayTouch) library. The below example demonstrates how to read a touch point and trigger a function, using a simple if statement.

content/hardware/10.mega/shields/giga-display-shield/tutorials/gfx-guide/assets/text-on-display.svg

@@ -33,7 +33,9 @@ Arduino_H7_Video          Display(800, 480, GigaDisplayShield); /* Arduino_H7_Vi
 BoschSensorClass imu(Wire1);
 ```
 
-Start receiving IMU readings with `imu.begin();` and start the display with `Display.begin();`. Then we can assign attributes to the images such as its source, alignment and how the rotation should behave. For more information on image attributes with LVGL, check out our [LVGL tutorial](lvgl-guide#image).
+Start receiving IMU readings with `imu.begin();` and start the display with `Display.begin();`.
+
+Then we can assign attributes to the images such as its source, alignment and how the rotation should behave. For more information on image attributes with LVGL, check out our [LVGL tutorial](lvgl-guide#image).
 
 ```arduino
 LV_IMG_DECLARE(img_arduinologo);
@@ -52,7 +54,9 @@ void setup() {
 }
 ```
 
-Now all that is left is to change the image depending on the IMU readings. First, declare the variables that will hold the values. Then to assign them the IMU reading values use `imu.readAcceleration(x, y, z);`. Next, we use `if ()` statements to change the rotation variable depending on the readings we are getting. And at the end, we render the image with the correct rotation. When the correct rotation has been calculated, we can apply it to the image using `lv_img_set_angle(img, rot_angle);`.
+Now all that is left is to change the image depending on the IMU readings. First, declare the variables that will hold the values. Then to assign them the IMU reading values use `imu.readAcceleration(x, y, z);`.
+
+Next, we use `if ()` statements to change the rotation variable depending on the readings we are getting. And at the end, we render the image with the correct rotation. When the correct rotation has been calculated, we can apply it to the image using `lv_img_set_angle(img, rot_angle);`.
 
 ```arduino
 uint8_t rotation = 0;
@@ -160,7 +164,7 @@ void loop() {
 
 ### Using Another Image 
 
-Any image could be the sketch. This tutorial and the example uses an image of the Arduino logo. Alternatively, any raw RGB565 image can be used. If you have an image you want to use, you can use this [online image converter](https://lvgl.io/tools/imageconverter), or any other software that lets you convert an image to a raw RGB565 image. This website will output in the Binary RGB565 format. For further instructions on how to display your own image, have a look at our [Text and Image tutorial](text-and-image).
+Any image could be used in the sketch. This tutorial and the example uses an image of the Arduino logo. Alternatively, any raw RGB565 image can be used. If you have an image you want to use, you can use this [online image converter](https://lvgl.io/tools/imageconverter), or any other software that lets you convert an image to a raw RGB565 image. This website will output in the Binary RGB565 format. For further instructions on how to display your own image, have a look at our [Text and Image tutorial](text-and-image).
 
 ## Testing It Out