Screen Shot 2012-07-20 at 4.14.18 PM

Click on the image to see the demo

Painting your scalar datasets is dead simple in Voxelent. That means your model has scalar values and you’d like to map it into RGB colour specification. All you need to do is to call vxl.api.loadLUTS() to set the directory to where your colour tables are located and then set the look-up table accordingly using vxl.api.setLookupTable().

For your convenience we have made some pre-set lookup tables that can be found under the /assets/tables directory. For the sake of this tutorial, let’s start by downloading a ‘default‘ and ‘cte‘ tables from here.

First of all, we need to point to our tables’ directory and set the look-up table to one of the given options (which in our case would be either ‘default’ or ‘cte’):

<head>
<script type='text/javascript'>

function runVoxApp(){
// ...
vxl.api.loadLUTS('assets/tables'); // Path to your look-up tables
vxl.api.setLookupTable('default');
// ...
  }
}
</script>
</head>

Now we need to place the following code in our <body> tag to create a simple drop-down menu:

<select id='lutPicker'>
 <option value='default'>default</option>
 <option value='cte'>cte</option>
</select>

The only obvious step left is to somehow connect the drop-down menu to the look-up tables so that picking the tables’ items from the menu results in changing the colour scheme. We can easily achieve this using JQuery:

<body>
<script type='text/javascript'>
$('#lutPicker').change(function(){
vxl.api.setLookupTable($('#lutPicker').val());
});
</script>
</body>

So let’s put all together; here is the code:

<html>
<head>
     <title>Look-up table tutorial</title>
     <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
     <script type='text/javascript' src='lib/voxelent_v0.89.4.js'></script>

     <script type='text/javascript'>
     var view;

     function runVoxApp(){
         view = vxl.api.setup('view-1');
         vxl.api.load('myModel.json');

         vxl.api.loadLUTS('assets/tables');
         vxl.api.setLookupTable('default');

         vxl.api.subscribe(vxl.events.MODELS_LOADED, this);
         view.start(); 
     }

     function handleEvent(event){
         vxl.c.camera.closeUp('myModel.json');
     }
     </script>
</head>
<body onload='runVoxApp()'>
     <canvas id ='view-1' width=800 height=650></canvas>
     <select id='lutPicker'>
         <option value='default'>default</option>
         <option value='cte'>cte</option>
     </select>

     <script type='text/javascript'>
         $('#lutPicker').change(function(){
             vxl.api.setLookupTable($('#lutPicker').val());
          });
      </script>
</body>
</html>

That’s how you can make a simple look-up table loader in less than a minute using Voxelent!