Button Widget

## Button Widget

### Definition
The button widget is an interactive control. Users can trigger specific functions or commands by clicking and other operations. Such as opening a new page, running a certain flow, etc.

### Attributes
Basic information, coordinate size, minimum width and height, maximum width and height, and permissions are consistent with the Image Widget. Please check the [Image Widget](/doc/621) relevant introduction.

Zhunyi only provides the Click event type for the button control. The click event has two states: Pressed and Released. Each state can be bound to an event.

### Event - Click
The event that needs to be triggered when the user clicks the mouse down. Select the event to bind in all event pop-up windows. Zhunyi has built-in rich events for customers to choose from.

![](/media/202603//1772529895.9110727.png)

**There are five types of events: Modify Value, Open Page, Execute Flow, Operate Project, and Interface Function.**

**Modify Value:** Mainly for Boolean type data (these data come from global variables module or parameters in algorithm modules). When the button is clicked, its value is always set to true. For example, the original parameter value is false, and it becomes true after clicking; or the original parameter value is true, and it remains true after clicking.

![](/media/202603//1772529896.1641493.png)

**Open Page:** The pages here mainly include two parts. One part is the system preset page, which is also the global interface, such as camera configuration page, hardware management page, login interface, etc. The second part is the parameter adjustment page of the module in the flow. Customers can set which modules need to debug parameters.

![](/media/202603//1772529896.4073153.png)

**Execute Flow:** All flows in the project can be controlled by the button's click event. There are 6 types of control, namely Execute Normal Flow Once, Continuously Execute Normal Flow, Stop Normal Flow, Execute Global Flow Once, Continuously Execute Global Flow, and Stop Global Flow. These controls correspond to the operations of VG software as shown below.

![](/media/202603//1772529896.6842275.png)

**Operate Project:** Perform related operations on the project. Zhunyi has set up three operations, namely Save Project, Open Soft Keyboard, and Close Soft Keyboard. If you want to feel the effect of the event, you can combine Lua scripts for log recording, and then introduce the log module to see the event log.

![](/media/202603//1772529896.9126623.png)

**Interface Function:** There are two data sources. The first is the event function defined by all controls, which is automatically generated by the system and displayed in this window for customers to edit. For example, if a button (pushButton_11) sets a click event (buttonPressed), you can trigger the buttonPressed event of pushButton_11 by defining the event type as an interface function in another control, as shown in the figure below.

![](/media/202603//1772529897.155496.png)

The second is a custom event function, which can be defined by yourself in the script editor. You need to know Lua programming technology. Details can be introduced in detail in Chapter 3 later.

### Event Release
The event that needs to be triggered when the user releases the mouse after clicking. Select the event to bind in all event pop-up windows. Zhunyi has built-in rich events for customers to choose from. For specific event types and corresponding definitions and usages, please refer to the [Event - Click](h5-Event-Click) section.

### Appearance Attributes

![](/media/202603//1772529897.4188168.png)

**Appearance - Text:** Users can customize the text of the button so that the user knows the specific function of the button.

**Appearance - Select Icon:** The button control supports icon buttons, making the button expression richer and combining text and graphics. The size and position of the icon can also be customized. The icon can be on the left or right of the text.

### Font Attributes

![](/media/202603//1772529897.6780648.png)

![](/media/202603//1772529897.928377.png)

### Corner Radius Attributes
Customers can set whether the button is right-angled or rounded. The larger the value, the larger the rounded corner. In extreme cases, it can become an ellipse (originally a rectangle) or a circle (originally a square).

![](/media/202603//1772529898.1457713.png)

---

Click here to jump to the corresponding Chinese manual page: [Button Widget](/doc/342)