Giga R1 Display Shield with LVGL font issues

Using Arduino Displays
1

I've seen 2 other topics asking related issues about fonts and font sizes on LVGL with no responses. Surely there other users with this issue and need answers? I come from C# and Python background and pretty new to Arduino, I hardly ever submit questions to forums unless I have tried everything I can think of, and after reading up about what has happened with Arduino lately releasing products with little to no documentation, and examples that don't work out of the box, I am turning to the community for any signs of life about this issue.

So I have the Giga R1 with the Giga display shield, using LVGL libraries. First hurdle was the library version where v9.0.0 is riddled with errors, and have to roll back to 8.3.11 to get the basic demo to work. Great it works, kind of weird but just ignore that library update from now on..

Now I have created a nifty little GUI with lovely colours and shapes, some widgets, all the positioning is great, event handlers all work, can navigate nicely no issues here. The GUI is on the M7 core, while the controller sketch is running on the M4 core, gathers data on all the sensors and feeds that into the GUI via RPC calls. Again with little documentation and examples that are unclear or not relevant I managed to work that issue out, now can send ints and strings and juggle any info between the 2 cores like a ninja very clean and no 'junk' data in the serial...

BUT, for the love of God, I cannot get any fonts to work, it was an issue that I tried to fix first, but was wasting days going around in circles looking at examples, using chat GPT, using Gemini AI, reading all the documentation on LVGL website, I just moved on to get everything else in order and just come back to this font issue later.. Well, now is that later, and STILL cant get anywhere with changing a font size. Such a simple thing, but totally complicated to implement.

What I have tried...

The basic instuctions to change the font sizes in LVGL is to go to the lv_font_template.h file located in the lvgl folder, and edit it to enable the font sizes you need to use.

Some way down the file there is a FONT USAGE section, and all the Montserrat fonts are listed here with a 0 next to them. Like so:

#define LV_FONT_MONTSERRAT_14 1
#define LV_FONT_MONTSERRAT_16 0
#define LV_FONT_MONTSERRAT_18 0
#define LV_FONT_MONTSERRAT_20 1

I go ahead and change the sizes I need to 1 and then save the file as lv_conf.h

