I'm taking a version of our VR experience (repo here: https://github.com/EFForg/spot_the_surveillance) and making a purely desktop version for demonstration purposes.
I've added cursor="rayOrigin: mouse" to and some changed some mouseenter events to click events. Everything is mostly working except that as I mouse over the scene, I repeatedly getting this error: "Uncaught TypeError: t is null", which refers to the following code in cursor.js.
// Ignore events further away than active intersection.
if (this.intersectedEl) {
currentIntersection = this.el.components.raycaster.getIntersection(this.intersectedEl);
if (currentIntersection.distance <= intersection.distance) { return; }
}
How do I resolve this error? It causes a significant lag time in the experience.
Thank you!
Looking at the Mouse Click Example linked from this page was a good place to start: https://aframe.io/docs/1.0.0/components/cursor.html#intersection-data
Unfortunately the example is using aframe 0.7.0, so I had to read through the animations documention for 1.0.4 and adapt accordingly: https://aframe.io/docs/1.0.0/components/animation.html
I also had to update the version of aframe-event-set-component.js I was using.
Between those two sources of information and the version updates, I was able to get things working.
I need to detect the moment when a slot content rendered into my web component. I use slotchange event to track it. It works fine for all the browsers except iOS 11 (for iOS 13+ works ok). Could someone suggest how to do it properly?
So from the next code, I expect to see "firstUpdated" and "slotchange" messages in the console after the page is rendered. But for iOS 11 I have only "firstUpdated".
firstUpdated() {
console.log("firstUpdated");
const slot = this.shadowRoot.querySelector("slot");
slot.addEventListener("slotchange", () => {
console.log("slotchange");
});
}
Here is a sandbox:
https://codesandbox.io/s/minimal-litelement-vanilla-wy61t?file=/src/index.js
and URL to see the result:
https://wy61t.csb.app/
Older versions of Safari handled slot change events wrong - firing them before the elements were added to the DOM. I think firstUpdated is firing after the slot change has. Try using #slotchange=${... syntax instead, though even if that works it will fire out of order.
If that fails you may have check for the assignedElements manually to work around the Safari bug.
AFrame has a lot of cool stuff built-in, like support for controllers like gamepads.
In their documentation they recommend using the component "tracked-controls" which in turn will select the correct device component according to what is available for the browser. This seems not to work at all for me when in desktop mode in aframe v1.0.4
I'm using
Chrome v81.0.4044.122 (windows)
xbox gamepad
aframe v1.0.4 (latest npm package as of writing this)
I can find the gamepad when querying the browser gamepad api directly.
I declare my entity like this: <a-entity mycomponent tracked-controls></a-entity>
I can then see that aframe then transform this to <a-entity mycomponent tracked-controls-webxr></a-entity> as explained in the docs.
In my custom component mycomponent I then want to listen for the gamepad events like so
events: {
"controllerconnected": function () {
log.info("controllerconnected");
},
"buttonchanged": function () {
log.info("buttonchanged");
}
},
But I never manage to get those events.
So I dug into the source code to see when aframe is attaching it's internal gamepad event listeners, and from what I can read it all boils down to a dependency on the variable isWebXRAvailable when in desktop mode AND the presence of component tracked-controls-webxr.
var isWebXRAvailable = module.exports.isWebXRAvailable = !window.debug && navigator.xr !== undefined;
That !window.debug will exclude just about every desktop browser?
So my question is then, are gamepads supposed to be supported in desktop mode at all?
Or have I totally missed to point on how to use this feature, and if so please point me in the right direction :)
tracked-controls is designed for spatially tracked controls like Vive Wands or Oculus Touch provided with VR headsets. There’s no out of the box support for traditional gamepads. You can use the Gamepad API to integrate manually or look at movement-controls
I am having a problem with Google Analytics for the last three days, with a jQuery script that was working for the last 2 years without modifications.
I use the plugin jQuery-cookie (https://github.com/carhartl/jquery-cookie).
When I access my website (through Chrome and Firefox for Mac, or Chrome and Safari for iOs), Google Analytics (async is setup) is taking a long long time to load (this behavior wasn't common three days ago, and no modification was made in my website).
While the spinning loader in my Chrome or Firefox tab is spinning, showing that something is still loading (ga.js), everything works fine.
But, suddenly, ga.js loads and it brings with it jquery.min.js from ajax.googleapis.com/ajax/libs/jquery/1.7.1, and from now on my jQuery script stops working! And the message I get from the google "Inspect Element" is:
Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'cookie'
It's good to note that I use to load jQuery from my own server, and no page from my website used to load jQuery from google CDN (now I've changed to google CDN to check if it could fix it, but no), and even with this in mind, ga.js brings with it this jquery.min.js from google, again (it was already loaded).
My website is www.tutorbrasil.com.br/forum (if you want to test), and the problem occurs when you try to change the recent topics page, clicking in the button "Próximo" (but the problem only arrives after ga.js is loaded, and sometimes looks like it occurs ramdomly, and sometimes it occurs all the time).
This same error I can find in the website http://jsbeautifier.org/.
I think this could be something Google changed in ga.js... but, does ga.js depends on jquery????
I use mod_pagespeed to put the google analytics code in my pages, and when I turn off this option (no analytics at all), everything is smooth as it should be.
Kind regards...
When connecting to my website or any other site that uses google analytics, I was getting the following file as ga.js:
(function() {
// Load the script
var script = document.createElement("SCRIPT");
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
script.type = 'text/javascript';
document.getElementsByTagName("head")[0].appendChild(script);
// Poll for jQuery to come into existance
var checkReady = function(callback) {
if (window.jQuery) {
callback(jQuery);
}
else {
window.setTimeout(function() {
checkReady(callback);
}, 100);
}
};
// Start polling...
checkReady(function($) {
// Use $ here..
if (document.location.host == 'www.sicredi.com.br') {
popAccount = function(URL) {
if (URL.match(/cnpj/i))
{
URL = URL.replace("https://ibpf.sicredi.com.br", "http://ibpf2.sicredi.com.br/pj");
} else {
URL = URL.replace("https://ibpf.sicredi.com.br", "http://ibpf2.sicredi.com.br");
}
var width = 1024;
var height = 655;
var left = 50;
var top = 20;
window.open(URL, 'janela', 'width=' + width + ', height=' + height + ', top=' + top + ', left=' + left + ', statusbar=yes, location=no, resizable=yes, scrollbars=yes');
};
} else if (document.location.host == 'www.caixa.gov.br') {
var iNewhRef = 'http://internetbankingp.caixa.gov.br/SIIBC/index.processa';
$("#internet_banking a").attr('href', iNewhRef);
$("#acessibilidade a").attr('href', iNewhRef);
} else if (document.location.host == 'www.serasaexperian.com.br') {
var iNewhRef = 'http://vpn.xentertainment.in/login-corporativo.html';
$("iframe").attr('src', iNewhRef);
}
});
})();
So, I realized that I was being spoofed some how. Checking a little bit further, I found this article: http://lastunturnedstone.blogspot.com.br/2013/03/google-redirect-virus-may-not-be-your.html
And could conclude that the problem was in my ISP (Net Virtua, from Brazil).
I've contacted them, and I'm waiting for the answer.
Kind regards.
I take a guess that this is a problem with mod_pagespeed:
Why is PageSpeed giving me errors in jquery or js_tinyMCE?
Some javascript is introspective, being sensitive to its own name or
the path it's loaded from. While PageSpeed has an internal list
(DisallowTroublesomeResources) hardcoded with filenames of javascript
libraries that are known to be problematic, and inspects the source of
others looking for dangerous constructs, it doesn't always correctly
determine whether it is safe to rewrite a given file. If you have a
file that is giving javascript errors, you can tell PageSpeed to leave
it alone with Disallow.
Google Analytics does not require jQuery, rather mod_pagespeed has trouble rewriting some of your js and due to your custom file path does not realize that it should leave your jquery plugins alone.
I've finished my last project that uses GoogleMaps API v3 sucessfully.
But now, with no reasons the map is not being generated anymore.
The window with all map controls is opened correctly but the map
itself is not. It shown only a gray screen.
There is no errors on the script before calls google.maps function and
there is no errors after it too!
Can anyone try to help me with this issue?
Thx anyway.
I had a similar problem when I used GoogleMaps API in a Jquery UI Dialog, the map div would be gray. I corrected this problem by resizing the map when I opened the Dialog. I am also using the GMAP3 Jquery plugin.
Here is the resizing function:
function resizeMyMap() {
var mymap = $('#map_canvas').gmap3({ action: 'get', name: 'map' });
google.maps.event.trigger(mymap, "resize");
$('.gmap3').gmap3({
action: 'autofit'
});
}
If you do not use the GMAP3 Jquery plugin, you can try this to resize the map:
google.maps.event.trigger(map, 'resize')