using vis network to animate Automated Guided Vehicles (AGV)

[mmehari]

Hello all,

I am working on a project which uses AGVs to capture wireless traffic, positions, time ... and I want to graph this interaction on a vis network.

The traces are generated periodically (at specific time instances) and I can draw the AGV network using a discontinuous vis network. That is, first draw all the nodes at time=t0, next wait for a while, at time=t1 move the nodes to their new position, so on and so forth.

Now I want to have is a smooth motion (with constant speed) and remove the discontinuities from the vis network. For that, I also had plan to use the physics module for but I am not sure if it will give me smooth motion.

Is there an already made example of such type or could you please let me know how I can do this?

Best, Michael

[josdejong]

That sounds cool, but are you sure Network is a good fit for this? To me it sounds more like you need a 2d physics engine or something like that.

[mmehari]

The reason I choose network is the AGVs will be the nodes and the edges will be the wireless communication in between. The only thing I am missing so far is the smooth operation of the AGVs either by interpolating the locations at different time instances or by applying a physics engine as you suggested.

However, I have no experience in any of the physics engines and it would be great if you guide me a bit further.

Thanks

[josdejong]

I don't know exactly what you're working on, if you really want to use something with real physics, or if you just animating some simulation results or something like that. Anyway I think that Network is no suitable solution to do animated simulations with positioning and movement of nodes, it's just about displaying relations between them.

You can just do some experiments to see if you can do what you want to do with Network, and do some experimentation with a physics engine or just a 2d drawing/rendering library like d3 or pixi.js or something like that to see if that's a better fit for your case. Just google for drawing libraries and/or physics engines and follow some tutorials.

[mmehari]

Hello Jos,

I have made a small program trying to show what I am looking for and you can find the snippet on the link http://liveweave.com/SpNPFP.

So far, the animation is what I am looking for except a few things.

1. The network layout is not fixed and I want to put a background grid to show AGV movement in relation to it.
2. Connected to the first question, the size of AGVs/nodes change depending on the distance between them. Is it possible to fix their size?
3. The way I achieved the animation is by continuously plotting (setData method) the network and is there an alternative method for this?

Thanks

[josdejong]

1. You can control the position of nodes by setting a fixed x and y position for them. You can control the viewport of Network using a method like moveTo.
2. if you zoom out the nodes are drawn smaller. If you set the viewport to a certain scale moveTo, the nodes will always have the same size.
3. Well, setData replaces all data. If you only adjust a few nodes, you can simply update these nodes in your DataSet.

[mmehari]

Thanks Jos,

I have improved it further by updating the nodes rather than setting the data every time. Furthermore, the nodes have fixed size and the layout is fixed.

Now I want to draw a background grid where it gives more information about the location of AGVs (x-y axis) and how far apart they are from each other. I have tried using the initRedraw and beforeDrawing events but it keeps being triggered every time the nodes are updated.

Is it not possible to draw a background grid on the canvas only once and the network animation continues afterwards?

Thanks in advance

[josdejong]

You can for example use events like beforeDrawing and afterDrawing to draw your grid inside the render loop of Network.