ObjectSelector3D
ObjectSelector3D Widget
The ObjectSelector3D widget can be used for allowing the user to select homogeneous objects arranged on a two-dimensional grid. It provides the user with a three-dimensional graphical view of the objects which makes it more attractive than regular two-dimensional images.
This section provides the following documentation on this Widget.
Overviews
Events
Methods
Properties
The ObjectSelector3D widget capabilities can be broadly categorized into the following:
- Layout
- Data Management
- User Input Handling
- 3D Touch
- UI Appearance
- State Configurations
- Miscellaneous
- Configurations Common To All Widgets
Layout
| Properties | Description |
|---|---|
| hExpand | Specifies if the widget should occupy all the width available to it. |
| vExpand | Specifies if the widget has to occupy all the vertical space available to it. |
Data Management
| Methods | Description |
|---|---|
| clearAllData | Allows you to clear all the data set on the widget. |
| setMapData | Allows you to define the map of objects which will be presented to the user for selecting the items. |
3D Touch
| Methods | Description |
|---|---|
| registerForPeekandPop | Registers a widget to enable 3D Touch peek and pop gestures. |
| setOnPeek | Sets and overrides the existing onPeekCallback for the widget. |
| setOnPop | Overrides the existing onPopCallback for the widget. |
| unregisterForPeekandPop | Unregisters a widget from 3D Touch peek and pop gestures. |
UI Appearance
| Properties | Description |
|---|---|
| contentAlignment | Specifies the alignment of the text on the ObjectSelector3D with respect to its boundaries. |
| margin | Defines the space around a widget. |
| marginInPixel | Indicates if the margin is to be applied in pixels or in percentage. |
| padding | Defines the space between the content of the widget and the widget boundaries. |
| paddingInPixel | Indicates if the padding is to be applied in pixels or in percentage. |
| widgetAlignment | Indicates how a widget is to be anchored with respect to its parent. |
User Input Handling
| Methods | Description |
|---|---|
| addGestureRecognizer | Allows you to set a gesture recognizer for a specified gesture for a specified widget. |
| removeGestureRecognizer | Allows you to remove the specified gesture recognizer for the specified widget. |
| setGestureRecognizer | Allows you to set a gesture recognizer for a specified gesture for a specified widget. |
State Configurations
| Methods | Description |
|---|---|
| getSelectedCells | Allows you to retrieve the cells that are currently selected in the widget. |
| setSelectedCells | Allows you to identify the cells that are initially selected in the map. |
| setRequiredSelectionsCount | Allows you to define the number of objects the user must select for the selection process to be considered complete. |
| Events | Description |
|---|---|
| onSelectionDone | An event callback that is invoked by the platform when an Image is selected in ObjectSelector3D. |
Miscellaneous
| Methods | Description |
|---|---|
| addModel | Allows you to add a new model to the widget's working set of models. |
| defineSpecialModels | Allows you to define the models to the widget. |
| getBadge | Enables you to read the badge value (if any) attached to the specified widget. |
| setBadge | Enables you to set the badge value to the given widget at the upper, right corner of the widget. |
| setCameraProperties | Allows you to set the properties of the camera while in walk-through mode. |
Configurations Common To All Widgets
| Methods | Description |
|---|---|
| convertPointFromWidget | Allows you to convert the coordinate system from a widget to a point (receiver's coordinate system). |
| convertPointToWidget | Allows you to convert the coordinate system from a point (receiver's coordinate system) to a widget. |
| removeFromParent | Allows you to remove a child widget from a parent widget. |
| setEnabled | Specifies the widget that must be enabled or disabled. |
| setFocus | Specifies the widget on which there must be focus. |
| setVisibility | Use this method to set the visibility of the widget. |
| Properties | Description |
|---|---|
| enableCache | The property enables you to improve the performance of Positional Dimension Animations. |
| id | id is a unique identifier of ObjectSelector3D consisting of alpha numeric characters. |
| info | A custom JSObject with the key value pairs that a developer can use to store the context with the widget. |
| isVisible | Controls the visibility of a widget on the form. |
ObjectSelector3D Overviews
It has two modes, a selection mode and a walk-through mode.The selection mode provides you with a top view of the grid of 3D objects and allows the user to tap on objects to select/unselect them. At any time, the user can hold down on a selected object and the widget will go into walk-through mode.
In walk-through mode, the user is shown a simulation of how it would appear if the user were to start from a starting point and walk (on foot) up to the selected object.
Note: To use the ObjectSelector3D widget, you must load the 3D models. For more information about loading the models, see VoltMX Iris User Guide.
Creating a ObjectSelector3D using a constructor: voltmx.ui.ObjectSelector3D
var myOS3D = new voltmx.ui.ObjectSelector3D (basicConf, layoutConf, pspConf)
- basicConf is an object with basic properties.
- layoutConf is an object with layout properties.
- pspConf is an object with platform specific properties.
Note: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored
Example
//The below function is the callback function for onSelectionDoneCalBck event
function onSelectionDoneCalBck(objThreeD)
{
/*Write your logic here*/
}
//Defining the properties for ObjectSelector3D with onSelectionDone:onSelectionDoneCalBck
var objBasic = {id:"objThreeD", skin:"ObjSkin", focusSkin:"ObjFSkin", text:"Seat reservation", isVisible:true, onSelectionDone:onSelectionDoneCalBck};
var objLayout = {widgetAlignment:constants.WIDGET_ALIGN_CENTER, padding:[5,5,5,5], margin:[5,5,5,5], contentAlignment:constants.CONTENT_ALIGN_CENTER, containerWeight:99, paddingInPixel:true, marginInPixel:true, hExpand:false, vExpand:false};
//Creating the ObjectSelector3D.
var objThreeD =new voltmx.ui.ObjectSelector3D(objBasic, objLayout, {}) ;
Customizing Appearance
You can customize the appearance of the ObjectSelector3D using the following properties:
- widgetAlignment: Specifies the alignment of the widget.
- margin: Defines the space around a widget.
- padding: Defines the space between the content of the widget and the widget boundaries.
- skin: Specify the skin to be applied to the ObjectSelector3D widget.
- focusSkin: Specify the skin to be applied to the ObjectSelector3D when in focus.
Important Considerations
On Windows Phone platform, you must ensure the following:
- This widget cannot be used without the models being loaded in the project.
- For performance reasons, the models being used must be specifically designed for real-time rendering.
- This widget is only useful where objects must be selected out of a homogeneous set (i.e., all the objects must be the same kind. For example, seats in a bus.)