Spin Wheel - Roulette Sample
Content Type: Sample
Categories: Utility,User Interface
Overview
Customizable roulette wheel with spinning animation.
Playaround with this application to check the different features available
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
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
**Credentials:**
demo_administrator
m51LR5oihFah
**Dependencies:**
• Mendix modeler 9.12.4.
**Issues, suggestions and feature requests**
https://github.com/bharathidas/Spin-Wheel---Roulette/issues