CODEWITHSUNDEEP
javascriptjquerycssnode.jschap-links-library
user3517331
user3517331

Reputation:

Animated bullseye over Vis.js node

I'm using Vis.js to draw network diagrams. I'd like to be able to have a notification feature that when an AJAX update is received for a specific node the canvas moves that node to the center (which Vis.js can already do) and then have some type of bullseye animation over the node to draw the users attention until they click the node. The closest example to the animation effect I'm looking for is at http://codepen.io/MateiGCopot/pen/ogEKRK 

var w = c.width = 400,
h = c.height = 400,
ctx = c.getContext('2d'),

frame = 0;

function anim(){
  window.requestAnimationFrame(anim);

  ++frame;

  for(var i = 0; i < w; ++i){
    ctx.strokeStyle = i%20 === 0 ? 'hsl(hue, 80%, 50%)'.replace('hue',
        (360 / (w/3) * i - frame) % 360
    ) : 'rgba(0, 0, 0, .08)';
    ctx.beginPath();
    ctx.arc(w/2, h/2, (i + frame)%w/2, 0, Math.PI*2);
    ctx.stroke();
    ctx.closePath();
  }
}
anim();

Is this the best way to achieve this type of effect? Running it on my machine makes the CPU usage spike so it doesn't seem to be that efficient.
Also, how can I integrate something like this with Vis.js so it draws over an image node and will stop when the node is clicked? This particular example draws the circles outward however, I'd like them to be drawn inwards but couldn't figure out how to change the direction.

JavaScript is not my strong suite so the more detailed the explanation the better. Also, I'm not specifically tied to Vis.js so if there is another library that already has this functionality (along with comparable Vis.js features) I'd be alright with switching.

Upvotes: 2

Views: 1771

Answers (1)

AlexDM0
AlexDM0

Reputation: 559

I'm the developer of the visjs network view. This is not possible yet within the public API. We are working on a version 4.0 that will allow you to easily inject your own code inside the renderloop. If you need it sooner (we expect 4.0 around April) please post an issue on our GitHub page and I can help you insert this into the source yourself. We would like to keep all our questions on GitHub so it is easier for people to find answers.

Edit: additionally you could of course just change the color and or use the focus functionality to focus on the node. But that was not your question. A workaround could be to overlay a div on top op the node, where the doc could have a gif with the animation and a click handler. You can get the position of said node using the vis API.

Upvotes: 2

Related Questions