Custom label with two font sizes plus a symbol

How-to
1

Description:

Finding a better way to create a custom label with two font sizes plus an icon

Processor using:

ESP32

LVGL version using:

v7.0.0

Want to achieve:

Want to customize the appearance of a floating-point variable e.g. 320.60, such that the integral part in larger font size 96 and the decimal place with “.60” printed in 1/2 font size (48.) Optionally, an icon to be displayed under “.60” with an illustration of the target label at the bottom of this message.
It is possible to develop a function with two labels for the integral and decimal parts respectively, but it seems using a CSS-like style is also possible.
The css:

.integral{ font-size:96px; }
.decimal { font-size:48px; }

But I don’t have any clue to use the style of LVGL to make it. This is the problem.

Any suggestion is welcome.

Illustration is shown below

custom_label

2

I think that may be done by two lables now

3

Yes, you need more objects or customize a normal label’s design function. See more here:

2 Likes