# Change color to cells in vtkjs using vtkLookupTable

**URL:** https://discourse.vtk.org/t/change-color-to-cells-in-vtkjs-using-vtklookuptable/7649
**Category:** Web
**Created:** [January 16, 2022, 5:55pm UTC](https://discourse.vtk.org/t/change-color-to-cells-in-vtkjs-using-vtklookuptable/7649 "2022-01-16T17:55:48Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![micheleivani](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/m/a88e4f/32.png) [@micheleivani](https://discourse.vtk.org/u/micheleivani)
#### Post date: [January 16, 2022, 5:55pm UTC](https://discourse.vtk.org/t/change-color-to-cells-in-vtkjs-using-vtklookuptable/7649/1 "2022-01-16T17:55:48Z")

</div>

Hi,

My goal is to highlight some cells of a polydata. The ids are included in a given list. I have successfully created the code for the regular c# VTK application. I would like to reproduce the same result in vtkjs. I made a lot of researches without luck.  
Any suggestion to convert the following code in javascript with vtkjs?

```auto
// Windows Winform c# desktop application.

var filename = "model.stl";

var reader = new vtkSTLReader();
reader.SetFileName(filename);

var polydata = reader.GetOutput();

var scalars = vtkFloatArray.New();
var noc = polydata.GetNumberOfCells();
for (long i = 0; i < noc; i++)
{
    scalars.InsertNextTuple1(0);
}

// `cellToHighlight` is a list that contains the ids of cells that I need to highlight.
var cellToHighlight = new List<long>() { 123, 3454, 3532, 546456, 567567 }; 

foreach (var id in cellToHighlight) 
{
    scalars.InsertTuple1(id, 1);
}

polydata.GetCellData().SetScalars(scalars);

var lut = vtkLookupTable.New();
lut.SetNumberOfTableValues(2);
lut.SetTableRange(0, 1);
lut.SetTableValue(0, 1.0, 1.0, 1.0, 1.0);
lut.SetTableValue(1, 0.0, 1.0, 0.0, 1.0);
lut.Build();

var mapper = vtkPolyDataMapper.New();
mapper.SetInputDataObject(polydata);
mapper.SetScalarModeToUseCellData();
mapper.SetColorModeToMapScalars();
mapper.SetScalarRange(0, 1);
mapper.SetLookupTable(lut);
mapper.Update();

var actor = vtkActor.New();
actor.SetMapper(mapper);

renderer.AddActor(actor);
renderWindow.Render();

```

Thank you.

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [January 17, 2022, 7:41pm UTC](https://discourse.vtk.org/t/change-color-to-cells-in-vtkjs-using-vtklookuptable/7649/2 "2022-01-17T19:41:16Z")

</div>

```auto
[...]
const noc = polydata.getNumberOfCells();
const newCellScalars = new UInt8Array(noc); // or any other typed array
newCellScalars.fill(0);
for (let i = 0; i < cellToHighlight.length; i++) {
   const cellIdx = cellToHighlight[i];
   newCellScalars[cellIdx] = 1;
}
const cellArray = vtkDataArray.newInstance({ name: "cellSelection", values: newCellScalars });
polydata.getCellData().addArray(cellArray);

[... later]
newCellScalars.fill(0);
newCellScalars[345] = 1
cellArray.setData(newCellScalars);

[...or]
newCellScalars.fill(0);
newCellScalars[345] = 1
cellArray.modified();

```

HTH

---

<div class="post-metadata">

### Author: ![micheleivani](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/m/a88e4f/32.png) [@micheleivani](https://discourse.vtk.org/u/micheleivani)
#### Post date: [January 18, 2022, 2:42pm UTC](https://discourse.vtk.org/t/change-color-to-cells-in-vtkjs-using-vtklookuptable/7649/3 "2022-01-18T14:42:33Z")

</div>

Hi Sebastien,

Thank you so much for the reply. Do you have any suggestions about the mapper settings and lookup-table part?

Thank you.

---

<div class="post-metadata">

### Author: ![ken-martin](https://discourse.vtk.org/user_avatar/discourse.vtk.org/ken-martin/32/884_2.png) [@ken-martin](https://discourse.vtk.org/u/ken-martin)
#### Post date: [January 18, 2022, 4:00pm UTC](https://discourse.vtk.org/t/change-color-to-cells-in-vtkjs-using-vtklookuptable/7649/4 "2022-01-18T16:00:05Z")

</div>

Something like

mapper.setScalarModeToUseCellData()

const lut = mapper.getLookupTable();  
lut.setValueRange(0.2, 1.0);  
lut.setHueRange(0.666, 0);

---

<div class="post-metadata">

### Author: ![micheleivani](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/m/a88e4f/32.png) [@micheleivani](https://discourse.vtk.org/u/micheleivani)
#### Post date: [January 18, 2022, 8:37pm UTC](https://discourse.vtk.org/t/change-color-to-cells-in-vtkjs-using-vtklookuptable/7649/5 "2022-01-18T20:37:14Z")

</div>

Thank you for your feedback. Unfortunately, I do not get the desired result. Here is my javascript code.

```auto
const reader = vtkSTLReader.newInstance();
reader.parseAsArrayBuffer(fileReader.result);

let polydata = reader.getOutputData();

// ---

let values = [];
const noc = polydata.getNumberOfCells();
for (let i = 0; i < noc; i++) {
    values[i] = 0;
}

toothResponse.data.triangles.forEach((cellId) => {
    values[cellId] = 1;
});

const VtkDataTypes = vtkDataArray.VtkDataTypes;
let scalars = vtkDataArray.newInstance({
    values: values,
    numberOfComponents: 1, // number of channels (grayscale)
    dataType: VtkDataTypes.FLOAT, // values encoding
    name: "scalars",
});
polydata.getCellData().setScalars(scalars);

// ---

const table = vtkDataArray.newInstance({
    numberOfComponents: 4,
    size: 2,
    dataType: "Uint8Array",
});
table.setTuple(0, [255, 255, 255, 255]);
table.setTuple(1, [0, 255, 0, 255]);

let lut = vtkLookupTable.newInstance();
lut.setNumberOfColors(2);
lut.setRange(0, 1);
lut.setTable(table);

// ---

const mapper = vtkMapper.newInstance();
mapper.setInputData(polydata);
mapper.setScalarVisibility(true);
mapper.setScalarModeToUseCellData();
mapper.setScalarRange(0, 1);
mapper.setLookupTable(lut);
mapper.update();

const actor = vtkActor.newInstance();
actor.setMapper(mapper);

renderer.addActor(actor);
renderer.resetCamera();
renderWindow.render();

```

I got a blank window.

I hope you can help me to find the cause of the problem. Because using C# is very strait forward.

Thank you

---

<div class="post-metadata">

### Author: ![ken-martin](https://discourse.vtk.org/user_avatar/discourse.vtk.org/ken-martin/32/884_2.png) [@ken-martin](https://discourse.vtk.org/u/ken-martin)
#### Post date: [January 18, 2022, 8:48pm UTC](https://discourse.vtk.org/t/change-color-to-cells-in-vtkjs-using-vtklookuptable/7649/6 "2022-01-18T20:48:46Z")

</div>

If you convert that to a stand alone example that I can easily run (like based on a cone source or something) then I’ll take a quick look locally. In general it looks OK to me.

---

<div class="post-metadata">

### Author: ![micheleivani](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/m/a88e4f/32.png) [@micheleivani](https://discourse.vtk.org/u/micheleivani)
#### Post date: [January 19, 2022, 8:24pm UTC](https://discourse.vtk.org/t/change-color-to-cells-in-vtkjs-using-vtklookuptable/7649/7 "2022-01-19T20:24:28Z")

</div>

Hi Ken,

Thank you so much for your help. Here is the example you requested. I have used the default single-page vtk template for creating the example. I got the same result as my original code: a blank window.

```auto
<!DOCTYPE html>
<html>
  <body>
    <script
      type="text/javascript"
      src="https://unpkg.com/@babel/polyfill@7.0.0/dist/polyfill.js"
    ></script>
    <script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
    <script type="text/javascript">
      var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance();
      var renderWindow = fullScreenRenderer.getRenderWindow();
      var renderer = fullScreenRenderer.getRenderer();

      // ---

      var cone = vtk.Filters.Sources.vtkConeSource.newInstance();
      var polydata = cone.getOutputData();

      var values = [];
      var noc = polydata.getNumberOfCells();
      for (var i = 0; i < noc; i++) {
        values[i] = 0;
      }

      var cellToHighlight = [1, 2, 3];
      cellToHighlight.forEach((cellId) => {
        values[cellId] = 1;
      });

      const VtkDataTypes = vtk.Common.Core.vtkDataArray.VtkDataTypes;
      let scalars = vtk.Common.Core.vtkDataArray.newInstance({
        values: values,
        numberOfComponents: 1, // number of channels (grayscale)
        dataType: VtkDataTypes.FLOAT, // values encoding
        name: "scalars",
      });
      polydata.getCellData().setScalars(scalars);

      // ---

      const table = vtk.Common.Core.vtkDataArray.newInstance({
        numberOfComponents: 4,
        size: 2,
        dataType: "Uint8Array",
      });
      table.setTuple(0, [255, 255, 255, 255]);
      table.setTuple(1, [0, 255, 0, 255]);

      let lut = vtk.Common.Core.vtkLookupTable.newInstance();
      lut.setNumberOfColors(2);
      lut.setRange(0, 1);
      lut.setTable(table);

      // ---

      var mapper = vtk.Rendering.Core.vtkMapper.newInstance();
      mapper.setInputData(polydata);
      mapper.setScalarVisibility(true);
      mapper.setScalarModeToUseCellData();
      mapper.setScalarRange(0, 1);
      mapper.setLookupTable(lut);
      mapper.update();

      var actor = vtk.Rendering.Core.vtkActor.newInstance();
      actor.setMapper(mapper);

      renderer.addActor(actor);

      // ---

      renderer.resetCamera();
      renderWindow.render();
    </script>
  </body>
</html>

```

Thank you.

---

<div class="post-metadata">

### Author: ![ken-martin](https://discourse.vtk.org/user_avatar/discourse.vtk.org/ken-martin/32/884_2.png) [@ken-martin](https://discourse.vtk.org/u/ken-martin)
#### Post date: [January 20, 2022, 1:45pm UTC](https://discourse.vtk.org/t/change-color-to-cells-in-vtkjs-using-vtklookuptable/7649/8 "2022-01-20T13:45:38Z")

</div>

In table you need to set the size to 8 as there are 2 tuples each with 4 components for a total size of 8.

---

<div class="post-metadata">

### Author: ![micheleivani](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/m/a88e4f/32.png) [@micheleivani](https://discourse.vtk.org/u/micheleivani)
#### Post date: [January 21, 2022, 8:31am UTC](https://discourse.vtk.org/t/change-color-to-cells-in-vtkjs-using-vtklookuptable/7649/9 "2022-01-21T08:31:41Z")

</div>

Thank you so much!

Have a great weekend.