DocsICP FilingConsole
Documentation
Home Page DataV DataV-Board 7.0 User Guide visualization-console Component Guide Component management widgets-on-pcs Media single-picture

single-picture

Updated at:
Copy as MD
Product
My Favorites

Configure a single image widget by specifying the image source, display style, hyperlink, and interaction settings.

Chart style

A single image is a media widget that displays a custom image with an optional hyperlink. Use it to add background images or visual elements to your dashboard. image

Style Panel image

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

  • Image Type: the image type that can be selected for the widget, including Bitmap and Vector.

  • Background Image: If you select Bitmap configuration items Image Type, you can customize the background image. 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 the image design asset, see Use the interface. If an image is configured on the Style tab and the Data Source tab, the image configuration on the Data Source tab takes precedence.

    Note

    The background image supports PNG, JPG, GIF, JPEG, and other bitmap formats.

  • Vector Image: If you select Vector Image configuration items Image Type, you can customize the content of the background image. 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 the image design asset, see Use the interface. If an image is configured on the Style tab and the Data Source tab, the image configuration on the Data Source tab takes precedence.

    Note

    Only SVG format is supported for vector images.

  • Fill Color: If you set the Image Type configuration items to Vector, you can configure the fill color of the widget.

  • Repeat: the repetition pattern of the background image. Valid values: No repeat, Repeat X and Y, Repeat X, and Repeat Y.

  • Fillet: the corner radius of the image. Valid value: 0 to 360. If the value is 0, the image is a rectangle. If the value is 360, the image is a circle.

  • Hyperlink: the destination URL that the image links to. Clicking the image widget on the preview or published page opens the specified URL.

    Parameter

    Description

    Hyperlink

    You can specify the URL to which the page is redirected after the page is clicked. You can also specify the URL in the Data Source panel. If you configure Hyperlink in both the Style and Data Source panels, the Data Source panel takes precedence.

    Whether to open a new window

    Turn on the switch and click the background image to open the hyperlink of the background image on a new tab. Turn off the switch to directly open the hyperlink on the current page.

  • Gesture Cursor: When enabled, the cursor changes to a hand icon when hovering over the image widget on the preview or published page. When disabled, the cursor remains as a pointer.

  • filter: Enable this option to adjust the hue, saturation, brightness, contrast, and opacity of the image.

Data Sources panel image

Field

Notes

img

Optional. If you set the displayed image, the configurations in the Background or Vector image are overwritten. If this field is empty, DataV reads the background image or vector image in the configuration for display.

url

Optional. The destination URL that the image points to. If you specify destination URLs in both the Hyperlink parameter on the Settings tab and the url parameter on the Data tab, the URL in the Hyperlink parameter does not take effect. The URL in the Hyperlink parameter takes effect only when you leave the url parameter empty.

Configure data items

Notes

DataSource

You can use the code editor or visual editor to view the data fields contained in the widget. You can also modify the Data Type parameter to flexibly configure the component data.

Data Mapping

If you need to customize chart field configurations, you can set different field mapping content in the Data Mapping module and field mapping these content to the corresponding fields of the widget. This allows you to match data without modifying the fields in the data source. You can also click the imageicon to configure the field style.

Configure a filter

Turn on Filter, select an existing data filter or create a data filter, and configure a data filter script to filter data. For more information, see Manage data filters.

Data Response Result

The Data Response Result section displays widget data in real time. If the data source of the widget changes, this section displays the latest data. If the system response is delayed, you can click the imageicon on the right to view the data response result. You can also click the imageicon on the right to obtain the latest data of the widget. You can also click View Example to view an example of the response result of the current component.

Forbid Loading

When selected, the widget does not display loading content during initialization on the preview page. Deselected by default.

Controlled Mode

When selected, the widget does not request data during initialization and only responds to global variables or methods configured in Blueprint Editor. Deselected by default.

Auto Data Request

When selected, you can set a polling interval to automatically refresh data. When deselected, you must manually refresh the page or use Blueprint Editor and global variable events to trigger data updates.

Advanced Panel image

Interaction Occurrences

Notes

When you click on the image

Turn on the switch to enable the associated global variable feature. When an image is clicked, a data request is triggered and a temporary variable is thrown to dynamically load the image's data. By default, the img and url values in the data are thrown. For more information, see Component interaction configuration.

When the mouse moves in

Turn on the switch to enable the associated global variable feature. When the mouse moves into the image, a data request is triggered, and a temporary variable is thrown to dynamically load the data of the image. By default, the img and url values in the data are thrown. For more information, see Component interaction configuration.

When the mouse is removed

Turn on the switch to enable the associated global variable feature. When the mouse moves out of the image, a data request is triggered and a temporary variable is thrown to dynamically load the image's data. By default, the img and url values in the data are thrown. For more information, see Component interaction 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.png

    • Event

      Event

      Notes

      When the data interface request is completed

      The event is triggered with the processed JSON data after a data interface request is responded and processed by a filter. For more information about specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.

      When you click on the image

      The event that is raised when an image of a single image widget is clicked, and the data item corresponding to the image is also raised. For more information, see the data example. 

      {
  "img": "https://cdn-upload.datav.aliyun.com/upload/download/1665303038655-qcqm05Nw.jpeg",
  "url": "https://www.aliyun.com"
}

      When the mouse moves in

      The event that is raised when the mouse moves over an image. The event also raises the data item corresponding to the image. For more information, see the sample data. 

      {
  "img": "https://cdn-upload.datav.aliyun.com/upload/download/1665303038655-qcqm05Nw.jpeg",
  "url": "https://www.aliyun.com"
}

      When the mouse is removed

      The event that is thrown when the mouse moves out of an image. The event also throws the data item corresponding to the image. For more information, see the sample data. 

      {
  "img": "https://cdn-upload.datav.aliyun.com/upload/download/1665303038655-qcqm05Nw.jpeg",
  "url": "https://www.aliyun.com"
}

    • Action

      Action

      Notes

      Import data

      After data of a widget is processed in accordance with its drawing format, the widget is imported for redrawing. You do not need to request server data again. For more information, see the data example. 

      [
  {
    "img": "https://cdn-upload.datav.aliyun.com/upload/download/1665303038655-qcqm05Nw.jpeg",
    "url": "https://www.aliyun.com"
  }
]

      Request Data Interface

      This action is performed to request the server data again. The data sent by an upstream data processing node or layer node is used as a parameter. For example, if the API data source is https://api.test and the data passed to the request data interface is { id: '1'}, the final request interface is https://api.test?id=1.

      Refresh the view

      Refresh the image. No parameters are required.

      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 /Display

      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.

Previous：IconsNext：customized-background