LVL Text display

Hi guy´s

we are having som difficulties regarding font size for the display shield
i have seen some expressions for this in the forum, but all talk about editing the header file and for some that dident work at all anyway

Using standard or #define LV_FONT_MONTSERRAT_14 works fine, however once you get to a certain age the necessity for glasses is a problem

Is there any other predefined font size readely available here?

If not - will something like this work?

static lv_style_t large_style;
lv_style_init(&large_style);
lv_style_set_text_font(&large_style, &lv_font_montserrat_14); // Base font
lv_style_set_transform_zoom(&large_style, 256); // Scale factor (256 = 2x size)
lv_obj_add_style(label, &large_style, 0);

Or perhaps

static lv_style_t large_style;
lv_style_init(&large_style);
lv_style_set_text_line_space(&large_style, 20);
lv_style_set_text_letter_space(&large_style, 5);
lv_obj_add_style(label, &large_style, 0);

These doesent seem to work, (gives compilation errors ) but perhaps someone can point me in the right direction

Best Regards

/ Andy

I know nothing about the Giga / Giga shield so can't help.

It might be advisable to post a small demo sketch that shows the problem and shows the compile errors that you get.

Just in case, please both code tags for both.

PS
Please mention the library version and board package version (not sure if there are different ones).

Hi -ok

We´ll se if anyone is on to this issue, then i will meke some examples the code is several hundred lines :slight_smile:

Thank you for your reply

BR

/ Anders

Hi @willhelmx.

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.
    • :red_exclamation_mark: 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>

:red_exclamation_mark: 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();
}

Hi and thanks for your reply

Intersting, how about if you use the cloud compiler, personally i move around alot so i find this very nice to use.
Can you make these modification there?

BR
/A

You can't create custom libraries using Arduino Cloud Editor. However, you can create the custom library on your computer and then import it to your Arduino Cloud account. After doing that, you can use it in your sketches in Arduino Cloud Editor just as I described above.

Import Library

I'll provide instructions you can follow to import the library:

A. Add Metadata File

You can specify additional information about a library (the technical term for this is "metadata") in a special file named library.properties. This file is optional when using a library with Arduino IDE, so I did not include the creation of such a file in the "Create Custom LVGL Configuration Library" instructions I provided in my previous reply. However, the metadata file is mandatory for all libraries when using Arduino Cloud. So you will need to add the file to your library before importing it to your Arduino Cloud account.

  1. Create a new file named library.properties in the MyLVGLConfig folder that contains the library you created by following the "Create Custom LVGL Configuration Library" instructions I provided in my previous reply.
    • :red_exclamation_mark: Make sure the filename is exactly library.properties, not something like library.properties.txt.
  2. Use any text editor to open the library.properties file.
  3. Add the following text to the file:
    name=MyLVGLConfig
    version=1.0.0
    author=willhelmx
    maintainer=willhelmx
    sentence=Custom LVGL configuration for use with the lvgl library.
    paragraph=
    category=Display
    url=https://forum.arduino.cc/t/lvl-text-display/1350052
    architectures=*
    includes=MyLVGLConfig.h
    
    You are welcome to adjust the metadata as you like. The exact contents are not critical. Just make sure that the data format is correct: Redirecting
  4. Save the file.

You must have the following folder structure:

MyLVGLConfig/
├── MyLVGLConfig.h
├── library.properties
└── lv_conf.h
...

