All Products
Search

This Product

    DataV:full-screen-switch

    Document Center

    DataV:full-screen-switch

    Last Updated:Dec 03, 2024

    This topic describes the meaning of each configuration items when you switch from Full Screen to Full Select.

    Chart style

    You can switch between full-screen display and small-screen display in a flexible manner. image.png

    Style Panel image.png

    • Search Configuration: Click the Search configuration items icon imagein the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of the configuration items that you want to search for and locate the configuration items. Fuzzy match is supported. For more information, see Search configuration items.

      • Size: the width and height of the widget. Unit: pixels.

      • Positioning: the x-axis and y-axis of the component. Unit: pixels. 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.

      • Rotate: The widget is rotated around the center of the widget. Unit: degrees.

        • 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.

        • Click the imageicon to flip the widget style.

        • Click the imageicon to flip the widget style.

      • Opacity: Valid values: 0 to 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.

    • Enter: the icon to enter the full screen mode. If you want to use an image on a remote server, enter the URL of the image in the input box. Click Preview in the image box to preview the large image style. Click Change in the dashed box below the image box. For more information about how to change the image design asset, see Use the interface.

    • Exit: the icon to exit the full screen mode. If you want to use an image on a remote server, enter the URL of the image in the upper-right corner. Click Preview in the image box to preview the image format. Click Change in the dashed box below the image box. For more information about how to change image design assets, see Use the interface.

    • Background Color: the background color of the icons. For more information, see Color picker.

    • Border Radius: the shape of the background. Default value: 50%, which indicates that the background is a circle. If you set the value to 0%, the background is a square.

      Note

      If the widget is not a square, the background is an ellipse when you set Border Radius to 50%.

    • Show Background Image: If you turn on the switch, the background always shows. If you turn off the switch, the background shows only when you move the pointer over the full screen switch.

    Note

    You can only see the styles you configured under the Preview or Publish page.

    Data Sources panel

    This widget does not support data configuration.

    Advanced Panel

    This component does not require interaction event configuration.

    Blueprint Interaction

    1. Click the imageicon in the upper-left corner to go to the Blueprint page.

    2. On the Layer Nodes tab, add the widget to the main canvas.

    3. View blueprint configuration parameters. image

      • Event

        Parameter

        Description

        When entering full screen

        This event is triggered when you enter the full screen mode and does not need parameter input.

        When exiting full screen

        This event is triggered when you exit the full screen mode and does not need parameter input.

      • Action

        Action

        Notes

        Go to Full Screen

        This action enters the full screen mode and does not need parameter input.

        Exit Full Screen

        This action enters the full screen mode and does not need parameter input.

        Move

        Move a widget to a specified location. For more information, see the data example. 

            {      
      // 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"
      }
    }

        Switch Display /Hash

        Toggles whether the widget is displayed or hidden. No parameters are required.

        Display

        Display the widget. For more information, see Data example. 

        {
  "animationType": "",// The animation method. Valid value: fade. If you do not set this parameter, no animation is available. 
  "animationDuration": 1000,// The animation delay. Unit: ms. 
  "animationEasing": ""// animation curve
}

        Hide

        Hide the component. For more information, see Data example. 

        {
  "animationType": "",// The animation method. Valid value: fade. If you do not set this parameter, no animation is available. 
  "animationDuration": 1000,// The animation delay. Unit: ms. 
  "animationEasing": ""// animation curve
}

        Update component configurations

        Style configurations of widgets are dynamically updated. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data of the widget. After that, change the style field for the data processing node in Blueprint Editor.