DataV:image-carousel

Chart style

A image carousel is a type of media component that supports custom image carousel and carousel animation effects. It can display multiple images in turn on a dashboard.

Style Panel

• Search Configuration: Click the Search configuration items icon in 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 icon to flip the widget style.

    • Click the icon 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.

• Global Style

  Parameter	Description
  Font	The font of the text in the image carousel widget. Select a font that is installed in your computer. Otherwise, the default font is used.
  Font size	The font size of the text in the image carousel widget. Valid value: 10 to 100.

• Animation

  Parameter	Description
  Automatic carousel	Specifies whether to enable or disable automatic carousel.
  Pause	The time interval to rotate the images. Unit: ms.
  Speed	The duration of the animation. Unit: ms.
  Special Effects	The effect of the animation. Valid values: Horizontal Scrolling, Vertical Scrolling, Fade, and Mosaic.

• Image

  Parameter	Description
  Default Image	image carousel the default image. Drag the local image to the dashed box or enter the URL of the image. To delete an image, move the pointer over the image box and click Delete. Note If the url field in the data panel is empty, the image in the default image configuration items is used.
  Filling Method	The filling mode of the image. Valid values: Stretch to Fill Container, Fill Container, and Center.

• Description: the description style of each image in the carousel. You can click the icon to display or hide the description.

  • Background Color: the background color of the description.

    Parameter	Description
    Color Style	The style of the background color. Valent options: Gradient and Monochrome.
    Color	The background color. This field takes effect only when the Color Style field is set to Monochrome.
    Start Color	The start color of the background. For more information, see color picker description. This value is valid only when the Color Style is set to Gradient.
    End Color	The end color of the background. This parameter takes effect only when the Fill Style parameter is set to Gradient.
    Angle	The direction in which the two color gradients begin to end.

  • Color: the color of the description text.

  • Font Weight: the font weight of the description text.

  • Width (%): the percentage of the description width to the widget width.

  • Height: the percentage of the height of the widget. Unit: %.

  • Top: the top padding of the description from the top border of the widget. Unit: pixels.

  • Left Margin: the distance between the description bar and the left boundary of the widget. Unit: pixels.

  • Alignment: the alignment of the text. Valid values: Left, Center, and Right.

• Dot: the dot style at the bottom of the image carousel. You can click the icon to control the display of the dot.

  Parameter	Description
  Dot Color	The dot color of the images that are not in display.
  Current Color	The dot color of the image that is in display.

Data Sources panel

Advanced Panel

Turn on the switch to enable the widget interaction feature. When the image is clicked, a data request is triggered, a temporary variable is thrown, and the image carousel data is dynamically loaded. By default, the description and url values in the data are thrown. For more information, see Component interaction configuration.

Blueprint Interaction

1. Click the icon 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.

   • 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	When you click an image, this event is triggered to pass the description and URL of the image.

   • Action

     Action	Notes
     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, image carousel the API data source is https://api.test and the data transferred to the request data interface is { id: '1'}, the final request interface is https://api.test?id=1.
     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 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.
     Start carousel	Start to play the image in turn. For more information, see the sample data. { // The sequence number of an image in the data source. By default, the value starts from 0. "index": 0 }
     Stop carousel	This action stops rotating the images and does not need parameter input.
     Turn to the previous page	This action displays the previous image based on the sequence number of the current image and does not need parameter input.
     Turn to the next page	This action displays the next image based on the sequence number of the current image and does not need parameter input.
     Turn to a page	Play an image without parameters.
     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.