How do I get two different sized fonts in an LVGL label

ESPHome
1

I want to build something like this.

enphase_font
enphase_font463Ă—549 18.2 KB

I have seen this a lot where the data and the units are different sized fonts and I like the way it looks. It works good for time as well where the AM / PM are small

Before LVGL I would use code like this.

        it.printf(80, envoyCPP_y, id(roboto50), Color(55, 183, 220), TextAlign::BASELINE_LEFT, "%.0f", envoyCPP);
        envoyCPP_size = GetTextWidth(&it, id(roboto50), "%.0f", envoyCPP);
        it.print(80 + envoyCPP_size + 2, envoyCPP_y, id(roboto30), Color(55, 183, 220), TextAlign::BASELINE_LEFT, "W");

The GetTextWidth command is extremely useful! Is there an equivalent in the LVGL world?

2

A single label can only have one font, but what’s stopping you using two labels?

3

Nothing that is probably how it will need to be done. But how can I get one label to appear right after another one. The with of the text will differ depending on its value so the “units” label will need to keep moving left or right whenever the “Data” label is updated.

I’m sure this is possible I just don’t know how to get the label to move.

4

I would suggest you don’t want the label to move. Give the labels a fixed width (perhaps 50% each, depending on what they’re contained in) and right align the text in the value, left align the units. Add padding (probably to both) to provide some space between them.

5

That’s not what I’m trying to do. Take a look at the image at the top of the post. The data + units is perfectly centered under each graphic element. if its 1 kwh or 1000 kwh it move the data + units around to make it look good.

There are obviously easier ways to do this such as just making the data + units the same font. But it doesn’t look as nice. This is all about ascetics.

The old graphics system has a simple command (GetTextWidth) to do this. Is there no command or helper in LVGL that can calculate the width in pixels of the text?

6

Well of course you can do that, and you don’t need to calculate anything, just wrap the two labels in an obj and center that.

Personally I find text that jiggles around as a value changes irritating and always assumed that was just sloppy coding rather than a design choice :smile:

7

In this case the display only updates once per minute so there won’t be much “jiggles”

I think I got it!

lvgl_demo
lvgl_demo486Ă—522 5.9 KB

The only tweaking I needed to do was set the height of the unit label. This is the only way I could get the text baselines to line up.

  pages:
    - id: main_page
      width: 100%
      bg_color: White
      widgets:
        - obj:
            border_width: 1
            border_color: red
            radius: 0px
            pad_all: 0px
            x: 10
            y: 10
            width: 200
            height: 85
            layout:
                type: FLEX
                flex_flow: ROW_WRAP
                flex_align_main: center
                flex_align_cross: end
                pad_column: 2px
                pad_row: 0px
            widgets:
              - label:
                  text_font: roboto40
                  text: 49.9
              - label:
                  text_font: roboto24
                  text: kWh
                  height: 32
              - label:
                  text_font: roboto24
                  text: Produced
1 Like
8

Great. Technically to get the baselines to align it’s pad_bottom you should use. The different font sizes obviously have baselines that are a different height so you need to pad the label with smaller font up a bit from the bottom.

1 Like