Overview

Customizable roulette wheel with spinning animation. Playaround with this application to check the different features available

Documentation

Customizable roulette wheel with spinning animation.

Features

Spin Configuration

  • Must Spin: Sets when the roulette must start the spinning animation.

  • Spin Wheel Data: Array of options. Can contain styling information for a specific option.

  • Spin Duration: Coefficient to adjust the default spin duration.

  • Prize Number: Sets the winning option. It's value must be between 0 and data.length-1.

  • Starting Option Index: Set which option (through its index in the data array) will be initially selected by the roulette (before spinning).

  • Disable Initial Animation: When 'true', disables the initial backwards wheel animation.

Button Configuration

  • Spin Button Name: Name of the Spin button.

  • Spin Button Class Name: Class (Styles) which needs to be applied to the Spin button.

Wheel Appearance

  • backgroundColors: Array of colors that will fill the background of the roulette options, starting from option 0

  • textColors: Array of colors that will fill the text of the roulette options, starting from option 0

  • outerBorderColor: Color of the roulette's outer border line.

  • outerBorderWidth: Width of the roulette's outer border line (0 represents no outer border line).

  • innerRadius: Distance of the inner radius from the center of the roulette.

  • innerBorderColor: Color of the roulette's inner border line

  • innerBorderWidth: Width of the roulette's inner border line (0 represents no inner border line).

  • radiusLineColor: Color of the radial lines that separate each option.

  • radiusLineWidth: Width of the radial lines that separate each option (0 represents no radial lines)

Text Appearance

  • fontFamily: Global font family of the option string. Non-Web safe fonts are fetched from https://fonts.google.com/ . All available fonts can be found there.

  • fontSize: Global font size of the option string.

  • fontWeight: font weight of the text.

  • fontStyle: Global font style of the option string.

  • perpendicularText: When 'true', sets the option texts perpendicular to the roulette's radial lines.

  • textDistance: Distance of the option texts from the center of the roulette.

Demo URL:

https://spinwheel-sandbox.mxapps.io/index.html?profile=Responsive

Credentials:

demo_administrator

m51LR5oihFah

Dependencies:

Mendix modeler 9.12.4.

Issues, suggestions and feature requests