You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/hardware/04.pro/boards/portenta-h7/tutorials/creating-gui-with-lvgl/content.md
+18-18Lines changed: 18 additions & 18 deletions
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
---
2
2
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.'
4
4
coverImage: assets/por_ard_lvgl_cover.svg
5
5
difficulty: intermediate
6
6
tags:
@@ -23,7 +23,7 @@ software:
23
23
---
24
24
25
25
## 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.
27
27
28
28
## Goals
29
29
@@ -42,19 +42,19 @@ In this tutorial you will learn to use [LVGL](https://lvgl.io/) to create a simp
42
42
43
43
## The Light and Versatile Graphics Library
44
44
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.
46
46
47
47
## Instructions
48
48
49
49
### Building a Simple GUI
50
50
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.
52
52
53
53

54
54
55
55
### 1. The Basic Setup
56
56
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.
58
58
59
59

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

66
66
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/>.***
68
68
69
69
### 3. Adding a Label Widget
70
70
@@ -104,25 +104,25 @@ This sketch creates a label that will be displayed in the center of the connecte
104
104
105
105
### 4. Connect an External Monitor
106
106
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`.
108
108
109
109

110
110
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).***
112
112
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).
114
114
115
115
### 5. Creating a Simple Counter
116
116
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'.
118
118
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).
120
120
121
121
```cpp
122
122
int counter = 0;
123
123
```
124
124
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.
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).
141
141
142
142
```cpp
143
143
// Create a task to update the counter
@@ -204,22 +204,22 @@ void loop() {
204
204
205
205
## Conclusion
206
206
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.
208
208
209
209
### Next Steps
210
210
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.
211
211
212
212
## Troubleshooting
213
213
214
-
### Counter Label Doesn't Update
214
+
### Counter Label Does Not Update
215
215
216
216
- Make sure that the label and task are declared on top of the sketch, outside the `setup()` and `loop()` like a normal variable.
217
217
- Check if the task has the same structure in the first declaration and the function creation.
218
218
- Look inside the `loop()` and see if `lv_task_handler()` is there.
219
219
220
220
### Sketch Upload Troubleshooting
221
221
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()`.
224
224
- 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