I am using A-Frame (current master build), and my goal is to determine the location being touched on an Oculus Go controller. (This is not for moving the camera, so the movement-controls component will not help in this situation.) I have set up a scene containing a text object so that I can view the data while testing on the Oculus Go.
The relevant parts of the scene are:
<a-scene>
<a-entity id="textArea" text="data will be displayed here"> </a-entity>
<a-entity oculus-go-controls updater> </a-entity>
</a-scene>
I am also using the following component, set up to display the data sent to the event handler:
AFRAME.registerComponent('updater', {
init: function()
{
let textArea = document.querySelector('#textArea');
this.el.addEventListener("axismove", function(event)
{
textArea.setAttribute("text", "value", "axismove: " + JSON.stringify(event) );
});
}
});
However, after moving my thumb on the trackpad, the text object reads:
axismove: {'isTrusted': false}
My understanding based on https://aframe.io/docs/0.8.0/components/tracked-controls.html is that there should be axis data passed in the event. How can I access the axis information?
Oculus Go is only supported in the master branch until 0.9.0 ships but you can use it now by pointing your script tag to https://rawgit.com/aframevr/aframe/6888165/dist/aframe-master.min.js
Use the oculus-go-controls component and listen for the trackpadchanged event. The axis values are in the event detail:
controllerEl.addEventListener(‘trackpadchanged’, function (evt) {
...evt.detail...
});
Related
(I know it will be unstable but I still want to try it)
I want to move around in aframe scene using accelerometer
AFRAME.registerComponent('acccam',{
window.addEventListener('devicemotion', function(){
var acc = event.acceleration;
this.el.object3D.position.x += acc.x*9.8;
this.el.object3D.position.y += acc.y*9.8;
this.el.object3D.position.z += acc.z*9.8;
}, true);
})
I expect the camera to move or at least shake/something but nothing is happening could getelement by id, get attribute and set attribute be used to update the position by taking temporary values and then cloning them if yes then how?
Make sure the event is firing, and make sure you don't have like look-controls also enabled on the same entity or it will be overridden.
You can need to make sure this is the correct pointer. When you wrap in function (), this becomes window. You can use (evt) => { instead of function (evt) {
Short question... I have an eventlistener that listens to raycaster-intersected and a laser controls. It fires the event immediately when I start the page. Anybody any clues why and how to prevent this?
(on my object with class .rayTarget)
this.el.addEventListener("raycaster-intersected", function(){
// random code
});
(in my scene)
< a-entity oculus-go-controls="" laser-controls="hand: right" raycaster="objects:.rayTarget;"></a-entity>
Using Aframe master branche (June 2018)
Currently I added a setTimeout that does "solve" the problem, but this doesn't seem right.
Probably the hands are pointing at something while the scene is being loaded. Maybe until their position is set according to the controller readings.
If you want a better solution than setTimeout you can set the raycaster with setAttribute("raycaster", ..... when the scene, or window are loaded:
You can wait until the window is loaded:
window.onload = function() {
console.log("The window is loaded")
}
or wait until the scene is loaded
AFRAME.registerComponent("foo", {
init: function() {
this.el.addEventListener("loaded", (e) => {
console.log("The scene is loaded")
})
}
})
You can set up your stuff then, or switch some loaded flags in your code. Check them out here.
I am using Aframe 0.7.0. and it working great! My application has camera with cursor and the raycaster intersect with entities.
I want to disable click event that is emitted by intersection of cursor and any entity, but at same time I want other events to work just fine, like mouseenter, etc.
How can I achieve this? Please let me know if I am missing any information required for this question.
Thanks
If i'm correct about Your idea, You should be able to do something like this.
Activate clicking on stuff using the addEventListener("click", handler)
Deactivate clicking on stuff using the removeEventListener("click", handler)
Having those in Your component,
AFRAME.registerComponent("foo", {
addListeners: function() {
this.el.addEventListener("click", this.handler);
},
removeListeners: function() {
this.el.removeEventListener("click", this.handler);
},
handler: function() {
// whatever response from clicking
}
});
You can enable clicking by using el.components.foo.addListeners and disable using el.components.foo.removeListeners from any other method.
Check out my example here. right box enables, disables the click event on the left one. Check it out in the console.
I understand how to get my current location with HTML5.
How do I add a click handler, so when a button is pressed it shows my current position on the map?
Google's example pretty much explains how it's done, but the button is set to predefined coordinates. How do I attach the "Home" button to current position coordinates instead?
Custom Control Example
From Google demo
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
As initialLocation is global you can use this to set the click event listeners: simply set the map to initialLocation
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(initialLocation)
});
I'm trying to enable a double click event on a flex control without disabling the default mouseup/mousedown behaviors.
I'm using the ESRI Flex API for arcgis server, and I have a map control with one background layer and a GraphicLayer. The graphics layer has several Graphic objects that respond to mouseover, and allow the user to pan the map if they click and hold. However, when I implement a double click event handler for the graphic objects, they no longer seem to bubble up their default behavior to the map.
Is there a way to implement a double click on a Graphic object while preserving the old behavior from clicking and holding?
I solved this by attaching the double click event to the map, rather than the graphic, and using the target attribute of the event to get the graphic I wanted to use.
Like this:
map.addEventListener(MouseEvent.DOUBLE_CLICK, function(event:MouseEvent):void
{
var graphic:Graphic = event.target as Graphic;
if(graphic)
{
...
}
});
If you set the "checkForMouseListeners" property to false on your Graphic objects, then the default map click/drag behavior will be preserved.
graphic.addEventListener(MouseEvent.DOUBLE_CLICK, function(event:MouseEvent):void {
var graphic:Graphic = event.target as Graphic;
if(graphic) {
...
}
});
//preserve the default click/drag behavior on the map
graphic.checkForMouseListeners = false;
http://resources.esri.com/help/9.3/ArcGISServer/apis/Flex/apiref/com/esri/ags/Graphic.html#checkForMouseListeners