B. Import

  1. Use an archive utility to make a ZIP file of the MyLVGLConfig folder that contains the library you created by following the "Create Custom LVGL Configuration Library" instructions I provided in my previous reply.
  2. If you are not already, log in to your Arduino account:
    https://login.arduino.cc/login
  3. Click the following link to open the list of your Arduino Cloud sketches in the web browser:
    https://app.arduino.cc/sketches
  4. Click on any sketch, or use the CREATE > New sketch button to create a new sketch (it doesn't make a difference which sketch you open, we only need it to open Cloud Editor).
    The sketch will open in Arduino Cloud Editor.
  5. Click the icon that looks like shelved books ("Libraries") in the bar on the left side of the Cloud Editor page.
    The "Libraries" panel will open.
  6. Click the upward pointing arrow icon at the top of the "Libraries" panel.
    The "Open" dialog will open.
  7. Select the "ZIP" file of the library in the dialog.
  8. Click the "Open" button.
    The "Open" dialog will close.
  9. You will now see an indicator at the top of the "Libraries" panel in place of the upward pointing arrow icon as the library is imported. Wait for this indicator to disappear.

You can now use the library you imported in your Arduino Cloud sketches.


If you later decide you want to remove the imported library from your Arduino Cloud account, you will find it under the "Custom" tab of the "Libraries" panel.


Modify Imported Library

In case you later decide you want to make changes to the custom LGVL configuration in the library you imported, you can edit it using Cloud Editor:

  1. Open Cloud Editor.
  2. Click the icon that looks like shelved books ("Libraries") in the bar on the left side of the Cloud Editor page.
    The "Libraries" panel will open.
  3. Type MyLVGLConfig in the "SEARCH LIBRARY" field of the dialog.
  4. Find the "MyLVGLConfig" library entry in the search results.
  5. Hover the mouse pointer over the library entry.
    A icon will appear at the top right corner of the entry.
  6. Click the icon.
    A menu will open.
  7. The menu will contain an item named either "Copy & modify library" or "Modify library". Click on it.
    A new Cloud Editor instance will open in another browser window/tab, containing an editor tab for each of the files in the library..
  8. Click the "Settings" icon at the bottom left corner of the page:

    The "Settings" panel will open.
  9. If it is not already, set the "Enable autosave" switch to the "on" position.
    This is required because Cloud Editor has an inconsistent UI when editing libraries, which makes it impossible to manually trigger a save of your changes. So the only way to save the changes made to the library are through the convenient "autosave" feature.
  10. Click the "Settings" icon at the bottom left corner of the page.
    The "Settings" panel will close.
  11. Make whatever modifications you would like to the library files.

Please let me know if you have any questions or problems while following those instructions.


Sorry about the delay, been out in the field for a week

Thank you for the excellent explanation, i will try and implement this shortly

Have a wonderful day

BR

/ Andy

You are welcome. I'm glad if I was able to be of assistance.

Regards, Per

Hi, I would like to do this but include the custom MyLVGLConfig in my git folder, which is the *ino folder.
The idea is that I want the lv_conf h file to be inside the repo because i work on more than 1 computer.
I tried doing the example you did by including the library/MyLVGLConfig inside the folder containing my ino file but it doesnt work.

Is there a way to make this work (Having the lv_conf folder versionned in the same git repo as my code) Im also using the giga display shield with Arduino_H7_Video and lgvl just like this example.
Thank you in advance

Hi @laloutrecouillue. I can suggest a couple of possible approaches:

Bundle sketch with library

I think the most simple way to accomplish this would be to make the configuration library be the Git repository, then place the sketch in a subfolder of the library folder.

We normally bundle sketches with libraries in the examples folder. However, that is intended to be used for example sketches that demonstrate the usage of the library. A compounding factor is that if you open an example sketch via Arduino IDE's File > Examples menu, Arduino IDE creates a new sketch populated with the content of the example sketch, rather than opening the actual sketch files. That is the most user friendly behavior in the case of a true example, but it might be confusing in the case where you open the sketch in this way when you are intended to do actual development work on the sketch (as opposed to making a new project from a copy of the sketch). You can work around this by opening the sketch via the File > Open... dialog instead of File > Examples, but the use of the examples folder makes it possible to use the incorrect procedure to open the sketch.

So in this specific case I would recommend storing the sketch under the extras folder of the library.

Install library via symlink

An alternative would be to store the library inside the sketch folder (and thus in the Git repository), then add a symbolic link to the libraries folder, targeting the folder of the library inside the sketch folder.

Use of symlinks is commonplace on Linux machines (and I would guess also at least somewhat common for macOS users), but not as often used on Windows systems. However, but they are supported even on Windows.

Hello, And thank you for your reply.

I will try this then, to be honest I dont necessary need the lv_conf inside the library, all i want is the lv_conf to be versionned in the repo and for the code to use that lv_conf.

If there is a solution simpler than using a library for that i would gladly accept it.

I have tried different ways already, putting the lv_conf next to the ino file, inside the scr folder, in a library folder inside the src folder, using the LV_CONF_INCLUDE_SIMPLE and also LV_CONF_PATH but i was not able to make any way work, I either get an error no lv_conf file found, or i don't get an error but the fonts i enabled in the lv_conf are not found which means that it is not this lv_conf that was used.

I will try this approach tomorrow and keep you updated, if there is a way that is more simple which works when using the Arduino_H7_Video and the lgvl I would also love to know it,

Thank you very much for your time.

You must use a library.

The "Arduino Mbed OS Giga Boards" platform that provides support to Arduino IDE for the GIGA R1 WiFi board does not add the sketch folder to the compiler's "search path" (which is an intentional decision, and standard practice in all official Arduino boards platforms), so there is no way for the lvgl library to #include files located in the sketch. It can only do that for other libraries.

Ok thank you for the answer again,

if i understand this is how my folder structure should look like

MyLVGLConfig/
├── MyLVGLConfig.h
├── library.properties
├── lv_conf.h
├── extras/
│   ├── Sketch.ino
│   └── . . .

You are close, but there is one small problem:

An Arduino sketch is a folder. The folder name must match the name of the primary sketch file. In your proposed file structure, the extras folder is a sketch, but it is not a valid sketch because the primary sketch file is named Sketch.ino instead of extras.

This could be resolved by renaming the sketch file to extras.ino, but I think it will be better to have the freedom to give the sketch any meaningful name you like. For that reason, I recommend placing the sketch under the extras folder instead of trying to make the extras folder the sketch:

MyLVGLConfig/
├── MyLVGLConfig.h
├── library.properties
├── lv_conf.h
├── extras/
│   ├── Sketch/
│   │   ├── Sketch.ino
│   │   ...
│   ...
...

(obviously can choose any specification compliant name to use instead of Sketch if you like)

Hi,

Thank you again for the answer,
I realized my mistake after posting, I now have the correct folder structure

MyLVGLConfig/
├── MyLVGLConfig.h
├── library.properties
├── lv_conf.h
├── extras/
│   ├── Sketch/
│   │   ├── Sketch.ino
│   │   . . .
│   . . .
. . .

the lv_conf.h file is the one from the web.
the library.properties is like this

name=MyLVGLConfig
version=1.0.0
author=willhelmx
maintainer=willhelmx
sentence=Custom LVGL configuration for use with the lvgl library.
paragraph=
category=Display
url=https://forum.arduino.cc/t/lvl-text-display/1350052
architectures=*
includes=MyLVGLConfig.h

the MyLGVLConfig.h is empty like you said.

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

And my include code looks like this

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

I then opened the sketch from the extras folder by double clicking on the .ino file

However it doesnt compile, it tells me it cannot find the MyLGVLConfig.h
fatal error: MyLVGLConfig.h: No such file or directory

Do i need to install the library that i created, or simply opening the ino sketch contained within the extras folder is sufficient ?

Yes. It must be located in the libraries subfolder of the sketchbook folder.

If you don't want to actually store your repository at that location, you can put a symlink in the libraries folder, targeting the library in whatever location you are storing it on your hard drive.

I'm a bit confused.

Is this how my folder structure should look like ?

MyLVGLConfig/
├── MyLVGLConfig.h
├── library.properties
├── lv_conf.h
├── extras/
│   ├── Sketch/
│   │   ├── Sketch.ino
│   │   ├── libraries/
│   │   │   ├── MyLVGLConfig.h
│   │   │   ├── . . .
│   │   . . .
│   . . .
. . .

Yes, but that must be placed within a larger structure:

<sketchbook location>/
├── libraries/
│   ├── MyLVGLConfig/
│   │   │
│   │   ...
│   ...
...

Oh ok I'm getting it now, that means that the git repo which contains the following structure

MyLVGLConfig/
├── MyLVGLConfig.h
├── library.properties
├── lv_conf.h
├── extras/
│   ├── Sketch/
│   │   ├── Sketch.ino
│   │   . . .
│   . . .
. . .

should be cloned inside the libraries folder in the sketchbook location

<sketchbook location>/
├── libraries/
│   ├── clone repository here.

and if i dont want to do that, meaning i would like to clone it freely anywhere, i must put a symlink between the libraries folder of the sketchbook location and the git folder where it is cloned ?

That is correct.