# vtkPiecewiseGaussianWidget for window/level or CTF editing in 2D

**URL:** https://discourse.vtk.org/t/vtkpiecewisegaussianwidget-for-window-level-or-ctf-editing-in-2d/16116
**Category:** Web
**Tags:** vtkjs
**Created:** [October 29, 2025, 8:11pm UTC](https://discourse.vtk.org/t/vtkpiecewisegaussianwidget-for-window-level-or-ctf-editing-in-2d/16116 "2025-10-29T20:11:01Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![vojtech](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/v/dec6dc/32.png) [@vojtech](https://discourse.vtk.org/u/vojtech)
#### Post date: [October 29, 2025, 8:11pm UTC](https://discourse.vtk.org/t/vtkpiecewisegaussianwidget-for-window-level-or-ctf-editing-in-2d/16116/1 "2025-10-29T20:11:01Z")

</div>

I’m developing a **2D image viewer** in **VTK.js** (using `vtkImageSlice` + `vtkImageMapper`) and I’d like to provide an interactive **window/level (intensity range)** editor.

With given LUT/CTF I’d like to achieve:

- Let the user **adjust the window min/max** interactively,

- Possibly choose a **mapping function** (e.g. linear or sigmoid),

- And visualize how the LUT/CTF applies across that range.

* * *

### What I’ve tried

I’ve been experimenting with the `vtkPiecewiseGaussianWidget`, since it provides a histogram and looks like a good starting point.

```auto
const widget = vtkPiecewiseGaussianWidget.newInstance({
  numberOfBins: 256,
  size: [400, 150],
});
widget.setContainer(widgetContainer);
widget.setColorTransferFunction(ctf);
widget.setDataArray(imageData);
widget.bindMouseListeners();

```

However, I’m confused about a few points:

1. **What is the purpose of `setColorTransferFunction()`?**

2. **How is the range determined or shown?**

3. **Is the widget intended only for opacity editing?**

* * *

### 💡 What I’d like to ask

1. Is there any **existing widget or recommended approach** in VTK.js for **window/level** or **CTF editing** in 2D images?

2. Could the **`vtkPiecewiseGaussianWidget`** be **adapted** to this purpose — e.g., to allow moving markers for min/max window or to manipulate the color transfer function directly?

3. Is there any documentation or example explaining how the widget’s **data range, histogram, and color mapping** work internally?

I was expecting that the following hook will automatically adjust at least range of CTF based on user input but it does nothing

```auto
    widget.onOpacityChange(() => {
      renderWindow.render();
    });

```