The customized background widget allows you to add a background to one or more widgets.

Settings

  • Size: indicates the size of a widget, including its pixel width and height. You can click the Proportional resizing 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 Rotation control icon icon.
    • Click the Horizontal flip icon to horizontally flip a widget.
    • Click the Vertical flip 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.
  • Custom Style: If you select this option, you can customize the background style as needed. If you clear this option, you can customize the background color and border radii.
    Figure 1. Turn on the custom style switch
    Turn on the custom style switch
    Figure 2. Turn off the custom style switch
    Turn off the custom style switch
  • Background Color: This option is displayed when you do not select Custom Style. To change the background color of the widget, see Color picker.
  • Border Radius: This option is displayed when you do not select Custom Style. To adjust a border radius, such as the radius in the Upper-left Corner, Lower-left Corner, Upper-right Corner, and Lower-right Corner, enter a value or drag the slider.
  • Custom Background Style: This option is displayed when you select Custom Style.
    • Border Image Source: To change the image in the box, click the Trash icon and upload a local image. To use an image from the Internet, enter the URL of the image.
    • Crop: If you select this option, the borders of the image are cropped to fit.
    • Sliced Border Width: To adjust the width of the borders of the image, enter a value. The setting takes effect only when you select Crop.
    • Border Style: To change the border style, click the drop-down arrow and select the target style. The borders can be solid, dashed, or dotted.
    • Border Width: To adjust the border width, enter a value. The unit is pixels.
    • Inner Background: To change the color of the inner background, see Color picker.
    • Background Color: To change the color of the outer background, see Color picker.
  • Filter: To adjust the blurring of the widget border, enter a value. The unit is pixels.
  • Backdrop Filter: To adjust the blurring of the widget background, enter a value. The unit is pixels. This option takes effect only when you enable Experimental Web Platform features for your Chrome browser.
    Note To enable Experimental Web Platform features, follow these steps:
    1. Open the Chrome browser and enter chrome://flags/#enable-experimental-web-platform-features.
    2. Click the drop-down arrow next to Experimental Web Platform features and select Enabled.
    3. Restart the browser.

Data

You do not need to configure data for this widget.
Note This widget can be extended to be a line.

Interaction

This widget is not connected to any events yet.

Configure interactions in Blueprint Editor

  1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
  2. Click the Blueprint Editor icon icon in the upper-left corner of the page.
  3. On the blueprint editor configuration page, click the Customized Background component in the Import Nodes section. You can view the multi-line text configuration parameters in the blueprint editor on the canvas. Customized Background
    • Action
      Action Description
      Update Widget Configurations Style configurations of widgets are dynamically updated. Before this action is executed, you must click the widget in Canvas Editor, click the Settings tab in the right-side panel, and click Copy Configurations to... to obtain widget configurations. After that, change the style field for the data processing node in Blueprint Editor.
      Show A widget is shown without the need to specify parameters.
      Hide A widget is hidden without the need to specify parameters.
      Hide/Show A widget is hidden or shown.
      Move A widget is moved to a specified location. The following example shows the reference data.
          {
            // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. 
              "positionType": "to",
            // The location, which is indicated by the x and y coordinates. 
            "attr": {
              "x": 0,
              "y": 0
            },
            // The animation type. 
            "animation": {
              "enable": false,
              // The duration in which animation is displayed. 
              "animationDuration": 1000,
              // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. 
              "animationEasing": "linear"
            }
          }