Skip to content

Commit 90fb2ab

Browse files
authored
Merge pull request #502 from arduino/martab1994-patch-4
Update content.md
2 parents 530ab2e + 92148e1 commit 90fb2ab

File tree

1 file changed

+18
-18
lines changed
  • content/hardware/04.pro/boards/portenta-h7/tutorials/creating-gui-with-lvgl

1 file changed

+18
-18
lines changed

content/hardware/04.pro/boards/portenta-h7/tutorials/creating-gui-with-lvgl/content.md

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: 'Creating GUIs with LVGL (V7)'
3-
description: 'In this tutorial you will learn to use LVGL (Light and Versatile Graphics Library) to create a simple graphical user interface that consists of a label that updates itself.'
3+
description: 'In this tutorial you will learn to use LVGL (Light and Versatile Graphics Library) to create a simple graphical user interface that consists of a label which updates itself.'
44
coverImage: assets/por_ard_lvgl_cover.svg
55
difficulty: intermediate
66
tags:
@@ -23,7 +23,7 @@ software:
2323
---
2424

2525
## Overview
26-
In this tutorial you will learn to use [LVGL](https://lvgl.io/) to create a simple graphical user interface that consists of a text label that updates itself.
26+
In this tutorial you will learn to use [LVGL](https://lvgl.io/) to create a simple graphical user interface that consists of a text label which updates itself.
2727

2828
## Goals
2929

@@ -42,19 +42,19 @@ In this tutorial you will learn to use [LVGL](https://lvgl.io/) to create a simp
4242

4343
## The Light and Versatile Graphics Library
4444

45-
Graphical User interfaces are necessary for visualizing information and interacting with certain aspects of an application. The Light and Versatile Graphics Library, also known as [LVGL](https://lvgl.io/), is an open-sourced library used to create graphical user-interfaces for microcontrollers and high-end processors. The light weight embedded library provides all the necessary widgets and user interface elements that will allow you to easily create user interfaces for displays and touch screens.
45+
Graphical User interfaces are needed for visualizing information and interacting with certain aspects of an application. The Light and Versatile Graphics Library, also known as [LVGL](https://lvgl.io/), is an open-sourced library used to create graphical user-interfaces for microcontrollers and high-end processors. The light weight embedded library provides all the necessary widgets and user interface elements that will allow you to easily create user interfaces for displays and touch screens.
4646

4747
## Instructions
4848

4949
### Building a Simple GUI
5050

51-
This tutorial will guide you through building a basic user interface using the LVGL Library which you can download using the Arduino Library Manager. The setup for this tutorial requires you to first to upload the finished sketch file to the Portenta board. You will then connect the board to a USB-hub in order to connect it to an external monitor. Once the hub is powered externally, a graphical user interface with a label will be displayed on the screen.
51+
This tutorial will guide you through building a basic user interface using the LVGL Library, which you can download using the Arduino Library Manager. The setup for this tutorial requires you to first upload the finished sketch file to the Portenta board. You will then connect the board to a USB-hub in order to connect it to an external monitor as well. Once the hub is powered externally, a graphical user interface with a label will be displayed on the screen.
5252

5353
![Overview of how to connect the Portenta to the peripherals.](assets/por_ard_lvgl_tutorial_steps.svg)
5454

5555
### 1. The Basic Setup
5656

57-
Begin by plugging your Portenta board into the computer using a USB-C cable and open the Arduino IDE or the Arduino Pro IDE. If this is your first time running Arduino sketch files on the board, we suggest you check out how to [set up the Portenta H7 for Arduino](setting-up-portenta) before you proceed.
57+
Begin by plugging your Portenta board into the computer using a USB-C cable and open the Arduino IDE. If this is your first time running Arduino sketch files on the board, we suggest you check out how to [set up the Portenta H7 for Arduino](setting-up-portenta) before you proceed.
5858

5959
![The Portenta H7 can be connected to the computer using an appropriate USB-C cable](assets/por_ard_lvgl_basic_setup.svg)
6060

@@ -64,7 +64,7 @@ Next, select 'Portenta' in the **Tools > Board** menu before installing [lvgl](h
6464

6565
![Library Manager showing the installed lvgl library.](assets/por_ard_lvgl_select_library.png)
6666

67-
***The sketches that we show are using the version 7.11.0, if you have the version 8 or greater you will need to make changes on the code, check LVGL API docs to see the update changes: <https://docs.lvgl.io/master/>.***
67+
***The sketches that we show are using the version 7.11.0. If you have the version 8 or greater you will need to make changes on the code, check LVGL API docs to see the update changes: <https://docs.lvgl.io/master/>.***
6868

6969
### 3. Adding a Label Widget
7070

@@ -104,25 +104,25 @@ This sketch creates a label that will be displayed in the center of the connecte
104104

105105
### 4. Connect an External Monitor
106106

107-
Compile and upload the sketch to your Portenta H7. At this point your board becomes the host. Unplug the board from your computer and connect it to the USB-hub along with a monitor that is connected to the HDMI port. Power up your hub by connecting it to an external power source and the monitor will display a label saying `Counter`.
107+
Compile and upload the sketch to your Portenta H7. At this point your board becomes the host. Unplug the board from your computer and connect it to the USB-hub along with a monitor, which is connected to the HDMI port. Power up your hub by connecting it to an external power source and the monitor will display a label saying `Counter`.
108108

109109
![Connecting the USB peripherals and the display to Portenta.](assets/por_ard_lvgl_connect_monitor.svg)
110110

111-
***If you aren't familiar how the USB host works, we recommend you to have a look at the [USB Host tutorial](https://docs.arduino.cc/tutorials/portenta-h7/usb-host).***
111+
***If you are not familiar how the USB host works, we recommend you to have a look at the [USB Host tutorial](https://docs.arduino.cc/tutorials/portenta-h7/usb-host).***
112112

113-
Our label object currently has LVGL's default style. If you want to customize the style you can have a look at LVGL's [documentation](https://docs.lvgl.io/latest/en/html/widgets/label.html).
113+
Our label object currently has LVGL's default style. If you want to customize the style, you can have a look at LVGL's [documentation](https://docs.lvgl.io/latest/en/html/widgets/label.html).
114114

115115
### 5. Creating a Simple Counter
116116

117-
Let's create a counter that increases each second and update the label on the screen. To do so, we will create a label and an updating task that is going to updated the label periodically and change its value. This is possible using an LVGL concept called 'Task'.
117+
Let's create a counter that increases each second and update the label on the screen. To do so, you have to create a label and an updating task that is going to update the label periodically and change its value. This is possible using an LVGL concept called 'Task'.
118118

119-
First we create a counter variable at the beginning of the program (before the `setup()` function).
119+
First, you can create a counter variable at the beginning of the program (before the `setup()` function).
120120

121121
```cpp
122122
int counter = 0;
123123
```
124124

125-
Then we create the function that is going to update the value of the counter and its label. Add it to the sketch just before the `setup()` function.
125+
Then, you can create the function that is going to update the value of the counter and its label. Add it to the sketch just before the `setup()` function.
126126

127127
```cpp
128128
static void updateCounterTask(lv_task_t *task) {
@@ -137,7 +137,7 @@ static void updateCounterTask(lv_task_t *task) {
137137
}
138138
```
139139
140-
As the last line inside the `setup()` function, we create the task that calls our `updateCounterTask()` function every second (1000 milliseconds).
140+
As the last line inside the `setup()` function, you can create the task that calls your `updateCounterTask()` function every second (1000 milliseconds).
141141
142142
```cpp
143143
// Create a task to update the counter
@@ -204,22 +204,22 @@ void loop() {
204204
205205
## Conclusion
206206
207-
This tutorial shows how to build a simple user interface with your Portenta. Starting with a static view in the monitor and then converting it into a simple dynamic application that features an updating variable on the screen. The tutorial also shows how to use the "task" feature of LVGL to run instructions recurrently.
207+
This tutorial shows how to build a simple user interface with your Portenta. Starting with a static view in the monitor and then converting it into a simple dynamic application that features an updating variable on the screen. The tutorial also shows how to use the "task" feature of LVGL to run instructions recurrently.
208208
209209
### Next Steps
210210
Now that you know how to build a simple UI for a screen, you can try to add more labels to the screen to show various information or try out different LVGL widgets.
211211
212212
## Troubleshooting
213213
214-
### Counter Label Doesn't Update
214+
### Counter Label Does Not Update
215215
216216
- Make sure that the label and task are declared on top of the sketch, outside the `setup()` and `loop()` like a normal variable.
217217
- Check if the task has the same structure in the first declaration and the function creation.
218218
- Look inside the `loop()` and see if `lv_task_handler()` is there.
219219
220220
### Sketch Upload Troubleshooting
221221
222-
- If you have troubles uploading the sketch, try to first set the board in bootloader mode, by clicking the reset button twice, then you should see the built-in LED pulsating.
223-
- If you uploaded the sketch and you don't have any output in the display, make sure you have `portenta_init_video()` in the `setup()`.
222+
- If you have troubles uploading the sketch, try to first set the board in bootloader mode, by clicking the reset button twice. Then you should see the built-in LED pulsating.
223+
- If you uploaded the sketch and you do not have any output in the display, make sure you have `portenta_init_video()` in the `setup()`.
224224
- Unplug and plug the HDMI cable in again.
225-
- Reset the Portenta once it's connected to the USB-hub.
225+
- Reset the Portenta once it is connected to the USB-hub.

0 commit comments

Comments
 (0)