I'm currently playing around with a VR environment for Google cardboard, using React and A-Frame and have a bug that I cannot fix.
I'm using a fuse-type cursor that will fire off a click event upon gazing at a target for more than 1.5 seconds. It's supposed to fire off once, but for some reason it will fire off multiple times.
You can check out the app on the browser at https://vr-museum.herokuapp.com
The code for the cursor:
<Camera position={this.state.cameraPos} >
<Cursor fuse="true" max-distance="10" timeout="1500" color="red"/>
</Camera>
Any insight as to what may be going on will be greatly appreciated.
Thank you.
This has changed to fuse-timeout="1500". I will update docs shortly.
Related
I've noticed in V9 of drei there is a bug when combing the <Html> elment with <ScrollControls>.
I just want bind text to a 3D element but the ScrollControll makes the text scroll out of the view: CodeSandBox Example
It works fine in v8: CodeSandBox Example
I fixed this in this PR https://github.com/pmndrs/drei/pull/1126 we just have to wait until they approve it. But you can just patch the library yourself using https://www.npmjs.com/package/patch-package, it should be easy as it is just one line change.
Edit: Now that I think about it, you could probably fix it also by sending gl.domElement.parentNode as the portal prop.
strange behavior with fuse cursor. I've set fuse false for cursor both mainscene and a-cursor, but fuse still appears on hover.
This problems is apeearing when testing on ios, android. From desktop browser working fine.
<a-camera id="default_angle" camera position="0 0 0" look-controls wasd-controls>
<a-cursor>
<!-- by default click should be not expected on hover object (fuse) -->
</a-cursor>
</a-camera>
...
<a-box id="motor" color="red" position="0 0 -5"></a-box>
<!-- on hover to this object from mobile fuse should not appear -->
...
var motor = document.querySelector('#motor');
motor.addEventListener('click', function (evt) {
alert('clicked');
});
Please checkout this codepen
https://codepen.io/sevenspring/pen/XWWzNvK
Here may be thought, that clicks produced by touch (tap on mobile screen) while cursor is hovered on object.
but you may check this example with gyro.
https://parent.glitch.me
in vr mode we can hover cursor on button "play/pause" by gyroscop moving, it still will produce clicks.
https://glitch.com/edit/#!/join/d1afa869-dea2-47ec-9904-e851e451d832
Answer from Dan S. is correct.
When we use without attribute "cursor" , fusing event is not fired, as it is expected by default
There are actually a number of issues here.
One issue is that the CodePen demo is using <a-cursor fuse="false" cursor></a-cursor>. This is essentially two cursors as you're adding a second one as a component via cursor that hasn't been configured.
Another issue is that cursor fuses by default on mobile if not explicitly set to cursor="fuse: false;"
Another issue is that you're listening for the click event, which is capturing the click when you mouseup after hovering over the entity.
I believe fuse was designed to allow for click without clicking, but while also allowing users to click if they have the ability.
If you want to test when something is fusing exclusively, you may want to try listening for the fusing event rather than click.
<a-cursor fuse="false"><a-cursor>
Or
<a-entity cursor="fuse: false;">
<!-- you will need to provide your own cursor geometry -->
<a-entity>
Then listen for fusing:
this.el.addEventListener('fusing', function (e) {
console.log(e);
});
I hope this helps.
I am trying to click a button that is buried in div classes in the code via protractor.
I am pioneering a protractor project for my work and have reached a point where I no longer know what to do. I have a button that is buried in div classes and is not allowing me to click. I have tried using mouseMove to get over to the coordinates of the button, I have tried using the className of the specific button, etc. The button does not have an id. The id is not the issue as I have tried clicking a different button, equally buried in divs, by it's id. I need to know how to get through the layers of divs in order to click the button because the rest of the tests will be dependent on it.
APPLICATION CODE:
::before
<dashboard-label>
<div class="att-topic-analysis-tabs">
<div class="att-button-group">
<button class="btn btn-default btn-lg att-close-topic ng-scope"
role="presentation" tabindex="-1"
ng-click="removeTopic(currentTopic.id)" translate>
Close Topic
</button>
</div>
</div>
PROTRACTOR TEST:
it('Closes Topic Successfully', function(){
//opens the first available topic
openTopic.click();
//checks that the URL contains 'topics' after 5 seconds
browser.wait(proExpect.urlContains('topics'), 5000);
var closeTopic = element(by.className('att-close-topic'));
//browser.wait(proExpect.elementToBeClickable(closeTopicButton), 5000);
console.log(closeTopic);
closeTopic.click();
browser.wait(proExpect.urlContains('home'), 5000);
});
As you can see, the Close Topic button is kind of buried in div classes and the standard click isn't working. Any info would be greatly appreciated
If the closeTopic locator is finding the element, but failing to click it, check to make sure there's only one matching element in the DOM, and that it's visible. My favorite way to check the DOM is just ctrl-F in Chrome inspector and paste the exact CSS that the test is using (.att-close-topic). And to check that what it's getting is visible, use
console.log(closeTopic.isDisplayed());
This can be a big gotcha in protractor, because it doesn't fail (only warns) when there are multiple matches on the page, and it defaults to the first match rather than the first visible match, which drives me nuts, because it's very rare that you want to do anything with a non-visible element on the page.
This will be partly opinion, but just to add a layer to the conversation...
Sometimes the solution to locating a troublesome element on the page is to go back to the developers and make the page more testable. I've seen testers spend hours or days crafting brilliant workarounds to access a stubborn element, and the end result was a fragile, complicated end-to-end test (and aren't they fragile enough already?).
Sometimes a 5-minute conversation with a developer can result in a quick change in the production code (e.g. add a unique ID) that avoids all that effort and yields a much better result, more stable, more simple. But this requires open conversation between the dev and test team, and a culture that values testing as a primary activity enough to make those testability changes to production code that is otherwise working just fine.
This is what you want to read to help you debug why your test doesn't work.
Also, you might want to start adopting await/async since the control flow will go away in the future.
http://www.protractortest.org/#/debugging
try this
var closebutton=element(by.css("[ng-click="removeTopic(currentTopic.id)"]"),
EC = protractor.ExpectedConditions;
Waits for the element to be clickable.checks for display and enable state of button
browser.wait(EC.elementToBeClickable(closebutton), 10000);
now use : closebutton.click();
The page loads without any of the images displaying on IE11 only, but refreshes them accordingly when we resize the browser intermittently (1/3 loads). We cannot replicate this with any of the other browsers. srcset works fine by itself with static content.
Here is a Plunker example of it not working in IE11.
Or quick and easy, the actual img html we're using:
<img data-ng-srcset="{{::image.url}}, {{::image.url2x}}" alt="{{::image.name}}"/>
The images or surrounding divs do not have any transitions, shadows or opacity applied.
The html renders fine with angular passing over and rewriting the srcset attribute correctly. The images just do not appear, only the alt tag. Wondering if this could be a call stack issue due to the intermittence of it, maybe a race condition with Picturefill loading before angular finishes a digest or something.
Cheers in advance!
A work around if you use PictureFill in a loop and in a specific case (not on all images of your application), is calling a function that launch PictureFill directly from HTML, after last item loaded (this is not the best practice but fix the IE11 problem) :
<picture><!-- Your image --></picture>
<span ng-if="$last">
{{ controllerAlias.launchPictureFill() }}
</span>
Came across this as a solution: http://tech.endeepak.com/blog/2014/05/03/waiting-for-angularjs-digest-cycle/
var waitForRenderAndDoSomething = function() {
if($http.pendingRequests.length > 0) {
$timeout(waitForRenderAndDoSomething); // Wait for all templates to be loaded
} else {
$window.picturefill();
}
}
$timeout(waitForRenderAndDoSomething);
The only issue that the blog post describes is here, so if anyone has anything better please let me know:
The $http.pendingRequests supposed to be used for debugging purpose only. If angular team decides to remove this, you can implement the same using http interceptors as suggested in this link.
Does anybody know how to change Transition Duration for the Fotorama jquery Plugin?
(4.1.17 http://fotorama.io)
Thank you!
It is posible since 4.2.3.
Set animation length in milliseconds using data-transition-duration:
<div class="fotorama" data-transition-duration="1000">
</div>
To see the changes, click on the stage or navigation. This option does not affect the behavior of the swipe.
Fiddle: http://jsfiddle.net/artpolikarpov/jrCC5/embedded/result,html,js/
You can use following attributes in js section
transitionDuration: 333
You can find the more detail on this
jsffidle example.