Display Options

Every SharedImageSet carries two sets of rendering parameters: DisplayOptions2d for the slice views and DisplayOptions3d for the volume view. They control window/level, gamma, inversion, and the transfer function.

Loading demo…

View source on GitHub ↗

You can get the options off the dataset and assign to them. Each assignment takes effect immediately and triggers a re-render of the affected views:

const data = await imf.loadFileFromUrl('/data/ct.imf');
imf.showAll(data);

const sis = imf.dataModel.getImage()!;
const options = sis.displayOptions2d();

options.window = 400;
options.level = 40;
options.gamma = 1.0;
options.invert = false;

autoWindow() picks a window/level that covers the whole intensity range, and minmaxIntensityOriginal() gives you that range if you want to derive your own bounds:

sis.autoWindow();

const [min, max] = sis.minmaxIntensityOriginal();

To react to changes made elsewhere (by another control, or by the user windowing with the mouse) subscribe with onChanged. It returns an unsubscribe function:

const off = options.onChanged((o) => {
  console.log(o.window, o.level);
});

// later
off();

The 3D options work the same way via displayOptions3d().

React

useDisplayOptions2d and useDisplayOptions3d wrap the same handles and subscribe to onChanged for you, so the component re-renders whenever the options change, including when something outside React changes them:

tsx

import { useDisplayOptions2d } from '@imfusion/sdk-react';

function WindowLevel({ sis }: { sis: SharedImageSet }) {
  const options = useDisplayOptions2d(sis);

  return (
    <label>
      Window: {options.window}
      <input
        type="range"
        min={1}
        max={2000}
        value={options.window}
        onChange={(e) => {
          options.window = e.target.valueAsNumber;
        }}
      />
    </label>
  );
}

Display Options

React

On this page