ColorTransferFunction - Stepped colors

stu039 · October 12, 2022, 10:15am

Hi there,

I am using a vtkColorTransfer function to apply colors to scalar values in my polydata. I am then applying this function to my scalarBarActor. This looks like the image below:

I am wondering if there is a way to not have blended colors, and rather have stepped coloring, similar to below:

Screenshot 2022-10-12 111218

Any help/guidance would be much appreciated!

Thanks

stu039 · October 12, 2022, 10:23am

For a little more context - I am using images generated from vtk and creating gifs. The scalar bar in the gif is not being generated well inside of the gif due to the color limitations of gif files. I’d like to control the colors in the lookup table so that the generated gifs match the images rendered in vtk

finetjul · October 12, 2022, 11:18am

Did you consider vtkLookupTable that support “indexed” colors ?

stu039 · October 12, 2022, 11:21am

I did not!

Is there an example implementation of this somewhere do you know?

Thanks

finetjul · October 12, 2022, 11:22am

github.com

Kitware/vtk-js/blob/master/Sources/Common/Core/LookupTable/test/testSetTable.js#L59-L76


      
          const table = vtkDataArray.newInstance({
            numberOfComponents: 4,
            size: 4 * numberOfColors,
            dataType: 'Uint8Array',
          });
          table.setTuple(0, [215, 0, 0, 255]);
          table.setTuple(1, [140, 60, 255, 255]);
          table.setTuple(2, [2, 136, 0, 255]);
          table.setTuple(3, [0, 172, 199, 255]);
          table.setTuple(4, [152, 255, 0, 255]);
          table.setTuple(5, [255, 127, 209, 255]);
          table.setTuple(6, [108, 0, 79, 255]);
          table.setTuple(7, [255, 165, 48, 255]);
          lut.setTable(table);
          
          
t.equal(lut.getNumberOfColors(), numberOfColors);
          
          
mapper.setLookupTable(lut);

stu039 · October 12, 2022, 11:24am

Great thank you very much, i’ll give this a go!

stu039 · October 12, 2022, 12:40pm

Julien Finet:

table.setTuple(0, [215, 0, 0, 255]);
          table.setTuple(1, [140, 60, 255, 255]);
          table.setTuple(2, [2, 136, 0, 255]);
          table.setTuple(3, [0, 172, 199, 255]);
          table.setTuple(4, [152, 255, 0, 255]);
          table.setTuple(5, [255, 127, 209, 255]);
          table.setTuple(6, [108, 0, 79, 255]);
          table.setTuple(7, [255, 165, 48, 255]);

After giving this a go, unfortunately it doesn’t seem like the colors applied in the lookup table are mapping to values. The scalar bar reflects this as it doesn’t contain any range of colors.

Any ideas what I am missing here? See below for code, and current output

Apologies in advance if its obvious, really hard to find documentation on this anywhere.

finetjul · October 12, 2022, 9:59pm

I’ve got some code somewhere that works as such:

const lut = vtkLookupTable.newInstance();
const data = new Uint8Array([255, 0, 0, 255, 0, 255, 0, 255, 0, 0, 255, 255]);
const table = vtkDataArray.newInstance({
  values: data,
  numberOfComponents: 4
});
lut.setTable(table);
mapper.setLookupTable(lut);
mapper.setColorByArrayName("Scalars");
mapper.setColorModeToMapScalars();

Could it work also for you ?

stu039 · October 13, 2022, 9:17am

Julien Finet:

const lut = vtkLookupTable.newInstance();
const data = new Uint8Array([255, 0, 0, 255, 0, 255, 0, 255, 0, 0, 255, 255]);
const table = vtkDataArray.newInstance({
  values: data,
  numberOfComponents: 4
});
lut.setTable(table);
mapper.setLookupTable(lut);
mapper.setColorByArrayName("Scalars");
mapper.setColorModeToMapScalars();

That has worked!

Thank you very much - I can stop tearing my hair out now

Have a great day

amaclean · October 13, 2022, 10:14am

Have a look at this example ElevationBandsWithGlyphs