Why is aframe animation complete event firing multiple times - aframe

Hello I am new to aframe and I am creating a component where when I click on a plane some animation occurs and color of plane change. It is a very simple learning application, but I see that animation__complete is fired multiple times 1st time for 1 time second time twice and so on I do not understand what an I doing wrong I have attached the log of the file here link to project is https://glitch.com/~amethyst-lamprey-mltmsu585o also this is my first time posting question on stack overflow
Console log output:
about to emit fadein
(index):43 fadeincompleted
(index):35 about to emit fadein
2(index):43 fadeincompleted
(index):35 about to emit fadein
3(index):43 fadeincompleted
(index):35 about to emit fadein
4(index):43 fadeincompleted
(index):35 about to emit fadein
5(index):43 fadeincompleted
(index):35 about to emit fadein
6(index):43 fadeincompleted
Console log image:

It's a jQuery usage issue. Your code is adding new event listeners each time the user clicks resulting in animations triggered multiple times. Move the code below outside of the click handler so it runs only once per animationcomplete__fadein event.
$(loading_sky).on("animationcomplete__fadein",()=>{
console.log("fadeincompleted");
el.setAttribute("color","#"+(Math.floor(100000 + Math. random() * 900000) ).toString());
$.each(scene,(i,e)=>{ e.emit("fadein"); });
setTimeout(()=>{loading_sky.emit("loadfadeout")},1100)});
});
Corrected glitch

Related

How to use the aframe daydream trackpad controls?

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

click element in robot framework is not working

Click Element is not working in Robot Framework, in the log.html it shows that it clicked on element, but it does not actually happen on the browser
This application is not an Angular JS application.
I have tried the same functionality in other application which is an Angular JS, it worked fine.
My Robot code is as below:
*** Settings ***
Library Selenium2Library
*** TestCases ***
Login to Application
Open Browser ${url} ff
Maximize Browser Window
Select from List by value id=selectedCountry MU
Input Text id=userid rajaint
Input Password id=password rajaint1
Click Element id=Submit1
what can be the reason for this?
I'm stuck in automation, as I stopped at the login.
I cannot share the application url as it is confidential.
After having a chat with Sarada - We discovered that the issue was on his application. The problem was the application had to lose focus of the drop down menu and the username field in order for the validation to pass through - and allowing more input from robot.
After some trail and error, we figured out how to lose focus of an element and allow the validation to work as intended; which in return meant everything else worked smoothly!
I suggested Focus but that did not work so instead we forced it using:
Press Key id=userid \\9
Which sends a Tab to the browser. Making it lose focus and making the validation tick over!
In the end the Robot File looks like:
Open Browser ${url} ff
Maximize Browser Window
Wait Until Element Is Visible id=selectedCountry 10s
Click Element id=selectedCountry
Select from List by value id=selectedCountry MU
Click Element id=selectedCountry
sleep 2s
Focus id=userid
Click Element id=userid
Input Text id=userid rajaint
Press Key id=userid \\9
sleep 5s
Input Password id=password rajaint1
sleep 2s
Click Button id=Submit1
sleep 10s
Capture Page Screenshot
I have experienced the same problem but the Press Key Trick is not working.
I used this hack instead
Execute JavaScript
document.getElementById('Submit1').click()
And it's working fine
Similar problem was faced by me.
The JavaScript worked perfectly.
Execute Javascript document.querySelector('#HIRESearchTable > tbody > tr > td.searchLink > span').click();
For this kind of scenarios, you can use JavaScript Executor. But in most of these cases, you can't find the Id of the element. So I have implemented a common keyword which can be used with the xpath.
Click Element By JavaScript Executor [Arguments] ${elementXpathLocator} ${retryScale}
[Documentation]
... Click an element by xpath using javascript executor ...
Wait Until Keyword Succeeds 2x 1 s Wait Until Element Is Enabled ${elementXpathLocator}
Execute JavaScript document.evaluate("${elementXpathLocator}", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotItem(0).click();
Sleep 1s after you found the element. It works for me.

can't get 'click' event listener to register as user initiated action on Android Chrome in a-frame (to play media)

I understand that to start a video in Chrome from within A-frame on Android a user initiated event is needed, but I cannot work out how to get Chrome to accept a click event listener triggered via a fused cursor as a user event.
the following code is in the init of a component attached to a cube.
this.el.addEventListener('click',function(evt){
console.log("clicked");
var els = document.querySelector('#video');
els.components.material.material.map.image.play();
});
there is a video sphere in the html as follows
<a-videosphere id="video" src="#avideo" rotation="0 180 0" ></a-videosphere>
and the follow within the assets tags.
<video id="avideo" src="video/lowaudio.mp4"></video>
When I debug, Chrome returns the following, even though it appears to me that the user is initiating the click even via a cursor fuse.
videoClick.js:22 Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture. # videoClick.js:22
Uncaught (in promise) DOMException: play() can only be initiated by a user gesture.
Any suggestions would be greatly appreciated. Cheers
It has to be an actual physical click of the screen, not a synthetic one.
document.querySelector('.a-enter-vr-button').addEventListener('click', function () {
document.querySelector('video').play();
});

DOM event function very slow in paper.js

Connecting the event of dom elements with paper.js object. its working fine. but its executing function very slow.
ex:
<button id="btn">Click</button>
js'
var secondPath = new Path.Circle(new Point(180, 50), 35);
$('#btn').on('click', function(e){
secondPath.fillColor = 'blue';
});
here getting the results but it takes little time. But its working, if I add the event in the canvas elements
Please help me
I believe the issue is that you're using the DOM events, not the paperjs mouse handlers. When you use the paperjs mouse handling it notes whether the canvas needs to be redrawn. When you use the DOM mouse events paper doesn't "know" you've changed the content so it doesn't force an update to the view.
Add a line: paper.view.update() after you fill the circle and things should work correctly.

IOS : CADisplay / UIScrollview and Navigation Controller

So I have managed to get my lovely GLKit 3D menu working with a UIScrollview and life is good until I push to another view controller and come back.
So completely smooth movement, move to next controller and come back. UIScrollview does not bounce or flow nicely?
CADisplay Link is init and nil'd every time the scrollview moves and stops and this seems to work fine up until I push to another controller and come back.
Randomly if I click on a item which causes the scrollview to move and fire off all the code, it then kicks back in to life. sadly if I try to fire this off on the view did appear it does not do the same thing.
- (void)startDisplayLinkIfNeeded
{
if (!self.displayLink)
{
self.displayLink = [CADisplayLink displayLinkWithTarget:self.view selector:#selector(display)];
[self.displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
}
}
- (void)stopDisplayLink
{
if (self.displayLink)
{
[self.displayLink removeFromRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
[self.displayLink invalidate];
self.displayLink = nil;
}
}
So, after a whole day of trying to work out this issue, it comes down to
self.preferredFramesPerSecond = 60`
If I dynamically change this to around 15 to 20 depending on what I do, the whole problem goes away.

Resources