Class: App

Constructor

new App()

Source: src/app/application.js, line 159

Example

// create the dwv app
const app = new dwv.App();
// initialise
const viewConfig0 = new dwv.ViewConfig('layerGroup0');
const viewConfigs = {'*': [viewConfig0]};
const options = new dwv.AppOptions(viewConfigs);
app.init(options);
// load dicom data
app.loadURLs([
  'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm'
]);

Methods

abortLoad()

Abort the current load.

Source: src/app/application.js, line 725

addEventListener(type, callback)

Add an event listener to this class.

Parameters:

Name	Type	Description
`type`	string	The event type.
`callback`	function	The function associated with the provided event type, will be called with the fired event.

Source: src/app/application.js, line 615

addNewImage(image, meta) → {number}

Add a new image.

Parameters:

Name	Type	Description
`image`	Image	The new image.
`meta`	object	The image meta.

Source: src/app/application.js, line 262

Returns:

The new image id.

Type:: number

addToUndoStack(cmd)

Add a command to the undo stack.

Parameters:

Name	Type	Description
`cmd`	object	The command to add.

Source: src/app/application.js, line 453

Fires:

UndoStack#event:undoadd

applyJsonState(jsonState)

Apply a JSON state to this app.

Parameters:

Name	Type	Description
`jsonState`	string	The state of the app as a JSON string.

Source: src/app/application.js, line 965

canScroll() → {boolean}

Can the data be scrolled?

Source: src/app/application.js, line 332

Returns:

True if the data has a third dimension greater than one.

Type:: boolean

canWindowLevel() → {boolean}

Can window and level be applied to the data?

Source: src/app/application.js, line 343

Returns:

True if the data is monochrome.

Type:: boolean

defaultOnKeydown(event)

Key down event handler example.

CRTL-Z: undo
CRTL-Y: redo
CRTL-ARROW_LEFT: next element on fourth dim
CRTL-ARROW_UP: next element on third dim
CRTL-ARROW_RIGHT: previous element on fourth dim
CRTL-ARROW_DOWN: previous element on third dim

Parameters:

Name	Type	Description
`event`	KeyboardEvent	The key down event.

Source: src/app/application.js, line 1016

Fires:

fitToContainer()

Fit the display to the data of each layer group. To be called once the image is loaded.

Source: src/app/application.js, line 735

getActiveLayerGroup() → {LayerGroup}

Get the active layer group. The layer is available after the first loaded item.

Source: src/app/application.js, line 391

Returns:

The layer group.

Type:: LayerGroup

getAddedScale() → {object}

Get the layer scale on top of the base scale.

Source: src/app/application.js, line 354

Returns:

The scale as {x,y}.

Type:: object

getBaseScale() → {object}

Get the base scale.

Source: src/app/application.js, line 363

Returns:

The scale as {x,y}.

Type:: object

getCurrentStackIndex() → {number}

Get the current undo stack index.

Source: src/app/application.js, line 1163

Returns:

The stack index.

Type:: number

getDataViewConfigs() → {Object.<string, Array.<ViewConfig>>}

Get the data view config. Carefull, returns a reference, do not modify without resetting.

Source: src/app/application.js, line 777

Returns:

The configuration list.

Type:: Object.<string, Array.<ViewConfig>>

getDrawLayersByDataIndex(index) → {Array.<DrawLayer>}

Get the draw layers associated to a data index. The layer are available after the first loaded item.

Parameters:

Name	Type	Description
`index`	number	The data index.

Source: src/app/application.js, line 413

Returns:

The layers.

Type:: Array.<DrawLayer>

getImage(index) → {Image}

Get the image.

Parameters:

Name	Type	Description
`index`	number	The data index.

Source: src/app/application.js, line 223

Returns:

The associated image.

Type:: Image

getJsonState() → {string}

Get the JSON state of the app.

Source: src/app/application.js, line 955

Returns:

The state of the app as a JSON string.

Type:: string

getLastImage() → {Image}

Get the last loaded image.

Source: src/app/application.js, line 232

Returns:

The image.

Type:: Image

getLayerGroupByDivId(divId) → {LayerGroup}

Get a layer group by div id. The layer is available after the first loaded item.

Parameters:

Name	Type	Description
`divId`	string	The div id.

Source: src/app/application.js, line 424

Returns:

The layer group.

Type:: LayerGroup

getMetaData(index) → {object}

Get the meta data.

Parameters:

Name	Type	Description
`index`	number	The data index.

Source: src/app/application.js, line 314

Returns:

