Kamyar and I are working on a new feature for Voxelent. This is, we want to be able to drag and drop VTK files on a voxelent scene.

The code is rather simple but tedious as we need to do on-the-fly parsing. The drag and drop mechanism is built in the current browsers thanks to the File API.


A new class joins nucleo: vxlVTKReader

The class is vxlVTKReader and it is integrated to the vxlViewInteractor which handles now the drag and drop events on the view.

So if you have a Voxelent scene, and you want to visualize your VTK model, you will just drag it and drop it and Voxelent will render it :-)!

You need to triangulate your VTK polydata before using it in a Voxelent scene

Add just one line of code to support VTK drag-and-drop:

If you want to add drag and drop support to your voxelent view you just need to write one line of code after setting up the view:


As it is shown in the test-drag-n-drop.html source code example. You can find the running demo in our demos page.

Programming with vxlVTKReader

Now, if you are developing your own application, you could use the vxlVTKReader class directly and hook it up to your code.  vxlVTKReader.read receives a window.File and it will produce an array of JSON. Let’s see an example of how to use it:

//Put this code wherever you plan to read the file 
var reader = new vxlVTKReader(scene);
reader.read(file); //file is a window.File object (from the File API)

Because reading a file can be time consuming depending on the complexity of the VTK model that you want to visualize, this operation is asynchronous. Therefore, once the reader has parsed the file it will fire a vxl.events.READER_DONE event. Therefore you need to subscribe to this event and react to it. For example you could have a scenario like this:

var view;

function runVoxApp(){
    vxl.go.notifier.subscribe(vxl.events.READER_DONE, this);
    view = vxl.api.setup('canvas-id'); 
   ...//other stuff goes here

function handleEvent(event, source){
     var mManager = vxl.go.modelManager;

     if (event == vxl.events.READER_DONE){ 
       json = source.getParts();      //source here is your reader
       for (var i = 0; i < json_files.length; i +=1){
           mManager.add(json[i],json[i].name, view.scene);

In the previous snippet of code you are using the global instance of the vxlModelManager to add each JSON file (instead of loading them remotely) to the scene using vxlModelManager.add method.

We are almost done implementing this feature and of course, a tutorial will follow.


Check the demos page. Try the drag-n-drop-test.html