I'm trying to use the daydream trackpad in aframe. In particular I need events that let me see it as a touchpad. In other words I need touchstart, touchmove, and touchend events or equivalent.
The docs only list these events
trackpadchanged Trackpad changed.
trackpaddown Trackpad pressed.
trackpadup Trackpad released.
trackpadtouchstart Trackpad touched.
trackpadtouchend Trackpad not touched.
Notice there is no trackpadmove or trackpadtouchmove. I tried adding an event to trackpadchanged but it's not a touchmove like event.
If I want to say "scroll through something" I need values as the user moves their finger across the pad.
I tried printing out all of those events
const dd = this.el.querySelector('#daydream-controls');
[
'trackpadchanged',
'trackpaddown',
'trackpadup',
'trackpadtouchstart',
'trackpadtouchend',
].forEach((event) => {
dd.addEventListener(event, (e) => {
console.log(event, e);
});
});
But I don't see any events as I drag my finger on the pad. I only see trackpadtouchstart followed by trackpadchanged when I touch the pad and then I see trackpadtouchend followed by trakpadchanged when I release.
Is there some other event I should be looking for or some other way to read when the user moves their finger across the pad?
Use the axismove event provided by underlying tracked-controls.
See also: https://www.npmjs.com/package/aframe-thumb-controls-component
Related
Projects using the OculusGO or GearVR have a problem where the click event from laser-controls was triggered by BOTH the trackpad and trigger button click. Frustrating if you want different functionality for both (e.g. snap-turning on trackpad and click on trigger).
see line 74 (GearVR) and 79 (OculusGO) of https://github.com/aframevr/aframe/blob/master/src/components/laser-controls.js
cursor: {downEvents: ['trackpaddown', 'triggerdown'], upEvents: ['trackpadup', 'triggerup']},
is there another way to do this or would it be worth having the option to select your own downEvents and upEvents in the laser-controls schema to forward to the various controller configs?
For snap turn you can listen to the button specific event instead of click:
controllerEl.addEventListener('trackpaddown', snapTurn);
You can also consider copying the laser-controls code to your my-laser-controls component and modify the downEvents array to your needs.
I am using A-frame for building a VR website. I wish to enter vr-mode without having to press the 'enter-vr' glasses on the oculus go more than once. For my application most of the html (including the a-scene) get reloaded (but the header/footer remain in place). For pc browsers this code works:
HTML:
<a-scene id="eqvrscene">
</a-scene>
<button id="enterVRButton" onclick="$('#eqvrscene')[0].enterVR();"> Enter VR </button>
JS:
$("#enterVRButton")[0].click();
but this does unfortunately nothing on the oculus go. Does anyone have a suggesting how to tackle this problem?
This may or may not be related, but you have a typo in your <a-scene> tag.
It's difficult to tell from your code, but are you sure your scene is loaded when you click the button?
Try first listening for the loaded event of the scene, and then setting up a listener for the button:
// Scene entity element
var scene = document.querySelector('a-scene');
// Button element
var enterVRButton = document.querySelector('#enterVRButton');
// Check if scene has loaded, otherwise set up listener for when it does.
if (scene.hasLoaded) {
addButtonListener();
} else {
scene.addEventListener('loaded', addButtonListener);
}
// Add our button click listener.
function addButtonListener() {
enterVRButton.addEventListener('click', function() {
scene.enterVR();
});
}
In A-Frame master branch, there is an API in place for adding a custom button for entering VR, so it may be released in 0.9.0. See the master docs: https://aframe.io/docs/master/components/vr-mode-ui.html#specifying-a-custom-enter-vr-button
If you're trying to automate the click event, I don't believe this will work in many browsers, as a user interaction is required for enterVR().
It’s not posible. The WebVR API does not allow to enter VR mode automatically. It requires a user gesture like a click that cannot be synthetized like your example does. The only exception is when a page enters VR mode after user gesture, new pages are granted permission to enter VR automatically after navigation. A-Frame already accounts for the scenario and no extra application code is necessary.
Firefox also grants permision to enter VR automatically on page reload. That’s why you might be seeing a different behavior on desktop. Your code is not necessary, A-Frame auto enters VR automatically already. This case is not covered in the Oculus Browser
is it possible to get more information about the trackpad? I want to make an app that rotates the loaded model depending on where the user clicks on the trackpad, therefore I need the position. Could not find anything in the docs.
Is this possible or will it be possible?
Thank you
You can get the axis at el.components['tracked-controls'].axis or listen to axismove event el.addEventListener('axismove', evt => { console.log(evt); });
https://aframe.io/docs/0.7.0/components/tracked-controls.html#events_axismove
Introduction
The first MenuItem inside my MenuBar receives focus whenever I press down my AltGr key. This is by no means a wanted behavior—although it appears as though it’s the default behavior offered by the MenuBar itself.
This gets slightly annoying since I’m on a Swedish keyboard—meaning both the [] and the {} are called upon using the AltGr key.
Problem
I’d like to remove the functionality whereas the first MenuItem inside the MenuBar gets activated upon pressing down AltGr on a keyboard.
Research
As usual I’ve been browsing around Stackoverflow in the hope to find an answer—but in vain. It’s honestly not very surprising that no one has had this problem before due to the majority of Stackoverflow not actually using Swedish keyboard layouts.
Moreover
Perhaps someone has either seen a post like this somewhere—in that case, do mark this as a duplicate—in any other case, either point me and anyone who might come across this question in the right direction, or simply answer this question with a somewhat shallow example.
Looking at MenuBarSkin's constructor, it adds a scene event key handler which focuses the menu if any keypress involving Alt is not consumed by the time it reaches the scene:
// put focus on the first menu when the alt key is pressed
scene.addEventHandler(KeyEvent.KEY_PRESSED, e -> {
if (e.isAltDown() && !e.isConsumed()) {
firstMenuRunnable.run();
}
});
I've worked around this by putting an event handler on the main content pane of my window, that looks for the key-pressed event of ALT_GRAPH and consumes it. Since my handler goes before the scene handler, it should prevent the menu-focus behaviour from triggering. Roughly:
tabPane.addEventFilter(KeyEvent.KEY_PRESSED, e -> {
if (e.getCode() == KeyCode.ALT_GRAPH)
{
e.consume();
return;
}
});
I'm not sure if AltGr always shows up as ALT_GRAPH; I believe I have seen it show up as ALT with e.isControlDown() being true, but you could also consume that event if none of your menu shortcuts involve Ctrl+Alt (which I'm guessing they won't, as they would be triggered by AltGr since it maps to Ctrl+Alt on Windows).
I had exactly the same problem and based on above answer I was able to solve it by using below code:
mainAnchorPane.addEventFilter(KeyEvent.KEY_PRESSED, e -> {
if (e.isAltDown() || KeyCode.ALT_GRAPH == e.getCode()) {
e.consume();
}
});
On my environment when I pressed AltGr then event reported that Ctrl and AltGr buttons were pressed in this exact order. I didn't care about Ctrl but Alt was anoying so I kill both of my Alts with above code.
Can I listen to Alert button click between components using AsyncToken?
Basically, I want to have a method that opens an Alert with buttons and have it return an AsyncToken so that other components calling that method can listen for button click.
Example:
var token:AsyncToken=methodThatOpensAlert();
token.addResponder(new mx.rpc.Responder(buttonClick));
What's the way to do that?
Thank you.
You might be able to use an AsyncToken to achieve this but you could also just register for custom events that you dispatch from the pop up, this is a much cleaner method IMO. Really you've got two relatively clean options I can think of. 1 you make your pop-up dispatch events like "okClicked" "cancelClicked" for different button clicks within the pop-up, you create an instance of the pop up and add listeners then call PopUpManager.addPopUp, or else you do PopUpManager.createPopUp and keep a reference to the returned display object (the instance of the pop-up it created) and add your listeners then. 2 you make two properties in the pop up typed as function, you use them as call backs, so when you create the pop-up you set the okClickedFunction and cancelClickedFunction (or whatever your buttons may be) then in the pop-up you put cilck handlers on the buttons, check to see if the appropriate call-back function is set and call it if so, like
if(okClickedFunction)
okClickedFunction();
Let me know if you have a specific need that makes you think you must use the AsyncToken, but from checking out the docs it looks as though it's strictly meant to work with the other RPC methods and lots of properties are read-only.
EDIT:
[SomeUtilClass.as]
private static function methodThatOpensAlert():CustomAlert
{
return PopUpManager.createPopUp(Application.application, CustomAlert) as CustomAlert;
}
[CustomAlert.as]
[Event(type="flash.events.Event", name="button1Clicked")]
[Event(type="flash.events.Event", name="button2Clicked")]
private function button1Clicked_handler(event:MouseEvent):void
{
dispatchEvent(new Event("button1Clicked", true));
}
private function button2Clicked_handler(event:MouseEvent):void
{
dispatchEvent(new Event("button2Clicked", true));
}
[ThingThatUsesAlert]
var ca:CustomAlert = SomeUtilClass.methodThatOpensAlert();
ca.addEventListener("button1Clicked", button1ClickHandler);
ca.addEventListener("button2Clicked", button2ClickHandler);
And I believe mouse events bubble by default anyhow still so you could really just listen for a click event on the pop up then use the event.target to determine if it was one of the buttons your interested in.
Let me know if you can make sense of this or need more info.