Display Options
Control windowing, gamma, and other display options for a dataset.
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.
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:
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>
);
}