Go to complile my sketch, and get the error: undefined reference to `lv_font_montserrat_20'

I look more carefully at the lv_conf.h file and at the top there are some instructions:

/*
 * Copy this file as `lv_conf.h`
 * 1. simply next to the `lvgl` folder
 * 2. or any other places and
 *    - define `LV_CONF_INCLUDE_SIMPLE`
 *    - add the path as include path
 */

/* clang-format off */
#if 0 /*Set it to "1" to enable content*/

OK, so change that 0 to a 1 to enable content, and should work. Nope, same error.

Next attempt at this issue, I try to upload a custom font, using the online font converter found on the LVGL website. The converter lets you upload a font and spits out a .c file that you then need to define in your sketch. But after doing that, the .c file it gives is riddled with errors, I forgot what those errors were, but it looked numerous and not the real issue.

So then I tried to define the fonts directly, in the lvgl/src/font folder there are all the montserrat font files, like so: lv_font_montserrat_20.c (from size 8 going up to like 48 in increments of 2). I tried to use:

#define LV_FONT_DECLARE(lv_font_montserrat_20)
#include "lv_font_montserrat_20.h" (a header file i wrote to define the font)
extern const lv_font_t lv_font_montserrat_20;

even tried to copy the .c font file into my sketch folder and direct include paths to it, asking AI chats for ideas, all saying things I've already tried and for me to check the documentation....

I am frustrated the amount of time I have spent on trying to get a larger font size, and there is a serious lacking of information on this so is this working for everyone else? Or no one has an answer? A lot of what I read is Arduino releasing things too early or without proper testing or things half working correctly, so is this just another thing we just have to wait for whoever to update? Even if there's no answer to this issue, can I please cure my insanity knowing others have the same problem and it's not just me! :slight_smile:

3 Likes
2

Hi, you need to edit this file (or the PC equivalent)

~/Users/macbook/Library/Arduino15/packages/arduino/hardware/mbed_giga/4.0.8/libraries/Arduino_H7_Video/src/lv_conf.h

change 0 to 1 on the end of the lines of the fonts that you want to use.

3

New to this so bear with.
Had the same issues myself, with Giga R1 and Giga Display. First thing that irritated me was the inability to use lvgl v9, had to back track and install v8.3.x. Come On Arduino, sort this out please.

Anyway back to the question, I found a solution ....
The lv_conf file you edit needs to be in the Arduino/libraries/lvgl/src directory (found this by trial and error as the text in the file is not clear on this).
Make sure to include this in the main .ino file {#include "lv_conf.h"}
Use the following to create a style (name it what you want I used yourName here)

 static lv_style_t yourName;
  lv_style_init (&yourName);
  lv_style_set_text_font(&yourName, &lv_font_montserrat_28);

You can include this in your Setup or as I would tend to do declare the variable (top line) at the beginning of the code and initialise and call the font in a function. I use tabs a lot to separate code so creating global variables means you can access them from anywhere.
Finally add the style to the part of the code that addresses the label. (bit between the **. **

  label = lv_label_create(obj);
  lv_label_set_text(label, "Drag me!");
  **lv_obj_add_style(label, &style, 0);**
  lv_obj_align_to(label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);

I used the example code found in Arduino-Examples-Arduino_H7_Video-LVGLDemo and modified that which worked. see below

Hope this helps - I know how it feels, I spent a few days on and off trolling the net trying to find explanations all of which were ambiguous. Found the clues I needed eventually on an ESP32 forum.


/*
  LVGLDemo

  created 17 Apr 2023
  by Leonardo Cavagnis
*/

#include "Arduino_H7_Video.h"
#include "Arduino_GigaDisplayTouch.h"

#include "lvgl.h"
#include "lv_conf.h"

//#define LV_FONT_DEFAULT lv_font_montserrat_28

Arduino_H7_Video          Display(800, 480, GigaDisplayShield); /* Arduino_H7_Video Display(1024, 768, USBCVideo); */
Arduino_GigaDisplayTouch  TouchDetector;

/* Button click event callback */
static void btn_event_cb(lv_event_t * e) {
  static uint32_t cnt = 1;
  lv_obj_t * btn = lv_event_get_target(e);
  lv_obj_t * label = lv_obj_get_child(btn, 0);
  lv_label_set_text_fmt(label, "%"LV_PRIu32, cnt);
  cnt++;
}

/* Slider update value handler */
static void set_slider_val(void * bar, int32_t val) {
  lv_bar_set_value((lv_obj_t *)bar, val, LV_ANIM_ON);
}

void setup() {
  Serial.begin(115200);

  Display.begin();
  TouchDetector.begin();

  /* Create a container with grid 2x2 */
  static lv_coord_t col_dsc[] = {370, 370, LV_GRID_TEMPLATE_LAST};
  static lv_coord_t row_dsc[] = {215, 215, LV_GRID_TEMPLATE_LAST};
  lv_obj_t * cont = lv_obj_create(lv_scr_act());
  lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);
  lv_obj_set_size(cont, Display.width(), Display.height());
  lv_obj_set_style_bg_color(cont, lv_color_hex(0x03989e), LV_PART_MAIN);
  lv_obj_center(cont);

  lv_obj_t * label;
  lv_obj_t * obj;

  /* [0;0] - Image */
  obj = lv_obj_create(cont);
  lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 0, 1,
                        LV_GRID_ALIGN_STRETCH, 0, 1);

  LV_IMG_DECLARE(img_arduinologo);
  lv_obj_t * img1 = lv_img_create(obj);
  lv_img_set_src(img1, &img_arduinologo);
  lv_obj_align(img1, LV_ALIGN_CENTER, 0, 0);
  lv_obj_set_size(img1, 200, 150);

  /* [1;0] - Checkboxes and button */
  obj = lv_obj_create(cont);
  lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 1, 1,
                        LV_GRID_ALIGN_STRETCH, 0, 1);
  lv_obj_set_flex_flow(obj, LV_FLEX_FLOW_COLUMN);

  lv_obj_t * cb;
  cb = lv_checkbox_create(obj);
  lv_checkbox_set_text(cb, "Apple");

  cb = lv_checkbox_create(obj);
  lv_checkbox_set_text(cb, "Banana");
  lv_obj_add_state(cb, LV_STATE_CHECKED);

  static lv_style_t style_radio;
  static lv_style_t style_radio_chk;
  lv_style_init(&style_radio);
  lv_style_set_radius(&style_radio, LV_RADIUS_CIRCLE);
  lv_style_init(&style_radio_chk);
  lv_style_set_bg_img_src(&style_radio_chk, NULL);
  
  cb = lv_checkbox_create(obj);
  lv_checkbox_set_text(cb, "Lemon");
  lv_obj_add_flag(cb, LV_OBJ_FLAG_EVENT_BUBBLE);
  lv_obj_add_style(cb, &style_radio, LV_PART_INDICATOR);
  lv_obj_add_style(cb, &style_radio_chk, LV_PART_INDICATOR | LV_STATE_CHECKED);
  
  cb = lv_checkbox_create(obj);
  lv_checkbox_set_text(cb, "Melon");
  lv_obj_add_flag(cb, LV_OBJ_FLAG_EVENT_BUBBLE);
  lv_obj_add_style(cb, &style_radio, LV_PART_INDICATOR);
  lv_obj_add_style(cb, &style_radio_chk, LV_PART_INDICATOR | LV_STATE_CHECKED);
  lv_obj_add_state(cb, LV_STATE_CHECKED);

  lv_obj_t * btn = lv_btn_create(obj);
  lv_obj_set_size(btn, 100, 40);
  lv_obj_center(btn);
  lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_CLICKED, NULL);

  static lv_style_t style;
  lv_style_init (&style);
  lv_style_set_text_font(&style, &lv_font_montserrat_28);


  label = lv_label_create(btn);
  lv_label_set_text(label, "Click me!");
  lv_obj_center(label);
  

  /* [0;1] - Slider */
  obj = lv_obj_create(cont);
  lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 0, 1,
                        LV_GRID_ALIGN_STRETCH, 1, 1);
  
  lv_obj_t * slider = lv_slider_create(obj);
  lv_slider_set_value(slider, 75, LV_ANIM_OFF);
  lv_obj_center(slider);
  label = lv_label_create(obj);
  lv_label_set_text(label, "Drag me!");
  lv_obj_add_style(label, &style, 0);
  lv_obj_align_to(label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
  
  /* [1;1] - Bar */
  obj = lv_obj_create(cont);
  lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 1, 1,
                        LV_GRID_ALIGN_STRETCH, 1, 1);

  lv_obj_t * bar = lv_bar_create(obj);
  lv_obj_set_size(bar, 200, 20);
  lv_obj_center(bar);
  lv_bar_set_value(bar, 70, LV_ANIM_OFF);

  lv_anim_t a;
  lv_anim_init(&a);
  lv_anim_set_exec_cb(&a, set_slider_val);
  lv_anim_set_time(&a, 3000);
  lv_anim_set_playback_time(&a, 3000);
  lv_anim_set_var(&a, bar);
  lv_anim_set_values(&a, 0, 100);
  lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
  lv_anim_start(&a);
}

void loop() { 
  /* Feed LVGL engine */
  lv_timer_handler();
}
4

As a quick and important follow up.

When I ported the relevant font parts of the code to a project I am working on I came across the same issue, it couldn't find the font file. After a bit of searching again I found the explanation as to why the #include's are sometimes in " " (looks in sketch folder then in libraries) and other times in < > (only looks in libraries folders)

Anyway - I copied my edited lv_conf.h file into my sketch folder and now it all works perfectly. I can now change the font on the project I've been trying to solve this problem for..

by the way, so far I am only playing around with the built in font Montserrat. I have yet to try mucking about with other fonts, it's a start and at least Now I'm getting somewhere.

5

Thank you for your response. I did try that, changed all, changed some, to 1 in the lv_conf.h file, and tried putting the conf file in the lvgl folder, my sketch folder, the src folder, every folder.. tried including it with "" and with <>, tried including with ../../ and even full paths K:/My Documents/Arduino....... tried defining the font directly in my code, tried copying the font file into my sketch folder and including it, just nothing was working, going around in circles with AI chat and old esp32 examples.....

Nothing was working, kept saying lv_font_montserrat_20 is undefined, I couldnt find any answers to this anywhere, and even my post here was going unanswered... and now today 3 people reply to it, and I try the demo sketch someone supplied below, and BOOM the font size works.. then i go back to my sketch and change a font size and BOOM it works... i have NOT changed anything in my code except uncomment the set_text_font line of my style, and it works... so im veryyyyy suspicious some or all of you are secret Arduino spies that did some background update last night and suddenly its working.... Either way I am grateful and thank you for your time

6

Cheers for that... I just loaded that demo sketch and it worked right away, so I went back to my code and without changing a thing, simply uncommented the set_text_font line and now the fonts are working...

1 Like
7

I struggled with this also. Followed your advice and now works like a charm. Thanks

8

Same issue here. I was able to solve it by just copying lv_conf.h from libraries to libraries/lvgl/src