lucky-draw-carousel-chart

Chart style

The lucky draw carousel chart simulates a carousel that randomly draws prizes.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel to search for a configuration item by name. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget, in pixels.

  • Positioning: the x-axis and y-axis coordinates of the widget, in pixels. X-coordinate is the pixel distance between the upper-left corner of the widget and the left edge of the canvas. Y-coordinate is the pixel distance between the upper-left corner of the widget and the top edge of the canvas.

  • Rotate: the rotation angle of the widget around its center, in degrees.

    • Enter the rotation angle directly or click the plus (+) or minus (-) sign to adjust the value.

    • Click the icon to flip the widget.

    • Click the icon to flip the widget.

  • Opacity: a value from 0 to 1. A value of 0 hides the widget, and 1 displays it fully. Default value: 1.

• Content: configures the content style of the lucky draw carousel chart widget.

  Metric	description
  Prizes	The style of the prize. Layout Mode: the layout of the prize. Valid values: Horizontal and Vertical. Movement Direction: the direction in which prizes move during the carousel draw. Valid values: Left and Right. Display Quantity: the number of prizes displayed in the carousel. Default value: 7. Size: the width and height of the prize, in pixels. Prizes: Select a style to display prizes. Click the or icon to add or delete a prize. Click the or icon to configure the arrangement style for multiple prizes. Click the icon to copy the currently selected prize configuration and add a prize with the same configuration. ID: the ID of the prize. Name: the name of the prize. Image: the image of the prize. To use a remote image, enter the URL in the upper-right corner. Click Preview in the image box to preview the image. Click Change in the dashed box below the image box to replace the image. For more information, see Use the interface. Note If data is configured in the Data Sources panel, the data source content takes priority.
  Middle area	The style of the drawn area. Mode: the mode of the drawn area. Valid values: Debug Mode and Normal Mode. Position: the position of the drawn area. Valid values: Head, Middle, and Tail. This option is available only when Custom Position is turned off. Custom Position: the horizontal position of the drawn area, in pixels. Click the icon to toggle display of the custom position. Size: the width and height of the area, in pixels. Fillet: the border radius of the drawn area, in pixels. Fill Color: the fill color of the drawn area. Border: the border style of the drawn area, including line type, thickness, and color.
  Not drawn	The style displayed when no prize is drawn. ID: the ID displayed when no prize is won. Name: the name displayed when custom settings are not selected. Image: the image displayed when no prize is won. To use a remote image, enter the URL in the upper-right corner. Click Preview in the image box to preview the image. Click Change in the dashed box below the image box to replace the image. For more information, see Use the interface. Note If no prize is drawn, the configured throw value is used.

• Animation: configures the animation style of the lucky draw carousel chart.

  Metric	description
  Prize Speed	The time spent rolling each prize item, in seconds.
  Increment Speed	The speed increment after each draw. Clearing or restarting the animation resets the speed. Click the icon to toggle the speed increment.
  Middle Area Animation	The animation mode of the middle area. Valid values: Fixed and Scroll.

• Interactive: the button style of the lucky draw carousel chart widget.

  Metric	description
  Lottery difficulty	The draw difficulty level. Valid values: Simple, Normal, and Inferno. Note Simple means any overlap between the area and the prize counts as a draw. Normal requires at least 1/3 overlap. Inferno requires at least 4/5 overlap.
  Draw suspended	Turn on this switch to pause the draw after each round. Turn off this switch to continue drawing without pausing.

Data Sources panel

Advanced Panel

Turn on the switch to enable widget interaction. When a prize is drawn, a data request is triggered and a temporary variable is thrown, dynamically loading data in the lucky draw carousel chart. By default, the id, title, and url values are displayed. 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	Description
     When the lottery image carousel interface description request is completed	This event is triggered with the processed JSON data after a data interface request is responded to and processed by a filter. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.
     Lucky Draw	When a prize is drawn, the drawn data event is thrown along with the corresponding data item. For more information, see the data example. { "id": "", // The ID of the prize. "title": "", // The name of the prize. "url": "" // The URL of the prize image. }

   • Action

     Action	Description
     Request Lottery image carousel Interface Description	Requests server data again, using the data from an upstream data processing node or layer node as parameters. For example, if the lucky draw carousel chart API data source is https://api.test and the data passed to the request lottery image carousel interface to describe the action is { id: '1'}, the final request URL is https://api.test?id=1.
     Import Lottery image carousel Interface Description	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 of the canvas editor.
     Start Animation	Starts the carousel draw animation. No parameters are required.
     Pause Animation	Pauses the carousel draw animation. No parameters are required.
     Lucky Draw	Triggers a draw. No parameters are required.
     Restore Animation	Restores the animation. No parameters are required.
     End Animation	Ends the animation. No parameters are required.
     Move	Moves the 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 to the implicit state	Toggles the widget between visible and hidden states. No parameters are required.
     Display	Displays the widget. For more information, see the data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hides the widget. For more information, see the data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "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 widget configuration data. Then modify the style field for the data processing node in Blueprint Editor.