Spin Wheel - Roulette

Content Type: Widget
Categories: Utility,User Interface

Overview

Customizable roulette wheel with spinning animation.

 

https://www.npmjs.com/package/react-custom-roulette

Documentation

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

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

https://github.com/bharathidas/Spin-Wheel---Roulette/issues

Releases

Version: 1.0.0
Framework Version: 9.12.4
Release Notes: 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](https://spinwheel-sandbox.mxapps.io/index.html?profile=Responsive) **Credentials:** demo_administrator m51LR5oihFah **Dependencies:** • Mendix modeler 9.12.4. **Issues, suggestions and feature requests** [https://github.com/bharathidas/Spin-Wheel---Roulette/issues](https://github.com/bharathidas/Spin-Wheel---Roulette/issues)