{"_id":"58f7a4c8cbd001190056cc11","project":"578c4badbd223d2000cc1441","user":"576c22a3808cf02b00d37419","version":{"_id":"58f7a4c8cbd001190056cbf8","__v":1,"project":"578c4badbd223d2000cc1441","createdAt":"2017-04-19T17:56:24.172Z","releaseDate":"2017-04-19T17:56:24.172Z","categories":["58f7a4c8cbd001190056cbf9","58f7a4c8cbd001190056cbfa","58f7a4c8cbd001190056cbfb","58f7a4c8cbd001190056cbfc","58f7a4c8cbd001190056cbfd","58f7a4c8cbd001190056cbfe"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.1.0","version":"1.1.0"},"category":{"_id":"58f7a4c8cbd001190056cbfe","__v":0,"version":"58f7a4c8cbd001190056cbf8","project":"578c4badbd223d2000cc1441","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-08-01T23:04:12.838Z","from_sync":false,"order":5,"slug":"api-reference","title":"API Reference"},"parentDoc":null,"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-03-18T00:16:24.238Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":9,"body":"UI Control through which the user interacts with the 3D world, enabled by default. In daydream, this would represent the daydream controller and it's laser pointer. In cardboard ios, cardboard Android and GearVR, the controller is effectively the reticle. \n\nThe ViroController is also notified of all events that occur within the scene, with the exception of hover. Thus, include this controller in your scene if you would like to register to be always notified of such events. You can also toggle certain UI expects of the controller as well, such as reticle or daydream visibility.\n\nExample Code\n```\n<ViroController\n    reticleVisibility={true}\n    controllerVisibility={true}\n    onClick={this._onClickListenerForAllEvents/>\n```\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Props\"\n}\n[/block]\n##Optional Props\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"**controllerVisibility**\",\n    \"9-0\": \"**reticleVisibility**\",\n    \"h-0\": \"PropKey\",\n    \"h-1\": \"PropType\",\n    \"0-1\": \"**PropTypes.bool**\\n\\nFlag for *displaying* the daydream controller. True by default. Note: this only applies to Daydream headsets.\",\n    \"9-1\": \"**PropTypes.bool**\\n\\nFlag for *displaying* the reticle. True by default.\",\n    \"1-0\": \"**onClick**\",\n    \"1-1\": \"**React.PropTypes.func**\\n\\nCalled when any object has been clicked.\\n\\nExample code:\\n```  \\n_onClick(source)  {\\n    // user has clicked the object\\n}\\n```\",\n    \"2-0\": \"**onClickState**\",\n    \"2-1\": \"**React.PropTypes.func**\\n\\nCalled for each click state any object goes through as it is clicked. \\nSupported click states and their values are the following:\\n\\n|State Value|Description|\\n|:------|:----------:|\\n|1| Click Down: Triggered when the user has performed a click down action while hovering on that control.|\\n|2| Click Up: Triggered when the user has performed a click up action while hovering on that control.|\\n|3| Clicked: Triggered when the user has performed both a click down and click up action on that control sequentially, thereby having \\\"Clicked\\\" the object.|\\n\\nExample code:\\n```  \\n_onClickState(stateValue, source)  {\\n    if(stateValue == 1) {\\n        // Click Down\\n    } else if(stateValue == 2) {\\n        // Click Up\\n    } else if(stateValue == 3) { \\n        // Clicked\\n    }\\n}\\n```\\nFor the mapping of sources to controller inputs, see the [Events](doc:events) section.\",\n    \"6-0\": \"**onScroll**\",\n    \"6-1\": \"**React.PropTypes.func**\\n\\nCalled when the user performs a scroll action, while hovering on any views.\\n\\nFor example:\\n```  \\n_onScroll(scrollPos, source)  {\\n    // scrollPos[0]: x scroll position from 0.0 to 1.0. \\n    // scrollPos[1]: y scroll position from 0.0 to 1.0.\\n}\\n```\\nFor the mapping of sources to controller inputs, see the [Events](doc:events) section.\\n\\nUnsupported VR Platforms: Cardboard(Android and iOS)\",\n    \"7-0\": \"**onSwipe**\",\n    \"7-1\": \"**React.PropTypes.func**\\n\\nCalled when the user performs a swipe gesture on the physical controller, while hovering on any views. \\n\\nFor example:\\n```  \\n_onSwipe(state, source)  {\\n    if(state == 1) {\\n        // Swiped up\\n    } else if(state == 2) {\\n        // Swiped down\\n    } else if(state == 3) { \\n       // Swiped left\\n    } else if(state == 4) { \\n       // Swiped right\\n    }\\n}\\n```\\nFor the mapping of sources to controller inputs, see the [Events](doc:events) section.\\n\\nUnsupported VR Platforms: Cardboard(Android and iOS)\",\n    \"8-0\": \"**onTouch**\",\n    \"8-1\": \"**React.PropTypes.func**\\n\\nCalled when the user performs a touch action, while hovering on the control. Provides the touch state type, and the x/y coordinate at which this touch event has occurred.\\n\\n|State Value|Description|\\n|:------|:----------:|\\n|1| Touch Down: Triggered when the user  makes physical contact with the touch pad on the controller. |\\n|2| Touch Down Move: Called when the user moves around the touch pad immediately after having performed a Touch Down action. |\\n|3| Touch Up: Triggered after the user is no longer in physical contact with the touch pad after a Touch Down action. |\\n\\nFor example:\\n```  \\n_onTouch(state, touchPos, source)  {\\n   var touchX = touchPos[0];\\n   var touchY = touchPos[1];\\n    if(state == 1) {\\n        // Touch Down\\n    } else if(state == 2) {\\n        // Touch Down Move\\n    } else if(state == 3) { \\n        // Touch Up\\n    }\\n}\\n```\\nFor the mapping of sources to controller inputs, see the [Events](doc:events) section.\\n\\nUnsupported VR Platforms: Cardboard(Android and iOS).\",\n    \"4-0\": \"**onControllerStatus**\",\n    \"4-1\": \"**React.PropTypes.func**\\n\\nCalled when the status of the controller has changed. This is only triggered for wireless controllers, else the return value would always be \\\"Connected\\\".\\n\\n|Status Value|Description|\\n|:------|:----------:|\\n|1| Unknown: The controller state is being initialized and is not yet known.|\\n|2| Connecting: The controller is currently scanning and attempting to connect to your device or phone.|\\n|3| Connected: The controller is connected to your device.|\\n|4| Disconnected: The controller has disconnected from your device.|\\n|5| Error: The controller has encountered an internal error and is currently unusable. This is usually triggered upon initialization. |\",\n    \"3-0\": \"**onDrag**\",\n    \"3-1\": \"**React.PropTypes.func**\\n\\nCalled when any view is dragged. The dragToPos parameter provides the current 3D location of the dragged object. \\n\\nExample code:\\n```  \\n_onDrag(dragToPos, source)  {\\n    // dragtoPos[0]: x position\\n    // dragtoPos[1]: y position\\n    // dragtoPos[2]: z position\\n}\\n``` \\nFor the mapping of sources to controller inputs, see the [Events](doc:events) section. \\n\\nUnsupported VR Platforms: Cardboard iOS\",\n    \"5-1\": \"**PropTypes.oneOfType**\\n```  \\nPropTypes.oneOfType([\\n      React.PropTypes.shape({\\n        callback: React.PropTypes.func.isRequired,\\n        timeToFuse: PropTypes.number\\n      }),\\n      React.PropTypes.func,\\n])\\n```  \\nAs shown above, onFuse takes one of the types - either a callback, or a dictionary with a callback and duration. \\n\\nIt is called after the user hovers onto and remains hovered on the control for a certain duration of time, as indicated in timeToFuse that represents the duration of time in milliseconds. \\n\\nWhile hovering, the reticle will display a count down animation while fusing towards timeToFuse.\\n\\nNote that timeToFuse defaults to 2000ms.\\n\\nFor example:\\n```  \\n_onFuse(source){\\n   // User has hovered over object for timeToFuse milliseconds\\n}\\n```\\nFor the mapping of sources to controller inputs, see the [Events](doc:events) section.\",\n    \"5-0\": \"**onFuse**\"\n  },\n  \"cols\": 2,\n  \"rows\": 10\n}\n[/block]","excerpt":"","slug":"virocontroller","type":"basic","title":"ViroController"}
UI Control through which the user interacts with the 3D world, enabled by default. In daydream, this would represent the daydream controller and it's laser pointer. In cardboard ios, cardboard Android and GearVR, the controller is effectively the reticle. The ViroController is also notified of all events that occur within the scene, with the exception of hover. Thus, include this controller in your scene if you would like to register to be always notified of such events. You can also toggle certain UI expects of the controller as well, such as reticle or daydream visibility. Example Code ``` <ViroController reticleVisibility={true} controllerVisibility={true} onClick={this._onClickListenerForAllEvents/> ``` [block:api-header] { "type": "basic", "title": "Props" } [/block] ##Optional Props [block:parameters] { "data": { "0-0": "**controllerVisibility**", "9-0": "**reticleVisibility**", "h-0": "PropKey", "h-1": "PropType", "0-1": "**PropTypes.bool**\n\nFlag for *displaying* the daydream controller. True by default. Note: this only applies to Daydream headsets.", "9-1": "**PropTypes.bool**\n\nFlag for *displaying* the reticle. True by default.", "1-0": "**onClick**", "1-1": "**React.PropTypes.func**\n\nCalled when any object has been clicked.\n\nExample code:\n``` \n_onClick(source) {\n // user has clicked the object\n}\n```", "2-0": "**onClickState**", "2-1": "**React.PropTypes.func**\n\nCalled for each click state any object goes through as it is clicked. \nSupported click states and their values are the following:\n\n|State Value|Description|\n|:------|:----------:|\n|1| Click Down: Triggered when the user has performed a click down action while hovering on that control.|\n|2| Click Up: Triggered when the user has performed a click up action while hovering on that control.|\n|3| Clicked: Triggered when the user has performed both a click down and click up action on that control sequentially, thereby having \"Clicked\" the object.|\n\nExample code:\n``` \n_onClickState(stateValue, source) {\n if(stateValue == 1) {\n // Click Down\n } else if(stateValue == 2) {\n // Click Up\n } else if(stateValue == 3) { \n // Clicked\n }\n}\n```\nFor the mapping of sources to controller inputs, see the [Events](doc:events) section.", "6-0": "**onScroll**", "6-1": "**React.PropTypes.func**\n\nCalled when the user performs a scroll action, while hovering on any views.\n\nFor example:\n``` \n_onScroll(scrollPos, source) {\n // scrollPos[0]: x scroll position from 0.0 to 1.0. \n // scrollPos[1]: y scroll position from 0.0 to 1.0.\n}\n```\nFor the mapping of sources to controller inputs, see the [Events](doc:events) section.\n\nUnsupported VR Platforms: Cardboard(Android and iOS)", "7-0": "**onSwipe**", "7-1": "**React.PropTypes.func**\n\nCalled when the user performs a swipe gesture on the physical controller, while hovering on any views. \n\nFor example:\n``` \n_onSwipe(state, source) {\n if(state == 1) {\n // Swiped up\n } else if(state == 2) {\n // Swiped down\n } else if(state == 3) { \n // Swiped left\n } else if(state == 4) { \n // Swiped right\n }\n}\n```\nFor the mapping of sources to controller inputs, see the [Events](doc:events) section.\n\nUnsupported VR Platforms: Cardboard(Android and iOS)", "8-0": "**onTouch**", "8-1": "**React.PropTypes.func**\n\nCalled when the user performs a touch action, while hovering on the control. Provides the touch state type, and the x/y coordinate at which this touch event has occurred.\n\n|State Value|Description|\n|:------|:----------:|\n|1| Touch Down: Triggered when the user makes physical contact with the touch pad on the controller. |\n|2| Touch Down Move: Called when the user moves around the touch pad immediately after having performed a Touch Down action. |\n|3| Touch Up: Triggered after the user is no longer in physical contact with the touch pad after a Touch Down action. |\n\nFor example:\n``` \n_onTouch(state, touchPos, source) {\n var touchX = touchPos[0];\n var touchY = touchPos[1];\n if(state == 1) {\n // Touch Down\n } else if(state == 2) {\n // Touch Down Move\n } else if(state == 3) { \n // Touch Up\n }\n}\n```\nFor the mapping of sources to controller inputs, see the [Events](doc:events) section.\n\nUnsupported VR Platforms: Cardboard(Android and iOS).", "4-0": "**onControllerStatus**", "4-1": "**React.PropTypes.func**\n\nCalled when the status of the controller has changed. This is only triggered for wireless controllers, else the return value would always be \"Connected\".\n\n|Status Value|Description|\n|:------|:----------:|\n|1| Unknown: The controller state is being initialized and is not yet known.|\n|2| Connecting: The controller is currently scanning and attempting to connect to your device or phone.|\n|3| Connected: The controller is connected to your device.|\n|4| Disconnected: The controller has disconnected from your device.|\n|5| Error: The controller has encountered an internal error and is currently unusable. This is usually triggered upon initialization. |", "3-0": "**onDrag**", "3-1": "**React.PropTypes.func**\n\nCalled when any view is dragged. The dragToPos parameter provides the current 3D location of the dragged object. \n\nExample code:\n``` \n_onDrag(dragToPos, source) {\n // dragtoPos[0]: x position\n // dragtoPos[1]: y position\n // dragtoPos[2]: z position\n}\n``` \nFor the mapping of sources to controller inputs, see the [Events](doc:events) section. \n\nUnsupported VR Platforms: Cardboard iOS", "5-1": "**PropTypes.oneOfType**\n``` \nPropTypes.oneOfType([\n React.PropTypes.shape({\n callback: React.PropTypes.func.isRequired,\n timeToFuse: PropTypes.number\n }),\n React.PropTypes.func,\n])\n``` \nAs shown above, onFuse takes one of the types - either a callback, or a dictionary with a callback and duration. \n\nIt is called after the user hovers onto and remains hovered on the control for a certain duration of time, as indicated in timeToFuse that represents the duration of time in milliseconds. \n\nWhile hovering, the reticle will display a count down animation while fusing towards timeToFuse.\n\nNote that timeToFuse defaults to 2000ms.\n\nFor example:\n``` \n_onFuse(source){\n // User has hovered over object for timeToFuse milliseconds\n}\n```\nFor the mapping of sources to controller inputs, see the [Events](doc:events) section.", "5-0": "**onFuse**" }, "cols": 2, "rows": 10 } [/block]