The list of meta data.

Type:: object

getNumberOfLayerGroups() → {number}

Get the number of layer groups.

Source: src/app/application.js, line 433

Returns:

The number of groups.

Type:: number

getNumberOfLoadedData() → {number}

Get the number of loaded data.

Source: src/app/application.js, line 323

Returns:

The number.

Type:: number

getOffset() → {object}

Get the layer offset.

Source: src/app/application.js, line 372

Returns:

The offset.

Type:: object

getStackSize() → {number}

Get the undo stack size.

Source: src/app/application.js, line 1154

Returns:

The size of the stack.

Type:: number

getStyle() → {object}

Get the app style.

Source: src/app/application.js, line 442

Returns:

The app style.

Type:: object

getToolboxController() → {ToolboxController}

Get the toolbox controller.

Source: src/app/application.js, line 381

Returns:

The controller.

Type:: ToolboxController

getViewLayersByDataIndex(index) → {Array.<ViewLayer>}

Get the view layers associated to a data index. The layer are available after the first loaded item.

Parameters:

Name	Type	Description
`index`	number	The data index.

Source: src/app/application.js, line 402

Returns:

The layers.

Type:: Array.<ViewLayer>

init(opt)

Initialise the application.

Parameters:

Name	Type	Description
`opt`	AppOptions	The application options

Source: src/app/application.js, line 491

Example

// create the dwv app
const app = new dwv.App();
// initialise
const viewConfig0 = new dwv.ViewConfig('layerGroup0');
const viewConfigs = {'*': [viewConfig0]};
const options = new dwv.AppOptions(viewConfigs);
options.viewOnFirstLoadItem = false;
app.init(options);
// render button
const button = document.createElement('button');
button.id = 'render';
button.disabled = true;
button.appendChild(document.createTextNode('render'));
document.body.appendChild(button);
app.addEventListener('load', function () {
  const button = document.getElementById('render');
  button.disabled = false;
  button.onclick = function () {
    // render data #0
    app.render(0);
  };
});
// load dicom data
app.loadURLs([
  'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm'
]);

initWLDisplay()

Init the Window/Level display

Source: src/app/application.js, line 742

loadFiles(files)

Load a list of files. Can be image files or a state file.

Parameters:

Name	Type	Description
`files`	Array.<File>	The list of files to load.

Source: src/app/application.js, line 644

Fires:

loadFromUri(uri, optionsopt)

Load from an input uri.

Parameters:

Name	Type	Attributes	Description
`uri`	string		The input uri, for example: 'window.location.href'.
`options`	object	<optional>	Optional url request options.

Source: src/app/application.js, line 683

loadImageObject(data)

Load a list of ArrayBuffers.

Parameters:

Name	Type	Description
`data`	Array	The list of ArrayBuffers to load in the form of [{name: "", filename: "", data: data}].

Source: src/app/application.js, line 718

Fires:

loadURLs(urls, optionsopt)

Load a list of URLs. Can be image files or a state file.

Parameters:

Name Type Attributes Description

Name	Type	Attributes	Description
`urls`	Array.<string>		The list of urls to load.
`options`	object	<optional>	The options object, can contain: requestHeaders: an array of {name, value} to use as request headers withCredentials: boolean xhr.withCredentials flag to pass to the request batchSize: the size of the request url batch

urls

Array.<string>

The list of urls to load.

options

object

The options object, can contain:

requestHeaders: an array of {name, value} to use as request headers
withCredentials: boolean xhr.withCredentials flag to pass to the request
batchSize: the size of the request url batch

Source: src/app/application.js, line 668

Fires:

onKeydown(event)

Key down callback. Meant to be used in tools.

Parameters:

Name	Type	Description
`event`	KeyboardEvent	The key down event.

Source: src/app/application.js, line 990

Fires:

App#event:keydown

onResize()

Handle resize: fit the display to the window. To be called once the image is loaded. Can be connected to a window 'resize' event.

Source: src/app/application.js, line 979

redo()

Redo the last action

Source: src/app/application.js, line 1145

Fires:

UndoStack#event:redo

removeEventListener(type, callback)

Remove an event listener from this class.

Parameters:

Name	Type	Description
`type`	string	The event type.
`callback`	function	The function associated with the provided event type.

Source: src/app/application.js, line 626

render(dataIndex)

Render the current data.

Parameters:

Name	Type	Description
`dataIndex`	number	The data index to render.

Source: src/app/application.js, line 849

reset()

Reset the application.

Source: src/app/application.js, line 587

resetDisplay()

