Spin Wheel - Roulette Sample
Overview
Spin Wheel - Sample is a ready-made module that shows the Spin Wheel widget working in Mendix Studio Pro 10.24.17. Import it, give your user roles the module role SpinWheel.User, and add the page SpinWheel.Home_Web to the navigation. You get a page with the wheel, a Spin button, and a field for every widget setting.
To try it:
1. Choose Sample Data 1 (11 numbered options) or Sample Data 2 (8 word options with their own colors) in the combo box.
2. Change the colors, borders, fonts or the options JSON, and the wheel changes at once.
3. Click Spin. The wheel turns, Prize number shows the winning option, and a microflow shows a message when the wheel stops.
The module also shows how to set up the widget yourself:
- The helper entity has an attribute for every setting.
- DS_SpinWheel fills the starting values.
- OCH_SampleData switches the data sets.
- CompleteSpinning is the on-complete action.
Documentation
Typical usage scenario
Spin Wheel - Sample is the ready-made example module for the Spin Wheel widget. It contains one page, a helper entity with an attribute for every widget setting, two sample data sets, and the microflows that fill the data and react when the wheel stops. Import it to see the widget working in your own app in a few minutes.
Problems it solves:
- Screenshots don't show how the JSON options and the color settings work together; the page lets you change them live.
- New users don't know which attributes to create or how the result comes back. The entity and the Prize number field show both.
- Checking the widget after an upgrade is easier on a clean reference page.
Where it's useful:
- Evaluating the widget before using it in an app
- Demos and training
- Copying the entity, the JSON and the microflows into your own module
Features and limitations
Features:
- Page SpinWheel.Home_Web with the wheel, the Spin button, a Sample data combo box and one field per widget setting
- Two sample data sets:
- Sample Data 1: 11 numbered options (0–10) with alternating colors
- Sample Data 2: 8 word options with their own colors
- Microflows:
- DS_SpinWheel: the data source, which sets the starting values
- OCH_SampleData: switches the sample data
- CompleteSpinning: the On Complete Spinning action, which shows a message
- Non-persistable entity SpinWheel with one attribute per widget setting
- Module role SpinWheel.User
- Includes Spin Wheel widget 1.2.0 and the Combo box widget
Things to try on the page:
- Switch to Sample Data 2: the wheel shows 8 options with their own colors.
- Change the background color array, for example to #3e3e3e,#df3428,#ffffff,#2c8e3a.
- Set perpendicular text to Yes: the texts turn across the options.
- Set spin duration to 0.3: the wheel stops after about 3.5 seconds instead of about 11.
- Set font family to Arial: a web-safe font, with no download from Google Fonts.
- Set Data to ["Yes","No","Maybe"]: plain strings also work as options.
Limitations:
- The entity is non-persistable, so the page starts fresh every time it opens.
- The prize is chosen at random in the browser.
- The default font, Roboto, comes from Google Fonts. Without internet access, set font family to Arial.
- If the Data field is empty or not a valid JSON array, the wheel and the Spin button are hidden.
Dependencies
- Mendix Studio Pro 10.24.17 or a later 10.24 version
Installation
1. Download SpinWheel.mpk from the Marketplace or from the GitHub release Sample-Version1.2.0.
2. In Studio Pro, choose App > Import module package and select the file. Press F4 if the widgets don't appear in the Toolbox yet.
3. Open App > Security > User roles and give the roles that should use the page the module role SpinWheel.User.
4. Add the page SpinWheel.Home_Web to the navigation.
5. Run the app and open the page.
Configuration
The sample page needs no configuration. To use the widget in your own page:
1. Copy the attributes you need from the SpinWheel entity to your entity, or keep it as a helper entity.
2. Copy the widget from Home_Web, or drag Spin Wheel from the Toolbox, and select the attributes.
3. Build the options JSON in your data source microflow, as DS_SpinWheel does.
4. Replace CompleteSpinning with your own microflow that uses Prize number.
5. Remove the settings fields; users normally only see the wheel.
Known bugs
No known bugs.
Report issues at https://github.com/bharathidas/Spin-Wheel---Roulette/issues
Frequently Asked Questions
Is this the widget itself?
It's a sample module that includes the widget. If you only need the widget, download Spin Wheel from its own Marketplace listing.
The page doesn't open, or the wheel isn't shown. What should I check?
Make sure your user role has the module role SpinWheel.User. If the wheel is missing, check that the Data field holds a valid JSON array. Without internet access, set font family to Arial.
What changed from version 1.1?
Version 1.1 was a complete Mendix 9 app. Version 1.2.0 is a module package for Studio Pro 10.24.17 that you import into your own app. It includes widget 1.2.0, and the old Drop-down is replaced by a Combo box.
Releases
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)