MVCS provides a customizable popup thumbwheel input. The wheels can contain, numbers, string or other symbols in a flexible arrangment.
The thumbwheel is controlled using the thumbWheel object. The thumbWheel.open() method will open a custom thumbwheel, while the thumbWheel.number() method will open a numeric thumbwheel. Both methods return a Promise for receiving the results. The thumbWheel.open() method is the most flexible. It provides a custom wheel layout.
The thumbwheel is implemented as a twheel popup page.
The thumbWheel.number() method builds a set of thumbwheels from a given NumFmt object. By default, one wheel is provided for each possible integer and fractional digit in the format. You can customize this layout by including a thumbwheel numeric format string. The string can be used to group sets of digits or include special symbols. The string is specified by using 'T<string>' at the end of a NumFmt format string (fmtStr).
A ? in a format string represents a single-digit place in a formatted number. A format string of '?' would typically represent a single wheel with the digits 0 through 9. The actual digits may be limited by the format's min, max, or rndMult values. For example, if min was 1 and max was 5, only the digits 1 through 5 would be on the wheel. A format string of '??' would typically represent a single wheel with the digits 0 through 99, which also may be limited by other format values.
A | in a format string separates wheels, so '?|?' would typically represent two wheels, each with the digits 0 through 9. A '+' at the start of the string will display a '+' or '-' sign on the leftmost wheel as appropriate. A '+-|' at the start of the string produces a wheel with a '+' and '-' on the left side. Other characters or symbols are passed through to the wheel. For example:
thumbWheel.number(new NumFmt('-2T+?|?|°C', -59, 59))
produces:
Rounding can limit the internal wheel values:
thumbWheel.number(new NumFmt('4m250T?,|???'))
If no format string is provided, then the thumbWheel.number() method will provide a wheel for each decimal or fractional digit. For example:
thumbWheel.number(new NumFmt('2.1'))
produces a wheel layout equivalent to a thumbwheel numeric format string of '?|?.|?'.
thumbWheelimport {thumbWheel} from 'common/mvcs/export.js';
The thumbWheel object provides methods and properties to control the popup thumbwheel input.
thumbWheel methodsnumber()thumbWheel.number(numFmt, value, units)
thumbWheel.number(numFmt, value)
thumbWheel.number(numFmt)
Opens a numeric thumbwheel that can handle numbers specified by the numFmt argument. If the value argument is provided, it sets the initial value. Otherwise, the intial value is zero. If the units argument is provided, then it is used to display a unit abbreviation following the value.
The numFmt argument is a NumFmt object. Any specified thumbwheel format is retrieved from the twFmt property. In no thumbwheel format format is specified, then there will be a wheel for each integer and fractional digit.
The thumbWheel.number() method returns a Promise. The Promise is resolved with the final value. The Promise will be rejected if the user cancels the data entry.
numFmtNumFmt object to use to layout the thumbwheel wheels.value (optional)units (optional)units argument is ignored if a numeric thumbwheel format string is specified in numFmt.A Promise that is resolved with the value selected thumbwheel value when the user dismisses the thumbwheel. The Promise will be rejected if the user cancels the data entry.
open()thumbWheel.open(wheels)
Open a custom thumbwheel input. The wheels argument is an array that specifies the layout of each wheel. Each entry is an object that contains an array of strings representing the selectable items in each wheel. The thumbWheel.open() method returns a Promise that resolves to an array of indices of the selected items.
wheelstexts (required)selection (required)texts array.style (optional)'left' The wheel text is aligned on the left side of the wheel.
'right' The wheel text is aligned on the right side of the wheel.
'center' The wheel text is centered in the wheel.
'shrink' The wheel is shrunk to the minimum width to contain the wheel texts.
If more than one substring is present, they must be separated by a space. If no alignment is specified, then the leftmost wheel defaults to 'right' and the rightmost wheel defaults to 'left'. Interior wheels default to 'center shrink'.
A Promise that is resolved with an array of indices of the selected text in each wheel when the user dismisses the thumbwheel. The Promise will be rejected if the user cancels the data entry.
select()thumbWheel.select(options, value)
Opens a single-wheel selector. This can be used in place of the usual dropdown selector when it is easier. The options argument defines the selectable options, and the value argument represents the initially selected option value.
optionstext and value property. If an object is used, the text appears as the selectable item and the value is returned if the item is selected. If the element is a string then it is used as both the displayed text and value.valueA Promise that is resolved with the value associated with the selected item when the user dismisses the thumbwheel. The Promise will be rejected if the user cancels the data entry.