【Me and gui-guider②】Button control

RCSN

【Me and gui-guider②】Button control [Copy link]

 

 

The word "botton" means button, and it also acts as a switch in LGVL. Here we will explain how to operate "button" with the help of GUI-GUIDE, so as to understand the button control of LGVL in a vivid way.

Here we build our own resolution project based on the new project in the previous chapter, refer to https://bbs.eeworld.com.cn/thread-1159377-1-1.html, and use the event trigger of the button control as the naming ID, as shown below

Here we use seven buttons, which means there are seven button events in this designer. We take the clicked button to introduce the related properties of the button, and then other controls are operated in the same way. We switch it to Chinese so that it is easier for us to understand.

1. The general part includes the name ID, control coordinates, and control size.

① Name ID: The system defaults to btn_x. The buttons are sorted according to the serial number. However, when actually using it, it is recommended to name it yourself, using the control function as a brief name. The same source cannot have the same name, but different sources can.

②Control coordinates: divided into horizontal and vertical coordinates. The current version of the designer does not support alignment between two controls, which is not very convenient. If you need to align multiple controls, either make the horizontal and vertical coordinates the same on the designer, or place them randomly in the designer and then manually add the API in the custom file to align them.

③Control size: divided into height and width. It is very simple, just define the size of the control.

2. Properties section, including text editing, toggle, font selection, font size, font color

① Text editing: You can edit the text of the button, which is actually to create a label child object in the parent object of button. It should be noted that the default generation is aligned with the center of the button. If you need to align the top, bottom, left, and right sides freely, you need to disable the layout function in the custom code. After disabling, the placement of the child object in the parent object must be manually defined through the API interface. Eg: lv_btn_set_layout(ui->led_page1_btn_back, LV_LAYOUT_OFF)

② Switch: Also known as toggle. Checking this option will use the button as a switch. After the style changes before and after clicking, the subsequent style will remain unchanged until the next click.

③Font selection: Currently only simsum is supported, but this font is ugly. We can generate our own font library and change the font library of the designer through custom. This will be explained in the following chapters.

Note: The designer currently has an option to support importing custom fonts, but the import does not take effect. After all, it is version V1.0. Just wait for the official fix.

④Font size: that is, the size of the font. The larger the font, the more ROM it consumes. Balance your resources to determine the size.

⑤Font color: that is, the RGB color of the font. You can enter the RGB manually or select it in the color box.

freebsder

I just like to see RC toss new things

RCSN

3. Style attributes: different states can have different styles. The biggest change in LGVL 7.0 and above is here. The diversity of styles also provides users with multiple choices, including background, inner and outer borders, animation effects, etc.

①Default style: If checked, the styles of each state will be based on the default.

②State: This is the current state of the control, including the default state (no action), focus, click, and flip states.

③Disable function: If clicked, the currently selected style will be invalid, and the style will not be displayed even if the action occurs.

④ Background: This is the background color of the control, which includes background color, gradient color, transparency, and gradient mode. 255 is opaque and 0 is transparent.

For example, if the selected background color is blue, the gradient color is white, the transparency is 255, and the gradient direction is vertical, the effect is as follows:

If the selected background color is blue, the gradient color is white, the transparency is 150, and the gradient direction is horizontal, the effect is as follows. Transparency is very useful when there is a foreground of pictures or colors.

Next picture

① Border: There are color, transparency, width, and rounded corners to choose from. To make it easier to understand these properties, the A, B, and C controls on the right are listed here. A is the default style border on the picture, B has a transparency of 150, a width of 4, and a rounded corner of 200; C has a rounded corner of 0, which turns it into a rectangle.

③Animation This is a new change in Lgvl. If animation is set here, the displacement, method and duration will be animated.

4. Event Button supports many events. Event attributes include target object, trigger mode, action object, and action on the action object. The event processing in the designer is very complete. In particular, it also supports custom C language, which also gives users enough scalability.

Here we take each control as an event name, and the object of action is still itself. The actions of each control are different. Some of them change the background color, change the length and width of the control, hide the control, set animation, etc. Here we look at the designer's simulator and its operation on the microcontroller.

annysky2012

After copying, just reinsert the image in the text

Jacktang

Can the digital values of three colors be displayed when RGB is automatically adjustable?

RCSN

Jacktang posted on 2021-3-20 18:42 Can the digital values of three colors be displayed when RGB is automatically adjustable?

Yes, this is easy to implement with the designer.

RCSN

annysky2012 posted on 2021-3-20 13:43 After copying, just reinsert the image in the text

That's what I do now

RCSN

So far, the button control has been explained. In the next chapter, we will talk about the btnimg control, which is the button space with a picture.

dql2016

Where can I download this designer? It looks good.

RCSN

dql2016 posted on 2021-3-22 13:36 Where can I download this designer? It looks good

Download from NXP official website

ou513

Good stuff. I have a question, how does a button respond to a physical key press?

RCSN

ou513 posted on 2021-3-23 08:00 Good stuff, I would like to ask, how does the button respond to the physical key press?

You can change the state and style of the button by reading the state of the physical button

深宣宣

Mark

w494143467

The OP wants to play guider all over~