Is there any JavaScript event triggered when the user enters VR mode while viewing the VR scene on a webpage?
Or is there any function which returns whether the user is viewing the webpage in VR mode or not?
Use the enter-vr and exit-vr events:
https://aframe.io/docs/0.5.0/core/scene.html#events
document.querySelector('a-scene').addEventListener('enter-vr', function () {
console.log("ENTERED VR");
});
Related
I have to detect screen touches in VR mode, as that's what the button on a Cardboard produces. (I have other code to detect controller buttons.)
This code:
// mobile and Cardboard controls
AFRAME.scenes[0].addEventListener('touchstart', function(evt) {
// console.log('scene touchstart:', evt);
if (evt.target.classList.contains('a-enter-vr-button')) {
return;
}
if (!state.isFlying) {
AFRAME.scenes[0].emit('launch', evt);
} else {
AFRAME.scenes[0].emit('hover', evt);
}
});
fires when the screen is tapped, in Android Firefox in normal and VR mode (but VR mode is polyfilled). In Android Chrome, it fires in normal mode, but not VR mode (which appears to be native).
The same behavior occurs when I listen for mousedown, or add the listener to window, for either touchstart or mousedown.
So, what event on what element should I listen for, in native VR mode?
Add the event listener to the window or to the canvas (AFRAME.scenes[0].canvas).
window.addEventListener('click', function () { // ... } or
window.addEventListener('touchstart', ...)
VR Mode in Chrome had a virtual controller. My eventual solution was to write a component that detected both screen taps and controller buttons:
https://www.npmjs.com/package/aframe-button-controls
Creating a React-VR app that I need to iFrame into an existing app. My question is regarding the fullscreen button. How can i either hide this button and manage within my other app or send a message to the parent that the button was clicked?
Couldn't find any official documentation for this but if you look at the implementation of VRInstance you'll notice a hideFullscreen option that hides that button.
// vr/client.js
const vr = new VRInstance(bundle, 'VRTEST', parent, {
hideFullscreen: true,
...options,
});
To toggle fullscreen mode for an iframe you can use a library like screenfull.js so you don't have to worry about the various cross-browser implementation details of the Fullscreen API.
Just render a button in your page and make it toggle fullscreen mode for a DOM element on click.
const vrIframe = document.getElementById('vrIframe');
document.getElementById('vrFullscreenButton').addEventListener('click', () => {
if (screenfull.enabled) {
screenfull.request(vrIframe);
}
});
I took the JQuery UI dialog form sample from JQuery UI website.
Since I wanted that, once the dialog is opened and the form is displayed, that pressing the key submits the form, I added the following in the onReady() :
$.extend($.ui.dialog.prototype.options, {
open: function() {
var $this = $(this);
// focus first button and bind enter to it
$this.parent().find('.ui-dialog-buttonpane button:first').focus();
$this.keypress(function(e) {
if( e.keyCode == 13 ) {
$this.parent().find('.ui-dialog-buttonpane button:first').click();
return false;
}
});
}
});
This does perfectly the trick (I mean the click() is triggered when it has to), but the following occurs :
When the form is first submited through a press on the key, the submission is performed once.
If I reopen the dialog, and submit it again with a press on the key, the form is submitted twice.
If I reopen the dialog, and submit it again with a press on the key, the form is submitted three times, and so on...
This can be tested with the following fiddle :
http://jsfiddle.net/fWW2E/
Let me add that doing so by clicking on the dedicated "Submit" button works properly, this fails only when pressing the key is involved.
Any ideas ?
Thank you !
Because since you're assigning this on "open" and your buttons are "closing" the dialog.
When this gets called though:
$('something').dialog('close');
doesn't actually remove the element, it just hides it. So the next time you click to open up a "new" dialog, you're really just showing the first one again. However the "open" event is getting fired again every time it's opened, which is adding a new keypress handler onto it.
Here's the fiddle. I actually write out to the console an array of the current handlers on that element. You'll see everytime you open the dialog that there is another keypress handler.
DEMO
How to disable Save As dialog while pressing Ctrl+S
Description: I am developing one web application.Here When i am going to form submitting using "Ctrl+S",In Firefox before submitting "save As dialog" will open.How to disable save As dialog in Firefox.
You can accomplish this by handling the window's onkeypress event to check whether the CTRL key and S are depressed, and if so, canceling the event from by calling preventDefault() on the event object:
window.onkeypress = function(event) {
if (event.charCode === 115 && event.ctrlKey) {
event.preventDefault();
// your code here....
alert("'Save As' dialog suppressed!");
}
};
Note that the keypress event may behave differently in different browsers. This did work in FireFox, however.
I have a webform and i want to detect if F5 button was pressed or if the page was refreshed. I know about postback but it is not what i'm looking for. I have a gridview that loads in a modal popup when a button is clicked and a parameter's value is set for the gridview. When refresh is hit and if the modal popup button was previously clicked the modal popup is visible right after refresh. I want to detect if the page is refreshed to prevent this. any ideas? I thought to try Override but I'm not exactly sure how to use it. I tried Control.ModifierKeys but I don't have access to ModifierKeys.
Pressing F5 or physically clicking the browser refresh behaves similarly to navigating away from the page. This is captured in the event window.onunload. Try the snippet example below:
window.onbeforeunload = function (evt) {
var message = 'Are you sure you want to leave?';
if (typeof evt == 'undefined') {
evt = window.event;
}
if (evt) {
evt.returnValue = message;
}
return message;
}
This will capture the refresh and allow you to do something or prompt the user.
Reemember that hotkeys are processed in the client side in the browser. The easiest way to implement this is through javascript.
Look at the following link:
http://snippets.dzone.com/posts/show/3552