LVL Text display

[ptillisch]

Hi @willhelmx.

@willhelmx

all talk about editing the header file and for some that dident work at all anyway

If by "header file" you mean the LVGL configuration file lv_conf.h, this is indeed the correct way to enable additional fonts. By default, the lv_font_montserrat_14 font is the only one enabled for use in your sketches. You can enable additional fonts by modifying the configuration file.

Background

An important thing to understand is that when you use the "Arduino_H7_Video" library in your sketch, the library provides a lv_conf.h file that is configured for use with the GIGA Display Shield. That configuration is used instead of the configuration file you might add to the "lvgl" library if you follow instructions or tutorials for the configuration of the lvgl library:

https://docs.lvgl.io/9.2/integration/framework/arduino.html#configure-lvgl

Create Custom LVGL Configuration Library

It is possible to adjust the LVGL configuration by editing the configuration file that is bundled with the Arduino_H7_Video library. However, if you do that then all your modifications will be lost each time you use the Arduino IDE Boards Manager to update to a new version of the "Arduino Mbed OS Giga Boards" platform (the Arduino_H7_Video library is bundled with the platform). A better approach is to create a simple Arduino library and store your custom LVGL configuration in that library. This library will not be lost through updates of the Arduino Mbed OS Giga Boards platform and you can create as many of these libraries as you like if you want to use different configurations for different projects.

1. Start Arduino IDE if it is not already running.
2. Select File > Preferences... (or Arduino IDE > Settings... for macOS users) from the Arduino IDE menus.
   The "Preferences" dialog will open.
3. Take note of the path shown in the "Sketchbook location" field of the dialog.
4. Click the "CANCEL" button.
   The "Preferences" dialog will close.
5. Use your file manager to create a new folder named MyLVGLConfig under the libraries subfolder of the "sketchbook location" path.
   ⓘ You can name the folder anything you like as long as it only contains basic characters and no spaces (A-z, 0-9, _, -, .).
6. Create a new file named MyLVGLConfig.h in the MyLVGLConfig folder.
   • ⓘ If you chose a different name for the folder, adjust the filename accordingly.
   • Make sure the filename is exactly MyLVGLConfig.h, not something like MyLVGLConfig.h.txt.
   • This file will not contain any code. Optionally, you can add a comment to the file to explain its purpose:

     // This file is intentionally left empty.
     // Its only purpose is to allow discovery of the library by the Arduino sketch build system.
     

7. Click the following link to open the GitHub page for the Arduino_H7_Video library's LVGL 9.x configuration file in your web browser:
   ArduinoCore-mbed/libraries/Arduino_H7_Video/src/lv_conf_9.h at main · arduino/ArduinoCore-mbed · GitHub
8. Click the downward pointing arrow icon ("Download raw file") at the right side of the toolbar:
   
   
9. Wait for the download to finish.
10. Copy the downloaded file to the MyLVGLConfig folder you created in the previous step of these instructions.
11. Rename the downloaded file to lv_conf.h.

You must have the following folder structure:

<sketchbook location>/
├── libraries/
│   ├── MyLVGLConfig/
│   │   ├── MyLVGLConfig.h
│   │   └── lv_conf.h
│   ...
...

Customizing LVGL Configuration

The lv_conf.h file in the library you created by following the above procedure contains a configuration for using the 9.x versions of LVGL with the GIGA Display Shield. This provides a convenient starting point for your own custom LVGL configuration.

I'll provide instructions you can follow to enable LVGL's lv_font_montserrat_28 font for use in your Arduino sketches. If you would like to use a different font, just adjust the instructions accordingly.

1. Use any text editor to open the lv_conf.h file from the library you created.
2. Find this line in the file:

   #define LV_FONT_MONTSERRAT_28 0
   

3. Change that line to:

   #define LV_FONT_MONTSERRAT_28 1
   

4. Save the file

Using the Custom LVGL Configuration

To use the custom LVGL configuration in an Arduino sketch, just add the following line to the top of the sketch:

#include <MyLVGLConfig.h>

---

The #include directive for MyLVGLConfig.h must be placed at some line above the line of the #include directive for Arduino_H7_Video.h in your sketch.

---

You can now use the lv_font_montserrat_28 font in your sketch. I'll provide a minimal "hello world" example of doing that:

#include <MyLVGLConfig.h> // This must be placed above the #include directive for Arduino_H7_Video.h
#include <Arduino_H7_Video.h>
#include <lvgl.h>
#include <font/lv_font.h>

// The constructor's default parameter values are appropriate for the GIGA Display Shield when compiling for the GIGA R1
// WiFi board.
Arduino_H7_Video Display;

void setup() {
  Display.begin();

  lv_obj_t *label = lv_label_create(lv_screen_active());
  lv_style_value_t labelFontStyleValue;
  // NOTE: The LV_FONT_MONTSERRAT_28 macro must be defined in lv_conf.h to use lv_font_montserrat_28.
  labelFontStyleValue.ptr = &lv_font_montserrat_28;
  lv_obj_set_local_style_prop(label, LV_STYLE_TEXT_FONT, labelFontStyleValue, 0);
  lv_label_set_text(label, "Hello, world!");
  lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
}

void loop() {
  lv_timer_handler();
}