This page lists details about the dwv architecture.

• Data load
• View config
• View creation
• Layers

Data load

Data can come from 3 types of source: url (via a XMLHttpRequest), file (via a FileReader) or directly as a memory buffer. The 3 'meta' loaders responsible for each source are: UrlsLoader, FilesLoader and MemoryLoader.

Each 'meta' loader will then delegate the individual data load to a specialised loader according to its answer to the canLoadUrl or canLoadFile call. The current specialised loaders are:

1. DicomDataLoader: for DICOM data
2. JSONTextLoader: for JSON data
3. RawImageLoader: for image formats supported by the browser
4. RawVideoLoader: for video formats supported by the browser
5. ZipLoader: for data compressed in a ZIP file

Here are the events triggered during the load process (meaning the load of all the items):

• loadstart: the load started!
• loaditem: an item finished loading,
• load: all items were loaded successfully,
• loadprogress: the progress of the complete load (all items),
• error: an error has occured during load,
• abort: the load process has been aborted,
• loadend: the process has completed, whether successfully (after load) or unsuccessfully (after abort or error).

Once the load is started a unique dataId (string) is associated to the data being loaded.

View config

The library uses a dataId indexed list of view configurations (ViewConfig) mainly to provide the divId of the HTML element where to generate the canvas associated to dicom data. It also allows to set window/level, colour map, orientation and opacity. The * allows to use the same configuration for all data. The App class provides various methods to manipulate the 'DataViewConfig'.

View creation

The view creation is triggered when the app receives a loaditem event if the application options contain a true viewOnFirstLoadItem or from an app.render.

The library will use a series of steps and LookUp Tables (LUT) to convert the file data into the canvas array data:

1. Extract the data from the recreated 3D volume using position and orientation and abstracted folowing the iterator pattern (see image/iterator.js)
2. From stored type range to physical range using a Modality LUT: rescale slope and intercept are used in the conversion equation: y = slope * x + intercept (see image/modalityLut.js)
3. Select part of the range using a VOI LUT (Value Of Interest): window width and level (or centre) allow to focus on a specific range (especially useful for normed data such as in CT) (see image/windowLut.js)
4. Assign a colour to each values using a colour map (see image/luts.js)
5. You now have the canvas data!

All this is materialised in the generateImageData* functions.

Layers

The first level is the Stage, this class handles a list of LayerGroup for optional synchronisation. A layerGroup is a group of layers associated to an HTML element, for now of type View (ViewLayer) or Draw (DrawLayer). The configuration of the stage is done at the creation of the app. See app::init method for details. Each layer class will create its own HTML div with an id created by getLayerDivId. Layers will typically contain a HTML canvas to display its content. Use the getLayerDetailsFromEvent method to extract the layer details from an event generated from a layer canvas. You can then access the layer group object via the app getLayerGroupByDivId method.

The View class contains a 2D view of the image that could be 3D + t. Layers follow the model-view-controller (MVC) design. In the view case, the model is the View, the view the ViewLayer and the controller the ViewController.

In the case of the draw, the model is the KonvaShape, the view is the DrawLayer and the controller is the DrawController. The shape will use the ViewController for quantification when it needs to access the underlying pixel values.