5937 views|13 replies

1366

Posts

6

Resources
The OP
 

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

 
 
This post was last edited by RCSN on 2021-3-20 21:19

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://en.eeworld.com/bbs/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.

This post is from Domestic Chip Exchange

Latest reply

The OP wants to play guider all over~   Details Published on 2021-6-29 17:40

赞赏

1

查看全部赞赏

Personal signature

1084534438 欢迎交流  [加油,一切皆有可能]

 
 

7422

Posts

2

Resources
2
 

I just like to see RC toss new things

This post is from Domestic Chip Exchange
Personal signature

默认摸鱼,再摸鱼。2022、9、28

 
 
 

1366

Posts

6

Resources
3
 
This post was last edited by RCSN on 2021-3-20 21:17

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.


This post is from Domestic Chip Exchange
Personal signature

1084534438 欢迎交流  [加油,一切皆有可能]

 
 
 

1412

Posts

3

Resources
4
 
After copying, just reinsert the image in the text
This post is from Domestic Chip Exchange

Comments

That's what I do now  Details Published on 2021-3-20 19:47
 
 
 

6547

Posts

0

Resources
5
 

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

This post is from Domestic Chip Exchange

Comments

Yes, this is easy to implement with the designer.  Details Published on 2021-3-20 19:47
 
 
 

1366

Posts

6

Resources
6
 
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.

This post is from Domestic Chip Exchange
Personal signature

1084534438 欢迎交流  [加油,一切皆有可能]

 
 
 

1366

Posts

6

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

That's what I do now

This post is from Domestic Chip Exchange
Personal signature

1084534438 欢迎交流  [加油,一切皆有可能]

 
 
 

1366

Posts

6

Resources
8
 

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.

This post is from Domestic Chip Exchange
Personal signature

1084534438 欢迎交流  [加油,一切皆有可能]

 
 
 

1236

Posts

66

Resources
9
 

Where can I download this designer? It looks good.

This post is from Domestic Chip Exchange

Comments

Download from NXP official website  Details Published on 2021-3-22 17:28
 
 
 

1366

Posts

6

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

Download from NXP official website

This post is from Domestic Chip Exchange
Personal signature

1084534438 欢迎交流  [加油,一切皆有可能]

 
 
 

1173

Posts

3

Resources
11
 

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

This post is from Domestic Chip Exchange

Comments

You can change the state and style of the button by reading the state of the physical button  Details Published on 2021-3-23 22:26
 
 
 

1366

Posts

6

Resources
12
 
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

This post is from Domestic Chip Exchange
Personal signature

1084534438 欢迎交流  [加油,一切皆有可能]

 
 
 

39

Posts

0

Resources
13
 

Mark

This post is from Domestic Chip Exchange
 
 
 

1942

Posts

2

Resources
14
 

The OP wants to play guider all over~

This post is from Domestic Chip Exchange
 
 
 

Just looking around
Find a datasheet?

EEWorld Datasheet Technical Support

EEWorld
subscription
account

EEWorld
service
account

Automotive
development
circle

Copyright © 2005-2024 EEWORLD.com.cn, Inc. All rights reserved 京B2-20211791 京ICP备10001474号-1 电信业务审批[2006]字第258号函 京公网安备 11010802033920号
快速回复 返回顶部 Return list