Configure Item Description

Basic Properties

In the Basic Attributes section, you can adjust the size, position, rotation angle, and opacity of the widget.

• Size: indicates the size of a widget, including its pixel width and height. You can click the icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
• Position: the position of a widget, which is indicated by pixel X and Y coordinates. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.
• Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
  • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.
  • Drag the black dot in the icon.
  • Click the icon to horizontally flip a widget.
  • Click the icon to vertically flip a widget.
• Opacity: the opacity of a widget. Valid values: 0 and 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.

Color selector description

You can use the color selector to configure attributes such as a widget's font color, axis color, grid line color, and border color. This document will show you two ways to change text color.

• Click the Common Color Block icon and select a color.

  The common color block function can help you quickly select the common colors in the system, which is simple and convenient, and can efficiently modify the colors of corresponding components.

• Click the Color Picker icon to adjust the color transparency of the text, add or remove global colors, or select the most recently used color.

  • Adjust font color transparency: Drag the Transparency slider, or modify the A value to adjust the color transparency.

  • Add or remove a global color: Select a color from the drop-down list and click the + icon below Global Color to add the current color as a global color. Move the pointer over the added global color and drag it outside the Global Color section to delete the global color.

    Note

    Colors selected through the <g id="1">Global Colors</g> parameter are applied throughout the entire project, and saved in the <g id="2">Recently Used</g> bar of every screen and widget for you convenience.

  • Select Recently Used Color: The system automatically records your recently used color and displays it in the Recently Used section. If you want to use the same color, click the color block to apply it to the widget.

Copy data

In the data source editing box, click the icon in the lower-right corner to copy all data in the current data editing box.

Edit data in full screen

In the data source editing box, click the icon in the lower-right corner to display the data in the current data box in full screen and edit the current data in full screen mode.