Dialog Button

This widget can be used to create a user interface with a dialog window. This is especially useful if you want to visualize some components of your user interface in a separate window. You have to add an additional view that defines the content of the window and configure the "Dialog Button" widget to show the respective view in the new window. In the Frontend the new window can be opened by clicking on the dialog button.

To get a detailed description how to configure the "Dialog Button" widget for this kind of user interface, please refer to the chapter Creating a User Interface with a Dialog Window.

Style

X, Y:

Adjust the position of the widget by typing the desired coordinate values of the upper left corner into the input field.

Z-Order:

Adjust the z-order of the widget by typing the desired value into the input field. This defines which widget is displayed on top if several widgets are positioned at the same place, for example, if widget "A" has "Z-Order" "0" and widget "B" has "Z-Order" "1", widget "B" will be displayed on top of widget "A".

Width:

Adjust the width of the widget. The width is defined in pixels and set to 150 by default. To change the value, type the new width into the input field. It must be at least 20 and not be bigger than 2147483647.

Height:

Adjust the height of the widget. The height is defined in pixels and set to 50 by default. To change the value, type the new height into the input field. It must be at least 20 and not be bigger than 2147483647.

Corner Radius:

Adjust the corner radius of the button by typing the desired value into the input field. It is defined in pixels and set to 5 by default.

Text:

Define the text to be displayed in the button by typing the text directly into the text field.

Font Family:

Select the font family of the displayed text in the drop-down menu of this property.

Font Size:

Adjust the size of the displayed font. Select the font size from the combo box or type the value directly into the input field.

Font Color (Normal):

Adjust the color of the font for the case the button is active and can be pressed. To change the color, click into the color field and select a new color in the color selection dialog or enter the color code manually.

Font Color (Pressed):

Adjust the color of the font for the case the button is pressed. To change the color, click into the color field and select a new color in the color selection dialog or enter the color code manually.

Font Color (Inactive):

Adjust the color of the font for the case the button is inactive, i.e., if the button refers to a view to which the user has no access rights. To change the color, click into the color field and select a new color in the color selection dialog or enter the color code manually.

Background Color (Normal):

Adjust the background color of the button for the case it is active and can be pressed. To change the color, click into the color field and select a new color in the color selection dialog or enter the color code manually.

Background Color (Pressed):

Adjust the background color of the button for the case it is pressed. To change the color, click into the color field and select a new color in the color selection dialog or enter the color code manually.

Background Color (Inactive):

Adjust the background color of the button for the case it is inactive, i.e., if the button refers to a view to which the user has no access rights. To change the color, click into the color field and select a new color in the color selection dialog or enter the color code manually.

Border Color (Normal):

Adjust the border color of the button for the case it is active and can be pressed. To change the color, click into the color field and select a new color in the color selection dialog or enter the color code manually.

Border Color (Pressed):

Adjust the border color of the button for the case it is pressed. To change the color, click into the color field and select a new color in the color selection dialog or enter the color code manually.

Border Color (Inactive):

Adjust the border color of the button for the case it is inactive, i.e., if the button refers to a view to which the user has no access rights. To change the color, click into the color field and select a new color in the color selection dialog or enter the color code manually.

Border Width:

Adjust the border width of the button by typing the desired value in the input field. It is set to 2 by default.

Action:

Select which action is performed when pressing the button. You may select the action from the drop-down list. The list offers the following actions:

  • Closing the current modal window in which the dialog button is used.
  • Opening one of the currently available views in a new window.

If you add further views to your design, they will also be added to the drop-down list of this property.

Modal:

Define if the selected view is opened in a modal window. This means that the parent window will be inactive as long as the modal window is open. By default, it is set to "true", i.e., the window is opened as a modal window. If you want to open the dialog as a non-modal window, select "false" from the drop-down list.

Application Example

This widget is used in the following MERLIC Vision App examples:

  • check_pen_parts.mvapp
  • measure_distance_segment_circle_calibrated.mvapp
  • measure_distance_to_center_led.mvapp