How to work with LVGL
To use this code you will need a micropython firmware that has the lvgl module installed. Lv micropython is the best place to get started if you don’t have one.
There is some example code at the end of this page showing how all of this works together. If the part on styles seems confusing, the example might help. Here is what this post will show you how to do.
What are LVGL labels
Labels are how you put text on your screen. Labels have some simple methods to set their position and text, but if you want full control you will need to use styles unfortunately.
How labels work
To create a label use lvgl.label(). This will return a label that is inside of the object you give it. lvgl.scr_act() is the screen object so lvgl.label( lvgl.scr_act() ) will put a label on the screen. You can put a label in most other lvgl objects like buttons, windows, lists or even another label.
Position
To set the position use .set_x() and .set_y(). The numbers you give these functions are how many pixel you want to skip before the label appears. To make your code more consise you can use .set_pos(). It takes both the x and y values like this YourLabel.set_pos( YourX, YourY ).
More on Position
The label’s position is based off of its parents. If you set x to 50 pixels and the label’s parent’s x is set to 25 pixels, the label’s position on the screen will be 50+25 or 75 pixels. If a label’s parent is the screen, then its position will be exactly the number you put in. In our example, that would be 50 pixels. If your text seems to be in the completely wrong place, this might be your problem, but most of the time you don’t need to worry about this.
Text
To set a label’s text you use .set_text() and put the text you want in the parentheses. The default font seems to work with only English text, but lvgl does allow you to change fonts, if you want to use another language.
Changing the Text Color of Labels
If you want to change the color of a label, you have to go through styles. This will take three steps.
Creating the Style
To create a style, use lvgl.style_t(). This returns a empty style. To use it you will first need to initialize it with .init(). If you create a style called BigStyle and wanted to initialize it use BigStyle.init().
Setting the Color
Set the color with .set_text_color(). To tell lvgl the color you want use lvgl.color_hex() and give the color you want in hexadecimal. To bring this all together if you had a style called BrightStyle and wanted it green. You would use BrightStyle.set_text_color( lvgl.color_hex(0x00FF00) )
Connecting the Style and Label
The last thing to do is hook the label and style together. This is how its done YourLabel.add_style( YourStyle ,0) . The zero is part of another complex style feature. Ignore it for now. That is how you set text color in lvgl. With all that work, it’s almost not worth it to change the color.
Here is a some simple style code with all the things explained above and what it looks like on my label.
customStyle = lvgl.style_t()
customStyle.init()
customStyle.set_text_color(
lvgl.color_hex(0x00FFFF))
myLabel.add_style( customStyle ,0)
Example Code
Examples are a great way to to explain code. So this is a simple program to display text on your screen, set its position, and change its color. You will probably need to change the screen setup code for it to work with your screen.
import lvgl
# put your screen setup code here:
from ili9XXX import ili9341
screen = ili9341(mosi=23, miso=38, clk=18, dc=15, cs=5,width=320, height=240)
#You don't need but will probably want some touch screen code
#here is what I use
from ft6x36 import ft6x36
touch = ft6x36()
label = lvgl.label(lvgl.scr_act())
label.set_text('hello world!')
label.set_x(50)
label.set_y(50)
myStyle = lvgl.style_t()
myStyle.init()
myStyle.set_text_color(
lvgl.color_hex(0x00FF00))
label.add_style(myStyle,0)What you have learned
In conclusion, this is how you create labels, position them, and change their color. This is most of what you will need to do with them.
If you want to learn more about lvgl, micropython LVGL events might interest you.