Rework Fonts Styles support in Littlevgl

Hello,
to use multiple fonts sizes in actual library we need to create a new style for each font size. This is the wrong way to do it.
From my understanding, a style has text.font property that let you assing a font (bitmapped ttf at a specific size using converter).
The philosophy behind a style is to be able to change the appearance of the whole interface changing a single line of code. This is completely violated with actual handling of font sizes. With actual behaviour, each time I change the GUI style, I need to iterate arround all labels associated styles an change them.
I think that a style should contain multiple font sizes, i.e. LV_FONT_DECLARE(myfont) should declare fonts in a specific style.
When user applied a font to a label, he should associate the font at its default size. User should be able to select the font in the fonts set associated to the style, the same we do select a color in the color palete (the index of the font will selects a specific font).
This will let user, using a simple index, to select a font (defined by its size, facename, attribute == bold, italic, … as all those are in the font when bitmapped from the ttf file).
This way, a user can put for example 4 fonts (Arial20, Arial10, Arial4, TimesNewRoman40) and use them in various GUI lables (those in menus should be bigger than those in buttons, and those in tags should be the smaller ones, …).
When user switch to a second style, all those indexes will be switched to the 4 fonts of the new style and the GUI will change style with a single line of code as expected from the styling.

Let’s say you have 3 label styles (style_label_small/medium/large) and you change for example style_label_small.text.color = LV_COLOR_RED you need to call lv_obj_report_style_mod(&style_label_small) to refresh all labels.
I think it’s quite simple.

Sorry but this was not the point. My idea is that we almost usually need multiple fonts (mainly cause of size) for various labels.
I have to create (for example) 2 sets of 3 styles of fonts (fs_Large, fs_Medium, fs_Small) using Arial and TimesNewRoman
[ Arial_fs_Large, Arial_fs_Medium, Arial_fs_Small ]
[ TimesNR_fs_Large, TimesNR_fs_Medium, TimesNR_fs_Small ]
I choose to use Material theme and Dark theme cause my device has to change depending on wether it’s daylight or night (like on TomtomGPS for example).
I choose that in daylight, I use Material with big labels for menus, small labels for tabs and medium for buttons using the Arial set of fonts.
For Dark theme I choose to use same (or even different font sizes) with TimesNewRoman.
In this case, each time I change from Dark to Material theme, I need to setup a function that iterates arround all visible items of current screen in order to assign the correct fontstyle to each element (cause menus becomes smaller by night, buttons bigger, …).

The philosophy of using Styles is that we can change the whole theme without having to iterate arround each widget to affect the correct font to it.

This is completeley achieved for Colors for example simply because colors are choosen by index in a color palette in most applications. We can do the same for fonts.
User can create a set (lookup table) of fonts assigned to each theme, and assign a font index from this LUT to his widget.
When you change theme, the theme engine will automatically (like it does for colors palete) use the correct LUT (palette) of fonts and assign correct font to correct widget automatically.

I don’t know if my explanation is clear, sorry english is only my third language.

I think I got the idea. But it seems it’s rather related to the themes then styles.

So the gist is to pass a font array (instead of a single font) to the theme init function, right?
If so, I agree. For the next major release (v7.0) the themes will be reworked and probably they will work this way, with more fonts.

lgvl ver 7.0 in arduino
cannot change font and size font

v7 can I change size widget and add my font
i dont know function to use

Please refer to my post above.

It doesn’t work

The font remains the same size.

static lv_style_t style;

/* Create simple label */
lv_obj_t *label = lv_label_create(lv_scr_act(), NULL);
lv_label_set_long_mode(label, LV_LABEL_LONG_SROLL_CIRC); /Circular scroll/
lv_obj_set_width(label,300);
lv_style_init(&style);
lv_style_set_text_font(&style, LV_STATE_DEFAULT, &lv_font_montserrat_36);
lv_label_set_text(label,“no”);
lv_obj_align(label, NULL, LV_ALIGN_CENTER, 0, -90);

You also need to add the style to the label using lv_obj_add_style(label, LV_LABEL_PART_MAIN, &style);.

1 Like

IT work
Thank you sir.

static lv_style_t style_screen;
lv_style_init(&style_screen);
lv_style_set_bg_color(&style_screen, LV_STATE_DEFAULT, LV_COLOR_BLUE);
lv_obj_add_style(lv_scr_act(), LV_OBJ_PART_MAIN, &style_screen); //turn the screen white

static lv_style_t style;

/* Create simple label */
lv_obj_t *label = lv_label_create(lv_scr_act(), NULL);
label1 = label;
lv_obj_add_style(label, LV_LABEL_PART_MAIN, &style);
lv_style_init(&style);
lv_style_set_text_font(&style, LV_STATE_DEFAULT, &lv_font_montserrat_48);

lv_obj_set_width(label,50);
//lv_label_set_long_mode(label, LV_LABEL_LONG_SROLL_CIRC); /Circular scroll/
lv_label_set_recolor(label, true);

lv_label_set_text(label,"#9BFF00 THANK YOU SIR#");
lv_obj_align(label, NULL, LV_ALIGN_CENTER, 0, -90);

/* Create a slider in the center of the display */
lv_obj_t * slider = lv_slider_create(lv_scr_act(), NULL);
slider1 = slider;
lv_obj_set_width(slider, screenWidth-50); /Set the width/
lv_obj_set_height(slider, 50);
lv_obj_align(slider, NULL, LV_ALIGN_CENTER, 0, 0); /Align to the center of the parent (screen)/
lv_obj_set_event_cb(slider,slider_event_cb); /Assign an event function/
lv_slider_set_range(slider, 0, 100);

static lv_style_t style1;
/* Create a label below the slider */
slider_label = lv_label_create(lv_scr_act(), NULL);
lv_obj_add_style(slider_label, LV_LABEL_PART_MAIN, &style1);
lv_style_init(&style1);
lv_style_set_text_font(&style1, LV_STATE_DEFAULT, &lv_font_montserrat_48);
lv_label_set_recolor(slider_label, true);
lv_label_set_text(slider_label, “#9BFF00 0#”);
lv_obj_set_auto_realign(slider, true);
lv_obj_align(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 60);