image-carousel

Chart style

An image carousel is a media component that displays multiple images in rotation on a dashboard, with customizable transition and animation effects.

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 its center. Unit: degrees.

    • Enter a value in the Rotation Angle spin box, or click the plus sign (+) or minus sign (-) to adjust the value.

    • 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. If the selected font is not installed on your computer, the default font is used.
  Font size	The font size of the text in the image carousel. Valid values: 10 to 100.

• Animation

  Parameter	Description
  Automatic carousel	Enables or disables automatic carousel.
  Pause	The interval between image rotations. 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	The default image for the carousel. Drag a local image to the dashed box or enter the image URL. 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 default image is used.
  Filling Method	The fill 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 background color style. Valid 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 gradient. For more information, see color picker description. This parameter takes effect only when 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 angle at which the gradient transitions between the two colors.

  • 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 indicator style at the bottom of the carousel. Click the icon to show or hide the dots.

  Parameter	Description
  Dot Color	The dot color for images not currently displayed.
  Current Color	The dot color for the currently displayed image.

Data Sources panel

Advanced Panel

Turn on the switch to enable widget interaction. When an image is clicked, a data request is triggered and a temporary variable is emitted to dynamically load carousel data. By default, the description and url values are emitted. 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	Triggered after a data interface request is completed and processed by a filter, with the processed JSON data. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel.
     When you click on the image	Triggered when you click an image, passing the description and URL of the image.

   • Action

     Action	Notes
     Request Data Interface	Requests server data again, using the data from an upstream data processing node or layer node as parameters. For example, if the API data source is https://api.test and the data passed to request data interface is { id: '1'}, the final request URL is https://api.test?id=1.
     Import data	Imports pre-processed data in the widget's drawing format for redrawing, without requesting server data again. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel.
     Start carousel	Starts rotating images. See the sample data for details. { // The sequence number of an image in the data source. By default, the value starts from 0. "index": 0 }
     Stop carousel	Stops image rotation. No parameters required.
     Turn to the previous page	Displays the previous image. No parameters required.
     Turn to the next page	Displays the next image. No parameters required.
     Turn to a page	Plays an image. No parameters required.
     Move	Moves the widget to a specified position. See the data example for details. { // 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	Displays the widget. See the data example for details. { "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	Hides the widget. See the data example for details. { "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	Dynamically updates widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data. Then modify the style field for the data processing node in Blueprint Editor.