Scroll

import {App, AppOptions, ViewConfig, ToolConfig} from '//esm.sh/dwv';
// create the dwv app
const app = new App();
// initialise
const viewConfig0 = new ViewConfig('layerGroup0');
const viewConfigs = {'*': [viewConfig0]};
const options = new AppOptions(viewConfigs);
options.tools = {Scroll: new ToolConfig()};
app.init(options);
// activate tool
app.addEventListener('load', function () {
  app.setTool('Scroll');
});
// load dicom data
app.loadURLs([
  'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm',
  'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323707.dcm',
  'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323563.dcm'
]);

import {App, AppOptions, ViewConfig, ToolConfig, Index} from '//esm.sh/dwv';
// create the dwv app
const app = new App();
// initialise
const viewConfig0 = new ViewConfig('layerGroup0');
const viewConfigs = {'*': [viewConfig0]};
const options = new AppOptions(viewConfigs);
options.tools = {Scroll: new ToolConfig()};
app.init(options);
// create range
const range = document.createElement('input');
range.type = 'range';
range.min = 0;
range.id = 'sliceRange';
document.body.appendChild(range);
// update app on slider change
range.oninput = function () {
  const lg = app.getLayerGroupByDivId('layerGroup0');
  const vl = lg.getBaseViewLayer();
  const vc = vl.getViewController();
  const index = vc.getCurrentIndex();
  const values = index.getValues();
  values[2] = this.value;
  vc.setCurrentIndex(new Index(values));
}
// activate tool and update range max on load
app.addEventListener('load', function () {
  app.setTool('Scroll');
  const size = app.getData(0).image.getGeometry().getSize();
  range.max = size.get(2) - 1;
});
// update slider on slice change (for ex via mouse wheel)
app.addEventListener('positionchange', function () {
  const lg = app.getLayerGroupByDivId('layerGroup0');
  const vl = lg.getBaseViewLayer();
  const vc = vl.getViewController();
  range.value = vc.getCurrentIndex().get(2);
});
// load dicom data
app.loadURLs([
  'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm',
  'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323707.dcm',
  'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323563.dcm'
]);