DataV:Turntable lottery

Chart style

The turntable lottery simulates a spinning prize wheel for random draws.

Configuration panel

• Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for Configurations.
• Size: indicates the size of a widget, including its pixel width and height. You can click the icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
• Position: the position of a widget, which is indicated by pixel X and Y coordinates. 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.
• Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
  • 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.
  • Drag the black dot in the icon.
  • Click the icon to horizontally flip a widget.
  • Click the icon to vertically flip a widget.
• Opacity: the opacity of a widget. Valid values: 0 and 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.

• Rotation Time: The duration of the turntable spin, in milliseconds (ms).

• Rotations: The number of full rotations the turntable completes within the specified rotation time.

• Button: The style of the draw button on the turntable.

  Parameter	Description
  Button size	The width and height of the button, in pixels (px).
  Vertical Spacing	The vertical distance of the button from the center of the turntable, in pixels (px).
  Button image	Customizes the button image. To use a remote image, enter the URL in the input box. Click Preview in the image box to view a larger version. To change the image, click Change in the dashed box below the image input box. For more information about changing image design assets, see UI feature description.

• Turntable: The style of the turntable content, including text, sectors, and images.

  Parameter	Description
  Text Style	The font family, weight, size, and color of text on the turntable.
  Text Spacing	The spacing between text elements on the turntable, in pixels (px).
  Line Height	The line height for wrapped text, in pixels (px).
  Wrap Length	The number of characters per line before the text wraps.
  Sector Color	The color of each turntable sector. Click the or icon to add or remove a color series. Click the or icon to reorder color series. Click the icon to duplicate a color series. Color: The fill color of the sector for the current series.
  Display prize image	Toggles the display of prize images on the turntable. When enabled, configure the following parameters: Image size: The width and height of the prize image, in pixels. Image Spacing: The space between prize images in px, which includes Horizontal Spacing and Vertical Spacing.
  Stroke Color	The color of the stroke lines on the turntable.
  Background Image	Customizes the turntable background image. To use a remote image, enter the URL in the input box. Click Preview in the image box to view a larger version. Click Change in the dashed box below the image input box to replace the image. For more information, see Using the UI Features.

Data panel

Configuration fields

Interaction panel

On Lottery Draw Click: Select Enable to enable interaction for this component. When the draw button is clicked, a data request is triggered, a callback value is emitted, and data is dynamically loaded into the turntable. By default, the name and imgSrc values are emitted. For more information, see How to configure the callback ID for the digital flip-card component.

Blueprint Editor interaction configuration

1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
2. Click the icon in the upper-left corner of the page.

3. On the Blueprint Editor configuration page, click the Turntable Lottery component in the Import Node bar. You can view the Blueprint Editor configuration parameters for the turntable lottery on the canvas, as shown in the following figure.

   • Events

     Event	Description
     When the Describe API request is completed	Triggered after a data API request returns and is processed by a filter. Returns the processed data in JSON format. For a data example, see the data response area on the Data tab of the component's configuration panel in the Canvas Editor.
     When the API description request fails	Triggered when a data API request fails due to network issues or an API error. Returns the processed data in JSON format after filter processing. For a data example, see the Data Response area on the Data tab in the component's configuration panel in the Canvas Editor.
     When you click Lucky Draw	Triggered when the draw button is clicked. Returns an object with data for the corresponding prize item. The following is a sample of the returned data. return{ "name": "", // The name of the prize. "imgSrc": "" // The image of the prize. }

   • Actions

     Action	Description
     Request API Description	Re-requests data from the server, using data output by upstream data processing nodes or layer nodes as parameters. For example, if the API data source is https://api.test and the data passed to Request API Description is { id: '1'}, the final request URL becomes https://api.test?id=1.
     Import API Description	Imports data in the component's required format and redraws the component without re-requesting data from the server. For a data example, see the Data Response area on the Data tab of the component's configuration panel in the Canvas Editor.
     Start Rotating	Starts the turntable spin. No parameters are required.
     Update Component Configuration	Dynamically updates the component's style configuration. First, click Copy configuration to clipboard in the component's Configuration panel to obtain the configuration data. Then modify the field values for the target styles in a data processing node on the Blueprint Editor's configuration page.
     Display	Shows the component. The following is sample data. return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     Hide	Hides the component. The following is sample data. return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     Toggle visibility	Toggles the visibility of the component. The following is sample data. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } };
     Move	Moves the component to a specified position. The following is sample data. return { // Movement type: 'to' for absolute positioning, 'by' for relative positioning. Default: 'to'. "positionType": "to", // The target position, specified by x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation settings. "animation": { "enable": false, // The animation duration. "animationDuration": 1000, // The animation easing function. Optional values: linear, easeInOutQuad, and easeInOutExpo. "animationEasing": "linear" } };