Questions about LVGL & examples of V5 Displays

#1

Below are some pictures of a GUI I developed. (Sorry for the quality) I am trying to develop a similar GUI in PROS.

IMG_20190322_170536 IMG_20190322_170551 IMG_20190322_170601 IMG_20190322_170636

How do you change the size of the LVGL buttons and colors?

0 Likes

PROs vs VEXcode
How to display data with PROS like Brain.Screen.printAt() of vexcode
#2
lv_obj_t * myButton= lv_btn_create(lv_scr_act(), NULL);
lv_style_t myButtonStyleREL; //relesed style
lv_style_t myButtonStylePR; //pressed style

function createButton()
{
    lv_style_copy(&myButtonStyleREL, &lv_style_plain);
    myButtonStyleREL.body.main_color = LV_COLOR_MAKE(150, 0, 0);
    myButtonStyleREL.body.grad_color = LV_COLOR_MAKE(0, 0, 150);
    myButtonStyleREL.body.radius = 0;
    myButtonStyleREL.text.color = LV_COLOR_MAKE(255, 255, 255);

    lv_style_copy(&myButtonStylePR, &lv_style_plain);
    myButtonStylePR.body.main_color = LV_COLOR_MAKE(255, 0, 0);
    myButtonStylePR.body.grad_color = LV_COLOR_MAKE(0, 0, 255);
    myButtonStylePR.body.radius = 0;
    myButtonStylePR.text.color = LV_COLOR_MAKE(255, 255, 255);

    lv_btn_set_style(myButton, LV_BTN_STYLE_REL, &myButtonStyleREL); //set the relesed style
    lv_btn_set_style(myButton, LV_BTN_STYLE_PR, &myButtonStylePR); //set the pressed style
    lv_obj_set_size(myButton, 200, 50); //set the button size
}

Also here is a tutorial that I made tutorial. It explains all the basics of lvgl.

3 Likes

LVGL Setup
#3

Instead of calling LV_COLOR_MAKE you can also use one of the built-in colors such as LV_COLOR_BLACK or LV_COLOR_WHITE
In the snippet above, the last line is the answer to your question.

1 Like

#4

That tutorial looks really great, nice job!

0 Likes

#5

Thanks for all the information. Is there a function that clears the entire screen that is similar to the Brain.Screen.clearScreen(), or do you have to delete each object at a time? Also how do you set the background color and styles?

1 Like

#6

Something you can get into the habit of doing is reading the lvgl header files, located in include/display/
One file that is useful is lv_core/lv_obj.h
There you are able to find a list of all functions you can call on a lv_obj_t*. Look in lv_objx/ for specific functions for each type of object. In lv_obj.h you can find the command

/**
 * Delete all children of an object
 * @param obj pointer to an object
 */
void lv_obj_clean(lv_obj_t *obj);

which looks like what you want. To clean all objects, just do lv_obj_clean(lv_scr_act());
lv_scr_act() returns a pointer to the screen.

It might be possible to apply a style to the screen, if you want to color the background you can do
lv_set_style(lv_scr_act(), style) to apply a style to the screen. If that does not work, you will instead have to create a container, resize it to the screen, then apply a style, then create all your objects on it.
Something I like doing is

lv_obj_t* obj = lv_obj_create(parent, NULL);
lv_obj_set_size(obj, lv_obj_get_width(parent), lv_obj_get_height(parent));

though there might be a command that does that automatically.

1 Like

#7

Thank you,
This did work lv_obj_clean(lv_obj_t *obj);
lv_set_style(lv_scr_act(), style) unfortunately this didn’t work. I couldn’t find the reference to this function. I have not yet tried the other option yet.

What would be your recommended functions that would be similar to the Brain.Screen.printAt(30, 20, “Battery Percentage: %d”, batPercent);
Would you use a label?
I am quite curious what you would recommend using.

1 Like

#8

Yes, a label is what I would use to print text. Before you try to mess around with c strings, which require buffers and sprintf, try to give C++ strings a go.

std::string text = "Value: " + std::to_string(value);
lv_label_set_text(label, text.c_str());

or

std::stringstream text;
text << "Value: " << value;
lv_label_set_text(label, text.str().c_str());

c_str() is necessary to convert the c++ string to the required const char*

One reason why lv_set_style(lv_scr_act(), &style) might not have worked is because the style object you declared went out of scope and was destroyed. I would make sure you track where all your variables go, as if you give lvgl a pointer to them and they get destroyed, lvgl will not apply the style.
The solution to this is to either call static on the style to tell the compiler not to destroy the variable, or dynamically create the style in memory using new.

lv_style_t* style = new lv_style_t;
style->something = 0;

However, looking at the header for lv_label_set_text ,

/**
 * Set a new text for a label. Memory will be allocated to store the text by the
 * label.
 * @param label pointer to a label object
 * @param text '\0' terminated character string. NULL to refresh with the
 * current text.
 */
void lv_label_set_text(lv_obj_t *label, const char *text);

it says the text is copied by lvgl, so there is no worry about the text variable you give to lvgl going out of scope.

Edit:
To learn more about string and stringstream, follow the links.
To include them into your project you need to include <string> or <sstream> respectively.

2 Likes

How to display data with PROS like Brain.Screen.printAt() of vexcode
Displaying shapes to the V5 screen
#9

Btw, here is a PID tuner I made for our flywheel. It uses lv_btnm, lv_label, and lv_gauge.
The decimal modifier can be changed by Mult.
I will probably release code at the end of the season.

image

3 Likes

#10

That looks so cool @theol0403!
Can you post the code?

0 Likes

#11

The code for this is more than I am willing to paste at this time. I showed that demo to show what lvgl is capable of, you could probably make something similar. I employ the use of many C++ utilities such as tuples and string manipulation, and is part of a greater library I don’t want to release quite yet.
At the end of the season I will likely release most of my code, but with proper documentation and comments.

1 Like

#12

It looks great.I wish vex os title could be hidden.

2 Likes