Dragging and Dropping VTK files on Voxelent (updated)
By dcantor . August 5, 2012 . blog. |
Hello!
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.
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 :-)!
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:
view.setDragAndDrop(true);
As it is shown in the test-drag-n-drop.html source code example. You can find the running demo in our demos page.
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.