Reset the display

Source: src/app/application.js, line 1059

resetLayout()

Reset the layout of the application.

Source: src/app/application.js, line 603

resetZoom()

Reset the app zoom.s

Source: src/app/application.js, line 1067

setColourMap(name)

Set the colour map.

Parameters:

Name	Type	Description
`name`	string	The colour map name.

Source: src/app/application.js, line 1076

setDataViewConfigs(configs)

Set the data view configuration. Resets the stage and recreates all the views.

Parameters:

Name	Type	Description
`configs`	Object.<string, Array.<ViewConfig>>	The configuration list.

Source: src/app/application.js, line 787

setDrawings(drawings, drawingsDetails)

Set the drawings on the current stage.

Parameters:

Name	Type	Description
`drawings`	Array	An array of drawings.
`drawingsDetails`	Array	An array of drawings details.

Source: src/app/application.js, line 935

setImage(index, img)

Set the image at the given index.

Parameters:

Name	Type	Description
`index`	number	The data index.
`img`	Image	The associated image.

Source: src/app/application.js, line 242

setLastImage(img)

Set the last image.

Parameters:

Name	Type	Description
`img`	Image	The associated image.

Source: src/app/application.js, line 251

setLayerGroupsBinders(list)

Set the layer groups binders.

Parameters:

Name	Type	Description
`list`	Array	The list of binder names.

Source: src/app/application.js, line 832

setOpacity(alpha)

Set the image layer opacity.

Parameters:

Name	Type	Description
`alpha`	number	The opacity ([0:1] range).

Source: src/app/application.js, line 923

setTool(tool)

Set the tool

Parameters:

Name	Type	Description
`tool`	string	The tool.

Source: src/app/application.js, line 1100

setToolFeatures(list)

Set the tool live features.

Parameters:

Name	Type	Description
`list`	object	The list of features.

Source: src/app/application.js, line 1127

setWindowLevelPreset(preset)

Set the window/level preset.

Parameters:

Name	Type	Description
`preset`	object	The window/level preset.

Source: src/app/application.js, line 1088

translate(tx, ty)

Apply a translation to the layers.

Parameters:

Name	Type	Description
`tx`	number	The translation along X.
`ty`	number	The translation along Y.

Source: src/app/application.js, line 912

undo()

Undo the last action

Source: src/app/application.js, line 1136

Fires:

UndoStack#event:undo

zoom(step, cx, cy)

Zoom to the layers.

Parameters:

Name	Type	Description
`step`	number	The step to add to the current zoom.
`cx`	number	The zoom center X coordinate.
`cy`	number	The zoom center Y coordinate.

Source: src/app/application.js, line 897

Events

keydown

Key down event.

Type:

KeyboardEvent

Properties

Name	Type	Description
`type`	string	The event type: keydown.
`context`	string	The tool where the event originated.

Source: src/app/application.js, line 991

load

Load event: fired when a load finishes successfully.

Type:

object

Properties

Name	Type	Description
`type`	string	The event type: load.
`loadType`	string	The load type: image or state.

Source: src/app/application.js, line 1286

loadabort

Load abort event.

Type:

object

Properties

Name	Type	Description
`type`	string	The event type: abort.
`loadType`	string	The load type: image or state.
`source`	*	The load source: string for an url, File for a file.

Source: src/app/application.js, line 1347

loadend

Main load end event: fired when the load finishes, successfully or not.

Type:

object

Properties

Name	Type	Description
`type`	string	The event type: loadend.
`loadType`	string	The load type: image or state.
`source`	*	The load source: string for an url, File for a file.

Source: src/app/application.js, line 1304

loaderror

Load error event.

Type:

object

Properties

Name	Type	Description
`type`	string	The event type: error.
`loadType`	string	The load type: image or state.
`source`	*	The load source: string for an url, File for a file.
`error`	object	The error.
`target`	object	The event target.

Source: src/app/application.js, line 1325

loaditem

Load item event: fired when a load item is successfull.

Type:

object

Properties

Name	Type	Description
`type`	string	The event type: loaditem.
`loadType`	string	The load type: image or state.
`source`	*	The load source: string for an url, File for a file.
`data`	object	The loaded meta data.

Source: src/app/application.js, line 1251

loadprogress

Load progress event.

Type:

object

Properties

Name	Type	Description
`type`	string	The event type: loadprogress.
`loadType`	string	The load type: image or state.
`source`	*	The load source: string for an url, File for a file.
`loaded`	number	The loaded percentage.
`total`	number	The total percentage.