I'm using d3.interval instead of the javascript setInterval. The problem is that I don't know how to stop it, since I was using ClearInterval and it clearly doesn't work.
Thanks.
Use method stop for this. This method works for both d3.timer and d3.interval;
var interval = d3.interval(function(elapsed) {
if (elapsed > 2600) {
interval.stop(); // <== !!!
return;
}
console.log(elapsed);
}, 500);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
Related
I'm trying to detect when a marker if found/lost in ar.js, while using a-frame.
From what I see in the source code, when the marker is found, a 'getMarker' event should be fired, moreover artoolkit seems to dispatch a markerFound event.
I tried to listen to those events on the <a-scene>, or on the <a-marker>, but it seems I'm either mistaken, or i need to get deeper to the arController, or arToolkit objects.
When i log the scene, or the marker, i only get references to the attributes, which don't seem to have the above objects attached.(like marker.arController, or marker.getAttribute('artoolkitmarker').arController)
Did anybody tried this and have any tips how to do this ?
PR303 introduces events when a marker is found and lost
markerFound
markerLost
You can use them by simply adding an event listener:
anchorRef.addEventListener("markerFound", (e)=>{ // your code here}
with a simple setup like this:
<a-marker id="anchor">
<a-entity>
</a-marker>
example here.
Please note, that as of sep 18', you need to use the dev branch to use the above.
ORIGINAL ANWSER - in case you want to do it manually
Detecting if the marker is found is possible by checking if the marker is visible when needed (other event, or on tick): if(document.querySelector("a-marker").object3D.visible == true)
For example:
init: function() {
this.marker = document.querySelector("a-marker")
this.markerVisible = false
},
tick: function() {
if (!this.marker) return
if (this.marker.object3D.visible) {
if (!this.markerVisible) {
// marker detected
this.markerVisible = true
}
} else {
if (this.markerVisbile) {
// lost sight of the marker
this.markerVisible = false
}
}
}
As adrian li noted, it doesn't work with a-marker-camera, only with a-markers
I went with a dirty hack diving into the internals, bear in mind that what I've provided might not suffice because the event get's called every time the marker is found, sadly I couldn't find an event to hook into for markers being lost.
const arController = document.querySelector("a-scene").systems.arjs._arSession.arContext.arController;
arController.addEventListener("getMarker", (evt) => {
const markerType = evt.data.type;
const patternType = 0;
//console.log("onMarkerFound!!");
if (markerType == patternType) {
//console.log("onMarkerFound out pattern!!");
//Do stuff...
}
});
I want to write a test for my setInterval and test that the alert window has fired with the value 'pulse'. How do I do this? I've tried so many variations on this but can not seem to figure this out. I've provided the code and my spec file. I'm using jasmine 2.0. Any help is appreciated.
countTimer.js
function CountTimer(timelength){
this.timelength = timelength;
this.running = false;
}
CountTimer.prototype.start = function(){
this.running = true;
setInterval(function () {alert('pulse')}, 2000);
};
CountTimer.prototype.stop = function(){
this.running = false;
};
countTimerSpec.js
describe("Timer",function() {
var myTimer;
beforeEach(function() {
myTimer = new CountTimer(25);
});
...
it("start should run setInterval 'pulse' every 2 seconds via setInterval", function(){
myTimer.start();
//what goes here???
expect(sut.callback).toHaveBeenCalled();
});
});
You want to use the jasmine clock (it hooks the real clock and allows you to simulate time as you want).
Check the jasmine help - the example there is pretty much exactly what you are trying to do. http://jasmine.github.io/2.3/introduction.html
Basic steps (in your test):
jasmine.clock().install();
myTimer.start();
jasmine.clock().tick(2001); //enough that your interval gets tripped
expect(...)
jasmine.clock().uninstall();
I would like to take the mousewheel event on an element, but have't found anything on the documentation. Do you have an example of the kind?
I'm not sure of any direct Snap methods to use mousewheel, but I guess you can just add a mousewheel listener...this example works in Chrome, you may need to tweak and add test case for different browsers.
var s = Snap(400, 620);
var c = s.circle(30,30,30);
if( (/Firefox/i.test(navigator.userAgent)) ) {
s.node.addEventListener("DOMMouseScroll", mouseWheelHandler, false);
} else {
s.node.addEventListener("mousewheel", mouseWheelHandler, false);
}
function mouseWheelHandler (ev) {
ev.preventDefault();
console.log( ev.target.localName );
}
Edit: Have updated to check for firefox as well.
jsfiddle example
I am using addNotice to display any message on screen. Now, I want to customize it and it should be removed after some time(let's say after 10 seconds) like we can do with javascript.
Is this possible to do this using default addNotice message of magento ?
Any Help would be appreciated.
add this script in your page
This will hide the div after 1 second (1000 milliseconds).
$(function() {
setTimeout(function() {
$('.messages').fadeOut('fast');
}, 1000); // <-- time in milliseconds
});
If you just want to hide without fading, use hide().
hope this will help you
Add this to your footer:
setTimeout(function(){
var messages = $$('.messages')[0];
if (messages){
$(messages).hide();
}
}, 10000)
The code above is the prototype version.
If you have jquery already in your website use what #magExp wrote. It's cleaner.
Let say your success message id is "success-msg", then write jquery like
$(function() {
// setTimeout() function will be fired after page is loaded
// it will wait for 5 sec. and then will fire
// $("#success-msg").hide() function
setTimeout(function() {
$("#success-msg").hide('blind', {}, 1000)
}, 5000);
});
Remember that you need to load jQuery Library..
I'm trying to animate the duration of the value change in a dojo gauge, but I think I'm missing out something, and I can't figure out what it is.
So far, I've got this code working, but the indicator just moves from one point to another, with no animation whatsoever.
require(["dojo/ready", "dojo/dom", "dojox/dgauges/components/black/CircularLinearGauge", "dojox/dgauges/GaugeBase"],
function(ready, dom, CircularLinearGauge, GaugeBase) {
var gauge = new CircularLinearGauge({value:10, animationDuration:5000}, dom.byId("circularGauge"));
setInterval(function() {
var randomValue = Math.floor((Math.random() * 100) + 1);
gauge.set("value", randomValue);
gauge.refreshRendering();
}, 10000);
});
Any help would be highly appreciated, thanks in advance
Looks like its an issue with dojox.dgauges.components.DefaultPropertiesMixin. If you replace the _setValueAttr function to
_setValueAttr: function(v) {
this.getElement("scale").getIndicator("indicator").set("value", v);
}
it should animate for you.
As a side note, all the other functions in DefaultPropertiesMixin sets each property directly instead of using the set function. It might be advisable to change them to use the set function instead.