init

nv/html/dwv/tests/data/dwv-test-anonymise.json

@@ -0,0 +1,24 @@
+{
+  "TransferSyntaxUID": "1.2.840.10008.1.2.1",
+  "Modality": "MR",
+  "PerformingPhysicianName": "Dr",
+  "PatientName": "dwv-patient-test",
+  "PatientID": "dwv-patient-id123",
+  "PatientBirthDate": "19830101",
+  "PatientSex": "M",
+  "dBdt": "0",
+  "PhotometricInterpretation": "MONOCHROME2",
+  "SamplesPerPixel": 1,
+  "PixelRepresentation": 0,
+  "Rows": 32,
+  "Columns": 32,
+  "BitsAllocated": 16,
+  "BitsStored": 12,
+  "HighBit": 11,
+  "ReferencedImageSequence": {
+    "item0": {
+      "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+      "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094"
+    }
+  }
+}

nv/html/dwv/tests/data/dwv-test-sequence.json

@@ -0,0 +1,80 @@
+{
+  "TransferSyntaxUID": "1.2.840.10008.1.2.1",
+  "Modality": "MR",
+  "PatientName": "dwv-patient-name",
+  "PerformingPhysicianName": "Dr",
+  "PhotometricInterpretation": "MONOCHROME2",
+  "SamplesPerPixel": 1,
+  "PixelRepresentation": 0,
+  "Rows": 32,
+  "Columns": 32,
+  "BitsAllocated": 16,
+  "BitsStored": 12,
+  "HighBit": 11,
+  "ReferencedImageSequence": { 
+    "explicitLength": true,
+    "item0": {
+      "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+      "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094"
+    },
+    "item1": {
+      "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+      "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511286933854090"
+    },
+    "item2": {}
+  },
+  "SourceImageSequence": { 
+    "explicitLength": false,
+    "item0": {
+      "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+      "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094"
+    },
+    "item1": {
+      "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+      "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511286933854090"
+    },
+    "item2": 0
+  },
+  "ReferencedPatientSequence": {},
+  "ReferencedOverlaySequence": 0,
+  "ReferringPhysicianIdentificationSequence": {
+    "explicitLength": true,
+    "item0": {}
+  },
+  "ConsultingPhysicianIdentificationSequence": {
+    "explicitLength": false,
+    "item0": 0 
+  },
+  "ReferencedStudySequence": {
+    "explicitLength": true,
+    "item0": {
+      "PurposeOfReferenceCodeSequence": {
+        "item0": {
+          "CodeValue": "123456"
+        }  
+      }
+    }
+  },
+  "ReferencedSeriesSequence": {
+    "explicitLength": false,
+    "item0": {
+      "PurposeOfReferenceCodeSequence": {
+        "item0": {
+          "CodeValue": "789101"
+        }  
+      }
+    }
+  },
+  "ReferencedInstanceSequence": {
+    "explicitLength": true,
+    "item0": {
+      "PurposeOfReferenceCodeSequence": {}
+    }
+  },
+  "ReferencedVisitSequence": {
+    "explicitLength": false,
+    "item0": {
+      "PurposeOfReferenceCodeSequence": 0
+    }
+  }
+}

nv/html/dwv/tests/data/dwv-test-simple.json

@@ -0,0 +1,21 @@
+{
+  "TransferSyntaxUID": "1.2.840.10008.1.2.1",
+  "Modality": "MR",
+  "PatientName": "dwv-patient-name",
+  "PerformingPhysicianName": "",
+  "dBdt": "0",
+  "PhotometricInterpretation": "MONOCHROME2",
+  "SamplesPerPixel": 1,
+  "PixelRepresentation": 0,
+  "Rows": 32,
+  "Columns": 32,
+  "BitsAllocated": 16,
+  "BitsStored": 12,
+  "HighBit": 11,
+  "ReferencedImageSequence": {
+    "item0": {
+      "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+      "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094"
+    }
+  }
+}

nv/html/dwv/tests/data/readme.md

@@ -0,0 +1,16 @@
+DICOM Test data
+===============
+
+Generated data
+----------------
+* dwv-test-simple: simple data with basic tags
+* dwv-test-sequence: trying to list all possible sequences...
+
+External sources
+-----------------
+* Babymri: http://www.babymri.org/
+* Dicompyler: http://www.dicompyler.com/
+* Gdcm: :pserver:xxx@cvs.creatis.insa-lyon.fr:2402/cvs/public
+* Leadtools: (from Creatis) http://www.creatis.insa-lyon.fr/~jpr/PUBLIC/gdcm/gdcmSampleData/ColorDataSetLeadTool/
+* Nema WG04 (jpeg): ftp://medical.nema.org/MEDICAL/Dicom/DataSets/WG04/
+* Osirix: http://www.osirix-viewer.com/datasets/

nv/html/dwv/tests/dicom/anonymiser.html

@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>DICOM Anonymiser</title>
+<meta charset="UTF-8">
+<script type="text/javascript" src="../../src/dicom/dicomParser.js"></script>
+<script type="text/javascript" src="../../src/dicom/dicomWriter.js"></script>
+<script type="text/javascript" src="../../src/dicom/dictionary.js"></script>
+<script type="text/javascript">
+// rules file
+var _rulesFile = null;
+// dicom file
+var _dicomFile = null;
+// DICOM elements
+var _dicomElements = null;
+// handle DICOM file load
+function onLoadDICOMFile(event)
+{
+    // parse DICOM
+    var parser = new dwv.dicom.DicomParser();
+    parser.parse(event.target.result);
+    // store elements
+    _dicomElements = parser.getRawDicomElements();
+    // activate generate button
+    var element = document.getElementById("generate");
+    element.className = "button button-active";
+}
+// generate DICOM data
+function generate()
+{
+    // check validity
+    if (!isValidRules()) {
+        return;
+    }
+    // create writer with textarea rules
+    var writer = new dwv.dicom.DicomWriter();
+    writer.rules = JSON.parse(document.getElementById('rules').value);
+    var dicomBuffer = null;
+    try {
+        dicomBuffer = writer.getBuffer(_dicomElements);
+    } catch (error) {
+        console.error(error);
+        alert(error.message);
+    }
+    // view as Blob to allow download
+    var blob = new Blob([dicomBuffer], {type: 'application/dicom'});
+    // update generate button
+    var element = document.getElementById("generate");
+    element.href = URL.createObjectURL(blob);
+    element.download = "anonym-" + _dicomFile.name;
+}
+// save the rules as a JSON file
+function saveRules()
+{
+    // check validity
+    if (!isValidRules()) {
+        return;
+    }
+    // get text from the textarea
+    var text = document.getElementById('rules').value;
+    // view as Blob to allow download
+    var blob = new Blob([text], {type:"text/plain"});
+    // update save button
+    var element = document.getElementById("save");
+    element.download = (_rulesFile === null ? "rules.json" : _rulesFile.name);
+    element.href = URL.createObjectURL(blob);
+}
+// is the JSON valid?
+function isValidRules()
+{
+    try {
+        JSON.parse(document.getElementById('rules').value);
+    }
+    catch (error) {
+        alert("The JSON is not valid, please check it with JSONLint.");
+        return false;
+    }
+    return true;
+}
+// open JSONLint to check the rules
+function launchJSONLint()
+{
+    var text = document.getElementById('rules').value;
+    var link = "http://jsonlint.com/?json=" + encodeURIComponent(text);
+    window.open(link);
+}
+// handle input DICOM file
+function onInputDICOMFile(event)
+{
+    if (event.target.files.length === 0) {
+        return;
+    }
+    _dicomFile = event.target.files[0];
+    var reader = new FileReader();
+    reader.onload = onLoadDICOMFile;
+    reader.readAsArrayBuffer(_dicomFile);
+}
+// handle input rules file
+function onInputRulesFile(event)
+{
+    if (event.target.files.length === 0) {
+        return;
+    }
+    _rulesFile = event.target.files[0];
+    var reader = new FileReader();
+    reader.onload = function (event) {
+        document.getElementById('rules').value = event.target.result;
+    };
+    reader.readAsText(_rulesFile);
+}
+</script>
+<style>
+body { font-family: Arial, Helvetica, sans-serif; }
+textarea { width: 99%; margin: 2px; }
+fieldset { background: whitesmoke; border: 1px solid grey; }
+.button {
+    padding: 3px 7px 3px 7px;
+    text-align: center;
+    border-radius: 3px;
+    border: 1px solid grey;
+    text-decoration: none;
+    font: 80% sans-serif;
+    color: black;
+    background: #E3E3E3;
+}
+.button-active {
+    color: black;
+    background: #E3E3E3;
+}
+.button-disabled {
+    color: grey;
+    background: #F3F3F3;
+}
+.button:hover {
+    border: 1px solid black;
+}
+</style>
+</head>
+
+<body>
+
+<h1>DWV DICOM Anonymiser</h1>
+
+<p>Simple DICOM "anonymisation" tool. Available rules: <code>copy</code>,
+<code>remove</code>, <code>clear</code>, <code>replace(value)</code>.</p>
+
+<form name="genform">
+
+<fieldset>
+<label for="infile">DICOM file: </label>
+<input id="infile" type="file" name="file" onchange="onInputDICOMFile(event);">
+<br>&nbsp;
+<br><label for="inrulesfile">JSON rules file: </label>
+<input id="inrulesfile" type="file" name="file" onchange="onInputRulesFile(event);">
+</fieldset>
+
+<textarea id="rules" rows="25">
+{
+  "default": {
+    "action": "remove", "value": null
+  },
+  "PatientName": {
+    "action": "replace", "value": "Anonymised"
+  },
+  "Meta Element": {
+    "action": "copy", "value": null
+  },
+  "Acquisition": {
+    "action": "copy", "value": null
+  },
+  "Image Presentation": {
+    "action": "copy", "value": null
+  },
+  "Procedure": {
+    "action": "copy", "value": null
+  },
+  "Pixel Data": {
+    "action": "copy", "value": null
+  }
+}
+</textarea>
+
+<fieldset>
+<a href="#" id="jsonlint" class="button" onclick="launchJSONLint();">JSONLint</a>
+<a href="#" id="save" class="button" onclick="saveRules();">Save Rules</a>
+<a href="#" id="generate" class="button button-disabled" onclick="generate();">Generate</a>
+</fieldset>
+</form>
+
+</body>
+</html>

nv/html/dwv/tests/dicom/dicomParser.test.js

@@ -0,0 +1,216 @@
+/**
+ * Tests for the 'dicom/dicomParser.js' file.
+ */
+/** @module tests/dicom */
+// Do not warn if these variables were not defined before.
+/* global QUnit */
+QUnit.module("dicomParser");
+
+// WARNING about PhantomJS 1.9
+// ---------------------------
+// TypedArray implementation seems incomplete, at least different than observed
+// behavior in browsers... 
+// For a DICOM dataset, it was giving an: 
+// 'RangeError: ArrayBuffer length minus the byteOffset is not a multiple of the element size.'
+// Which seem to originate from reading the data of first tag 
+// (FileMetaInformationGroupLength, Uint32 -> size=4)
+// at offset 140 of a file of size 3070. 3070-140=2930; 2930/4=732.5...
+//
+// Error which, according to specs, should be thrown when the size of the data
+// to read is not specified (see
+// https://www.khronos.org/registry/typedarray/specs/latest/#7). But it is specified...
+// 
+// So I updated the data to be of the correct size (in this case 3072)... 
+
+/**
+ * Tests for {@link dwv.dicom.DicomParser} using simple DICOM data.
+ * Using remote file for CI integration.
+ * @function module:tests/dicom~dicomParser
+ */
+QUnit.test("Test simple DICOM parsing.", function (assert) {
+    var done = assert.async();
+
+    var request = new XMLHttpRequest();
+    var urlRoot = "https://raw.githubusercontent.com/ivmartel/dwv/master";
+    var url = urlRoot + "/tests/data/dwv-test-simple.dcm";
+    request.open('GET', url, true);
+    request.responseType = "arraybuffer";
+    request.onerror = function (event) {
+        console.log(event);
+    };
+    request.onload = function (/*event*/) {
+        assert.ok((this.response.byteLength!==0), "Got a response.");
+
+        // parse DICOM
+        var dicomParser = new dwv.dicom.DicomParser();
+        dicomParser.parse(this.response);
+
+        var numRows = 32;
+        var numCols = 32;
+
+        // raw tags
+        var rawTags = dicomParser.getRawDicomElements();
+        // check values
+        assert.equal(rawTags.x00280010.value[0], numRows, "Number of rows (raw)");
+        assert.equal(rawTags.x00280011.value[0], numCols, "Number of columns (raw)");
+        // ReferencedImageSequence - ReferencedSOPInstanceUID
+        assert.equal(rawTags.x00081140.value[0].x00081155.value[0],
+            "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094",
+            "ReferencedImageSequence SQ (raw)");
+
+        // wrapped tags
+        var tags = dicomParser.getDicomElements();
+        // wrong key
+        assert.equal(tags.getFromKey("x12345678"), null, "Wrong key");
+        assert.notOk(tags.getFromKey("x12345678"), "Wrong key fails if test" );
+        // empty key
+        assert.equal(tags.getFromKey("x00081050"), "", "Empty key");
+        assert.notOk(tags.getFromKey("x00081050"), "Empty key fails if test" );
+        // good key
+        assert.equal(tags.getFromKey("x00280010"), numRows, "Good key");
+        assert.ok(tags.getFromKey("x00280010"), "Good key passes if test" );
+        // zero value (passes test since it is a string)
+        assert.equal(tags.getFromKey("x00181318"), 0, "Good key, zero value");
+        assert.ok(tags.getFromKey("x00181318"), "Good key, zero value passes if test" );
+
+        // check values
+        assert.equal(tags.getFromName("Rows"), numRows, "Number of rows");
+        assert.equal(tags.getFromName("Columns"), numCols, "Number of columns");
+        // ReferencedImageSequence - ReferencedSOPInstanceUID
+        // only one item value -> returns the object directly
+        // (no need for tags.getFromName("ReferencedImageSequence")[0])
+        assert.equal(tags.getFromName("ReferencedImageSequence").x00081155.value[0],
+            "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094",
+            "ReferencedImageSequence SQ");
+
+        // finish async test
+        done();
+    };
+    request.send(null);
+});
+
+/**
+ * Tests for {@link dwv.dicom.DicomParser} using sequence test DICOM data.
+ * Using remote file for CI integration.
+ * @function module:tests/dicom~dicomParser
+ */
+QUnit.test("Test sequence DICOM parsing.", function (assert) {
+    var done = assert.async();
+
+    var request = new XMLHttpRequest();
+    var urlRoot = "https://raw.githubusercontent.com/ivmartel/dwv/master";
+    var url = urlRoot + "/tests/data/dwv-test-sequence.dcm";
+    request.open('GET', url, true);
+    request.responseType = "arraybuffer";
+    request.onload = function (/*event*/) {
+        assert.ok((this.response.byteLength!==0), "Got a response.");
+
+        // parse DICOM
+        var dicomParser = new dwv.dicom.DicomParser();
+        dicomParser.parse(this.response);
+        // raw tags
+        var rawTags = dicomParser.getRawDicomElements();
+        assert.ok((Object.keys(rawTags).length!==0), "Got raw tags.");
+        // wrapped tags
+        var tags = dicomParser.getDicomElements();
+        assert.ok((tags.dumpToTable().length!==0), "Got wrapped tags.");
+
+        // ReferencedImageSequence: explicit sequence
+        var seq00 = tags.getFromName("ReferencedImageSequence");
+        assert.equal(seq00.length, 3, "ReferencedImageSequence length");
+        assert.equal(seq00[0].x00081155.value[0],
+                "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094",
+                "ReferencedImageSequence - item0 - ReferencedSOPInstanceUID");
+        assert.equal(seq00[1].x00081155.value[0],
+                "1.3.12.2.1107.5.2.32.35162.2012021515511286933854090",
+                "ReferencedImageSequence - item1 - ReferencedSOPInstanceUID");
+
+        // SourceImageSequence: implicit sequence
+        var seq01 = tags.getFromName("SourceImageSequence");
+        assert.equal(seq01.length, 3, "SourceImageSequence length");
+        assert.equal(seq01[0].x00081155.value[0],
+                "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094",
+                "SourceImageSequence - item0 - ReferencedSOPInstanceUID");
+        assert.equal(seq01[1].x00081155.value[0],
+                "1.3.12.2.1107.5.2.32.35162.2012021515511286933854090",
+                "SourceImageSequence - item1 - ReferencedSOPInstanceUID");
+
+        // ReferencedPatientSequence: explicit empty sequence
+        var seq10 = tags.getFromName("ReferencedPatientSequence");
+        assert.equal(seq10.length, 0, "ReferencedPatientSequence length");
+
+        // ReferencedOverlaySequence: implicit empty sequence
+        var seq11 = tags.getFromName("ReferencedOverlaySequence");
+        assert.equal(seq11.length, 0, "ReferencedOverlaySequence length");
+
+        // ReferringPhysicianIdentificationSequence: explicit empty item
+        var seq12 = tags.getFromName("ReferringPhysicianIdentificationSequence");
+        assert.equal(seq12.xFFFEE000.value.length, 0, 
+                "ReferringPhysicianIdentificationSequence item length");
+        
+        // ConsultingPhysicianIdentificationSequence: implicit empty item
+        var seq13 = tags.getFromName("ConsultingPhysicianIdentificationSequence");
+        assert.equal(seq13.xFFFEE000.value.length, 0, 
+            "ConsultingPhysicianIdentificationSequence item length");
+        
+        // ReferencedStudySequence: explicit sequence of sequence
+        var seq20 = tags.getFromName("ReferencedStudySequence");
+        // just one element
+        //assert.equal(seq20.length, 2, "ReferencedStudySequence length");
+        assert.equal(seq20.x0040A170.value[0].x00080100.value[0],
+                "123456",
+                "ReferencedStudySequence - seq - item0 - CodeValue");
+
+        // ReferencedSeriesSequence: implicit sequence of sequence
+        var seq21 = tags.getFromName("ReferencedSeriesSequence");
+        // just one element
+        //assert.equal(seq21.length, 2, "ReferencedSeriesSequence length");
+        assert.equal(seq21.x0040A170.value[0].x00080100.value[0],
+                "789101",
+                "ReferencedSeriesSequence - seq - item0 - CodeValue");
+
+        // ReferencedInstanceSequence: explicit empty sequence of sequence
+        var seq30 = tags.getFromName("ReferencedInstanceSequence");
+        assert.equal(seq30.x0040A170.value.length, 0,
+                "ReferencedInstanceSequence - seq - length");
+
+        // ReferencedVisitSequence: implicit empty sequence of sequence
+        var seq31 = tags.getFromName("ReferencedVisitSequence");
+        assert.equal(seq31.x0040A170.value.length, 0,
+                "ReferencedVisitSequence - seq - length");
+
+        // finish async test
+        done();
+    };
+    request.send(null);
+});
+
+/**
+ * Tests for {@link dwv.dicom.cleanString}.
+ * @function module:tests/dicom~cleanString
+ */
+QUnit.test("Test cleanString.", function (assert) {
+    // undefined
+    assert.equal(dwv.dicom.cleanString(), null, "Clean undefined");
+    // null
+    assert.equal(dwv.dicom.cleanString(null), null, "Clean null");
+    // empty
+    assert.equal(dwv.dicom.cleanString(""), "", "Clean empty");
+    // short
+    assert.equal(dwv.dicom.cleanString("a"), "a", "Clean short");
+    // special
+    var special = String.fromCharCode("u200B");
+    assert.equal(dwv.dicom.cleanString(special), "", "Clean just special");
+    // regular
+    var str = " El cielo azul ";
+    var refStr = "El cielo azul";
+    assert.equal(dwv.dicom.cleanString(str), refStr, "Clean regular");
+    // regular with special
+    str = " El cielo azul" + special;
+    refStr = "El cielo azul";
+    assert.equal(dwv.dicom.cleanString(str), refStr, "Clean regular with special");
+    // regular with special and ending space (not trimmed)
+    str = " El cielo azul " + special;
+    refStr = "El cielo azul ";
+    assert.equal(dwv.dicom.cleanString(str), refStr, "Clean regular with special 2");
+});

nv/html/dwv/tests/dicom/dicomWriter.test.js

@@ -0,0 +1,283 @@
+/**
+ * Tests for the 'dicom/dicomWriter.js' file.
+ */
+/** @module tests/dicom */
+// Do not warn if these variables were not defined before.
+/* global QUnit */
+QUnit.module("dicomWriter");
+
+var dwv = dwv || {};
+dwv.utils = dwv.utils || {};
+dwv.utils.test = dwv.utils.test || {};
+
+/**
+ * Tests for {@link dwv.dicom.DicomWriter} using simple DICOM data.
+ * Using remote file for CI integration.
+ * @function module:tests/dicom~dicomWriter
+ */
+QUnit.test("Test multiframe writer support.", function (assert) {
+    var done = assert.async();
+
+    var request = new XMLHttpRequest();
+    var urlRoot = "https://raw.githubusercontent.com/ivmartel/dwv/master";
+    var url = urlRoot + "/tests/data/multiframe-test1.dcm";
+    request.open('GET', url, true);
+    request.responseType = "arraybuffer";
+    request.onerror = function (event) {
+        console.log(event);
+    };
+    request.onload = function (/*event*/) {
+        assert.ok((this.response.byteLength!==0), "Got a response.");
+
+        // parse DICOM
+        var dicomParser = new dwv.dicom.DicomParser();
+        dicomParser.parse(this.response);
+
+        var numFrames = 16;
+
+        // raw tags
+        var rawTags = dicomParser.getRawDicomElements();
+        // check values
+        assert.equal(rawTags.x00280008.value[0], numFrames, "Number of frames");
+        // length of value array for pixel data
+        assert.equal(rawTags.x7FE00010.value.length, numFrames, "Length of value array for pixel data");
+
+        var dicomWriter = new dwv.dicom.DicomWriter();
+        var buffer = dicomWriter.getBuffer(rawTags);
+
+        dicomParser = new dwv.dicom.DicomParser();
+        dicomParser.parse(buffer);
+
+        rawTags = dicomParser.getRawDicomElements();
+
+        // check values
+        assert.equal(rawTags.x00280008.value[0], numFrames, "Number of frames");
+        // length of value array for pixel data
+        assert.equal(rawTags.x7FE00010.value.length, numFrames, "Length of value array for pixel data");
+
+        // finish async test
+        done();
+    };
+    request.send(null);
+});
+
+QUnit.test("Test patient anonymisation", function (assert) {
+    var done = assert.async();
+
+    var request = new XMLHttpRequest();
+    var urlRoot = "https://raw.githubusercontent.com/ivmartel/dwv/master";
+    var url = urlRoot + "/tests/data/dwv-test-anonymise.dcm";
+    request.open('GET', url, true);
+    request.responseType = "arraybuffer";
+    request.onerror = function (event) {
+        console.log(event);
+    };
+    request.onload = function (/*event*/) {
+        assert.ok((this.response.byteLength!==0), "Got a response.");
+
+        // parse DICOM
+        var dicomParser = new dwv.dicom.DicomParser();
+        dicomParser.parse(this.response);
+
+        var patientsNameAnonymised = 'anonymise-name';
+        var patientsIdAnonymised = 'anonymise-id';
+        var rules = {
+        		'default': {action: 'copy', value: null },
+        		'x00100010' : {action: 'replace', value: patientsNameAnonymised }, // tag
+        	    'PatientID': {action: 'replace', value: patientsIdAnonymised}, // tag name 'x00100020'
+        	    'Patient' : {action: 'remove', value: null }, // group name 'x0010'
+        };
+
+        var patientsName = 'dwv-patient-test';
+        var patientID = 'dwv-patient-id123';
+        var patientsBirthDate = '19830101';
+        var patientsSex = 'M';
+
+        // raw tags
+        var rawTags = dicomParser.getRawDicomElements();
+        // check values
+        assert.equal(rawTags.x00100010.value[0], patientsName, "patientsName");
+        assert.equal(rawTags.x00100020.value[0], patientID, "patientID");
+        assert.equal(rawTags.x00100030.value[0], patientsBirthDate, "patientsBirthDate");
+        assert.equal(rawTags.x00100040.value[0], patientsSex, "patientsSex");
+
+        var dicomWriter = new dwv.dicom.DicomWriter();
+        dicomWriter.rules = rules;
+        var buffer = dicomWriter.getBuffer(rawTags);
+
+        dicomParser = new dwv.dicom.DicomParser();
+
+        dicomParser.parse(buffer);
+
+        rawTags = dicomParser.getRawDicomElements();
+
+        // check values
+        assert.equal(rawTags.x00100010.value[0], patientsNameAnonymised, "patientName");
+        assert.equal(rawTags.x00100020.value[0], patientsIdAnonymised, "patientID");
+        assert.notOk(rawTags.x00100030, "patientsBirthDate");
+        assert.notOk(rawTags.x00100040, "patientsSex");
+
+        // finish async test
+        done();
+    };
+    request.send(null);
+});
+
+/**
+ * Get a string representation of an object.
+ * TypedArray.toString can return '[object Uint8Array]' on old browsers
+ * (such as in PhantomJs).
+ * @param {Object} obj The input object
+ * @return {String} The string.
+ */
+dwv.utils.test.toString = function ( obj ) {
+    var res = obj.toString();
+    if ( res.substr(0,7) === "[object" &&
+        res.substr((res.length - 6),6) === "Array]") {
+        res = "";
+        for ( var i = 0; i < obj.length; ++i ) {
+            res += obj[i];
+            if ( i !== obj.length - 1 ) {
+                res += ",";
+            }
+        }
+    }
+    return res;
+};
+
+/**
+ * Compare JSON tags and DICOM elements
+ * @param {Object} jsonTags The JSON tags.
+ * @param {Object} dicomElements The DICOM elements
+ * @param {String} name The name of the test.
+ * @param {Object} comaprator An object with an equal function (such as Qunit assert).
+ */
+dwv.utils.test.compare = function ( jsonTags, dicomElements, name, comparator ) {
+    // check content
+    if (jsonTags === null || jsonTags === 0) {
+        return;
+    }
+    var keys = Object.keys(jsonTags);
+    for ( var k = 0; k < keys.length; ++k ) {
+        var tag = keys[k];
+        var tagGE = dwv.dicom.getGroupElementFromName(tag);
+        var tagKey = dwv.dicom.getGroupElementKey(tagGE.group, tagGE.element);
+        var element = dicomElements.getDEFromKey(tagKey);
+        var value = dicomElements.getFromKey(tagKey, true);
+        if ( element.vr !== "SQ" ) {
+            comparator.equal(dwv.utils.test.toString(value), jsonTags[tag], name + " - " + tag);
+        } else {
+            // check content
+            if (jsonTags[tag] === null || jsonTags[tag] === 0) {
+                continue;
+            }
+            // supposing same order of subkeys and indices...
+            var subKeys = Object.keys(jsonTags[tag]);
+            var index = 0;
+            for ( var sk = 0; sk < subKeys.length; ++sk ) {
+                if ( subKeys[sk] !== "explicitLength" ) {
+                    var wrap = new dwv.dicom.DicomElementsWrapper(value[index]);
+                    dwv.utils.test.compare(jsonTags[tag][subKeys[sk]], wrap, name, comparator);
+                    ++index;
+                }
+            }
+        }
+    }
+};
+
+/**
+ * Test a JSON config.
+ * @param {Object} config A JSON config representing DICOM tags.
+ * @param {Object} assert A Qunit assert.
+ */
+dwv.utils.test.testConfig = function (config, assert) {
+    // convert JSON to DICOM element object
+    var res = dwv.dicom.getElementsFromJSONTags(config.tags);
+    var dicomElements = res.elements;
+    // pixels: small gradient square
+    dicomElements.x7FE00010 = dwv.dicom.generatePixelDataFromJSONTags(config.tags, res.offset);
+
+    // create DICOM buffer
+    var writer = new dwv.dicom.DicomWriter();
+    var dicomBuffer = null;
+    try {
+        dicomBuffer = writer.getBuffer(dicomElements);
+    } catch (error) {
+        assert.ok(false, "Caught error: "+error);
+        return;
+    }
+
+    // parse the buffer
+    var dicomParser = new dwv.dicom.DicomParser();
+    dicomParser.parse(dicomBuffer);
+    var elements = dicomParser.getDicomElements();
+
+    // compare contents
+    dwv.utils.test.compare(config.tags, elements, config.name, assert);
+};
+
+QUnit.test("Test synthetic dicom explicit", function (assert) {
+    var done = assert.async();
+
+    // get the list of configs
+    var request = new XMLHttpRequest();
+    var urlRoot = "https://raw.githubusercontent.com/ivmartel/dwv/master";
+    var url = urlRoot + "/tests/dicom/synthetic-data_explicit.json";
+    request.open('GET', url, true);
+    request.onerror = function (event) {
+        console.error(event);
+    };
+    request.onload = function (/*event*/) {
+        var configs = JSON.parse(this.responseText);
+        for (var i = 0; i < configs.length; ++i ) {
+            dwv.utils.test.testConfig(configs[i], assert);
+        }
+        // finish async test
+        done();
+    };
+    request.send(null);
+});
+
+QUnit.test("Test synthetic dicom implicit", function (assert) {
+    var done = assert.async();
+
+    // get the list of configs
+    var request = new XMLHttpRequest();
+    var urlRoot = "https://raw.githubusercontent.com/ivmartel/dwv/master";
+    var url = urlRoot + "/tests/dicom/synthetic-data_implicit.json";
+    request.open('GET', url, true);
+    request.onerror = function (event) {
+        console.error(event);
+    };
+    request.onload = function (/*event*/) {
+        var configs = JSON.parse(this.responseText);
+        for (var i = 0; i < configs.length; ++i ) {
+            dwv.utils.test.testConfig(configs[i], assert);
+        }
+        // finish async test
+        done();
+    };
+    request.send(null);
+});
+
+QUnit.test("Test synthetic dicom explicit big endian", function (assert) {
+    var done = assert.async();
+
+    // get the list of configs
+    var request = new XMLHttpRequest();
+    var urlRoot = "https://raw.githubusercontent.com/ivmartel/dwv/master";
+    var url = urlRoot + "/tests/dicom/synthetic-data_explicit_big-endian.json";
+    request.open('GET', url, true);
+    request.onerror = function (event) {
+        console.error(event);
+    };
+    request.onload = function (/*event*/) {
+        var configs = JSON.parse(this.responseText);
+        for (var i = 0; i < configs.length; ++i ) {
+            dwv.utils.test.testConfig(configs[i], assert);
+        }
+        // finish async test
+        done();
+    };
+    request.send(null);
+});

nv/html/dwv/tests/dicom/generator.html

@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>DICOM Generator</title>
+<meta charset="UTF-8">
+<script type="text/javascript" src="../../src/dicom/dicomParser.js"></script>
+<script type="text/javascript" src="../../src/dicom/dicomWriter.js"></script>
+<script type="text/javascript" src="../../src/dicom/dictionary.js"></script>
+<script type="text/javascript">
+// tags file
+var _tagsFile = null;
+// generate DICOM data
+function generate()
+{
+    // check validity
+    if (!isValidTags()) {
+        return;
+    }
+
+    // get tags from the textarea
+    var tags = JSON.parse(document.getElementById('tags').value);
+    // optional pixel generator (cannot be propagated)
+    var pixelGenerator = "gradSquare";
+    if ( typeof tags.PixelData !== "undefined" ) {
+        pixelGenerator = tags.PixelData;
+        delete tags.PixelData;
+    }
+    // convert JSON to DICOM element object
+    var res = dwv.dicom.getElementsFromJSONTags(tags);
+    var dicomElements = res.elements;
+    // pixels: small gradient square
+    dicomElements.x7FE00010 = null;
+    try {
+        dicomElements.x7FE00010 = dwv.dicom.generatePixelDataFromJSONTags(
+            tags, res.offset, pixelGenerator);
+    } catch (error) {
+        console.error(error);
+        alert(error.message);
+    }
+
+    // create writer
+    var writer = new dwv.dicom.DicomWriter();
+    var dicomBuffer = null;
+    try {
+        dicomBuffer = writer.getBuffer(dicomElements);
+    } catch (error) {
+        console.error(error);
+        alert(error.message);
+    }
+    // view as Blob to allow download
+    var blob = new Blob([dicomBuffer], {type: 'application/dicom'});
+    // update generate button
+    var element = document.getElementById("generate");
+    element.download = "dwv-generated.dcm";
+    element.href = URL.createObjectURL(blob);
+}
+// save the tags as a JSON file
+function saveTags()
+{
+    // check validity
+    if (!isValidTags()) {
+        return;
+    }
+    // get text from the textarea
+    var text = document.getElementById('tags').value;
+    // view as Blob to allow download
+    var blob = new Blob([text], {type:"text/plain"});
+    // update save button
+    var element = document.getElementById("save");
+    console.log(_tagsFile);
+    element.download = (_tagsFile === null ? "tags.json" : _tagsFile.name);
+    element.href = URL.createObjectURL(blob);
+}
+// is the JSON valid?
+function isValidTags()
+{
+    try {
+        JSON.parse(document.getElementById('tags').value);
+    }
+    catch (error) {
+        alert("The JSON is not valid, please check it with JSONLint.");
+        return false;
+    }
+    return true;
+}
+// open JSONLint to check the tags
+function launchJSONlint()
+{
+    var text = document.getElementById('tags').value;
+    var link = "http://jsonlint.com/?json=" + encodeURIComponent(text);
+    window.open(link);
+}
+// handle input tags file
+function onInputTagsFile(event)
+{
+    if (event.target.files.length === 0) {
+        return;
+    }
+    _tagsFile = event.target.files[0];
+    var reader = new FileReader();
+    reader.onload = function (event) {
+        document.getElementById('tags').value = event.target.result;
+    };
+    reader.readAsText(_tagsFile);
+}
+</script>
+<style>
+body { font-family: Arial, Helvetica, sans-serif; }
+textarea { width: 99%; margin: 2px; }
+fieldset { background: whitesmoke; border: 1px solid grey; }
+.button {
+    padding: 3px 7px 3px 7px;
+    text-align: center;
+    border-radius: 3px;
+    border: 1px solid grey;
+    text-decoration: none;
+    font: 80% sans-serif;
+    color: black;
+    background: #E3E3E3;
+}
+.button-active {
+    color: black;
+    background: #E3E3E3;
+}
+.button-disabled {
+    color: grey;
+    background: #F3F3F3;
+}
+.button:hover {
+    border: 1px solid black;
+}
+</style>
+</head>
+
+<body>
+
+<h1>DWV DICOM Generator</h1>
+
+<p>Simple DICOM data generator from json tags.
+Mainly used for generating test data, <b>use at your own risks!</b>
+<br>No need for a 'FileMetaInformationGroupLength', it is calculated automatically.
+Values should not be <code>null</code>...
+<br>Sequences have an optional <code>explicitLength</code> boolean parameter to write them
+and all their elements with implicit or explicit length. Its default value is <code>true</code>.
+Set as <code>{}</code>, a sequence will
+be written with explicit zero length, a <code>0</code> value will mean implicit length.
+</p>
+
+<form name="genform">
+
+<fieldset>
+<label for="intagsfile">JSON DICOM tags file: </label>
+<input id="intagsfile" type="file" name="file" onchange="onInputTagsFile(event);">
+</fieldset>
+
+<textarea id="tags" rows="25">
+{
+  "TransferSyntaxUID": "1.2.840.10008.1.2.1",
+  "Modality": "MR",
+  "PatientName": "dwv-patient-name",
+  "PhotometricInterpretation": "MONOCHROME2",
+  "SamplesPerPixel": 1,
+  "PlanarConfiguration": 0,
+  "PixelRepresentation": 0,
+  "Rows": 32,
+  "Columns": 32,
+  "BitsAllocated": 16,
+  "BitsStored": 12,
+  "HighBit": 11,
+  "ReferencedImageSequence": {
+    "explicitLength": true,
+    "item0": {
+      "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+      "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094"
+    },
+    "item1": {
+      "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+      "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511286933854090"
+    }
+  }
+}
+</textarea>
+
+<fieldset>
+<a href="#" id="jsonlint" class="button" onclick="launchJSONlint();">JSONLint</a>
+<a href="#" id="save" class="button" onclick="saveTags();">Save Tags</a>
+<a href="#" id="generate" class="button" onclick="generate();">Generate</a>
+</fieldset>
+</form>
+
+</body>
+</html>

nv/html/dwv/tests/dicom/synthetic-data.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>DICOM synthetic data</title>
+<meta charset="UTF-8">
+<style>
+body { font-family: Arial, Helvetica, sans-serif; }
+</style>
+<script type="text/javascript" src="../../src/dicom/dicomParser.js"></script>
+<script type="text/javascript" src="../../src/dicom/dicomWriter.js"></script>
+<script type="text/javascript" src="../../src/dicom/dictionary.js"></script>
+
+<script type="text/javascript">
+
+// Create an object url from (JSON) tags.
+function getObjectUrlFromTags(tags) {
+    // convert JSON to DICOM element object
+    var res = dwv.dicom.getElementsFromJSONTags(tags);
+    var dicomElements = res.elements;
+    // pixels: small gradient square
+    dicomElements.x7FE00010 = dwv.dicom.generatePixelDataFromJSONTags(tags, res.offset);
+
+    // create DICOM buffer
+    var writer = new dwv.dicom.DicomWriter();
+    var dicomBuffer = null;
+    try {
+        dicomBuffer = writer.getBuffer(dicomElements);
+    } catch (error) {
+        console.error(error);
+        return;
+    }
+
+    // blob and then url
+    var blob = new Blob([dicomBuffer], {type: 'application/dicom'});
+    return URL.createObjectURL(blob);
+}
+
+// create list from configs
+var getConfigsHtmlList = function (configs) {
+    var ul = document.createElement("ul");
+    for (var i = 0; i < configs.length; ++i ) {
+        // download link
+        var link = document.createElement("a");
+        link.href = getObjectUrlFromTags(configs[i].tags);
+        var fileName = "dwv-generated-" + configs[i].name + ".dcm";
+        link.download = fileName
+        link.appendChild( document.createTextNode( fileName ) );
+        // list element
+        var li = document.createElement("li");
+        li.append(link)
+        li.appendChild( document.createTextNode( ": " + configs[i].description ) );
+        // append to list
+        ul.append(li);
+    }
+    return ul;
+}
+
+// get the list of configs and display them with a download link
+var getFileConfigsHtmlList = function (fileName) {
+    var urlRoot = "https://raw.githubusercontent.com/ivmartel/dwv/master";
+    var url = urlRoot + "/tests/dicom/" + fileName + ".json";
+    var request = new XMLHttpRequest();
+    request.open('GET', url, true);
+    request.onerror = function (event) {
+        console.error(event);
+    };
+    request.onload = function (/*event*/) {
+        var content = document.getElementById("content");
+        var title = document.createElement("h2");
+        title.appendChild( document.createTextNode( fileName ) );
+        content.append(title);
+        var configs = JSON.parse(this.responseText);
+        content.append(getConfigsHtmlList(configs));
+    };
+    request.send(null);
+}
+
+// create lists
+getFileConfigsHtmlList("synthetic-data_explicit");
+getFileConfigsHtmlList("synthetic-data_implicit");
+getFileConfigsHtmlList("synthetic-data_explicit_big-endian");
+
+</script>
+</head>
+
+<body>
+
+<h1>DWV DICOM synthetic data</h1>
+
+<div id="content"></div>
+
+</body>
+</html>

nv/html/dwv/tests/dicom/synthetic-data_explicit.json

@@ -0,0 +1,193 @@
+[
+{
+    "name": "test00",
+    "description": "Little Endian Explicit test data.",
+    "tags": {
+        "TransferSyntaxUID": "1.2.840.10008.1.2.1",
+        "Modality": "MR",
+        "PatientName": "dwv-patient-name-00",
+        "PhotometricInterpretation": "MONOCHROME2",
+        "SamplesPerPixel": 1,
+        "PixelRepresentation": 0,
+        "Rows": 32,
+        "Columns": 32,
+        "BitsAllocated": 16,
+        "BitsStored": 12,
+        "HighBit": 11
+    }
+},
+{
+    "name": "test01",
+    "description": "Little Endian Explicit test data with PixelRepresentation=1.",
+    "tags": {
+        "TransferSyntaxUID": "1.2.840.10008.1.2.1",
+        "Modality": "MR",
+        "PatientName": "dwv-patient-name-01",
+        "PhotometricInterpretation": "MONOCHROME2",
+        "SamplesPerPixel": 1,
+        "PixelRepresentation": 1,
+        "Rows": 32,
+        "Columns": 32,
+        "BitsAllocated": 16,
+        "BitsStored": 12,
+        "HighBit": 11
+    }
+},
+{
+    "name": "test02",
+    "description": "Little Endian Explicit 8bits RGB test data.",
+    "tags": {
+        "TransferSyntaxUID": "1.2.840.10008.1.2.1",
+        "Modality": "MR",
+        "PatientName": "dwv-patient-name-02",
+        "PhotometricInterpretation": "RGB",
+        "SamplesPerPixel": 3,
+        "PlanarConfiguration": 1,
+        "PixelRepresentation": 0,
+        "Rows": 32,
+        "Columns": 32,
+        "BitsAllocated": 8,
+        "BitsStored": 8,
+        "HighBit": 7
+    }
+},
+{
+    "name": "test03",
+    "description": "Little Endian Explicit test data with explicit length sequence.",
+    "tags": {
+        "TransferSyntaxUID": "1.2.840.10008.1.2.1",
+        "Modality": "MR",
+        "PatientName": "dwv-patient-name-03",
+        "PhotometricInterpretation": "MONOCHROME2",
+        "SamplesPerPixel": 1,
+        "PixelRepresentation": 0,
+        "Rows": 32,
+        "Columns": 32,
+        "BitsAllocated": 16,
+        "BitsStored": 12,
+        "HighBit": 11,
+        "ReferencedImageSequence": {
+            "explicitLength": true,
+            "item0": {
+                "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+                "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094"
+            },
+            "item1": {
+              "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+              "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511286933854090"
+            }
+        }
+    }
+},
+{
+    "name": "test04",
+    "description": "Little Endian Explicit test data with implicit length sequence.",
+    "tags": {
+        "TransferSyntaxUID": "1.2.840.10008.1.2.1",
+        "Modality": "MR",
+        "PatientName": "dwv-patient-name-04",
+        "PhotometricInterpretation": "MONOCHROME2",
+        "SamplesPerPixel": 1,
+        "PixelRepresentation": 0,
+        "Rows": 32,
+        "Columns": 32,
+        "BitsAllocated": 16,
+        "BitsStored": 12,
+        "HighBit": 11,
+        "ReferencedImageSequence": {
+            "explicitLength": false,
+            "item0": {
+                "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+                "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094"
+            },
+            "item1": {
+              "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+              "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511286933854090"
+            }
+        }
+    }
+},
+{
+    "name": "test05",
+    "description": "Little Endian Explicit test data with massive sequence.",
+    "tags": {
+        "TransferSyntaxUID": "1.2.840.10008.1.2.1",
+        "Modality": "MR",
+        "PatientName": "dwv-patient-name-05",
+        "PhotometricInterpretation": "MONOCHROME2",
+        "SamplesPerPixel": 1,
+        "PixelRepresentation": 0,
+        "Rows": 32,
+        "Columns": 32,
+        "BitsAllocated": 16,
+        "BitsStored": 12,
+        "HighBit": 11,
+        "ReferencedImageSequence": {
+            "explicitLength": true,
+            "item0": {
+                "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+                "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094"
+            },
+            "item1": {
+                "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+                "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511286933854090"
+            },
+            "item2": {}
+        },
+        "SourceImageSequence": {
+            "explicitLength": false,
+            "item0": {
+                "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+                "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094"
+            },
+            "item1": {
+                "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+                "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511286933854090"
+            },
+            "item2": 0
+        },
+        "ReferencedPatientSequence": {},
+        "ReferencedOverlaySequence": 0,
+        "ReferringPhysicianIdentificationSequence": {
+            "explicitLength": true,
+            "item0": {}
+        },
+        "ConsultingPhysicianIdentificationSequence": {
+            "explicitLength": false,
+            "item0": 0
+        },
+        "ReferencedStudySequence": {
+            "explicitLength": true,
+            "item0": {
+                "PurposeOfReferenceCodeSequence": {
+                    "item0": {
+                        "CodeValue": "123456"
+                    }
+                }
+            }
+        },
+        "ReferencedSeriesSequence": {
+            "explicitLength": false,
+            "item0": {
+                "PurposeOfReferenceCodeSequence": {
+                    "item0": {
+                        "CodeValue": "789101"
+                    }
+                }
+            }
+        },
+        "ReferencedInstanceSequence": {
+            "explicitLength": true,
+            "item0": {
+                "PurposeOfReferenceCodeSequence": {}
+            }
+        },
+        "ReferencedVisitSequence": {
+            "explicitLength": false,
+            "item0": {
+                "PurposeOfReferenceCodeSequence": 0
+            }
+        }
+    }
+}
+]

nv/html/dwv/tests/dicom/synthetic-data_explicit_big-endian.json

@@ -0,0 +1,193 @@
+[
+{
+    "name": "test20",
+    "description": "Big Endian Explicit test data.",
+    "tags": {
+        "TransferSyntaxUID": "1.2.840.10008.1.2.2",
+        "Modality": "MR",
+        "PatientName": "dwv-patient-name-20",
+        "PhotometricInterpretation": "MONOCHROME2",
+        "SamplesPerPixel": 1,
+        "PixelRepresentation": 0,
+        "Rows": 32,
+        "Columns": 32,
+        "BitsAllocated": 16,
+        "BitsStored": 12,
+        "HighBit": 11
+    }
+},
+{
+    "name": "test21",
+    "description": "Big Endian Explicit test data with PixelRepresentation=1.",
+    "tags": {
+        "TransferSyntaxUID": "1.2.840.10008.1.2.2",
+        "Modality": "MR",
+        "PatientName": "dwv-patient-name-21",
+        "PhotometricInterpretation": "MONOCHROME2",
+        "SamplesPerPixel": 1,
+        "PixelRepresentation": 1,
+        "Rows": 32,
+        "Columns": 32,
+        "BitsAllocated": 16,
+        "BitsStored": 12,
+        "HighBit": 11
+    }
+},
+{
+    "name": "test22",
+    "description": "Big Endian Explicit 8bits RGB test data.",
+    "tags": {
+        "TransferSyntaxUID": "1.2.840.10008.1.2.2",
+        "Modality": "MR",
+        "PatientName": "dwv-patient-name-22",
+        "PhotometricInterpretation": "RGB",
+        "SamplesPerPixel": 3,
+        "PlanarConfiguration": 1,
+        "PixelRepresentation": 0,
+        "Rows": 32,
+        "Columns": 32,
+        "BitsAllocated": 8,
+        "BitsStored": 8,
+        "HighBit": 7
+    }
+},
+{
+    "name": "test23",
+    "description": "Big Endian Explicit test data with explicit length sequence.",
+    "tags": {
+        "TransferSyntaxUID": "1.2.840.10008.1.2.2",
+        "Modality": "MR",
+        "PatientName": "dwv-patient-name-23",
+        "PhotometricInterpretation": "MONOCHROME2",
+        "SamplesPerPixel": 1,
+        "PixelRepresentation": 0,
+        "Rows": 32,
+        "Columns": 32,
+        "BitsAllocated": 16,
+        "BitsStored": 12,
+        "HighBit": 11,
+        "ReferencedImageSequence": {
+            "explicitLength": true,
+            "item0": {
+                "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+                "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094"
+            },
+            "item1": {
+              "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+              "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511286933854090"
+            }
+        }
+    }
+},
+{
+    "name": "test24",
+    "description": "Big Endian Explicit test data with implicit length sequence.",
+    "tags": {
+        "TransferSyntaxUID": "1.2.840.10008.1.2.2",
+        "Modality": "MR",
+        "PatientName": "dwv-patient-name-24",
+        "PhotometricInterpretation": "MONOCHROME2",
+        "SamplesPerPixel": 1,
+        "PixelRepresentation": 0,
+        "Rows": 32,
+        "Columns": 32,
+        "BitsAllocated": 16,
+        "BitsStored": 12,
+        "HighBit": 11,
+        "ReferencedImageSequence": {
+            "explicitLength": false,
+            "item0": {
+                "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+                "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094"
+            },
+            "item1": {
+              "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+              "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511286933854090"
+            }
+        }
+    }
+},
+{
+    "name": "test25",
+    "description": "Big Endian Explicit test data with massive sequence.",
+    "tags": {
+        "TransferSyntaxUID": "1.2.840.10008.1.2.2",
+        "Modality": "MR",
+        "PatientName": "dwv-patient-name-25",
+        "PhotometricInterpretation": "MONOCHROME2",
+        "SamplesPerPixel": 1,
+        "PixelRepresentation": 0,
+        "Rows": 32,
+        "Columns": 32,
+        "BitsAllocated": 16,
+        "BitsStored": 12,
+        "HighBit": 11,
+        "ReferencedImageSequence": {
+            "explicitLength": true,
+            "item0": {
+                "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+                "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094"
+            },
+            "item1": {
+                "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+                "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511286933854090"
+            },
+            "item2": {}
+        },
+        "SourceImageSequence": {
+            "explicitLength": false,
+            "item0": {
+                "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+                "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094"
+            },
+            "item1": {
+                "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+                "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511286933854090"
+            },
+            "item2": 0
+        },
+        "ReferencedPatientSequence": {},
+        "ReferencedOverlaySequence": 0,
+        "ReferringPhysicianIdentificationSequence": {
+            "explicitLength": true,
+            "item0": {}
+        },
+        "ConsultingPhysicianIdentificationSequence": {
+            "explicitLength": false,
+            "item0": 0
+        },
+        "ReferencedStudySequence": {
+            "explicitLength": true,
+            "item0": {
+                "PurposeOfReferenceCodeSequence": {
+                    "item0": {
+                        "CodeValue": "123456"
+                    }
+                }
+            }
+        },
+        "ReferencedSeriesSequence": {
+            "explicitLength": false,
+            "item0": {
+                "PurposeOfReferenceCodeSequence": {
+                    "item0": {
+                        "CodeValue": "789101"
+                    }
+                }
+            }
+        },
+        "ReferencedInstanceSequence": {
+            "explicitLength": true,
+            "item0": {
+                "PurposeOfReferenceCodeSequence": {}
+            }
+        },
+        "ReferencedVisitSequence": {
+            "explicitLength": false,
+            "item0": {
+                "PurposeOfReferenceCodeSequence": 0
+            }
+        }
+    }
+}
+]

nv/html/dwv/tests/dicom/synthetic-data_implicit.json

@@ -0,0 +1,193 @@
+[
+{
+    "name": "test10",
+    "description": "Little Endian Implicit test data.",
+    "tags": {
+        "TransferSyntaxUID": "1.2.840.10008.1.2",
+        "Modality": "MR",
+        "PatientName": "dwv-patient-name-10",
+        "PhotometricInterpretation": "MONOCHROME2",
+        "SamplesPerPixel": 1,
+        "PixelRepresentation": 0,
+        "Rows": 32,
+        "Columns": 32,
+        "BitsAllocated": 16,
+        "BitsStored": 12,
+        "HighBit": 11
+    }
+},
+{
+    "name": "test11",
+    "description": "Little Endian Implicit test data with PixelRepresentation=1.",
+    "tags": {
+        "TransferSyntaxUID": "1.2.840.10008.1.2",
+        "Modality": "MR",
+        "PatientName": "dwv-patient-name-11",
+        "PhotometricInterpretation": "MONOCHROME2",
+        "SamplesPerPixel": 1,
+        "PixelRepresentation": 1,
+        "Rows": 32,
+        "Columns": 32,
+        "BitsAllocated": 16,
+        "BitsStored": 12,
+        "HighBit": 11
+    }
+},
+{
+    "name": "test12",
+    "description": "Little Endian Implicit 8bits RGB test data.",
+    "tags": {
+        "TransferSyntaxUID": "1.2.840.10008.1.2",
+        "Modality": "MR",
+        "PatientName": "dwv-patient-name-12",
+        "PhotometricInterpretation": "RGB",
+        "SamplesPerPixel": 3,
+        "PlanarConfiguration": 1,
+        "PixelRepresentation": 0,
+        "Rows": 32,
+        "Columns": 32,
+        "BitsAllocated": 8,
+        "BitsStored": 8,
+        "HighBit": 7
+    }
+},
+{
+    "name": "test13",
+    "description": "Little Endian Implicit test data with explicit length sequence.",
+    "tags": {
+        "TransferSyntaxUID": "1.2.840.10008.1.2",
+        "Modality": "MR",
+        "PatientName": "dwv-patient-name-13",
+        "PhotometricInterpretation": "MONOCHROME2",
+        "SamplesPerPixel": 1,
+        "PixelRepresentation": 0,
+        "Rows": 32,
+        "Columns": 32,
+        "BitsAllocated": 16,
+        "BitsStored": 12,
+        "HighBit": 11,
+        "ReferencedImageSequence": {
+            "explicitLength": true,
+            "item0": {
+                "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+                "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094"
+            },
+            "item1": {
+              "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+              "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511286933854090"
+            }
+        }
+    }
+},
+{
+    "name": "test14",
+    "description": "Little Endian Implicit test data with implicit length sequence.",
+    "tags": {
+        "TransferSyntaxUID": "1.2.840.10008.1.2.1",
+        "Modality": "MR",
+        "PatientName": "dwv-patient-name-14",
+        "PhotometricInterpretation": "MONOCHROME2",
+        "SamplesPerPixel": 1,
+        "PixelRepresentation": 0,
+        "Rows": 32,
+        "Columns": 32,
+        "BitsAllocated": 16,
+        "BitsStored": 12,
+        "HighBit": 11,
+        "ReferencedImageSequence": {
+            "explicitLength": false,
+            "item0": {
+                "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+                "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094"
+            },
+            "item1": {
+              "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+              "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511286933854090"
+            }
+        }
+    }
+},
+{
+    "name": "test15",
+    "description": "Little Endian Explicit test data with massive sequence.",
+    "tags": {
+        "TransferSyntaxUID": "1.2.840.10008.1.2.1",
+        "Modality": "MR",
+        "PatientName": "dwv-patient-name-15",
+        "PhotometricInterpretation": "MONOCHROME2",
+        "SamplesPerPixel": 1,
+        "PixelRepresentation": 0,
+        "Rows": 32,
+        "Columns": 32,
+        "BitsAllocated": 16,
+        "BitsStored": 12,
+        "HighBit": 11,
+        "ReferencedImageSequence": {
+            "explicitLength": true,
+            "item0": {
+                "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+                "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094"
+            },
+            "item1": {
+                "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+                "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511286933854090"
+            },
+            "item2": {}
+        },
+        "SourceImageSequence": {
+            "explicitLength": false,
+            "item0": {
+                "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+                "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511672669154094"
+            },
+            "item1": {
+                "ReferencedSOPClassUID": "1.2.840.10008.5.1.4.1.1.4",
+                "ReferencedSOPInstanceUID": "1.3.12.2.1107.5.2.32.35162.2012021515511286933854090"
+            },
+            "item2": 0
+        },
+        "ReferencedPatientSequence": {},
+        "ReferencedOverlaySequence": 0,
+        "ReferringPhysicianIdentificationSequence": {
+            "explicitLength": true,
+            "item0": {}
+        },
+        "ConsultingPhysicianIdentificationSequence": {
+            "explicitLength": false,
+            "item0": 0
+        },
+        "ReferencedStudySequence": {
+            "explicitLength": true,
+            "item0": {
+                "PurposeOfReferenceCodeSequence": {
+                    "item0": {
+                        "CodeValue": "123456"
+                    }
+                }
+            }
+        },
+        "ReferencedSeriesSequence": {
+            "explicitLength": false,
+            "item0": {
+                "PurposeOfReferenceCodeSequence": {
+                    "item0": {
+                        "CodeValue": "789101"
+                    }
+                }
+            }
+        },
+        "ReferencedInstanceSequence": {
+            "explicitLength": true,
+            "item0": {
+                "PurposeOfReferenceCodeSequence": {}
+            }
+        },
+        "ReferencedVisitSequence": {
+            "explicitLength": false,
+            "item0": {
+                "PurposeOfReferenceCodeSequence": 0
+            }
+        }
+    }
+}
+]

nv/html/dwv/tests/html/html.test.js

@@ -0,0 +1,42 @@
+/**
+ * Tests for the 'gui/html.js' file.
+ */
+/** @module tests/html */
+// Do not warn if these variables were not defined before.
+/* global QUnit */
+QUnit.module("html");
+
+/**
+ * Tests for {@link dwv.html.toTable}.
+ * @function module:tests/html~toTable
+ */
+QUnit.test("Test array to html function.", function (assert) {
+    // 1D array
+    var array0 = [0, 1, 2, 3];
+    var table0 = dwv.html.toTable(array0);
+    var table0_ref = "<table><tbody><tr><td>0</td><td>1</td><td>2</td><td>3</td></tr></tbody></table>";
+    assert.equal(table0.outerHTML, table0_ref, "1D array");
+
+    // 2D array
+    var arrayIn0 = [0, 1];
+    var arrayIn1 = [2, 3];
+    var array1 = [arrayIn0, arrayIn1];
+    var table1 = dwv.html.toTable(array1);
+    var table1_ref = "<table><tbody><tr><td>0</td><td>1</td></tr><tr><td>2</td><td>3</td></tr></tbody></table>";
+    assert.equal(table1.outerHTML, table1_ref, "2D array");
+
+    // array of objects
+    var array2 = [{"a":0, "b":1}, {"a":2, "b":3}];
+    var table2 = dwv.html.toTable(array2);
+    var table2_ref = "<table><thead><tr><th>a</th><th>b</th></tr></thead><tbody><tr><td>0</td><td>1</td></tr><tr><td>2</td><td>3</td></tr></tbody></table>";
+    assert.equal(table2.outerHTML, table2_ref, "Array of objects");
+
+    // object
+    // not testing with null values since they are treated differently in browsers
+    var obj = {};
+    obj.first = {"a":0, "b":1};
+    obj.second = {"a":"hello", "b":undefined};
+    var table3 = dwv.html.toTable(obj);
+    var table3_ref = "<table><thead><tr><th></th><th>a</th><th>b</th></tr></thead><tbody><tr><td>first</td><td>0</td><td>1</td></tr><tr><td>second</td><td>hello</td><td>undefined</td></tr></tbody></table>";
+    assert.equal(table3.outerHTML, table3_ref, "Object");
+});

nv/html/dwv/tests/image/geometry.test.js

@@ -0,0 +1,54 @@
+/**
+ * Tests for the 'image/geometry.js' file.
+ */
+/** @module tests/image */
+// Do not warn if these variables were not defined before.
+/* global QUnit */
+QUnit.module("geometry");
+
+/**
+ * Tests for {@link dwv.image.Size}.
+ * @function module:tests/image~size
+ */
+QUnit.test("Test Size.", function (assert) {
+    var size0 = new dwv.image.Size(2, 3, 4);
+    // test its values
+    assert.equal( size0.getNumberOfColumns(), 2, "getNumberOfColumns" );
+    assert.equal( size0.getNumberOfRows(), 3, "getNumberOfRows" );
+    assert.equal( size0.getNumberOfSlices(), 4, "getNumberOfSlices" );
+    assert.equal( size0.getSliceSize(), 6, "getSliceSize" );
+    assert.equal( size0.getTotalSize(), 24, "getTotalSize" );
+    // defaults
+    var size00 = new dwv.image.Size(2, 3);
+    assert.equal( size00.getNumberOfSlices(), 1, "getNumberOfSlices default" );
+    // equality
+    assert.equal( size0.equals(size0), 1, "equals self true" );
+    var size1 = new dwv.image.Size(2, 3, 4);
+    assert.equal( size0.equals(size1), 1, "equals true" );
+    var size2 = new dwv.image.Size(3, 3, 4);
+    assert.equal( size0.equals(size2), 0, "equals false" );
+    // is in bounds
+    assert.equal( size0.isInBounds(0,0,0), 1, "isInBounds 0,0,0" );
+    assert.equal( size0.isInBounds(0,0), 1, "isInBounds 0,0" );
+    assert.equal( size0.isInBounds(1,2,3), 1, "isInBounds max" );
+    assert.equal( size0.isInBounds(2,3,4), 0, "isInBounds too big" );
+    assert.equal( size0.isInBounds(-1,2,3), 0, "isInBounds too small" );
+});
+
+/**
+ * Tests for {@link dwv.image.Spacing}.
+ * @function module:tests/image~spacing
+ */
+QUnit.test("Test Spacing.", function (assert) {
+    var spacing0 = new dwv.image.Spacing(2, 3, 4);
+    // test its values
+    assert.equal( spacing0.getColumnSpacing(), 2, "getColumnSpacing" );
+    assert.equal( spacing0.getRowSpacing(), 3, "getRowSpacing" );
+    assert.equal( spacing0.getSliceSpacing(), 4, "getSliceSpacing" );
+    // equality
+    assert.equal( spacing0.equals(spacing0), 1, "equals self true" );
+    var spacing1 = new dwv.image.Spacing(2, 3, 4);
+    assert.equal( spacing0.equals(spacing1), 1, "equals true" );
+    var spacing2 = new dwv.image.Spacing(3, 3, 4);
+    assert.equal( spacing0.equals(spacing2), 0, "equals false" );
+});

nv/html/dwv/tests/image/image.test.js

@@ -0,0 +1,319 @@
+/**
+ * Tests for the 'image/image.js' file.
+ */
+// Do not warn if these variables were not defined before.
+/* global QUnit */
+QUnit.module("image");
+
+/**
+ * Tests for {@link dwv.image.Image} getValue.
+ * @function module:tests/image~getvalue
+ */
+QUnit.test("Test Image getValue.", function (assert) {
+    // create a simple image
+    var size0 = 4;
+    var imgSize0 = new dwv.image.Size(size0, size0, 1);
+    var imgSpacing0 = new dwv.image.Spacing(1, 1, 1);
+    var imgOrigin0 = new dwv.math.Point3D(0,0,0);
+    var imgGeometry0 = new dwv.image.Geometry(imgOrigin0, imgSize0, imgSpacing0);
+    var buffer0 = [];
+    for(var i=0; i<size0*size0; ++i) {
+        buffer0[i] = i;
+    }
+    var image0 = new dwv.image.Image(imgGeometry0, [buffer0]);
+    // test its values
+    assert.equal( image0.getValue(0, 0, 0), 0, "Value at 0,0,0" );
+    assert.equal( image0.getValue(1, 0, 0), 1, "Value at 1,0,0" );
+    assert.equal( image0.getValue(1, 1, 0), 1*size0 + 1, "Value at 1,1,0" );
+    assert.equal( image0.getValue(3, 3, 0), 3*size0 + 3, "Value at 3,3,0" );
+    assert.equal( isNaN(image0.getValue(4, 3, 0)), true, "Value outside is NaN" );
+    // TODO: wrong, should not be accessed
+    assert.equal( image0.getValue(5, 0, 0), 1*size0 + 1, "Value at 5,0,0" );
+
+    // image with rescale
+    var image1 = new dwv.image.Image(imgGeometry0, [buffer0]);
+    var slope1 = 2;
+    var intercept1 = 10;
+    var rsi1 = new dwv.image.RescaleSlopeAndIntercept(slope1, intercept1);
+    image1.setRescaleSlopeAndIntercept(rsi1);
+    // test its values
+    assert.equal( image1.getValue(0, 0, 0), 0, "Value at 0,0,0" );
+    assert.equal( image1.getValue(1, 0, 0), 1, "Value at 1,0,0" );
+    assert.equal( image1.getValue(1, 1, 0), 1*size0 + 1, "Value at 1,1,0" );
+    assert.equal( image1.getValue(3, 3, 0), 3*size0 + 3, "Value at 3,3,0" );
+    assert.equal( image1.getRescaledValue(0, 0, 0), 0+intercept1, "Value at 0,0,0" );
+    assert.equal( image1.getRescaledValue(1, 0, 0), 1*slope1+intercept1, "Value at 1,0,0" );
+    assert.equal( image1.getRescaledValue(1, 1, 0), (1*size0 + 1)*slope1+intercept1, "Value at 1,1,0" );
+    assert.equal( image1.getRescaledValue(3, 3, 0), (3*size0 + 3)*slope1+intercept1, "Value at 3,3,0" );
+});
+
+/**
+ * Tests for {@link dwv.image.Image} histogram.
+ * @function module:tests/image~histogram
+ */
+QUnit.test("Test Image histogram.", function (assert) {
+    // create a simple image
+    var size0 = 4;
+    var imgSize0 = new dwv.image.Size(size0, size0, 1);
+    var imgSpacing0 = new dwv.image.Spacing(1, 1, 1);
+    var imgOrigin0 = new dwv.math.Point3D(0,0,0);
+    var imgGeometry0 = new dwv.image.Geometry(imgOrigin0, imgSize0, imgSpacing0);
+    var buffer0 = [];
+    for(var i=0; i<size0*size0; ++i) {
+        buffer0[i] = i;
+    }
+    var image0 = new dwv.image.Image(imgGeometry0, [buffer0]);
+
+    // histogram
+    var histogram = image0.getHistogram();
+    assert.equal( histogram.length, size0*size0, "histogram size" );
+    var histoContentTest = true;
+    for ( var j=0; j<size0*size0; ++j) {
+        if ( histogram[j][0] !== j ) {
+            histoContentTest = false;
+            break;
+        }
+        if ( histogram[j][1] !== 1 ) {
+            histoContentTest = false;
+            break;
+        }
+    }
+    assert.equal( histoContentTest, true, "histogram content" );
+});
+
+/**
+ * Tests for {@link dwv.image.Image} append.
+ * @function module:tests/image~append
+ */
+QUnit.test("Test Image append slice.", function (assert) {
+    var size = 4;
+    var imgSize = new dwv.image.Size(size, size, 2);
+    var imgSizeMinusOne = new dwv.image.Size(size, size, 1);
+    var imgSpacing = new dwv.image.Spacing(1, 1, 1);
+    var imgOrigin = new dwv.math.Point3D(0,0,0);
+    var imgGeometry0 = new dwv.image.Geometry(imgOrigin, imgSizeMinusOne, imgSpacing);
+    imgGeometry0.appendOrigin(new dwv.math.Point3D(0,0,1), 1);
+
+    // slice to append
+    var sliceSize = new dwv.image.Size(size, size, 1);
+    var sliceBuffer = new Int16Array(sliceSize.getTotalSize());
+    for(var i=0; i<size*size; ++i) {
+        sliceBuffer[i] = 2;
+    }
+
+    // image buffer
+    var buffer = new Int16Array(imgSize.getTotalSize());
+    for(var j=0; j<size*size; ++j) {
+        buffer[j] = 0;
+    }
+    for(var k=size*size; k<2*size*size; ++k) {
+        buffer[k] = 1;
+    }
+
+    // image 0
+    var image0 = new dwv.image.Image(imgGeometry0, [buffer]);
+    // append null
+    assert.throws( function () {
+            image0.appendSlice(null);
+        }, new Error("Cannot append null slice"), "append null slice");
+    // real slice
+    var sliceOrigin = new dwv.math.Point3D(0,0,-1);
+    var sliceGeometry = new dwv.image.Geometry(sliceOrigin, sliceSize, imgSpacing);
+    var slice0 = new dwv.image.Image(sliceGeometry, [sliceBuffer]);
+    // append slice before
+    image0.appendSlice(slice0);
+    // test its values
+    assert.equal( image0.getValue(0, 0, 0), 2, "Value at 0,0,0 (append before)" );
+    assert.equal( image0.getValue(3, 3, 0), 2, "Value at 3,3,0 (append before)" );
+    assert.equal( image0.getValue(0, 0, 1), 0, "Value at 0,0,1 (append before)" );
+    assert.equal( image0.getValue(3, 3, 1), 0, "Value at 3,3,1 (append before)" );
+    assert.equal( image0.getValue(0, 0, 2), 1, "Value at 0,0,2 (append before)" );
+    assert.equal( image0.getValue(3, 3, 2), 1, "Value at 3,3,2 (append before)" );
+    // test its positions
+    var sliceOrigins0 = [];
+    sliceOrigins0[0] = new dwv.math.Point3D(0,0,-1);
+    sliceOrigins0[1] = new dwv.math.Point3D(0,0,0);
+    sliceOrigins0[2] = new dwv.math.Point3D(0,0,1);
+    assert.deepEqual( imgGeometry0.getOrigins(), sliceOrigins0, "Slice positions (append before)" );
+
+    // image 1
+    var imgGeometry1 = new dwv.image.Geometry(imgOrigin, imgSizeMinusOne, imgSpacing);
+    imgGeometry1.appendOrigin(new dwv.math.Point3D(0,0,1), 1);
+    var image1 = new dwv.image.Image(imgGeometry1, [buffer]);
+    var sliceOrigin1 = new dwv.math.Point3D(0,0,2);
+    var sliceGeometry1 = new dwv.image.Geometry(sliceOrigin1, sliceSize, imgSpacing);
+    var slice1 = new dwv.image.Image(sliceGeometry1, [sliceBuffer]);
+    // append slice before
+    image1.appendSlice(slice1);
+    // test its values
+    assert.equal( image1.getValue(0, 0, 0), 0, "Value at 0,0,0 (append after)" );
+    assert.equal( image1.getValue(3, 3, 0), 0, "Value at 3,3,0 (append after)" );
+    assert.equal( image1.getValue(0, 0, 1), 1, "Value at 0,0,1 (append after)" );
+    assert.equal( image1.getValue(3, 3, 1), 1, "Value at 3,3,1 (append after)" );
+    assert.equal( image1.getValue(0, 0, 2), 2, "Value at 0,0,2 (append after)" );
+    assert.equal( image1.getValue(3, 3, 2), 2, "Value at 3,3,2 (append after)" );
+    // test its positions
+    var sliceOrigins1 = [];
+    sliceOrigins1[0] = new dwv.math.Point3D(0,0,0);
+    sliceOrigins1[1] = new dwv.math.Point3D(0,0,1);
+    sliceOrigins1[2] = new dwv.math.Point3D(0,0,2);
+    assert.deepEqual( imgGeometry1.getOrigins(), sliceOrigins1, "Slice positions (append after)" );
+
+    // image 2
+    var imgGeometry2 = new dwv.image.Geometry(imgOrigin, imgSizeMinusOne, imgSpacing);
+    imgGeometry2.appendOrigin(new dwv.math.Point3D(0,0,1), 1);
+    var image2 = new dwv.image.Image(imgGeometry2, [buffer]);
+    var sliceOrigin2 = new dwv.math.Point3D(0,0,0.4);
+    var sliceGeometry2 = new dwv.image.Geometry(sliceOrigin2, sliceSize, imgSpacing);
+    var slice2 = new dwv.image.Image(sliceGeometry2, [sliceBuffer]);
+    // append slice before
+    image2.appendSlice(slice2);
+    // test its values
+    assert.equal( image2.getValue(0, 0, 0), 0, "Value at 0,0,0 (append between)" );
+    assert.equal( image2.getValue(3, 3, 0), 0, "Value at 3,3,0 (append between)" );
+    assert.equal( image2.getValue(0, 0, 1), 2, "Value at 0,0,1 (append between)" );
+    assert.equal( image2.getValue(3, 3, 1), 2, "Value at 3,3,1 (append between)" );
+    assert.equal( image2.getValue(0, 0, 2), 1, "Value at 0,0,2 (append between)" );
+    assert.equal( image2.getValue(3, 3, 2), 1, "Value at 3,3,2 (append between)" );
+    // test its positions
+    var sliceOrigins2 = [];
+    sliceOrigins2[0] = new dwv.math.Point3D(0,0,0);
+    sliceOrigins2[1] = new dwv.math.Point3D(0,0,0.4);
+    sliceOrigins2[2] = new dwv.math.Point3D(0,0,1);
+    assert.deepEqual( imgGeometry2.getOrigins(), sliceOrigins2, "Slice positions (append between)" );
+});
+
+/**
+ * Tests for {@link dwv.image.Image} convolute2D.
+ * @function module:tests/image~convolute2D
+ */
+QUnit.test("Test Image convolute2D.", function (assert) {
+    // create a simple image
+    var size0 = 3;
+    var imgSize0 = new dwv.image.Size(size0, size0, 1);
+    var imgSpacing0 = new dwv.image.Spacing(1, 1, 1);
+    var imgOrigin0 = new dwv.math.Point3D(0,0,0);
+    var imgGeometry0 = new dwv.image.Geometry(imgOrigin0, imgSize0, imgSpacing0);
+    var buffer0 = [];
+    for ( var i = 0; i < size0*size0; ++i ) {
+        buffer0[i] = i;
+    }
+    var image0 = new dwv.image.Image(imgGeometry0, [buffer0]);
+    // id convolution
+    var weights0 = [ 0, 0, 0, 0, 1, 0, 0, 0, 0 ];
+    var resImage0 = image0.convolute2D( weights0 );
+    var testContent0 = true;
+    for ( i = 0; i < size0*size0; ++i) {
+        if ( image0.getValueAtOffset(i,0) !== resImage0.getValueAtOffset(i,0) ) {
+            testContent0 = false;
+            break;
+        }
+    }
+    assert.equal( testContent0, true, "convolute2D id" );
+    // blur convolution
+    var weights1 = [ 1, 1, 1, 1, 1, 1, 1, 1, 1 ];
+    var resImage1 = image0.convolute2D( weights1 );
+    var theoResImage1 = [ 12, 18, 24, 30, 36, 42, 48, 54, 60 ];
+    var testContent1 = true;
+    for ( i = 0; i < size0*size0; ++i ) {
+        if ( theoResImage1[i] !== resImage1.getValueAtOffset(i,0) ) {
+            testContent1 = false;
+            break;
+        }
+    }
+    assert.equal( testContent1, true, "convolute2D blur" );
+});
+
+/**
+ * Tests for {@link dwv.image.Image} transform.
+ * @function module:tests/image~transform
+ */
+QUnit.test("Test Image transform.", function (assert) {
+    // create a simple image
+    var size0 = 3;
+    var imgSize0 = new dwv.image.Size(size0, size0, 1);
+    var imgSpacing0 = new dwv.image.Spacing(1, 1, 1);
+    var imgOrigin0 = new dwv.math.Point3D(0,0,0);
+    var imgGeometry0 = new dwv.image.Geometry(imgOrigin0, imgSize0, imgSpacing0);
+    var buffer0 = [];
+    for ( var i = 0; i < size0*size0; ++i ) {
+        buffer0[i] = i;
+    }
+    var image0 = new dwv.image.Image(imgGeometry0, [buffer0]);
+
+    // treshold function
+    var func0 = function ( value ) {
+        if ( value < 3 || value > 5 ) {
+            return 0;
+        }
+        else {
+            return value;
+        }
+    };
+    var resImage0 = image0.transform( func0 );
+    var theoResImage0 = [ 0, 0, 0, 3, 4, 5, 0, 0, 0 ];
+    var testContent0 = true;
+    for ( i = 0; i < size0*size0; ++i) {
+        if ( theoResImage0[i] !== resImage0.getValueAtOffset(i,0) ) {
+            testContent0 = false;
+            break;
+        }
+    }
+    assert.equal( testContent0, true, "transform threshold" );
+
+    // new image
+    image0 = new dwv.image.Image(imgGeometry0, [buffer0]);
+
+    // multiply function
+    var func1 = function ( value ) {
+        return value * 2;
+    };
+    var resImage1 = image0.transform( func1 );
+    var theoResImage1 = [ 0, 2, 4, 6, 8, 10, 12, 14, 16 ];
+    var testContent1 = true;
+    for ( i = 0; i < size0*size0; ++i) {
+        if ( theoResImage1[i] !== resImage1.getValueAtOffset(i,0) ) {
+            testContent1 = false;
+            break;
+        }
+    }
+    assert.equal( testContent1, true, "transform multiply" );
+});
+
+/**
+ * Tests for {@link dwv.image.Image} compose.
+ * @function module:tests/image~compose
+ */
+QUnit.test("Test Image compose.", function (assert) {
+    // create two simple images
+    var size0 = 3;
+    var imgSize0 = new dwv.image.Size(size0, size0, 1);
+    var imgSpacing0 = new dwv.image.Spacing(1, 1, 1);
+    var imgOrigin0 = new dwv.math.Point3D(0,0,0);
+    var imgGeometry0 = new dwv.image.Geometry(imgOrigin0, imgSize0, imgSpacing0);
+    var buffer0 = [];
+    for ( var i = 0; i < size0*size0; ++i ) {
+        buffer0[i] = i;
+    }
+    var image0 = new dwv.image.Image(imgGeometry0, [buffer0]);
+    var buffer1 = [];
+    for ( i = 0; i < size0*size0; ++i ) {
+        buffer1[i] = i;
+    }
+    var image1 = new dwv.image.Image(imgGeometry0, [buffer1]);
+
+    // addition function
+    var func0 = function ( a, b ) {
+        return a + b;
+    };
+    var resImage0 = image0.compose( image1, func0 );
+    var theoResImage0 = [ 0, 2, 4, 6, 8, 10, 12, 14, 16 ];
+    var testContent0 = true;
+    for ( i = 0; i < size0*size0; ++i) {
+        if ( theoResImage0[i] !== resImage0.getValueAtOffset(i,0) ) {
+            testContent0 = false;
+            break;
+        }
+    }
+    assert.equal( testContent0, true, "compose addition" );
+});

nv/html/dwv/tests/image/index.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>DWV Colour Maps</title>
+<meta charset="UTF-8">
+<script type="text/javascript" src="../../src/image/luts.js"></script>
+<script type="text/javascript">
+function createImage(colourMapName, colourMap)
+{
+    // default size
+    var height = 40;
+    var width = 256;
+    // create canvas
+    var canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    var context = canvas.getContext("2d");
+    // fill in the image data
+    var imageData = context.createImageData(canvas.width, canvas.height);
+    var index = 0;
+    for( var j=0; j<canvas.height; ++j ) {
+        for( var i=0; i<canvas.width; ++i ) {
+            index = (i + j * imageData.width) * 4;
+            imageData.data[index] = colourMap.red[i];
+            imageData.data[index+1] = colourMap.green[i];
+            imageData.data[index+2] = colourMap.blue[i];
+            imageData.data[index+3] = 0xff;
+        }
+    }
+    // put the image data in the context
+    context.putImageData(imageData, 0, 0);
+
+    // html
+    var div = document.createElement("div");
+    div.id = colourMapName;
+    var paragraph = document.createElement("p");
+    var link = document.createElement("a");
+    link.href = canvas.toDataURL("image/png");
+    link.appendChild(document.createTextNode(colourMapName));
+    // put all together
+    paragraph.appendChild(link);
+    div.appendChild(paragraph);
+    div.appendChild(canvas);
+    // add to the document
+    document.body.appendChild(div);
+}
+</script>
+<style>
+body { font-family: Arial, Helvetica, sans-serif; }
+</style>
+</head>
+
+<body>
+
+<h1>The DWV colour maps</h1>
+
+<script type="text/javascript">
+window.onload = function() {
+    createImage("Plain", dwv.image.lut.plain);
+    createImage("InvPlain", dwv.image.lut.invPlain);
+    createImage("Rainbow", dwv.image.lut.rainbow);
+    createImage("Hot", dwv.image.lut.hot);
+    createImage("Hot Iron", dwv.image.lut.hot_iron);
+    createImage("Pet", dwv.image.lut.pet);
+    createImage("Hot Metal Blue", dwv.image.lut.hot_metal_blue);
+    createImage("Pet 20 step", dwv.image.lut.pet_20step);
+    createImage("Test", dwv.image.lut.test);
+}
+</script>
+
+</body>
+</html>

nv/html/dwv/tests/image/view.test.js

@@ -0,0 +1,209 @@
+/**
+ * Tests for the 'image/view.js' file.
+ */
+// Do not warn if these variables were not defined before.
+/* global QUnit */
+QUnit.module("view");
+
+/**
+ * Tests for {@link dwv.image.View} listeners.
+ * @function module:tests/image~listeners
+ */
+QUnit.test("Test listeners.", function (assert) {
+    // create an image
+    var size0 = 4;
+    var imgSize0 = new dwv.image.Size(size0, size0, 1);
+    var imgSpacing0 = new dwv.image.Spacing(1, 1, 1);
+    var imgOrigin0 = new dwv.math.Point3D(0,0,0);
+    var imgGeometry0 = new dwv.image.Geometry(imgOrigin0, imgSize0, imgSpacing0);
+    var buffer0 = [];
+    for(var i=0; i<size0*size0; ++i) {
+        buffer0[i] = i;
+    }
+    var image0 = new dwv.image.Image(imgGeometry0, [buffer0]);
+    image0.setMeta( { BitsStored: 8 } );
+    // create a view
+    var view0 = new dwv.image.View(image0);
+
+    // listeners
+    var listener1 = function(event){
+        assert.equal( event.wc, 0, "Expected call to listener1.");
+    };
+    var listener2 = function(event){
+        assert.equal( event.ww, 1, "Expected call to listener2.");
+    };
+    // with two listeners
+    view0.addEventListener("wl-center-change", listener1 );
+    view0.addEventListener("wl-center-change", listener2 );
+    view0.setWindowLevel(0,1);
+    // without listener2
+    view0.removeEventListener("wl-center-change", listener2 );
+    view0.setWindowLevel(0,2);
+    // without listener1
+    view0.removeEventListener("wl-center-change", listener1 );
+    view0.setWindowLevel(1,1);
+});
+
+/**
+ * Tests for {@link dwv.image.View} generateImageData MONO.
+ * @function module:tests/image~generateImageDataMONO
+ */
+QUnit.test("Test generate data MONO.", function (assert) {
+    // create an image
+    var size0 = 2;
+    var imgSize0 = new dwv.image.Size(size0, size0, 1);
+    var imgSpacing0 = new dwv.image.Spacing(1, 1, 1);
+    var imgOrigin0 = new dwv.math.Point3D(0,0,0);
+    var imgGeometry0 = new dwv.image.Geometry(imgOrigin0, imgSize0, imgSpacing0);
+    var buffer0 = [];
+    for ( var i = 0; i < size0 * size0; ++i ) {
+        buffer0[i] = i;
+    }
+    var image0 = new dwv.image.Image(imgGeometry0, [buffer0]);
+    image0.setMeta( { 'BitsStored': 8 } );
+    // create a view
+    var view0 = new dwv.image.View(image0);
+    // create the image data
+    var imageData = {'width': size0, 'height': size0, 'data': new Uint8ClampedArray(size0*size0*4) };
+
+    // default window level
+    view0.setWindowLevelMinMax();
+    // call generate data
+    view0.generateImageData(imageData);
+    // TODO proper data?
+    var theoData0 = [ 0, 0, 0, 255, 127, 127, 127, 255,
+                      255, 255, 255, 255, 255, 255, 255, 255 ];
+    var testContent0 = true;
+    for ( i = 0; i < size0*size0*4; ++i) {
+        if ( theoData0[i] !== imageData.data[i] ) {
+            testContent0 = false;
+            break;
+        }
+    }
+    assert.equal( testContent0, true, "check image data" );
+});
+
+/**
+ * Tests for {@link dwv.image.View} generateImageData RGB.
+ * @function module:tests/image~generateImageDataRGB
+ */
+QUnit.test("Test generate data RGB.", function (assert) {
+    // create an image
+    var size0 = 2;
+    var imgSize0 = new dwv.image.Size(size0, size0, 1);
+    var imgSpacing0 = new dwv.image.Spacing(1, 1, 1);
+    var imgOrigin0 = new dwv.math.Point3D(0,0,0);
+    var imgGeometry0 = new dwv.image.Geometry(imgOrigin0, imgSize0, imgSpacing0);
+    var buffer0 = [];
+    var index = 0;
+    var value = 0;
+    // 0, 85, 170, 255
+    for ( var i = 0; i < size0 * size0; ++i ) {
+        value = i * 255 / ((size0 * size0) - 1);
+        buffer0[index] = value;
+        buffer0[index+1] = value;
+        buffer0[index+2] = value;
+        index += 3;
+    }
+    var image0 = new dwv.image.Image(imgGeometry0, [buffer0]);
+    image0.setPhotometricInterpretation('RGB');
+    image0.setMeta( { 'BitsStored': 8 } );
+    // create a view
+    var view0 = new dwv.image.View(image0);
+    // create the image data
+    var imageData = {'width': size0, 'height': size0, 'data': new Uint8ClampedArray(size0*size0*4) };
+
+    // default window level
+    view0.setWindowLevel(127, 255);
+    // call generate data
+    view0.generateImageData(imageData);
+    // check data content
+    var theoData0 = [ 0, 0, 0, 255, 85, 85, 85, 255,
+                      171, 171, 171, 255, 255, 255, 255, 255 ];
+    var testContent0 = true;
+    for ( i = 0; i < size0*size0*4; ++i) {
+        if ( theoData0[i] !== imageData.data[i] ) {
+            testContent0 = false;
+            break;
+        }
+    }
+    assert.equal( testContent0, true, "check image data non planar" );
+
+    var buffer1 = [];
+    index = 0;
+    // 0, 85, 170, 255
+    for ( i = 0; i < size0 * size0; ++i ) {
+        buffer1[index] = 0;
+        buffer1[index+1] = 85;
+        buffer1[index+2] = 170;
+        buffer1[index+3] = 255;
+        index += 4;
+    }
+    var image1 = new dwv.image.Image(imgGeometry0, [buffer1]);
+    image1.setPhotometricInterpretation('RGB');
+    image1.setPlanarConfiguration(1);
+    image1.setMeta( { 'BitsStored': 8 } );
+    // create a view
+    var view1 = new dwv.image.View(image1);
+
+    // default window level
+    view1.setWindowLevel(127, 255);
+    // call generate data
+    view1.generateImageData(imageData);
+    // check data content
+    var testContent1 = true;
+    for ( i = 0; i < size0*size0*4; ++i) {
+        if ( theoData0[i] !== imageData.data[i] ) {
+            testContent1 = false;
+            break;
+        }
+    }
+    assert.equal( testContent1, true, "check image data planar" );
+});
+
+/**
+ * Tests for {@link dwv.image.View} generateImageData timing.
+ * @function module:tests/image~generateImageDataTiming
+ */
+QUnit.test("Test generate data timing.", function (assert) {
+    // create an image
+    var size0 = 128;
+    var imgSize0 = new dwv.image.Size(size0, size0, 1);
+    var imgSpacing0 = new dwv.image.Spacing(1, 1, 1);
+    var imgOrigin0 = new dwv.math.Point3D(0,0,0);
+    var imgGeometry0 = new dwv.image.Geometry(imgOrigin0, imgSize0, imgSpacing0);
+    var buffer0 = [];
+    for(var i=0; i<size0*size0; ++i) {
+        buffer0[i] = i;
+    }
+    var image0 = new dwv.image.Image(imgGeometry0, [buffer0]);
+    image0.setMeta( { BitsStored: 8 } );
+    // create a view
+    var view0 = new dwv.image.View(image0);
+    // create the image data
+    var imageData = {"width": size0, "height": size0, "data": new Uint8Array(size0*size0*4) };
+
+    // default window level
+    view0.setWindowLevelMinMax();
+
+    // start time
+    var start0 = new Date();
+    // call generate data
+    view0.generateImageData(imageData);
+    // time taken
+    var time0 = (new Date()) - start0;
+    // check time taken
+    assert.ok( time0 < 90, "First generateImageData: "+time0+"ms.");
+
+    // Change the window level
+    view0.setWindowLevel(4000, 200);
+
+    // start time
+    var start1 = (new Date()).getMilliseconds();
+    // call generate data
+    view0.generateImageData(imageData);
+    // time taken
+    var time1 = (new Date()).getMilliseconds() - start1;
+    // check time taken
+    assert.ok( time1 < 90, "Second generateImageData: "+time1+"ms.");
+});

nv/html/dwv/tests/index.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta charset="UTF-8">
+<title>DWV Tests</title>
+<link rel="stylesheet" href="../ext/qunit/qunit-2.4.0.css" type="text/css" media="screen" />
+<style>
+.footer {
+    font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
+    }
+</style>
+</head>
+
+<body>
+<div id="qunit"></div>
+<div id="qunit-fixture"></div>
+<!-- Third party (test) -->
+<script type="text/javascript" src="../ext/qunit/qunit-2.4.0.js"></script>
+<!-- Third party (dwv) -->
+<script type="text/javascript" src="../ext/modernizr/modernizr.js"></script>
+<script type="text/javascript" src="../ext/i18next/i18next.min.js"></script>
+<script type="text/javascript" src="../ext/i18next/i18nextXHRBackend.min.js"></script>
+<script type="text/javascript" src="../ext/i18next/i18nextBrowserLanguageDetector.min.js"></script>
+<script type="text/javascript" src="../ext/konva/konva.min.js"></script>
+<!-- Source -->
+<script type="text/javascript" src="../src/app/drawController.js" data-cover></script>
+<script type="text/javascript" src="../src/app/state.js" data-cover></script>
+<script type="text/javascript" src="../src/utils/string.js" data-cover></script>
+<script type="text/javascript" src="../src/utils/uri.js" data-cover></script>
+<script type="text/javascript" src="../src/dicom/dicomParser.js" data-cover></script>
+<script type="text/javascript" src="../src/dicom/dicomWriter.js" data-cover></script>
+<script type="text/javascript" src="../src/dicom/dictionary.js" data-cover></script>
+<script type="text/javascript" src="../src/gui/html.js" data-cover></script>
+<script type="text/javascript" src="../src/image/filter.js" data-cover></script>
+<script type="text/javascript" src="../src/image/geometry.js" data-cover></script>
+<script type="text/javascript" src="../src/image/image.js" data-cover></script>
+<script type="text/javascript" src="../src/image/luts.js" data-cover></script>
+<script type="text/javascript" src="../src/image/view.js" data-cover></script>
+<script type="text/javascript" src="../src/math/matrix.js" data-cover></script>
+<script type="text/javascript" src="../src/math/point.js" data-cover></script>
+<script type="text/javascript" src="../src/math/shapes.js" data-cover></script>
+<script type="text/javascript" src="../src/math/stats.js" data-cover></script>
+<script type="text/javascript" src="../src/math/vector.js" data-cover></script>
+<script type="text/javascript" src="../src/utils/browser.js" data-cover></script>
+<script type="text/javascript" src="../src/utils/i18n.js" data-cover></script>
+<script type="text/javascript" src="../src/utils/thread.js" data-cover></script>
+<!-- Tests -->
+<script type="text/javascript" src="dicom/dicomParser.test.js"></script>
+<script type="text/javascript" src="dicom/dicomWriter.test.js"></script>
+<script type="text/javascript" src="html/html.test.js"></script>
+<script type="text/javascript" src="image/geometry.test.js"></script>
+<script type="text/javascript" src="image/image.test.js"></script>
+<script type="text/javascript" src="image/view.test.js"></script>
+<script type="text/javascript" src="math/matrix.test.js"></script>
+<script type="text/javascript" src="math/point.test.js"></script>
+<script type="text/javascript" src="math/shapes.test.js"></script>
+<script type="text/javascript" src="math/stats.test.js"></script>
+<script type="text/javascript" src="math/vector.test.js"></script>
+<script type="text/javascript" src="state/state.test.js"></script>
+<script type="text/javascript" src="utils/i18n.test.js"></script>
+<script type="text/javascript" src="utils/string.test.js"></script>
+<script type="text/javascript" src="utils/thread.test.js"></script>
+<script type="text/javascript" src="utils/uri.test.js"></script>
+
+<script type="text/javascript">
+// check browser support (and provide missing functions)
+dwv.browser.check();
+</script>
+
+<div class="footer">
+<p>See also:</p>
+<ul>
+<li>Visual tests: <a href="./visual/index.html">DICOM</a>,
+    <a href="./visual/index-jpeg.html">DICOM jpg</a>,
+    <a href="./visual/index-jpeg2000.html">DICOM jpg2000</a></li>
+<li><a href="./pacs/index.html">Fake PACS</a></li>
+<li>Image: <a href="./image/index.html">colour maps</a></li>
+<li>DICOM: <a href="./dicom/anonymiser.html">anonymiser</a>,
+    <a href="./dicom/generator.html">generator</a>,
+    <a href="./dicom/synthetic-data.html">synthetic-data</a></li>
+</ul>
+<br>&nbsp;
+</div>
+
+</body>
+
+</html>

nv/html/dwv/tests/math/matrix.test.js

@@ -0,0 +1,32 @@
+/**
+ * Tests for the 'math/point.js' file.
+ */
+/** @module tests/math */
+// Do not warn if these variables were not defined before.
+/* global QUnit */
+QUnit.module("matrix");
+
+/**
+ * Tests for {@link dwv.math.Matrix33}.
+ * @function module:tests/math~Matrix33
+ */
+QUnit.test("Test Matrix44.", function (assert) {
+    var m0 = new dwv.math.getIdentityMat33();
+    var m1 = new dwv.math.getIdentityMat33();
+    var m2 = new dwv.math.Matrix33(
+        1, 2, 3,
+        4, 5, 6,
+        7, 8, 9 );
+
+    // equals
+    assert.equal(m0.equals(m1), true, "equals true");
+    assert.equal(m0.equals(m2), false, "equals false");
+
+    // get
+    assert.equal(m2.get(0,0), 1, "get(0,0)");
+    assert.equal(m2.get(0,1), 2, "get(0,1)");
+    assert.equal(m2.get(0,2), 3, "get(0,2)");
+    assert.equal(m2.get(1,0), 4, "get(1,0)");
+    assert.equal(m2.get(1,1), 5, "get(1,1)");
+    assert.equal(m2.get(1,2), 6, "get(1,2)");
+});

nv/html/dwv/tests/math/point.test.js

@@ -0,0 +1,146 @@
+/**
+ * Tests for the 'math/point.js' file.
+ */
+/** @module tests/math */
+// Do not warn if these variables were not defined before.
+/* global QUnit */
+QUnit.module("point");
+
+/**
+ * Tests for {@link dwv.math.Point2D}.
+ * @function module:tests/math~Point2D
+ */
+QUnit.test("Test Point2D.", function (assert) {
+    var p0 = new dwv.math.Point2D(1,2);
+    // getX
+    assert.equal(p0.getX(), 1, "getX");
+    // getY
+    assert.equal(p0.getY(), 2, "getY");
+    // can't modify internal x
+    p0.x = 3;
+    assert.equal(p0.getX(), 1, "getX after .x");
+    // can't modify internal y
+    p0.y = 3;
+    assert.equal(p0.getY(), 2, "getY after .y");
+    // equals: true
+    var p1 = new dwv.math.Point2D(1,2);
+    assert.equal(p0.equals(p1), true, "equals true");
+    // equals: false
+    assert.equal(p0.equals(null), false, "null equals false");
+    var p2 = new dwv.math.Point2D(2,1);
+    assert.equal(p0.equals(p2), false, "equals false");
+    // to string
+    assert.equal(p0.toString(), "(1, 2)", "toString");
+
+    // distance
+    var p30 = new dwv.math.Point2D(1,3);
+    assert.equal(p0.getDistance(p30), 1, "getDistance #1");
+    var p31 = new dwv.math.Point2D(2,2);
+    assert.equal(p0.getDistance(p31), 1, "getDistance #2");
+    var p32 = new dwv.math.Point2D(2,1);
+    assert.equal(p0.getDistance(p32), Math.sqrt(2), "getDistance #3");
+    var p33 = new dwv.math.Point2D(0,1);
+    assert.equal(p0.getDistance(p33), Math.sqrt(2), "getDistance #4");
+
+});
+
+/**
+ * Tests for {@link dwv.math.FastPoint2D}.
+ * @function module:tests/math~FastPoint2D
+ */
+QUnit.test("Test FastPoint2D.", function (assert) {
+    var p0 = new dwv.math.FastPoint2D(1,2);
+    // x
+    assert.equal(p0.x, 1, "x");
+    // y
+    assert.equal(p0.y, 2, "y");
+    // can modify x
+    p0.x = 3;
+    assert.equal(p0.x, 3, "modified x");
+    // can modify y
+    p0.y = 4;
+    assert.equal(p0.y, 4, "modified y");
+    // equals: true
+    var p1 = new dwv.math.FastPoint2D(3,4);
+    assert.equal(p0.equals(p1), true, "equals true");
+    // equals: false
+    assert.equal(p0.equals(null), false, "null equals false");
+    var p2 = new dwv.math.FastPoint2D(4,3);
+    assert.equal(p0.equals(p2), false, "equals false");
+    // to string
+    assert.equal(p0.toString(), "(3, 4)", "toString");
+});
+
+/**
+ * Tests for {@link dwv.math.Point3D}.
+ * @function module:tests/math~Point3D
+ */
+QUnit.test("Test Point3D.", function (assert) {
+    var p0 = new dwv.math.Point3D(1,2,3);
+    // getX
+    assert.equal(p0.getX(), 1, "getX");
+    // getY
+    assert.equal(p0.getY(), 2, "getY");
+    // getZ
+    assert.equal(p0.getZ(), 3, "getZ");
+    // can't modify internal x
+    p0.x = 3;
+    assert.equal(p0.getX(), 1, "getX after .x");
+    // can't modify internal y
+    p0.y = 3;
+    assert.equal(p0.getY(), 2, "getY after .y");
+    // can't modify internal z
+    p0.z = 3;
+    assert.equal(p0.getZ(), 3, "getZ after .z");
+    // equals: true
+    var p1 = new dwv.math.Point3D(1,2,3);
+    assert.equal(p0.equals(p1), true, "equals true");
+    // equals: false
+    assert.equal(p0.equals(null), false, "null equals false");
+    var p2 = new dwv.math.Point3D(3,2,1);
+    assert.equal(p0.equals(p2), false, "equals false");
+    // to string
+    assert.equal(p0.toString(), "(1, 2, 3)", "toString");
+
+    // distance
+    var p30 = new dwv.math.Point3D(1,2,4);
+    assert.equal(p0.getDistance(p30), 1, "getDistance #1");
+    var p31= new dwv.math.Point3D(2,2,3);
+    assert.equal(p0.getDistance(p31), 1, "getDistance #2");
+    var p32 = new dwv.math.Point3D(2,1,3);
+    assert.equal(p0.getDistance(p32), Math.sqrt(2), "getDistance #3");
+    var p33 = new dwv.math.Point3D(0,1,3);
+    assert.equal(p0.getDistance(p33), Math.sqrt(2), "getDistance #4");
+});
+
+/**
+ * Tests for {@link dwv.math.Index3D}.
+ * @function module:tests/math~Index3D
+ */
+QUnit.test("Test Index3D.", function (assert) {
+    var i0 = new dwv.math.Index3D(1,2,3);
+    // getX
+    assert.equal(i0.getI(), 1, "getI");
+    // getY
+    assert.equal(i0.getJ(), 2, "getJ");
+    // getZ
+    assert.equal(i0.getK(), 3, "getK");
+    // can't modify internal i
+    i0.i = 3;
+    assert.equal(i0.getI(), 1, "getI after .i");
+    // can't modify internal j
+    i0.j = 3;
+    assert.equal(i0.getJ(), 2, "getJ after .j");
+    // can't modify internal k
+    i0.k = 3;
+    assert.equal(i0.getK(), 3, "getK after .k");
+    // equals: true
+    var i1 = new dwv.math.Index3D(1,2,3);
+    assert.equal(i0.equals(i1), true, "equals true");
+    // equals: false
+    assert.equal(i0.equals(null), false, "null equals false");
+    var i2 = new dwv.math.Index3D(3,2,1);
+    assert.equal(i0.equals(i2), false, "equals false");
+    // to string
+    assert.equal(i0.toString(), "(1, 2, 3)", "toString");
+});

nv/html/dwv/tests/math/shapes.test.js

@@ -0,0 +1,206 @@
+/**
+ * Tests for the 'math/shapes.js' file.
+ */
+// Do not warn if these variables were not defined before.
+/* global QUnit */
+QUnit.module("shapes");
+
+/**
+ * Tests for {@link dwv.math.Circle}.
+ * @function module:tests/math~Circle
+ */
+QUnit.test("Test Circle.", function (assert) {
+    var center = new dwv.math.Point2D(0,0);
+    var c0 = new dwv.math.Circle(center,2);
+    // getCenter
+    assert.equal(c0.getCenter(), center, "getCenter");
+    // getRadius
+    assert.equal(c0.getRadius(), 2, "getRadius");
+    // getSurface
+    assert.equal(c0.getSurface(), Math.PI*2*2, "getSurface");
+    // equals: true
+    assert.equal(c0.getWorldSurface(0.5,0.5), Math.PI, "getWorldSurface");
+});
+
+/**
+ * Tests for {@link dwv.math.Ellipse}.
+ * @function module:tests/math~Ellipse
+ */
+QUnit.test("Test Ellipse.", function (assert) {
+    var center = new dwv.math.Point2D(0,0);
+    var e0 = new dwv.math.Ellipse(center,2,4);
+    // getCenter
+    assert.equal(e0.getCenter(), center, "getCenter");
+    // getA
+    assert.equal(e0.getA(), 2, "getA");
+    // getB
+    assert.equal(e0.getB(), 4, "getB");
+    // getSurface
+    assert.equal(e0.getSurface(), Math.PI*2*4, "getSurface");
+    // equals: true
+    assert.equal(e0.getWorldSurface(0.5,0.25), Math.PI, "getWorldSurface");
+});
+
+/**
+ * Tests for {@link dwv.math.Line}.
+ * @function module:tests/math~Line
+ */
+QUnit.test("Test Line.", function (assert) {
+    var p0 = new dwv.math.Point2D(0,0);
+    var p1 = new dwv.math.Point2D(0,-5);
+    var l0 = new dwv.math.Line(p0,p1);
+    // getBegin
+    assert.equal(l0.getBegin(), p0, "getBegin");
+    // getEnd
+    assert.equal(l0.getEnd(), p1, "getEnd");
+    // getLength
+    assert.equal(l0.getLength(), 5, "getLength");
+    // getWorldLength
+    assert.equal(l0.getWorldLength(0.5,0.5), 2.5, "getWorldLength");
+    // getMidpoint
+    var pMid = new dwv.math.Point2D(0,-2); // rounded...
+    assert.equal(l0.getMidpoint().equals(pMid), true, "getMidpoint");
+    // slope
+    var p20 = new dwv.math.Point2D(1,1);
+    var l10 = new dwv.math.Line(p0,p20);
+    assert.equal(l10.getSlope(), 1, "getSlope");
+    var p21 = new dwv.math.Point2D(1,-1);
+    var l11 = new dwv.math.Line(p0,p21);
+    assert.equal(l11.getSlope(), -1, "getSlope (negative)");
+    var p3 = new dwv.math.Point2D(1,0);
+    var l2 = new dwv.math.Line(p0,p3);
+    assert.equal(l2.getSlope(), 0, "getSlope (horizontal)");
+    assert.equal(l0.getSlope(), -Infinity, "getSlope (vertical)");
+    // inclination
+    assert.equal(l10.getInclination(), 135, "Inclination"); // 180 - 45
+    assert.equal(l11.getInclination(), 225, "Inclination (negative)"); // 180 + 45
+    assert.equal(l2.getInclination(), 180, "Inclination (horizontal)");
+    assert.equal(l0.getInclination(), 270, "Inclination (vertical)"); // 180 + 90
+    // angle
+    assert.equal(dwv.math.getAngle(l10, l11), 90, "getAngle");
+    var p4 = new dwv.math.Point2D(0,-1);
+    var p5 = new dwv.math.Point2D(1,-1);
+    var l3 = new dwv.math.Line(p4,p5);
+    assert.equal(dwv.math.getAngle(l2, l3), 180, "getAngle (horizontal parallel)");
+    var l4 = new dwv.math.Line(p3,p21);
+    assert.equal(dwv.math.getAngle(l0, l4), 180, "getAngle (vertical parallel)");
+    // intercept
+    assert.equal(l10.getIntercept(), 0, "getIntercept (zero)");
+    var p6 = new dwv.math.Point2D(0,1);
+    var p7 = new dwv.math.Point2D(1,2);
+    var l5 = new dwv.math.Line(p6,p7);
+    assert.equal(l5.getIntercept(), 1, "getIntercept");
+    var p8 = new dwv.math.Point2D(0,-1);
+    var p9 = new dwv.math.Point2D(1,-2);
+    var l6 = new dwv.math.Line(p8,p9);
+    assert.equal(l6.getIntercept(), -1, "getIntercept (negative)");
+    var p10 = new dwv.math.Point2D(0,1);
+    var p11 = new dwv.math.Point2D(-1,2);
+    var l7 = new dwv.math.Line(p10,p11);
+    assert.equal(l7.getIntercept(), 1, "getIntercept (back)");
+    var p12 = new dwv.math.Point2D(0,-1);
+    var p13 = new dwv.math.Point2D(-1,-2);
+    var l8 = new dwv.math.Line(p12,p13);
+    assert.equal(l8.getIntercept(), -1, "getIntercept (back negative)");
+    // perpendicular
+    var l0p = dwv.math.getPerpendicularLine(l0, p0, 2);
+    var pl0pbeg = new dwv.math.Point2D(-1,0);
+    assert.ok(l0p.getBegin().equals( pl0pbeg ), "perpendicular horizon begin");
+    var pl0pend = new dwv.math.Point2D(1,0);
+    assert.ok(l0p.getEnd().equals( pl0pend ), "perpendicular horizon end");
+
+    var l2p = dwv.math.getPerpendicularLine(l2, p0, 2);
+    var pl2pbeg = new dwv.math.Point2D(0,-1);
+    assert.ok(l2p.getBegin().equals( pl2pbeg ), "perpendicular vertical begin");
+    var pl2pend = new dwv.math.Point2D(0,1);
+    assert.ok(l2p.getEnd().equals( pl2pend ), "perpendicular vertical end");
+
+    var isSimilar = function (a, b) {
+        return Math.abs(a-b) < 1e-10;
+    };
+    var isSimilarPoint2D = function (p0, p1) {
+        return isSimilar(p0.getX(), p1.getX()) &&
+            isSimilar(p0.getY(), p1.getY());
+    };
+
+    var l5p = dwv.math.getPerpendicularLine(l5, p6, 2);
+    var halfSqrt2 = Math.sqrt(2) / 2;
+    var pl5pbeg = new dwv.math.Point2D(-halfSqrt2,1 + halfSqrt2);
+    assert.ok(isSimilarPoint2D(l5p.getBegin(), pl5pbeg ), "perpendicular begin");
+    var pl5pend = new dwv.math.Point2D(halfSqrt2,1 - halfSqrt2);
+    assert.ok(isSimilarPoint2D(l5p.getEnd(), pl5pend ), "perpendicular end");
+});
+
+/**
+ * Tests for {@link dwv.math.Rectangle}.
+ * @function module:tests/math~Rectangle
+ */
+QUnit.test("Test Rectangle.", function (assert) {
+    var p0 = new dwv.math.Point2D(0,0);
+    var p1 = new dwv.math.Point2D(-4,-4);
+    var r0 = new dwv.math.Rectangle(p0,p1);
+    // getBegin
+    assert.equal(r0.getBegin().equals(p1), true, 'getBegin');
+    // getEnd
+    assert.equal(r0.getEnd().equals(p0), true, "getEnd");
+    // getRealWidth
+    assert.equal(r0.getRealWidth(), 4, "getRealWidth");
+    // getRealHeight
+    assert.equal(r0.getRealHeight(), 4, "getRealHeight");
+    // getWidth
+    assert.equal(r0.getWidth(), 4, "getWidth");
+    // getHeight
+    assert.equal(r0.getHeight(), 4, "getHeight");
+    // getSurface
+    assert.equal(r0.getSurface(), 16, "getSurface");
+    // getWorldSurface
+    assert.equal(r0.getWorldSurface(0.5,0.5), 4, "getWorldSurface");
+});
+
+/**
+ * Tests for {@link dwv.math.ROI}.
+ * @function module:tests/math~ROI
+ */
+QUnit.test("Test ROI.", function (assert) {
+    var r0 = new dwv.math.ROI();
+    // getLength
+    assert.equal(r0.getLength(), 0, "getLength");
+    // add a point
+    var p0 = new dwv.math.Point2D(0,0);
+    r0.addPoint(p0);
+    // getLength
+    assert.equal(r0.getLength(), 1, "getLength");
+    // add another point
+    var p1 = new dwv.math.Point2D(-4,-4);
+    r0.addPoint(p1);
+    // getPoint first
+    assert.equal(r0.getPoint(0), p0, "getPoint first");
+    // getPoint second
+    assert.equal(r0.getPoint(1), p1, "getPoint second");
+});
+
+/**
+ * Tests for {@link dwv.math.Path}.
+ * @function module:tests/math~Path
+ */
+QUnit.test("Test Path.", function (assert) {
+    var path0 = new dwv.math.Path();
+    // getLength
+    assert.equal(path0.getLength(), 0, "getLength");
+    // add a point
+    var p0 = new dwv.math.Point2D(0,0);
+    path0.addPoint(p0);
+    // getLength
+    assert.equal(path0.getLength(), 1, "getLength");
+    // add another point
+    var p1 = new dwv.math.Point2D(-4,-4);
+    path0.addPoint(p1);
+    // getPoint first
+    assert.equal(path0.getPoint(0), p0, "getPoint first");
+    // getPoint second
+    assert.equal(path0.getPoint(1), p1, "getPoint second");
+    // add first point a control point
+    path0.addControlPoint(p0);
+    // check if control point
+    assert.equal(path0.isControlPoint(p0), 1, "isControlPoint");
+});

nv/html/dwv/tests/math/stats.test.js

@@ -0,0 +1,60 @@
+/**
+ * Tests for the 'math/stats.js' file.
+ */
+// Do not warn if these variables were not defined before.
+/* global QUnit */
+QUnit.module("stats");
+
+/**
+ * Tests for {@link dwv.math.getStats}.
+ * @function module:tests/math~getStats
+ */
+QUnit.test("Test getStats.", function (assert) {
+    var arr0 = [1, 2, 3, 4, 5];
+    var q0 = dwv.math.getStats(arr0);
+    // min
+    assert.equal(q0.min, 1, "min.0");
+    // max
+    assert.equal(q0.max, 5, "max.0");
+    // mean
+    assert.equal(q0.mean, 3, "mean.0");
+    // stdDev
+    assert.equal(q0.stdDev, 1.4142135623730951, "stdDev.0");
+
+    var arr1 = [9, 2, 5, 4, 12, 7, 8, 11, 9, 3, 7, 4, 12, 5, 4, 10, 9, 6, 9, 4];
+    var q1 = dwv.math.getStats(arr1);
+    // min
+    assert.equal(q1.min, 2, "min.1");
+    // max
+    assert.equal(q1.max, 12, "max.1");
+    // mean
+    assert.equal(q1.mean, 7, "mean.1");
+    // stdDev
+    assert.equal(q1.stdDev, 2.9832867780352594, "stdDev.1");
+});
+
+/**
+ * Tests for {@link dwv.math.guid}.
+ * @function module:tests/math~guid
+ */
+QUnit.test("Test GUID.", function (assert) {
+    var id0 = dwv.math.guid();
+    var id1 = dwv.math.guid();
+    assert.equal((id0 === id1), false, "Two GUids should not be equal.");
+
+    var duplicates = 0;
+    // create an array of guids
+    var ids = [];
+    for (var i = 0; i < 1000; ++i) {
+        ids[ids.length] = dwv.math.guid();
+    }
+    // check duplicates
+    var id = 0;
+    for (i = 0; i < ids.length - 1; ++i) {
+        id = ids.pop();
+        if (ids.indexOf(id) !== -1) {
+            ++duplicates;
+        }
+    }
+    assert.equal(duplicates, 0, "1000 GUids should not be equal.");
+});

nv/html/dwv/tests/math/vector.test.js

@@ -0,0 +1,124 @@
+/**
+ * Tests for the 'math/point.js' file.
+ */
+/** @module tests/math */
+// Do not warn if these variables were not defined before.
+/* global QUnit */
+QUnit.module("vector");
+
+/**
+ * Tests for {@link dwv.math.Vector3D}.
+ * @function module:tests/math~Vector3D
+ */
+QUnit.test("Test Vector3D.", function (assert) {
+    var v0 = new dwv.math.Vector3D(1,2,3);
+    // getX
+    assert.equal(v0.getX(), 1, "getX");
+    // getY
+    assert.equal(v0.getY(), 2, "getY");
+    // getZ
+    assert.equal(v0.getZ(), 3, "getZ");
+    // can't modify internal x
+    v0.x = 3;
+    assert.equal(v0.getX(), 1, "getX after .x");
+    // can't modify internal y
+    v0.y = 3;
+    assert.equal(v0.getY(), 2, "getY after .y");
+    // can't modify internal z
+    v0.z = 3;
+    assert.equal(v0.getZ(), 3, "getZ after .z");
+    // equals: true
+    var v1 = new dwv.math.Vector3D(1,2,3);
+    assert.equal(v0.equals(v1), true, "equals true");
+    // equals: false
+    assert.equal(v0.equals(null), false, "null equals false");
+    var v2 = new dwv.math.Vector3D(3,2,1);
+    assert.equal(v0.equals(v2), false, "equals false");
+    // to string
+    assert.equal(v0.toString(), "(1, 2, 3)", "toString");
+
+    // norm
+    var v10 = new dwv.math.Vector3D(1,0,0);
+    assert.equal(v10.norm(), 1, "norm unit #0");
+    var v11 = new dwv.math.Vector3D(0,1,0);
+    assert.equal(v11.norm(), 1, "norm unit#1");
+    var v12 = new dwv.math.Vector3D(0,0,1);
+    assert.equal(v12.norm(), 1, "norm unit #2");
+
+    var v13 = new dwv.math.Vector3D(1,1,0);
+    assert.equal(v13.norm(), Math.sqrt(2), "norm other #0");
+    var v14 = new dwv.math.Vector3D(0,1,1);
+    assert.equal(v14.norm(), Math.sqrt(2), "norm other #1");
+    var v15 = new dwv.math.Vector3D(1,0,1);
+    assert.equal(v15.norm(), Math.sqrt(2), "norm other #2");
+    var v16 = new dwv.math.Vector3D(1,1,1);
+    assert.equal(v16.norm(), Math.sqrt(3), "norm other #3");
+    var v17 = new dwv.math.Vector3D(1,2,3);
+    assert.equal(v17.norm(), Math.sqrt(14), "norm other #4");
+});
+
+/**
+ * Tests for {@link dwv.math.Vector3D}.
+ * @function module:tests/math~Vector3D
+ */
+QUnit.test("Test Vector3D crossProduct.", function (assert) {
+    // test vectors
+    var v0 = new dwv.math.Vector3D(0,0,0);
+    var v0x = new dwv.math.Vector3D(1,0,0);
+    var v0y = new dwv.math.Vector3D(0,1,0);
+    var v0my = new dwv.math.Vector3D(0,-1,0);
+    var v0z = new dwv.math.Vector3D(0,0,1);
+    var v0mz = new dwv.math.Vector3D(0,0,-1);
+
+    // self cross product is zero vector
+    assert.equal(v0x.crossProduct(v0x).equals(v0), true, "crossProduct self");
+
+    // cross product of parallel vector is zero vector
+    var v1x = new dwv.math.Vector3D(2,0,0);
+    assert.equal(v0x.crossProduct(v1x).equals(v0), true, "crossProduct parallel #0");
+    var v1y = new dwv.math.Vector3D(0,6,0);
+    assert.equal(v0y.crossProduct(v1y).equals(v0), true, "crossProduct parallel #1");
+    var v10 = new dwv.math.Vector3D(1,1,1);
+    var v11 = new dwv.math.Vector3D(5,5,5);
+    assert.equal(v10.crossProduct(v11).equals(v0), true, "crossProduct parallel #2");
+    var v12 = new dwv.math.Vector3D(-5,-5,-5);
+    assert.equal(v10.crossProduct(v12).equals(v0), true, "crossProduct parallel #3");
+
+    // unit vectors
+    assert.equal(v0x.crossProduct(v0y).equals(v0z), true, "crossProduct unit #0");
+    // anticommutative a * b = - (b * a)
+    assert.equal(v0y.crossProduct(v0x).equals(v0mz), true, "crossProduct unit #1");
+    assert.equal(v0z.crossProduct(v0x).equals(v0y), true, "crossProduct unit #2");
+    assert.equal(v0x.crossProduct(v0z).equals(v0my), true, "crossProduct unit #3");
+});
+
+/**
+ * Tests for {@link dwv.math.Vector3D}.
+ * @function module:tests/math~Vector3D
+ */
+QUnit.test("Test Vector3D dotProduct.", function (assert) {
+    // orthogonal
+    var v00 = new dwv.math.Vector3D(1,0,0);
+    var v01 = new dwv.math.Vector3D(0,1,0);
+    assert.equal(v00.dotProduct(v01), 0, "dotProduct orthogonal #0");
+    var v02 = new dwv.math.Vector3D(0,0,1);
+    assert.equal(v00.dotProduct(v02), 0, "dotProduct orthogonal #1");
+
+    // parallel
+    var v10 = new dwv.math.Vector3D(2,0,0);
+    assert.equal(v00.dotProduct(v10), 2, "dotProduct parallel #0");
+    var v11 = new dwv.math.Vector3D(-1,0,0);
+    assert.equal(v00.dotProduct(v11), -1, "dotProduct parallel #1");
+
+    var simiFunc = function (a,b) {
+        return Math.abs(a - b) < 1e-6;
+    };
+
+    // regular
+    var v20 = new dwv.math.Vector3D(1,1,0);
+    var dot20 = v20.norm() * v00.norm() * Math.cos(Math.PI/4);
+    assert.equal(simiFunc(v20.dotProduct(v00), dot20), true, "dotProduct regular #0");
+    var v21 = new dwv.math.Vector3D(0,1,0);
+    var dot21 = v20.norm() * v21.norm() * Math.cos(Math.PI/4);
+    assert.equal(simiFunc(v20.dotProduct(v21), dot21), true, "dotProduct regular #1");
+});

nv/html/dwv/tests/pacs/index.html

@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>My (fake) PACS</title>
+<style>
+body {
+    background-color: #efefef;
+    font-family: Arial, Helvetica, sans-serif;
+}
+.listview img {float:left; padding:0px 10px 10px 0px;}
+.listview li {list-style-type: none; padding-top: 10px;}
+ul li {clear:both;}
+ul li h2 {font-size:90%;}
+ul a {text-decoration:none;}
+ul li p {font-size:80%;}
+</style>
+<!-- Can't make it work, problem of DOM loading, all pages loaded after are messed up...
+(see http://jquerymobile.com/demos/1.3.0/docs/faq/dom-ready-not-working.html )...-->
+<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
+<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
+<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>-->
+<script type="text/javascript">
+var githubRaw = "https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/";
+var dataDicom = [
+    {
+    title: "Baby MRI",
+    uri: githubRaw + "?file=bbmri-53323851.dcm&file=bbmri-53323707.dcm&file=bbmri-53323563.dcm&file=bbmri-53323419.dcm&file=bbmri-53323275.dcm&file=bbmri-53323131.dcm",
+    uriargs: "&dwvReplaceMode=void",
+    img: "babymri.png",
+    desc: "Brain MR, 256*256*5, LittleEndianExplicit [1.2.840.10008.1.2.1], bits: 16-12-11"
+    },
+    {
+    title: "Toutatix",
+    uri: githubRaw + "?file=osirix-toutatix-100.dcm&file=osirix-toutatix-101.dcm",
+    uriargs: "&dwvReplaceMode=void",
+    img: "toutatix.png",
+    desc: "Chest CT(A), 512*512*1, LittleEndianExplicit [1.2.840.10008.1.2.1], bits: 16-12-11, from the Osirix examples, hosted on the dwv github."
+    },
+    {
+    title: "Goudurix",
+    uri: githubRaw + "osirix-goudurix.dcm",
+    img: "goudurix.png",
+    desc: "Chest CT(A), 512*512*1, LittleEndianImplicit [1.2.840.10008.1.2], bits: 16-12-11, from the Osirix examples, hosted on the dwv github.",
+    },
+    {
+    title: "US",
+    uri: githubRaw + "gdcm-US-RGB-8-epicard.dcm",
+    img: "us.png",
+    desc: "US, 640*480*1, BigEndianExplicit [1.2.840.10008.1.2.2], bits: 8-8-7, from the GDCM examples, hosted on the dwv github.",
+    },
+    {
+    title: "Cerebrix",
+    uri: githubRaw + "osirix-cerebrix.dcm",
+    img: "cerebrix.png",
+    desc: "Brain SC (Secondary Capture), 176*224*1, JPEG2000 [1.2.840.10008.1.2.4.91], bits: 16-16-15, from the Osirix examples, hosted on the dwv github.",
+    },
+    {
+    title: "Multiframe",
+    uri: githubRaw + "multiframe-test1.dcm",
+    img: "multiframe-test1.png",
+    desc: "Heart MR, 256*256*1*16, LittleEndianExplicit [1.2.840.10008.1.2.1], bits: 8-8-7, contributed by @yulia-tue, hosted on the dwv github.",
+    }
+    ];
+var dataImg = [
+    {
+    title: "JPEG",
+    uri: "https://upload.wikimedia.org/wikipedia/commons/c/c6/PET-image.jpg",
+    img: "brainpet-jpg.png",
+    desc: "Brain PET from wikipedia (https://en.wikipedia.org/wiki/File:PET-image.jpg), 531*600*1."
+    },
+    {
+    title: "PNG",
+    uri: "https://upload.wikimedia.org/wikipedia/commons/7/7f/Brain_MRI_112010_rgbca.png",
+    img: "brainmri-png.png",
+    desc: "Brain MRI from wikipedia (https://en.wikipedia.org/wiki/File:Brain_MRI_112010_rgbca.png), 389*504*1."
+    },
+    {
+    title: "JPG",
+    uri: "https://upload.wikimedia.org/wikipedia/commons/0/0e/Acute_leukemia-ALL.jpg",
+    img: "acute_leukemia.png",
+    desc: "Acute Leukimia from wikipedia (https://en.wikipedia.org/wiki/File:Acute_leukemia-ALL.jpg), 347*395*1."
+    }
+    ];
+
+function setDwv(obj)
+{
+    // update page links
+    var elements = document.getElementsByClassName('dwvlink');
+    var tmp;
+    var url;
+    for (var i = 0; i < elements.length; ++i) {
+        url = getDwvBaseUrl(obj.value)
+        tmp = elements[i].href.split('?');
+        if ( tmp.length === 2 ) {
+            url += '?'+tmp[1];
+        }
+        elements[i].href = url;
+    }
+}
+function getDwvBaseUrl(flag)
+{
+    var path = "../../viewers";
+    if( flag === "dwvmobile" ) {
+        path += "/mobile";
+    } else if( flag === "dwvstatic" ) {
+        path += "/static";
+    } else if( flag === "dwvsimple" ) {
+        path += "/simple";
+    } else if( flag === "dwvsimplistic" ) {
+        path += "/simplistic";
+    }
+    path += "/index.html";
+    return path;
+}
+function getDwvUrl(uri)
+{
+    var flag = "dwvmobile";
+    if( document.getElementById('select-dwv') ) {
+        var select = document.getElementById('select-dwv');
+        flag = select.options[select.selectedIndex].value;
+    }
+    var url = getDwvBaseUrl(flag);
+    if ( typeof uri !== "undefined" ) {
+        url += "?input="+encodeURIComponent(uri);
+    }
+    return url;
+}
+function createAndPutHtml(data, id)
+{
+    for( var i = 0; i < data.length; ++i )
+    {
+        // image
+        var image = document.createElement("img");
+        image.src = "images/"+data[i].img;
+        // title
+        var title = document.createElement("h2");
+        title.appendChild(document.createTextNode(data[i].title));
+        // description
+        var desc = document.createElement("p");
+        desc.appendChild(document.createTextNode(data[i].desc));
+        if( data[i].comment ) {
+            var comment = document.createElement("b");
+            comment.appendChild(document.createTextNode(" "+data[i].comment));
+            desc.appendChild(comment);
+        }
+
+        // link
+        var link = document.createElement("a");
+        link.href = getDwvUrl(data[i].uri);
+        if( data[i].uriargs ) {
+            link.href += data[i].uriargs;
+        }
+        link.className = "dwvlink";
+        link.appendChild(image);
+
+        // list item
+        var li = document.createElement("li");
+        li.appendChild(link);
+        li.appendChild(title);
+        li.appendChild(desc);
+        var ul = document.getElementById(id);
+        ul.appendChild(li);
+    }
+}
+
+// create html once ready
+window.onload = function() {
+    createAndPutHtml(dataDicom, "uldatadicom");
+    createAndPutHtml(dataImg, "uldataimg");
+    document.getElementById("empty-launch").href = getDwvUrl();
+};
+</script>
+</head>
+<body>
+
+<div data-role="page">
+<div data-role="content">
+
+<h1>My (fake) PACS</h1>
+
+<p>These are a few data example that are displayed as they could
+be on a web interface to a PACS system. Click on the list item to launch DWV with the selected data.
+Direct link: <a href="#" id="empty-launch" class="dwvlink">launch</a>.</p>
+
+<div data-role="fieldcontain">
+<label for="select-dwv">Choose which DWV to launch:</label>
+<select id="select-dwv" data-inline="true" data-mini="true" onClick="setDwv(this);">
+<option value="dwvmobile">DWV Mobile</option>
+<option value="dwvstatic">DWV Static</option>
+<option value="dwvsimple">DWV Simple</option>
+<option value="dwvsimplistic">DWV Simplistic</option>
+</select> 
+</div>
+
+<ul class="listview" data-role="listview" data-inset="true" id="uldatadicom"></ul>
+
+<br style="clear:both">
+
+<p>Non DICOM Image formats:</p>
+<ul class="listview" data-role="listview" data-inset="true" id="uldataimg"></ul>
+
+<br style="clear:both">
+
+<p>Data sources:</p>
+<ul>
+<li><a href="http://www.babymri.org/">Baby MRI</a></li>
+<li><a href="http://www.osirix-viewer.com/datasets/">Osirix datasets</a></li>
+<li><a href="http://www.creatis.insa-lyon.fr/software/public/Gdcm/Main.html">GDCM (Creatis)</a></li>
+</ul>
+
+</div><!-- /page -->
+</div><!-- /content -->
+
+</body>
+</html>

nv/html/dwv/tests/state/readme.md

@@ -0,0 +1,14 @@
+State test data
+===============
+
+The state data has been linted using [jsonlint](https://www.npmjs.com/package/jsonlint).
+
+With default arguments (2 space indent) and in-place (-i): `jsonlint state.json -i`
+
+ * v0.1: states created with dwv [v0.15.0](https://github.com/ivmartel/dwv/releases/tag/v0.15.0)
+ * v0.2: states created with dwv [v0.17.0](https://github.com/ivmartel/dwv/releases/tag/v0.17.0)
+ * v0.3: states created with dwv [v0.23.0](https://github.com/ivmartel/dwv/releases/tag/v0.23.0)
+
+The single data states are based on the `\tests\state\bbmri-53323131.dcm` file. 
+
+The multi slice data states are based on the `\tests\data\bbmri-*.dcm` files (6 files).

nv/html/dwv/tests/state/state.test.js

@@ -0,0 +1,744 @@
+/**
+ * Tests for the 'app/state.js' file.
+ */
+/** @module tests/state */
+// Do not warn if these variables were not defined before.
+/* global QUnit */
+QUnit.module("state");
+
+/**
+ * Test a state file.
+ * @param {String} version The state format version.
+ * @param {String} type The type of drawing.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.TestState = function ( version, type, assert ) {
+    var done = assert.async();
+    // test file request
+    var request = new XMLHttpRequest();
+    var urlRoot = "https://raw.githubusercontent.com/ivmartel/dwv/master";
+    var url = urlRoot + "/tests/state/v" + version + "/state-" + type + ".json";
+    request.open('GET', url, true);
+    request.onerror = function (event) {
+        console.log(event);
+    };
+    request.onload = function (/*event*/) {
+        // status 200: "OK"; status 0: "debug"
+        if ( this.status !== 200 && this.status !== 0 ) {
+            assert.ok( false, "Error while loading test data." );
+            done();
+            return;
+        }
+        // read state
+        var state = new dwv.State();
+        var jsonData = state.fromJSON( this.responseText );
+        // check drawings values
+        dwv.utils.test.CheckDrawings(
+            jsonData.drawings, jsonData.drawingsDetails, version, type, assert );
+        // delete drawing to allow simple equal check
+        delete jsonData.drawings;
+        delete jsonData.drawingsDetails;
+        // check values expect drawings
+        dwv.utils.test.CheckStateHeader( jsonData, version, assert );
+        // finish async test
+        done();
+    };
+    // send request
+    request.send(null);
+};
+
+/**
+ * Check state header.
+ * @param {Object} jsonData The input data to check.
+ * @param {String} version The state format version.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckStateHeader = function (jsonData, version, assert) {
+    // header data
+    var headerData = {
+        "version": version,
+        "window-center": 441,
+        "window-width": 911,
+        "position": { "i": 0, "j": 0, "k": 0 },
+        "scale": 1,
+        "scaleCenter": { "x": 0, "y": 0 },
+        "translation": { "x": 0,  "y": 0 }
+    };
+    assert.deepEqual( jsonData, headerData );
+};
+
+/**
+ * Check drawings.
+ * @param {Object} drawings The drawing object to check
+ * @param {Object} details The drawing details
+ * @param {String} version The state format version.
+ * @param {String} type The type of drawing.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckDrawings = function (drawings, details, version, type, assert) {
+    // first level: layer
+    assert.equal( drawings.className, "Layer", "State drawings is a layer.");
+
+    // second level: position groups
+    if ( drawings.children.length === 5 &&
+        ( type === "ruler_multi-slice" || type === "line_multi-slice" ) ) {
+        dwv.utils.test.CheckRulerDrawings( drawings.children, details, version, assert );
+    } else if ( drawings.children.length === 1 ) {
+
+        var layerKid = drawings.children[0];
+        assert.equal( layerKid.className, "Group", "Layer first level is a group.");
+        assert.equal( layerKid.attrs.name, "position-group", "Layer first level is a position group.");
+        assert.equal( layerKid.attrs.id, "slice-0_frame-0", "Position group has the proper id.");
+
+        // third level: shape group(s)
+        var posGroupKid = layerKid.children[0];
+        assert.equal( posGroupKid.className, "Group", "Position group first level is a group.");
+
+        // shape specific checks
+        if ( type === "arrow" ) {
+            dwv.utils.test.CheckArrowDrawing( posGroupKid, details, version, assert );
+        } else if ( type === "ruler" && version !== "0.1" ) {
+            var refRuler = {
+                'id': "4gvkz8v6wzw",
+                'points': [51,135,216,134],
+                'colour': "#ffff80",
+                'text': "165.0mm",
+                'textExpr': "{length}",
+                'longText': "What a ruler!"
+            };
+            dwv.utils.test.CheckRulerDrawing( posGroupKid, details, refRuler, assert );
+        } else if ( type === "line" && version === "0.1" ) {
+            var refLine = {
+                'id': "4gvkz8v6wzw",
+                'points': [51,135,216,134],
+                'colour': "#ffff00",
+                'text': "165.0mm",
+                'textExpr': "{length}",
+                'longText': ""
+            };
+            dwv.utils.test.CheckRulerDrawing( posGroupKid, details, refLine, assert );
+        } else if ( type === "roi" ) {
+            dwv.utils.test.CheckRoiDrawing( posGroupKid, details, version, assert );
+        } else if ( type === "hand" ) {
+            dwv.utils.test.CheckHandDrawing( posGroupKid, details, version, assert );
+        } else if ( type === "ellipse" ) {
+            dwv.utils.test.CheckEllipseDrawing( posGroupKid, details, version, assert );
+        } else if ( type === "protractor" ) {
+            dwv.utils.test.CheckProtractorDrawing( posGroupKid, details, version, assert );
+        } else if ( type === "rectangle" ) {
+            dwv.utils.test.CheckRectangleDrawing( posGroupKid, details, version, assert );
+        } else {
+            assert.ok( false, "Unknown draw type." );
+        }
+    } else {
+        assert.ok( false, "Not the expected number of position groups." );
+    }
+};
+
+/**
+ * Check an arrow drawing.
+ * @param {Object} posGroupKid The position group (only) kid.
+ * @param {Object} details The drawing details
+ * @param {String} version The state format version.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckArrowDrawing = function (posGroupKid, details, version, assert) {
+    // check group
+    assert.equal( posGroupKid.attrs.name, "line-group", "Shape group is a line group.");
+    assert.ok( posGroupKid.attrs.draggable, "Shape group must be draggable.");
+    assert.equal( posGroupKid.attrs.id, "pf8zteo5r4", "Position group first level has the proper id.");
+    assert.notEqual( typeof details.pf8zteo5r4, "undefined", "Details should contain data for id.");
+
+    // kids
+    assert.equal( posGroupKid.children.length, 3, "Shape group has 3 kids.");
+    var hasShape = false;
+    var hasLabel = false;
+    var hasPoly = false;
+    for ( var i = 0; i < posGroupKid.children.length; ++i ) {
+        var shapeGroupKid = posGroupKid.children[i];
+        if ( shapeGroupKid.attrs.name === "shape" ) {
+            hasShape = true;
+            assert.equal( shapeGroupKid.className, "Line", "Shape group 'shape' is a line.");
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'shape' must not be draggable.");
+            assert.deepEqual( shapeGroupKid.attrs.points, [53, 136, 139, 89], "Line has the proper points.");
+            assert.equal( shapeGroupKid.attrs.stroke, "#ffff80", "Line has the proper colour.");
+        } else if ( shapeGroupKid.className === "Label" ) {
+            hasLabel = true;
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'label' must not be draggable.");
+            assert.equal( shapeGroupKid.children.length, 2, "Label has 2 kids.");
+            var labelGroupKid0 = shapeGroupKid.children[0];
+            assert.equal( labelGroupKid0.className, "Text", "Label group first level is a text.");
+            assert.equal( labelGroupKid0.attrs.text, "Eye", "Text has the proper value.");
+            var labelGroupKid1 = shapeGroupKid.children[1];
+            assert.equal( labelGroupKid1.className, "Tag", "Label group second level is a tag.");
+        } else if ( shapeGroupKid.className === "RegularPolygon" ) {
+            hasPoly = true;
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'extra' must not be draggable.");
+        }
+    }
+    assert.ok( hasShape, "Shape group contains a shape.");
+    assert.ok( hasLabel, "Shape group contains a label.");
+    assert.ok( hasPoly, "Shape group contains a polygon.");
+
+    // details
+    var details0 = details.pf8zteo5r4;
+    assert.equal( details0.textExpr, "Eye", "Details textExpr has the proper value.");
+    assert.equal( details0.longText, "This is an eye!", "Details longText has the proper value.");
+};
+
+/**
+ * Check a ruler drawing.
+ * @param {Object} posGroupKid The position group (only) kid.
+ * @param {Object} details The drawing details
+ * @param {String} ref The reference data to compare to.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckRulerDrawing = function (posGroupKid, details, ref, assert) {
+    // check group
+    assert.equal( posGroupKid.attrs.name, "ruler-group", "Shape group is a ruler group.");
+    assert.ok( posGroupKid.attrs.draggable, "Shape group must be draggable.");
+    assert.equal( posGroupKid.attrs.id, ref.id, "Position group first level has the proper id.");
+    assert.notEqual( typeof details[ref.id], "undefined", "Details should contain data for id.");
+
+    // kids
+    assert.equal( posGroupKid.children.length, 4, "Shape group has 4 kids.");
+    var hasShape = false;
+    var hasLabel = false;
+    var hasTick1 = false;
+    var hasTick2 = false;
+    for ( var i = 0; i < posGroupKid.children.length; ++i ) {
+        var shapeGroupKid = posGroupKid.children[i];
+        if ( shapeGroupKid.attrs.name === "shape" ) {
+            hasShape = true;
+            assert.equal( shapeGroupKid.className, "Line", "Shape group 'shape' is a line.");
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'shape' must not be draggable.");
+            assert.deepEqual( shapeGroupKid.attrs.points, ref.points, "Line has the proper points.");
+            assert.equal( shapeGroupKid.attrs.stroke, ref.colour, "Line has the proper colour.");
+        } else if ( shapeGroupKid.className === "Label" ) {
+            hasLabel = true;
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'label' must not be draggable.");
+            assert.equal( shapeGroupKid.children.length, 2, "Label has 2 kids.");
+            var labelGroupKid0 = shapeGroupKid.children[0];
+            assert.equal( labelGroupKid0.className, "Text", "Label group first level is a text.");
+            assert.equal( labelGroupKid0.attrs.text, ref.text, "Text has the proper value.");
+            var labelGroupKid1 = shapeGroupKid.children[1];
+            assert.equal( labelGroupKid1.className, "Tag", "Label group second level is a tag.");
+        } else if ( shapeGroupKid.className === "Line" ) {
+            if ( hasTick1 ) {
+                hasTick2 = true;
+            } else {
+                hasTick1 = true;
+            }
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'extra' must not be draggable.");
+        }
+    }
+    assert.ok( hasShape, "Shape group contains a shape.");
+    assert.ok( hasLabel, "Shape group contains a label.");
+    assert.ok( hasTick1, "Shape group contains a tick1.");
+    assert.ok( hasTick2, "Shape group contains a tick2.");
+
+    // details
+    var details0 = details[ref.id];
+    assert.equal( details0.textExpr, ref.textExpr, "Details textExpr has the proper value.");
+    assert.equal( details0.longText, ref.longText, "Details longText has the proper value.");
+};
+
+/**
+ * Check a multi slice ruler drawing.
+ * @param {Object} layer The draw layer.
+ * @param {Object} details The drawing details
+ * @param {String} version The state format version.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckRulerDrawings = function (layerKids, details, version, assert) {
+
+    var ndraws = 5;
+    assert.equal( layerKids.length, ndraws, "Layer has " + ndraws + " kids.");
+
+    var refRulers = [
+        {
+            'id': "onzlkbs8p",
+            'points': [120,110,120,60],
+            'colour': "#ffff00",
+            'text': "50.00mm",
+            'textExpr': "{length}",
+            'longText': ( version === "0.1" ? "" : "First ruler." )
+        },
+        {
+            'id': "u9bvidgkjc9",
+            'points': [120,110,170,110],
+            'colour': "#ff0000",
+            'text': "50.00mm",
+            'textExpr': "{length}",
+            'longText': ( version === "0.1" ? "" : "Second ruler." )
+        },
+        {
+            'id': "c9abkegq62j",
+            'points': [120,110,120,160],
+            'colour': "#ffffff",
+            'text': "50.00mm",
+            'textExpr': "{length}",
+            'longText': ( version === "0.1" ? "" : "Third ruler." )
+        },
+        {
+            'id': "uiav43zjw1",
+            'points': [120,110,60,110],
+            'colour': "#00ff00",
+            'text': "50.00mm",
+            'textExpr': "{length}",
+            'longText': ( version === "0.1" ? "" : "Fourth ruler." )
+        },
+        {
+            'id': "26ir11b9ugl",
+            'points': [120,110,120,60],
+            'colour': "#ff00ff",
+            'text': "50.00mm",
+            'textExpr': "{length}",
+            'longText': ( version === "0.1" ? "" : "Fifth ruler." )
+        }
+    ];
+
+    for ( var i = 0; i < ndraws; ++i ) {
+        var layerKid = layerKids[i];
+        assert.equal( layerKid.className, "Group", "Layer first level is a group for slice " + i + ".");
+        assert.equal( layerKid.attrs.name, "position-group", "Layer first level is a position group.");
+        assert.equal( layerKid.attrs.id, "slice-" + (i+1) + "_frame-0", "Position group has the proper id.");
+
+        // third level: shape group(s)
+        var posGroupKid = layerKid.children[0];
+        assert.equal( posGroupKid.className, "Group", "Position group first level is a group.");
+
+        dwv.utils.test.CheckRulerDrawing( posGroupKid, details, refRulers[i], assert );
+    }
+};
+
+/**
+ * Check a roi drawing.
+ * @param {Object} posGroupKid The position group (only) kid.
+ * @param {Object} details The drawing details
+ * @param {String} version The state format version.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckRoiDrawing = function (posGroupKid, details, version, assert) {
+    // check group
+    assert.equal( posGroupKid.attrs.name, "roi-group", "Shape group is a roi group.");
+    assert.ok( posGroupKid.attrs.draggable, "Shape group must be draggable.");
+    assert.equal( posGroupKid.attrs.id, "4l24ofouhmf", "Position group first level has the proper id.");
+    assert.notEqual( typeof details["4l24ofouhmf"], "undefined", "Details should contain data for id.");
+
+    // kids
+    assert.equal( posGroupKid.children.length, 2, "Shape group has 2 kids.");
+    var hasShape = false;
+    var hasLabel = false;
+    for ( var i = 0; i < posGroupKid.children.length; ++i ) {
+        var shapeGroupKid = posGroupKid.children[i];
+        if ( shapeGroupKid.attrs.name === "shape" ) {
+            hasShape = true;
+            assert.equal( shapeGroupKid.className, "Line", "Shape group 'shape' is a line.");
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'shape' must not be draggable.");
+            assert.deepEqual( shapeGroupKid.attrs.points, [126, 40, 58, 80, 60, 116, 92, 128, 93, 143, 93, 151, 94, 151, 114, 150, 128, 150, 214, 135, 183, 56, 182, 56, 182, 56], "Line has the proper points.");
+            var colour = ( version === "0.1" ? "#ffff00" : "#ffff80" );
+            assert.equal( shapeGroupKid.attrs.stroke, colour, "Line has the proper colour.");
+        } else if ( shapeGroupKid.className === "Label" ) {
+            hasLabel = true;
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'label' must not be draggable.");
+            assert.equal( shapeGroupKid.children.length, 2, "Label has 2 kids.");
+            var labelGroupKid0 = shapeGroupKid.children[0];
+            assert.equal( labelGroupKid0.className, "Text", "Label group first level is a text.");
+            if ( version !== "0.1" ) {
+                assert.equal( labelGroupKid0.attrs.text, "Brain", "Text has the proper value.");
+            }
+            var labelGroupKid1 = shapeGroupKid.children[1];
+            assert.equal( labelGroupKid1.className, "Tag", "Label group second level is a tag.");
+        }
+    }
+    assert.ok( hasShape, "Shape group contains a shape.");
+    assert.ok( hasLabel, "Shape group contains a label.");
+
+    // details
+    if ( version !== "0.1" ) {
+        var details0 = details["4l24ofouhmf"];
+        assert.equal( details0.textExpr, "Brain", "Details textExpr has the proper value.");
+        assert.equal( details0.longText, "This is a squary brain!", "Details longText has the proper value.");
+    }
+};
+
+/**
+ * Check a hand drawing.
+ * @param {Object} posGroupKid The position group (only) kid.
+ * @param {Object} details The drawing details
+ * @param {String} version The state format version.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckHandDrawing = function (posGroupKid, details, version, assert) {
+    // check group
+    assert.equal( posGroupKid.attrs.name, "freeHand-group", "Shape group is a freeHand group.");
+    assert.ok( posGroupKid.attrs.draggable, "Shape group must be draggable.");
+    assert.equal( posGroupKid.attrs.id, "08m011yjp8je", "Position group first level has the proper id.");
+    assert.notEqual( typeof details["08m011yjp8je"], "undefined", "Details should contain data for id.");
+
+    // kids
+    assert.equal( posGroupKid.children.length, 2, "Shape group has 2 kids.");
+    var hasShape = false;
+    var hasLabel = false;
+    for ( var i = 0; i < posGroupKid.children.length; ++i ) {
+        var shapeGroupKid = posGroupKid.children[i];
+        if ( shapeGroupKid.attrs.name === "shape" ) {
+            hasShape = true;
+            assert.equal( shapeGroupKid.className, "Line", "Shape group 'shape' is a line.");
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'shape' must not be draggable.");
+            assert.deepEqual( shapeGroupKid.attrs.points, [93,50,92,50,71,58,71,59,68,63,68,64,54,80,54,81,53,83,52,85,51,87,50,92,47,98,47,100,55,117,56,118,86,122,89,126,90,128,90,129,88,131,87,133,86,134,85,138,85,139,85,141,87,143,87,144,87,145,88,147,92,150,97,152,112,154,113,153,136,143,174,136,178,135,191,136,192,136,194,138,196,139,197,141,199,141,200,141,207,140,208,139,211,136,213,134,213,133,213,129,213,126,213,122,210,90,209,87,206,80,205,79,204,78,201,73,199,71,197,70,187,63,184,61,182,59,180,58,174,54,172,52,170,51,168,50,167,49,155,42,154,42,151,42,136,40,134,40,133,40,128,41,126,41,124,41,117,44,116,44,114,44,107,47,102,49,100,49,97,49,93,50,92,50,92,50], "Line has the proper points.");
+            assert.equal( shapeGroupKid.attrs.stroke, "#ffff80", "Line has the proper colour.");
+        } else if ( shapeGroupKid.className === "Label" ) {
+            hasLabel = true;
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'label' must not be draggable.");
+            assert.equal( shapeGroupKid.children.length, 2, "Label has 2 kids.");
+            var labelGroupKid0 = shapeGroupKid.children[0];
+            assert.equal( labelGroupKid0.className, "Text", "Label group first level is a text.");
+            assert.equal( labelGroupKid0.attrs.text, "Brain", "Text has the proper value.");
+            var labelGroupKid1 = shapeGroupKid.children[1];
+            assert.equal( labelGroupKid1.className, "Tag", "Label group second level is a tag.");
+        }
+    }
+    assert.ok( hasShape, "Shape group contains a shape.");
+    assert.ok( hasLabel, "Shape group contains a label.");
+
+    // details
+    var details0 = details["08m011yjp8je"];
+    assert.equal( details0.textExpr, "Brain", "Details textExpr has the proper value.");
+    assert.equal( details0.longText, "This is a roundy brain!", "Details longText has the proper value.");
+};
+
+/**
+ * Check an ellipse drawing.
+ * @param {Object} posGroupKid The position group (only) kid.
+ * @param {Object} details The drawing details
+ * @param {String} version The state format version.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckEllipseDrawing = function (posGroupKid, details, version, assert) {
+    // check group
+    assert.equal( posGroupKid.attrs.name, "ellipse-group", "Shape group is an ellipse group.");
+    assert.ok( posGroupKid.attrs.draggable, "Shape group must be draggable.");
+    assert.equal( posGroupKid.attrs.id, "c6j16qt6vt6", "Position group first level has the proper id.");
+    assert.notEqual( typeof details.c6j16qt6vt6, "undefined", "Details should contain data for id.");
+
+    // kids
+    assert.equal( posGroupKid.children.length, 2, "Shape group has 2 kids.");
+    var hasShape = false;
+    var hasLabel = false;
+    for ( var i = 0; i < posGroupKid.children.length; ++i ) {
+        var shapeGroupKid = posGroupKid.children[i];
+        if ( shapeGroupKid.attrs.name === "shape" ) {
+            hasShape = true;
+            assert.equal( shapeGroupKid.className, "Ellipse", "Shape group 'shape' is an ellipse.");
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'shape' must not be draggable.");
+            assert.deepEqual( shapeGroupKid.attrs.x, 90, "Ellipse has the proper x.");
+            assert.deepEqual( shapeGroupKid.attrs.y, 78, "Ellipse has the proper y.");
+            assert.deepEqual( shapeGroupKid.attrs.radiusX, 53, "Ellipse has the proper radiusX.");
+            assert.deepEqual( shapeGroupKid.attrs.radiusY, 32, "Ellipse has the proper radiusY.");
+            var colour = ( version === "0.1" ? "#ffff00" : "#ffff80" );
+            assert.equal( shapeGroupKid.attrs.stroke, colour, "Ellipse has the proper colour.");
+        } else if ( shapeGroupKid.className === "Label" ) {
+            hasLabel = true;
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'label' must not be draggable.");
+            assert.equal( shapeGroupKid.children.length, 2, "Label has 2 kids.");
+            var labelGroupKid0 = shapeGroupKid.children[0];
+            assert.equal( labelGroupKid0.className, "Text", "Label group first level is a text.");
+            assert.equal( labelGroupKid0.attrs.text, "53.28cm2", "Text has the proper value.");
+            var labelGroupKid1 = shapeGroupKid.children[1];
+            assert.equal( labelGroupKid1.className, "Tag", "Label group second level is a tag.");
+        }
+    }
+    assert.ok( hasShape, "Shape group contains a shape.");
+    assert.ok( hasLabel, "Shape group contains a label.");
+
+    // details
+    if ( version !== "0.1" ) {
+        var details0 = details.c6j16qt6vt6;
+        assert.equal( details0.textExpr, "{surface}", "Details textExpr has the proper value.");
+        assert.equal( details0.longText, "What a surface!", "Details longText has the proper value.");
+    }
+};
+
+/**
+ * Check a protractor drawing.
+ * @param {Object} posGroupKid The position group (only) kid.
+ * @param {Object} details The drawing details
+ * @param {String} version The state format version.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckProtractorDrawing = function (posGroupKid, details, version, assert) {
+    // check group
+    assert.equal( posGroupKid.attrs.name, "protractor-group", "Shape group is an protractor group.");
+    assert.ok( posGroupKid.attrs.draggable, "Shape group must be draggable.");
+    assert.equal( posGroupKid.attrs.id, "49g7kqi3p4u", "Position group first level has the proper id.");
+    assert.notEqual( typeof details["49g7kqi3p4u"], "undefined", "Details should contain data for id.");
+
+    // kids
+    assert.equal( posGroupKid.children.length, 3, "Shape group has 3 kids.");
+    var hasShape = false;
+    var hasLabel = false;
+    var hasArc = false;
+    for ( var i = 0; i < posGroupKid.children.length; ++i ) {
+        var shapeGroupKid = posGroupKid.children[i];
+        if ( shapeGroupKid.attrs.name === "shape" ) {
+            hasShape = true;
+            assert.equal( shapeGroupKid.className, "Line", "Shape group 'shape' is a line.");
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'shape' must not be draggable.");
+            assert.deepEqual( shapeGroupKid.attrs.points, [33,164,81,145,93,198], "Line has the proper points.");
+            var colour = ( version === "0.1" ? "#ffff00" : "#ffff80" );
+            assert.equal( shapeGroupKid.attrs.stroke, colour, "Line has the proper colour.");
+        } else if ( shapeGroupKid.className === "Label" ) {
+            hasLabel = true;
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'label' must not be draggable.");
+            assert.equal( shapeGroupKid.children.length, 2, "Label has 2 kids.");
+            var labelGroupKid0 = shapeGroupKid.children[0];
+            assert.equal( labelGroupKid0.className, "Text", "Label group first level is a text.");
+            assert.equal( labelGroupKid0.attrs.text, "80.15°", "Text has the proper value.");
+            var labelGroupKid1 = shapeGroupKid.children[1];
+            assert.equal( labelGroupKid1.className, "Tag", "Label group second level is a tag.");
+        } else if ( shapeGroupKid.className === "Arc" ) {
+            hasArc = true;
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'extra' must not be draggable.");
+        }
+    }
+    assert.ok( hasShape, "Shape group contains a shape.");
+    assert.ok( hasLabel, "Shape group contains a label.");
+    assert.ok( hasArc, "Shape group contains an arc.");
+
+    // details
+    if ( version !== "0.1" ) {
+        var details0 = details["49g7kqi3p4u"];
+        assert.equal( details0.textExpr, "{angle}", "Details textExpr has the proper value.");
+        assert.equal( details0.longText, "What an angle!", "Details longText has the proper value.");
+    }
+};
+
+/**
+ * Check a rectangle drawing.
+ * @param {Object} posGroupKid The position group (only) kid.
+ * @param {Object} details The drawing details
+ * @param {String} version The state format version.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckRectangleDrawing = function (posGroupKid, details, version, assert) {
+    // check group
+    assert.equal( posGroupKid.attrs.name, "rectangle-group", "Shape group is a rectangle group.");
+    assert.ok( posGroupKid.attrs.draggable, "Shape group must be draggable.");
+    assert.equal( posGroupKid.attrs.id, "db0puu209qe", "Position group first level has the proper id.");
+    assert.notEqual( typeof details.db0puu209qe, "undefined", "Details should contain data for id.");
+
+    // kids
+    assert.equal( posGroupKid.children.length, 2, "Shape group has 2 kids.");
+    var hasShape = false;
+    var hasLabel = false;
+    for ( var i = 0; i < posGroupKid.children.length; ++i ) {
+        var shapeGroupKid = posGroupKid.children[i];
+        if ( shapeGroupKid.attrs.name === "shape" ) {
+            hasShape = true;
+            assert.equal( shapeGroupKid.className, "Rect", "Shape group 'shape' is a rectangle.");
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'shape' must not be draggable.");
+            assert.deepEqual( shapeGroupKid.attrs.x, 80, "Rectangle has the proper x.");
+            assert.deepEqual( shapeGroupKid.attrs.y, 58, "Rectangle has the proper y.");
+            assert.deepEqual( shapeGroupKid.attrs.width, 104, "Rectangle has the proper width.");
+            assert.deepEqual( shapeGroupKid.attrs.height, 64, "Rectangle has the proper height.");
+            var colour = ( version === "0.1" ? "#ffff00" : "#ffff80" );
+            assert.equal( shapeGroupKid.attrs.stroke, colour, "Rectangle has the proper colour.");
+        } else if ( shapeGroupKid.className === "Label" ) {
+            hasLabel = true;
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'label' must not be draggable.");
+            assert.equal( shapeGroupKid.children.length, 2, "Label has 2 kids.");
+            var labelGroupKid0 = shapeGroupKid.children[0];
+            assert.equal( labelGroupKid0.className, "Text", "Label group first level is a text.");
+            assert.equal( labelGroupKid0.attrs.text, "66.56cm2", "Text has the proper value.");
+            var labelGroupKid1 = shapeGroupKid.children[1];
+            assert.equal( labelGroupKid1.className, "Tag", "Label group second level is a tag.");
+        }
+    }
+    assert.ok( hasShape, "Shape group contains a shape.");
+    assert.ok( hasLabel, "Shape group contains a label.");
+
+    // details
+    if ( version !== "0.1" ) {
+        var details0 = details.db0puu209qe;
+        assert.equal( details0.textExpr, "{surface}", "Details textExpr has the proper value.");
+        assert.equal( details0.longText, "What a rectangle!", "Details longText has the proper value.");
+    }
+};
+
+/**
+ * Tests for {@link dwv.State} v0.1 containing a line.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.1 state: line.", function (assert) {
+    dwv.utils.test.TestState( "0.1", "line", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.1 containing a roi.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.1 state: roi.", function (assert) {
+    dwv.utils.test.TestState( "0.1", "roi", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.1 containing an ellipse.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.1 state: ellipse.", function (assert) {
+    dwv.utils.test.TestState( "0.1", "ellipse", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.1 containing a protractor.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.1 state: protractor.", function (assert) {
+    dwv.utils.test.TestState( "0.1", "protractor", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.1 containing a rectangle.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.1 state: rectangle.", function (assert) {
+    dwv.utils.test.TestState( "0.1", "rectangle", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.1 containing a multi slice ruler.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.1 state: line multi-slice.", function (assert) {
+    dwv.utils.test.TestState( "0.1", "line_multi-slice", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.2 containing an arrow.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.2 state: arrow.", function (assert) {
+    dwv.utils.test.TestState( "0.2", "arrow", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.2 containing a ruler.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.2 state: ruler.", function (assert) {
+    dwv.utils.test.TestState( "0.2", "ruler", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.2 containing a roi.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.2 state: roi.", function (assert) {
+    dwv.utils.test.TestState( "0.2", "roi", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.2 containing a hand draw.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.2 state: hand.", function (assert) {
+    dwv.utils.test.TestState( "0.2", "hand", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.2 containing an ellipse.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.2 state: ellipse.", function (assert) {
+    dwv.utils.test.TestState( "0.2", "ellipse", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.2 containing a protractor.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.2 state: protractor.", function (assert) {
+    dwv.utils.test.TestState( "0.2", "protractor", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.2 containing a rectangle.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.2 state: rectangle.", function (assert) {
+    dwv.utils.test.TestState( "0.2", "rectangle", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.2 containing a multi slice ruler.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.2 state: ruler multi-slice.", function (assert) {
+    dwv.utils.test.TestState( "0.2", "ruler_multi-slice", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.3 containing an arrow.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.3 state: arrow.", function (assert) {
+    dwv.utils.test.TestState( "0.3", "arrow", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.3 containing a ruler.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.3 state: ruler.", function (assert) {
+    dwv.utils.test.TestState( "0.3", "ruler", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.3 containing a roi.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.3 state: roi.", function (assert) {
+    dwv.utils.test.TestState( "0.3", "roi", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.3 containing a hand draw.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.3 state: hand.", function (assert) {
+    dwv.utils.test.TestState( "0.3", "hand", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.3 containing an ellipse.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.3 state: ellipse.", function (assert) {
+    dwv.utils.test.TestState( "0.3", "ellipse", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.3 containing a protractor.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.3 state: protractor.", function (assert) {
+    dwv.utils.test.TestState( "0.3", "protractor", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.3 containing a rectangle.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.3 state: rectangle.", function (assert) {
+    dwv.utils.test.TestState( "0.3", "rectangle", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.3 containing a multi slice ruler.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.3 state: ruler multi-slice.", function (assert) {
+    dwv.utils.test.TestState( "0.3", "ruler_multi-slice", assert );
+});

nv/html/dwv/tests/state/v0.1/state-ellipse.json

@@ -0,0 +1,27 @@
+{
+  "version": "0.1",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"ellipse-group\",\"id\":\"c6j16qt6vt6\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"x\":90,\"y\":78,\"radiusX\":53,\"radiusY\":32,\"stroke\":\"Yellow\",\"strokeWidth\":0.9789674952198852,\"name\":\"shape\",\"draggable\":true},\"className\":\"Ellipse\"},{\"attrs\":{\"x\":90,\"y\":78,\"text\":\"53.28cm2\",\"fontSize\":5.873804971319312,\"fontFamily\":\"Verdana\",\"fill\":\"Yellow\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\"},\"className\":\"Text\"}]}",
+        "length": 1
+      }
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.1/state-line.json

@@ -0,0 +1,27 @@
+{
+  "version": "0.1",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"line-group\",\"id\":\"4gvkz8v6wzw\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[51,135,216,134],\"stroke\":\"Yellow\",\"strokeWidth\":0.9789674952198852,\"name\":\"shape\",\"draggable\":true},\"className\":\"Line\"},{\"attrs\":{\"x\":184,\"y\":120,\"text\":\"165.0mm\",\"fontSize\":5.873804971319312,\"fontFamily\":\"Verdana\",\"fill\":\"Yellow\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\"},\"className\":\"Text\"}]}",
+        "length": 1
+      }
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.1/state-line_multi-slice.json

@@ -0,0 +1,56 @@
+{
+  "version": "0.1",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "length": 0
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"line-group\",\"id\":\"onzlkbs8p\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,120,60],\"stroke\":\"Yellow\",\"strokeWidth\":1.4755043227665705,\"name\":\"shape\",\"draggable\":true},\"className\":\"Line\"},{\"attrs\":{\"x\":120,\"y\":45,\"text\":\"50.00mm\",\"fontSize\":8.853025936599424,\"fontFamily\":\"Verdana\",\"fill\":\"Yellow\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\"},\"className\":\"Text\"}]}",
+        "length": 1
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"line-group\",\"id\":\"u9bvidgkjc9\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,170,110],\"stroke\":\"Red\",\"strokeWidth\":1.4755043227665705,\"name\":\"shape\"},\"className\":\"Line\"},{\"attrs\":{\"x\":155,\"y\":90,\"text\":\"50.00mm\",\"fontSize\":8.853025936599424,\"fontFamily\":\"Verdana\",\"fill\":\"Red\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\"},\"className\":\"Text\"}]}",
+        "length": 1
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"line-group\",\"id\":\"c9abkegq62j\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,120,160],\"stroke\":\"White\",\"strokeWidth\":1.4755043227665705,\"name\":\"shape\"},\"className\":\"Line\"},{\"attrs\":{\"x\":120,\"y\":170,\"text\":\"50.00mm\",\"fontSize\":8.853025936599424,\"fontFamily\":\"Verdana\",\"fill\":\"White\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\"},\"className\":\"Text\"}]}",
+        "length": 1
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"line-group\",\"id\":\"uiav43zjw1\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,60,110],\"stroke\":\"Lime\",\"strokeWidth\":1.4755043227665705,\"name\":\"shape\"},\"className\":\"Line\"},{\"attrs\":{\"x\":60,\"y\":120,\"text\":\"50.00mm\",\"fontSize\":8.853025936599424,\"fontFamily\":\"Verdana\",\"fill\":\"Lime\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\"},\"className\":\"Text\"}]}",
+        "length": 1
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"line-group\",\"id\":\"26ir11b9ugl\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,120,60],\"stroke\":\"Fuchsia\",\"strokeWidth\":1.4755043227665705,\"name\":\"shape\"},\"className\":\"Line\"},{\"attrs\":{\"x\":120,\"y\":45,\"text\":\"50.00mm\",\"fontSize\":8.853025936599424,\"fontFamily\":\"Verdana\",\"fill\":\"Fuchsia\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\"},\"className\":\"Text\"}]}",
+        "length": 1
+      }
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.1/state-protractor.json

@@ -0,0 +1,27 @@
+{
+  "version": "0.1",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"protractor-group\",\"id\":\"49g7kqi3p4u\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[33,164,81,145,93,198],\"stroke\":\"Yellow\",\"strokeWidth\":0.9789674952198852,\"name\":\"shape\",\"draggable\":true},\"className\":\"Line\"},{\"attrs\":{\"x\":72,\"y\":147.5,\"text\":\"80.15°\",\"fontSize\":5.873804971319312,\"fontFamily\":\"Verdana\",\"fill\":\"Yellow\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\"},\"className\":\"Text\"},{\"attrs\":{\"innerRadius\":17.112857451704066,\"outerRadius\":17.112857451704066,\"stroke\":\"Yellow\",\"strokeWidth\":0.9789674952198852,\"angle\":80.14855270325586,\"rotation\":-282.75753216087674,\"x\":81,\"y\":145,\"name\":\"arc\"},\"className\":\"Arc\"}]}",
+        "length": 1
+      }
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.1/state-rectangle.json

@@ -0,0 +1,27 @@
+{
+  "version": "0.1",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"rectangle-group\",\"id\":\"db0puu209qe\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"x\":80,\"y\":58,\"width\":104,\"height\":64,\"stroke\":\"Yellow\",\"strokeWidth\":0.9789674952198852,\"name\":\"shape\",\"draggable\":true},\"className\":\"Rect\"},{\"attrs\":{\"x\":80,\"y\":132,\"text\":\"66.56cm2\",\"fontSize\":5.873804971319312,\"fontFamily\":\"Verdana\",\"fill\":\"Yellow\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\"},\"className\":\"Text\"}]}",
+        "length": 1
+      }
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.1/state-roi.json

@@ -0,0 +1,27 @@
+{
+  "version": "0.1",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"roi-group\",\"id\":\"4l24ofouhmf\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[126,40,58,80,60,116,92,128,93,143,93,151,94,151,114,150,128,150,214,135,183,56,182,56,182,56],\"stroke\":\"Yellow\",\"strokeWidth\":0.9789674952198852,\"name\":\"shape\",\"closed\":true,\"draggable\":true},\"className\":\"Line\"}]}",
+        "length": 1
+      }
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.2/state-arrow.json

@@ -0,0 +1,39 @@
+{
+  "version": "0.2",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"line-group\",\"visible\":true,\"id\":\"pf8zteo5r4\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[53,136,139,89],\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape\",\"draggable\":true},\"className\":\"Line\"},{\"attrs\":{\"x\":57.38752668614738,\"y\":133.60216564826828,\"sides\":3,\"radius\":5,\"rotation\":-118.65711745655813,\"fill\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape-triangle\"},\"className\":\"RegularPolygon\"},{\"attrs\":{\"x\":114,\"y\":74,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":7.566502463054187,\"fontFamily\":\"Verdana\",\"fill\":\"#ffff80\",\"name\":\"text\",\"text\":\"Eye\"},\"className\":\"Text\"},{\"attrs\":{\"width\":13.69140625,\"height\":7.566502463054187},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ]
+  ],
+  "drawingsDetails": [
+    [
+      [
+        {
+          "id": "pf8zteo5r4",
+          "textExpr": "Eye",
+          "longText": "This is an eye!",
+          "quant": null
+        }
+      ]
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.2/state-ellipse.json

@@ -0,0 +1,44 @@
+{
+  "version": "0.2",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"ellipse-group\",\"visible\":true,\"id\":\"c6j16qt6vt6\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"x\":90,\"y\":78,\"radiusX\":53,\"radiusY\":32,\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape\",\"draggable\":true},\"className\":\"Ellipse\"},{\"attrs\":{\"x\":90,\"y\":78,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":7.566502463054187,\"fontFamily\":\"Verdana\",\"fill\":\"#ffff80\",\"name\":\"text\",\"text\":\"53.28cm2\"},\"className\":\"Text\"},{\"attrs\":{\"width\":40.73088073730469,\"height\":7.566502463054187},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ]
+  ],
+  "drawingsDetails": [
+    [
+      [
+        {
+          "id": "c6j16qt6vt6",
+          "textExpr": "{surface}",
+          "longText": "What a surface!",
+          "quant": {
+            "surface": {
+              "value": 53.281411404882896,
+              "unit": "cm2"
+            }
+          }
+        }
+      ]
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.2/state-hand.json

@@ -0,0 +1,39 @@
+{
+  "version": "0.2",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"freeHand-group\",\"visible\":true,\"id\":\"08m011yjp8je\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[93,50,92,50,71,58,71,59,68,63,68,64,54,80,54,81,53,83,52,85,51,87,50,92,47,98,47,100,55,117,56,118,86,122,89,126,90,128,90,129,88,131,87,133,86,134,85,138,85,139,85,141,87,143,87,144,87,145,88,147,92,150,97,152,112,154,113,153,136,143,174,136,178,135,191,136,192,136,194,138,196,139,197,141,199,141,200,141,207,140,208,139,211,136,213,134,213,133,213,129,213,126,213,122,210,90,209,87,206,80,205,79,204,78,201,73,199,71,197,70,187,63,184,61,182,59,180,58,174,54,172,52,170,51,168,50,167,49,155,42,154,42,151,42,136,40,134,40,133,40,128,41,126,41,124,41,117,44,116,44,114,44,107,47,102,49,100,49,97,49,93,50,92,50,92,50],\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape\",\"tension\":0.5,\"draggable\":true},\"className\":\"Line\"},{\"attrs\":{\"x\":93,\"y\":60,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":7.566502463054187,\"fontFamily\":\"Verdana\",\"fill\":\"#ffff80\",\"name\":\"text\",\"text\":\"Brain\"},\"className\":\"Text\"},{\"attrs\":{\"height\":7.566502463054187},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ]
+  ],
+  "drawingsDetails": [
+    [
+      [
+        {
+          "id": "08m011yjp8je",
+          "textExpr": "Brain",
+          "longText": "This is a roundy brain!",
+          "quant": null
+        }
+      ]
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.2/state-protractor.json

@@ -0,0 +1,44 @@
+{
+  "version": "0.2",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"protractor-group\",\"visible\":true,\"id\":\"49g7kqi3p4u\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[33,164,81,145,93,198],\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape\",\"draggable\":true},\"className\":\"Line\"},{\"attrs\":{\"x\":72,\"y\":147.5,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":7.566502463054187,\"fontFamily\":\"Verdana\",\"fill\":\"#ffff80\",\"name\":\"text\",\"text\":\"80.15°\"},\"className\":\"Text\"},{\"attrs\":{\"width\":28.730148315429688,\"height\":7.566502463054187},\"className\":\"Tag\"}]},{\"attrs\":{\"innerRadius\":17.112857451704066,\"outerRadius\":17.112857451704066,\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"angle\":80.14855270325586,\"rotation\":-282.75753216087674,\"x\":81,\"y\":145,\"name\":\"shape-arc\"},\"className\":\"Arc\"}]}",
+        "length": 1
+      }
+    ]
+  ],
+  "drawingsDetails": [
+    [
+      [
+        {
+          "id": "49g7kqi3p4u",
+          "textExpr": "{angle}",
+          "longText": "What an angle!",
+          "quant": {
+            "angle": {
+              "value": 80.14855270325586,
+              "unit": "°"
+            }
+          }
+        }
+      ]
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.2/state-rectangle.json

@@ -0,0 +1,60 @@
+{
+  "version": "0.2",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"rectangle-group\",\"visible\":true,\"id\":\"db0puu209qe\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"x\":80,\"y\":58,\"width\":104,\"height\":64,\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape\",\"draggable\":true},\"className\":\"Rect\"},{\"attrs\":{\"x\":80,\"y\":132,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":7.566502463054187,\"fontFamily\":\"Verdana\",\"fill\":\"#ffff80\",\"name\":\"text\",\"text\":\"66.56cm2\"},\"className\":\"Text\"},{\"attrs\":{\"width\":40.73088073730469,\"height\":7.566502463054187},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ]
+  ],
+  "drawingsDetails": [
+    [
+      [
+        {
+          "id": "db0puu209qe",
+          "textExpr": "{surface}",
+          "longText": "What a rectangle!",
+          "quant": {
+            "surface": {
+              "value": 66.56,
+              "unit": "cm2"
+            },
+            "min": {
+              "value": 45,
+              "unit": ""
+            },
+            "max": {
+              "value": 602,
+              "unit": ""
+            },
+            "mean": {
+              "value": 393.77989783653845,
+              "unit": ""
+            },
+            "stdDev": {
+              "value": 91.9374530590746,
+              "unit": ""
+            }
+          }
+        }
+      ]
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.2/state-roi.json

@@ -0,0 +1,39 @@
+{
+  "version": "0.2",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"roi-group\",\"visible\":true,\"id\":\"4l24ofouhmf\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[126,40,58,80,60,116,92,128,93,143,93,151,94,151,114,150,128,150,214,135,183,56,182,56,182,56],\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape\",\"closed\":true,\"draggable\":true},\"className\":\"Line\"},{\"attrs\":{\"x\":126,\"y\":50,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":7.566502463054187,\"fontFamily\":\"Verdana\",\"fill\":\"#ffff80\",\"name\":\"text\",\"text\":\"Brain\"},\"className\":\"Text\"},{\"attrs\":{\"height\":7.566502463054187},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ]
+  ],
+  "drawingsDetails": [
+    [
+      [
+        {
+          "id": "4l24ofouhmf",
+          "textExpr": "Brain",
+          "longText": "This is a squary brain!",
+          "quant": null
+        }
+      ]
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.2/state-ruler.json

@@ -0,0 +1,44 @@
+{
+  "version": "0.2",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"ruler-group\",\"visible\":true,\"id\":\"4gvkz8v6wzw\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[51,135,216,134],\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape\",\"draggable\":true},\"className\":\"Line\"},{\"attrs\":{\"points\":[50.96969752621112,130.00009182483518,51.03030247378888,139.99990817516482],\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape-tick0\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[215.96969752621112,129.00009182483336,216.03030247378888,138.99990817516664],\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape-tick1\"},\"className\":\"Line\"},{\"attrs\":{\"x\":191,\"y\":119,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":7.566502463054187,\"fontFamily\":\"Verdana\",\"fill\":\"#ffff80\",\"name\":\"text\",\"text\":\"165.0mm\"},\"className\":\"Text\"},{\"attrs\":{\"width\":39.3392333984375,\"height\":7.566502463054187},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ]
+  ],
+  "drawingsDetails": [
+    [
+      [
+        {
+          "id": "4gvkz8v6wzw",
+          "textExpr": "{length}",
+          "longText": "What a ruler!",
+          "quant": {
+            "length": {
+              "value": 165.00303027520434,
+              "unit": "mm"
+            }
+          }
+        }
+      ]
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.2/state-ruler_multi-slice.json

@@ -0,0 +1,136 @@
+{
+  "version": "0.2",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "length": 0
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"ruler-group\",\"visible\":true,\"id\":\"onzlkbs8p\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,120,60],\"stroke\":\"#ffff00\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[115,60,125,60],\"stroke\":\"#ffff00\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick0\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[115,110,125,110],\"stroke\":\"#ffff00\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick1\"},\"className\":\"Line\"},{\"attrs\":{\"x\":120,\"y\":45,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":8.581005586592179,\"fontFamily\":\"Verdana\",\"fill\":\"#ffff00\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\",\"text\":\"50.00mm\"},\"className\":\"Text\"},{\"attrs\":{\"width\":44.64697265625,\"height\":8.581005586592179},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"ruler-group\",\"visible\":true,\"id\":\"u9bvidgkjc9\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,170,110],\"stroke\":\"#ff0000\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[120,115,120,105],\"stroke\":\"#ff0000\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick0\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[170,115,170,105],\"stroke\":\"#ff0000\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick1\"},\"className\":\"Line\"},{\"attrs\":{\"x\":155,\"y\":90,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":8.581005586592179,\"fontFamily\":\"Verdana\",\"fill\":\"#ff0000\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\",\"text\":\"50.00mm\"},\"className\":\"Text\"},{\"attrs\":{\"width\":44.64697265625,\"height\":8.581005586592179},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"ruler-group\",\"visible\":true,\"id\":\"c9abkegq62j\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,120,160],\"stroke\":\"#ffffff\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[115,110,125,110],\"stroke\":\"#ffffff\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick0\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[115,160,125,160],\"stroke\":\"#ffffff\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick1\"},\"className\":\"Line\"},{\"attrs\":{\"x\":116,\"y\":167.5,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":8.581005586592179,\"fontFamily\":\"Verdana\",\"fill\":\"#ffffff\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\",\"text\":\"50.00mm\"},\"className\":\"Text\"},{\"attrs\":{\"width\":44.64697265625,\"height\":8.581005586592179},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"ruler-group\",\"visible\":true,\"id\":\"uiav43zjw1\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,60,110],\"stroke\":\"#00ff00\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[120,105,120,115],\"stroke\":\"#00ff00\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick0\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[60,105,60,115],\"stroke\":\"#00ff00\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick1\"},\"className\":\"Line\"},{\"attrs\":{\"x\":52,\"y\":87,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":8.581005586592179,\"fontFamily\":\"Verdana\",\"fill\":\"#00ff00\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\",\"text\":\"50.00mm\"},\"className\":\"Text\"},{\"attrs\":{\"width\":44.64697265625,\"height\":8.581005586592179},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"ruler-group\",\"visible\":true,\"id\":\"26ir11b9ugl\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,120,60],\"stroke\":\"#ff00ff\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape\",\"draggable\":true},\"className\":\"Line\"},{\"attrs\":{\"points\":[115,60,125,60],\"stroke\":\"#ff00ff\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick0\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[115,110,125,110],\"stroke\":\"#ff00ff\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick1\"},\"className\":\"Line\"},{\"attrs\":{\"x\":95,\"y\":124.5,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":8.581005586592179,\"fontFamily\":\"Verdana\",\"fill\":\"#ff00ff\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\",\"text\":\"50.00mm\"},\"className\":\"Text\"},{\"attrs\":{\"width\":44.64697265625,\"height\":8.581005586592179},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ]
+  ],
+  "drawingsDetails": [
+    [
+      []
+    ],
+    [
+      [
+        {
+          "id": "onzlkbs8p",
+          "textExpr": "{length}",
+          "longText": "First ruler.",
+          "quant": {
+            "length": {
+              "value": 50,
+              "unit": "mm"
+            }
+          }
+        }
+      ]
+    ],
+    [
+      [
+        {
+          "id": "u9bvidgkjc9",
+          "textExpr": "{length}",
+          "longText": "Second ruler.",
+          "quant": {
+            "length": {
+              "value": 50,
+              "unit": "mm"
+            }
+          }
+        }
+      ]
+    ],
+    [
+      [
+        {
+          "id": "c9abkegq62j",
+          "textExpr": "{length}",
+          "longText": "Third ruler.",
+          "quant": {
+            "length": {
+              "value": 50,
+              "unit": "mm"
+            }
+          }
+        }
+      ]
+    ],
+    [
+      [
+        {
+          "id": "uiav43zjw1",
+          "textExpr": "{length}",
+          "longText": "Fourth ruler.",
+          "quant": {
+            "length": {
+              "value": 50,
+              "unit": "mm"
+            }
+          }
+        }
+      ]
+    ],
+    [
+      [
+        {
+          "id": "26ir11b9ugl",
+          "textExpr": "{length}",
+          "longText": "Fifth ruler.",
+          "quant": {
+            "length": {
+              "value": 50,
+              "unit": "mm"
+            }
+          }
+        }
+      ]
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.3/state-arrow.json

@@ -0,0 +1,110 @@
+{
+  "version": "0.3",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": {
+    "attrs": {
+      "listening": true,
+      "visible": true
+    },
+    "className": "Layer",
+    "children": [
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-0_frame-0",
+          "visible": true
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "line-group",
+              "visible": true,
+              "id": "pf8zteo5r4",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    53,
+                    136,
+                    139,
+                    89
+                  ],
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 57.38752668614738,
+                  "y": 133.60216564826828,
+                  "sides": 3,
+                  "radius": 5,
+                  "rotation": -118.65711745655813,
+                  "fill": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape-triangle"
+                },
+                "className": "RegularPolygon"
+              },
+              {
+                "attrs": {
+                  "x": 114,
+                  "y": 74,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 7.566502463054187,
+                      "fontFamily": "Verdana",
+                      "fill": "#ffff80",
+                      "name": "text",
+                      "text": "Eye"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 13.69140625,
+                      "height": 7.566502463054187
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "drawingsDetails": {
+    "pf8zteo5r4": {
+      "textExpr": "Eye",
+      "longText": "This is an eye!",
+      "quant": null
+    }
+  }
+}

nv/html/dwv/tests/state/v0.3/state-ellipse.json

@@ -0,0 +1,100 @@
+{
+  "version": "0.3",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": {
+    "attrs": {
+      "listening": true,
+      "visible": true
+    },
+    "className": "Layer",
+    "children": [
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-0_frame-0",
+          "visible": true
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "ellipse-group",
+              "visible": true,
+              "id": "c6j16qt6vt6",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "x": 90,
+                  "y": 78,
+                  "radiusX": 53,
+                  "radiusY": 32,
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape"
+                },
+                "className": "Ellipse"
+              },
+              {
+                "attrs": {
+                  "x": 90,
+                  "y": 78,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 7.566502463054187,
+                      "fontFamily": "Verdana",
+                      "fill": "#ffff80",
+                      "name": "text",
+                      "text": "53.28cm2"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 40.73088073730469,
+                      "height": 7.566502463054187
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "drawingsDetails": {
+    "c6j16qt6vt6": {
+      "textExpr": "{surface}",
+      "longText": "What a surface!",
+      "quant": {
+        "surface": {
+          "value": 53.281411404882896,
+          "unit": "cm2"
+        }
+      }
+    }
+  }
+}

nv/html/dwv/tests/state/v0.3/state-hand.json

@@ -0,0 +1,269 @@
+{
+  "version": "0.3",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": {
+    "attrs": {
+      "listening": true,
+      "visible": true
+    },
+    "className": "Layer",
+    "children": [
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-0_frame-0",
+          "visible": true
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "freeHand-group",
+              "visible": true,
+              "id": "08m011yjp8je",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    93,
+                    50,
+                    92,
+                    50,
+                    71,
+                    58,
+                    71,
+                    59,
+                    68,
+                    63,
+                    68,
+                    64,
+                    54,
+                    80,
+                    54,
+                    81,
+                    53,
+                    83,
+                    52,
+                    85,
+                    51,
+                    87,
+                    50,
+                    92,
+                    47,
+                    98,
+                    47,
+                    100,
+                    55,
+                    117,
+                    56,
+                    118,
+                    86,
+                    122,
+                    89,
+                    126,
+                    90,
+                    128,
+                    90,
+                    129,
+                    88,
+                    131,
+                    87,
+                    133,
+                    86,
+                    134,
+                    85,
+                    138,
+                    85,
+                    139,
+                    85,
+                    141,
+                    87,
+                    143,
+                    87,
+                    144,
+                    87,
+                    145,
+                    88,
+                    147,
+                    92,
+                    150,
+                    97,
+                    152,
+                    112,
+                    154,
+                    113,
+                    153,
+                    136,
+                    143,
+                    174,
+                    136,
+                    178,
+                    135,
+                    191,
+                    136,
+                    192,
+                    136,
+                    194,
+                    138,
+                    196,
+                    139,
+                    197,
+                    141,
+                    199,
+                    141,
+                    200,
+                    141,
+                    207,
+                    140,
+                    208,
+                    139,
+                    211,
+                    136,
+                    213,
+                    134,
+                    213,
+                    133,
+                    213,
+                    129,
+                    213,
+                    126,
+                    213,
+                    122,
+                    210,
+                    90,
+                    209,
+                    87,
+                    206,
+                    80,
+                    205,
+                    79,
+                    204,
+                    78,
+                    201,
+                    73,
+                    199,
+                    71,
+                    197,
+                    70,
+                    187,
+                    63,
+                    184,
+                    61,
+                    182,
+                    59,
+                    180,
+                    58,
+                    174,
+                    54,
+                    172,
+                    52,
+                    170,
+                    51,
+                    168,
+                    50,
+                    167,
+                    49,
+                    155,
+                    42,
+                    154,
+                    42,
+                    151,
+                    42,
+                    136,
+                    40,
+                    134,
+                    40,
+                    133,
+                    40,
+                    128,
+                    41,
+                    126,
+                    41,
+                    124,
+                    41,
+                    117,
+                    44,
+                    116,
+                    44,
+                    114,
+                    44,
+                    107,
+                    47,
+                    102,
+                    49,
+                    100,
+                    49,
+                    97,
+                    49,
+                    93,
+                    50,
+                    92,
+                    50,
+                    92,
+                    50
+                  ],
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape",
+                  "tension": 0.5
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 93,
+                  "y": 60,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 7.566502463054187,
+                      "fontFamily": "Verdana",
+                      "fill": "#ffff80",
+                      "name": "text",
+                      "text": "Brain"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "height": 7.566502463054187
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "drawingsDetails": {
+    "08m011yjp8je": {
+      "textExpr": "Brain",
+      "longText": "This is a roundy brain!",
+      "quant": null
+    }
+  }
+}

nv/html/dwv/tests/state/v0.3/state-protractor.json

@@ -0,0 +1,118 @@
+{
+  "version": "0.3",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": {
+    "attrs": {
+      "listening": true,
+      "visible": true
+    },
+    "className": "Layer",
+    "children": [
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-0_frame-0",
+          "visible": true
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "protractor-group",
+              "visible": true,
+              "id": "49g7kqi3p4u",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    33,
+                    164,
+                    81,
+                    145,
+                    93,
+                    198
+                  ],
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 72,
+                  "y": 147.5,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 7.566502463054187,
+                      "fontFamily": "Verdana",
+                      "fill": "#ffff80",
+                      "name": "text",
+                      "text": "80.15°"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 28.730148315429688,
+                      "height": 7.566502463054187
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              },
+              {
+                "attrs": {
+                  "innerRadius": 17.112857451704066,
+                  "outerRadius": 17.112857451704066,
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "angle": 80.14855270325586,
+                  "rotation": -282.75753216087674,
+                  "x": 81,
+                  "y": 145,
+                  "name": "shape-arc"
+                },
+                "className": "Arc"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "drawingsDetails": {
+    "49g7kqi3p4u": {
+      "textExpr": "{angle}",
+      "longText": "What an angle!",
+      "quant": {
+        "angle": {
+          "value": 80.14855270325586,
+          "unit": "°"
+        }
+      }
+    }
+  }
+}

nv/html/dwv/tests/state/v0.3/state-rectangle.json

@@ -0,0 +1,116 @@
+{
+  "version": "0.3",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": {
+    "attrs": {
+      "listening": true,
+      "visible": true
+    },
+    "className": "Layer",
+    "children": [
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-0_frame-0",
+          "visible": true
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "rectangle-group",
+              "visible": true,
+              "id": "db0puu209qe",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "x": 80,
+                  "y": 58,
+                  "width": 104,
+                  "height": 64,
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape"
+                },
+                "className": "Rect"
+              },
+              {
+                "attrs": {
+                  "x": 80,
+                  "y": 132,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 7.566502463054187,
+                      "fontFamily": "Verdana",
+                      "fill": "#ffff80",
+                      "name": "text",
+                      "text": "66.56cm2"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 40.73088073730469,
+                      "height": 7.566502463054187
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "drawingsDetails": {
+    "db0puu209qe": {
+      "textExpr": "{surface}",
+      "longText": "What a rectangle!",
+      "quant": {
+        "surface": {
+          "value": 66.56,
+          "unit": "cm2"
+        },
+        "min": {
+          "value": 45,
+          "unit": ""
+        },
+        "max": {
+          "value": 602,
+          "unit": ""
+        },
+        "mean": {
+          "value": 393.77989783653845,
+          "unit": ""
+        },
+        "stdDev": {
+          "value": 91.9374530590746,
+          "unit": ""
+        }
+      }
+    }
+  }
+}

nv/html/dwv/tests/state/v0.3/state-roi.json

@@ -0,0 +1,119 @@
+{
+  "version": "0.3",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": {
+    "attrs": {
+      "listening": true,
+      "visible": true
+    },
+    "className": "Layer",
+    "children": [
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-0_frame-0",
+          "visible": true
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "roi-group",
+              "visible": true,
+              "id": "4l24ofouhmf",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    126,
+                    40,
+                    58,
+                    80,
+                    60,
+                    116,
+                    92,
+                    128,
+                    93,
+                    143,
+                    93,
+                    151,
+                    94,
+                    151,
+                    114,
+                    150,
+                    128,
+                    150,
+                    214,
+                    135,
+                    183,
+                    56,
+                    182,
+                    56,
+                    182,
+                    56
+                  ],
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape",
+                  "closed": true
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 126,
+                  "y": 50,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 7.566502463054187,
+                      "fontFamily": "Verdana",
+                      "fill": "#ffff80",
+                      "name": "text",
+                      "text": "Brain"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "height": 7.566502463054187
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "drawingsDetails": {
+    "4l24ofouhmf": {
+      "textExpr": "Brain",
+      "longText": "This is a squary brain!",
+      "quant": null
+    }
+  }
+}

nv/html/dwv/tests/state/v0.3/state-ruler.json

@@ -0,0 +1,130 @@
+{
+  "version": "0.3",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": {
+    "attrs": {
+      "listening": true,
+      "visible": true
+    },
+    "className": "Layer",
+    "children": [
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-0_frame-0",
+          "visible": true
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "ruler-group",
+              "visible": true,
+              "id": "4gvkz8v6wzw",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    51,
+                    135,
+                    216,
+                    134
+                  ],
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    50.96969752621112,
+                    130.00009182483518,
+                    51.03030247378888,
+                    139.99990817516482
+                  ],
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape-tick0"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    215.96969752621112,
+                    129.00009182483336,
+                    216.03030247378888,
+                    138.99990817516664
+                  ],
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape-tick1"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 191,
+                  "y": 119,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 7.566502463054187,
+                      "fontFamily": "Verdana",
+                      "fill": "#ffff80",
+                      "name": "text",
+                      "text": "165.0mm"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 39.3392333984375,
+                      "height": 7.566502463054187
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "drawingsDetails": {
+    "4gvkz8v6wzw": {
+      "textExpr": "{length}",
+      "longText": "What a ruler!",
+      "quant": {
+        "length": {
+          "value": 165.00303027520434,
+          "unit": "mm"
+        }
+      }
+    }
+  }
+}

nv/html/dwv/tests/state/v0.3/state-ruler_multi-slice.json

@@ -0,0 +1,530 @@
+{
+  "version": "0.3",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": {
+    "attrs": {
+      "listening": true,
+      "visible": true
+    },
+    "className": "Layer",
+    "children": [
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-1_frame-0",
+          "visible": false
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "ruler-group",
+              "visible": true,
+              "id": "onzlkbs8p",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    120,
+                    110,
+                    120,
+                    60
+                  ],
+                  "stroke": "#ffff00",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    115,
+                    60,
+                    125,
+                    60
+                  ],
+                  "stroke": "#ffff00",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick0"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    115,
+                    110,
+                    125,
+                    110
+                  ],
+                  "stroke": "#ffff00",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick1"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 120,
+                  "y": 45,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 8.581005586592179,
+                      "fontFamily": "Verdana",
+                      "fill": "#ffff00",
+                      "name": "text",
+                      "text": "50.00mm"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 44.64697265625,
+                      "height": 8.581005586592179
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-2_frame-0",
+          "visible": false
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "ruler-group",
+              "visible": true,
+              "id": "u9bvidgkjc9",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    120,
+                    110,
+                    170,
+                    110
+                  ],
+                  "stroke": "#ff0000",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    120,
+                    115,
+                    120,
+                    105
+                  ],
+                  "stroke": "#ff0000",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick0"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    170,
+                    115,
+                    170,
+                    105
+                  ],
+                  "stroke": "#ff0000",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick1"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 155,
+                  "y": 90,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 8.581005586592179,
+                      "fontFamily": "Verdana",
+                      "fill": "#ff0000",
+                      "name": "text",
+                      "text": "50.00mm"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 44.64697265625,
+                      "height": 8.581005586592179
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-3_frame-0",
+          "visible": false
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "ruler-group",
+              "visible": true,
+              "id": "c9abkegq62j",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    120,
+                    110,
+                    120,
+                    160
+                  ],
+                  "stroke": "#ffffff",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    115,
+                    110,
+                    125,
+                    110
+                  ],
+                  "stroke": "#ffffff",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick0"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    115,
+                    160,
+                    125,
+                    160
+                  ],
+                  "stroke": "#ffffff",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick1"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 120,
+                  "y": 170,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 8.581005586592179,
+                      "fontFamily": "Verdana",
+                      "fill": "#ffffff",
+                      "name": "text",
+                      "text": "50.00mm"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 44.64697265625,
+                      "height": 8.581005586592179
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-4_frame-0",
+          "visible": false
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "ruler-group",
+              "visible": true,
+              "id": "uiav43zjw1",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    120,
+                    110,
+                    60,
+                    110
+                  ],
+                  "stroke": "#00ff00",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    120,
+                    105,
+                    120,
+                    115
+                  ],
+                  "stroke": "#00ff00",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick0"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    60,
+                    105,
+                    60,
+                    115
+                  ],
+                  "stroke": "#00ff00",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick1"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 60,
+                  "y": 120,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 8.581005586592179,
+                      "fontFamily": "Verdana",
+                      "fill": "#00ff00",
+                      "name": "text",
+                      "text": "50.00mm"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 44.64697265625,
+                      "height": 8.581005586592179
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-5_frame-0",
+          "visible": true
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "ruler-group",
+              "visible": true,
+              "id": "26ir11b9ugl",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    120,
+                    110,
+                    120,
+                    60
+                  ],
+                  "stroke": "#ff00ff",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    115,
+                    60,
+                    125,
+                    60
+                  ],
+                  "stroke": "#ff00ff",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick0"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    115,
+                    110,
+                    125,
+                    110
+                  ],
+                  "stroke": "#ff00ff",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick1"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 120,
+                  "y": 45,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 8.581005586592179,
+                      "fontFamily": "Verdana",
+                      "fill": "#ff00ff",
+                      "name": "text",
+                      "text": "50.00mm"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 44.64697265625,
+                      "height": 8.581005586592179
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "drawingsDetails": {
+    "onzlkbs8p": {
+      "textExpr": "{length}",
+      "longText": "First ruler.",
+      "quant": {
+        "length": {
+          "value": 50,
+          "unit": "mm"
+        }
+      }
+    },
+    "u9bvidgkjc9": {
+      "textExpr": "{length}",
+      "longText": "Second ruler.",
+      "quant": {
+        "length": {
+          "value": 50,
+          "unit": "mm"
+        }
+      }
+    },
+    "c9abkegq62j": {
+      "textExpr": "{length}",
+      "longText": "Third ruler.",
+      "quant": {
+        "length": {
+          "value": 50,
+          "unit": "mm"
+        }
+      }
+    },
+    "uiav43zjw1": {
+      "textExpr": "{length}",
+      "longText": "Fourth ruler.",
+      "quant": {
+        "length": {
+          "value": 50,
+          "unit": "mm"
+        }
+      }
+    },
+    "26ir11b9ugl": {
+      "textExpr": "{length}",
+      "longText": "Fifth ruler.",
+      "quant": {
+        "length": {
+          "value": 50,
+          "unit": "mm"
+        }
+      }
+    }
+  }
+}

nv/html/dwv/tests/utils/i18n.test.js

@@ -0,0 +1,54 @@
+/**
+ * Tests for the 'utils/i18n' file.
+ */
+/** @module tests/utils */
+// Do not warn if these variables were not defined before.
+/* global QUnit */
+QUnit.module("i18n");
+
+/**
+ *
+ */
+function checkLanguage(language, keys, assert) {
+    var done = assert.async();
+    // fail test if load fails
+    dwv.i18nOnFailedLoad( function (lng /*, ns, msg*/) {
+        assert.ok(false, "Failed loading '" + lng + "' language.");
+        // stop linstening
+        dwv.i18nOffFailedLoad();
+        // finish async test
+        done();
+    });
+    // test once initialised
+    dwv.i18nOnInitialised( function (/*options*/) {
+        // stop linstening
+        dwv.i18nOffInitialised();
+        // check some values
+        for (var i = 0; i < keys.length; ++i ) {
+            assert.equal(dwv.i18nExists(keys[i][0]), true, "i18n "+language+" translation exists");
+            assert.equal(dwv.i18n(keys[i][0]), keys[i][1], "i18n "+language+" translation is ok");
+        }
+        // finish async test
+        done();
+    });
+    // initialise with input language
+    dwv.i18nInitialise(language, "..");
+}
+
+/**
+ * Tests for {@link dwv.i18n} with en language.
+ * @function module:tests/i18n
+ */
+QUnit.test("Test i18n en.", function (assert) {
+    var keys = [["basics.open", "Open"], ["basics.close", "Close"]];
+    checkLanguage("en", keys, assert);
+});
+
+/**
+ * Tests for {@link dwv.i18n} with fr language.
+ * @function module:tests/i18n
+ */
+QUnit.test("Test i18n fr.", function (assert) {
+    var keys = [["basics.open", "Ouvrir"], ["basics.close", "Fermer"]];
+    checkLanguage("fr", keys, assert);
+});

nv/html/dwv/tests/utils/string.test.js

@@ -0,0 +1,71 @@
+/**
+ * Tests for the 'utils/string' file.
+ */
+/** @module tests/utils */
+// Do not warn if these variables were not defined before.
+/* global QUnit */
+QUnit.module("string");
+
+/**
+ * Tests for {@link dwv.utils.capitaliseFirstLetter}.
+ * @function module:tests/utils~CapitaliseFirstLetter
+ */
+QUnit.test("Test CapitaliseFirstLetter.", function (assert) {
+    // undefined
+    assert.equal(dwv.utils.capitaliseFirstLetter(), null, "Capitalise undefined");
+    // null
+    assert.equal(dwv.utils.capitaliseFirstLetter(null), null, "Capitalise null");
+    // empty
+    assert.equal(dwv.utils.capitaliseFirstLetter(""), "", "Capitalise empty");
+    // short
+    assert.equal(dwv.utils.capitaliseFirstLetter("a"), "A", "Capitalise one letter");
+    // space first
+    assert.equal(dwv.utils.capitaliseFirstLetter(" a"), " a", "Capitalise space");
+    // regular
+    assert.equal(dwv.utils.capitaliseFirstLetter("dicom"), "Dicom", "Capitalise regular");
+    assert.equal(dwv.utils.capitaliseFirstLetter("Dicom"), "Dicom", "Capitalise regular no need");
+    // with spaces
+    assert.equal(dwv.utils.capitaliseFirstLetter("le ciel est bleu"), "Le ciel est bleu",
+            "Capitalise sentence");
+});
+
+/**
+ * Tests for {@link dwv.utils.replaceFlags}.
+ * @function module:tests/utils~ReplaceFlags
+ */
+QUnit.test("Test ReplaceFlags.", function (assert) {
+    // empty/null
+    assert.equal(dwv.utils.replaceFlags("", null), "", "ReplaceFlags empty/null");
+    // null/null
+    assert.equal(dwv.utils.replaceFlags(null, null), "", "ReplaceFlags null/null");
+    // empty/undefined
+    assert.equal(dwv.utils.replaceFlags(""), "", "ReplaceFlags empty/undefined");
+    // real
+    var str = "{a}";
+    var values = { "a": {"value": 33, "unit": "ohm"} };
+    assert.equal(dwv.utils.replaceFlags(str, values), "33.00 ohm", "ReplaceFlags real");
+    // real surrounded
+    str = "Resistance:{a}.";
+    values = { "a": {"value": 33, "unit": "ohm"} };
+    assert.equal(dwv.utils.replaceFlags(str, values), "Resistance:33.00 ohm.", "ReplaceFlags surrounded");
+    // real no unit
+    str = "{a}";
+    values = { "a": {"value": 33} };
+    assert.equal(dwv.utils.replaceFlags(str, values), "33.00", "ReplaceFlags real no unit");
+    // no match
+    str = "{a}";
+    values = { "b": {"value": 33, "unit": "ohm"} };
+    assert.equal(dwv.utils.replaceFlags(str, values), "{a}", "ReplaceFlags no match");
+    // no value
+    str = "{a}";
+    values = { "a": {"unit": "ohm"} };
+    assert.equal(dwv.utils.replaceFlags(str, values), "{a}", "ReplaceFlags no value");
+    // nothing to do
+    str = "a";
+    values = { "a": {"value": 33, "unit": "ohm"} };
+    assert.equal(dwv.utils.replaceFlags(str, values), "a", "ReplaceFlags nothing to do");
+    // nothing to do no values
+    str = "a";
+    values = {};
+    assert.equal(dwv.utils.replaceFlags(str, values), "a", "ReplaceFlags nothing to do no values");
+});

nv/html/dwv/tests/utils/thread.test.js

@@ -0,0 +1,56 @@
+/**
+ * Tests for the 'utils/thread' file.
+ */
+/** @module tests/utils */
+// Do not warn if these variables were not defined before.
+/* global QUnit */
+QUnit.module("thread");
+
+/**
+ * Tests for {@link dwv.utils.ThreadPool}.
+ * @function module:tests/utils~ThreadPool
+ */
+QUnit.test("Test ThreadPool.", function (assert) {
+
+    var done = assert.async();
+
+    // create the thread pool and initialise it
+    var pool = new dwv.utils.ThreadPool(20);
+    pool.init();
+
+    // number of workers
+    var nTestWorkers = 10;
+
+    // called on pool end, should be last
+    pool.onpoolworkend = function () {
+        // check counters
+        assert.equal(countWorkerCallback, nTestWorkers, "Count WorkerCallback");
+        assert.equal(countWorkerEnd, nTestWorkers, "Count WorkerEnd");
+        // finish async test
+        done();
+    };
+
+    // called on worker end
+    var countWorkerEnd = 0;
+    pool.onworkerend = function () {
+        ++countWorkerEnd;
+    };
+
+    // worker callback: check returned data
+    var countWorkerCallback = 0;
+    var workerCallback = function (event) {
+        if (event.data[0] === "papageno papagena") {
+            ++countWorkerCallback;
+        }
+    };
+
+    // create the workers and run them
+    for ( var i = 0; i < nTestWorkers; ++i ) {
+        // create worker task
+        var workerTask = new dwv.utils.WorkerTask(
+            "./utils/worker.js", workerCallback, {"input": "papageno"} );
+        // add it the queue and run it
+        pool.addWorkerTask(workerTask);
+    }
+
+});

nv/html/dwv/tests/utils/uri.test.js

@@ -0,0 +1,263 @@
+/**
+ * Tests for the 'utils/uri.js' file.
+ */
+// Do not warn if these variables were not defined before.
+/* global QUnit */
+QUnit.module("utils");
+
+/**
+ * Tests for {@link dwv.utils.splitUri}.
+ * @function module:tests/utils~splitUri
+ */
+QUnit.test("Test splitUri.", function (assert) {
+    // using JSON.stringify to compare objects
+    var strEmpty = JSON.stringify({});
+
+    // undefined
+    var res00 = dwv.utils.splitUri();
+    assert.equal(JSON.stringify(res00), strEmpty, "Split null");
+    // null
+    var res01 = dwv.utils.splitUri(null);
+    assert.equal(JSON.stringify(res01), strEmpty, "Split null");
+    // empty
+    var res02 = dwv.utils.splitUri("");
+    assert.equal(JSON.stringify(res02), strEmpty, "Split empty");
+
+    // test10
+    var test10 = "root?key0";
+    var res10 = dwv.utils.splitUri(test10);
+    var ref10 = {'base': "root", 'query': {}};
+    assert.equal(JSON.stringify(res10), JSON.stringify(ref10), "Split test10");
+    // test11
+    var test11 = "root?key0=val00";
+    var res11 = dwv.utils.splitUri(test11);
+    var ref11 = {'base': "root", 'query': {'key0': "val00"}};
+    assert.equal(JSON.stringify(res11), JSON.stringify(ref11), "Split test11");
+
+    // test20
+    var test20 = "root?key0=val00&key1";
+    var res20 = dwv.utils.splitUri(test20);
+    var ref20 = {'base': "root", 'query': {'key0': "val00"}};
+    assert.equal(JSON.stringify(res20), JSON.stringify(ref20), "Split test20");
+    // test21
+    var test21 = "root?key0=val00&key1=val10";
+    var res21 = dwv.utils.splitUri(test21);
+    var ref21 = {'base': "root", 'query': {'key0': "val00", 'key1': "val10"}};
+    assert.equal(JSON.stringify(res21), JSON.stringify(ref21), "Split test21");
+
+    // test30
+    var test30 = "root?key0=val00&key0&key1=val10";
+    var res30 = dwv.utils.splitUri(test30);
+    var ref30 = {'base': "root", 'query': {'key0': ["val00", null], 'key1': "val10"}};
+    assert.equal(JSON.stringify(res30), JSON.stringify(ref30), "Split test30");
+    // test31
+    var test31 = "root?key0=val00&key0=val01&key1=val10";
+    var res31 = dwv.utils.splitUri(test31);
+    var ref31 = {'base': "root", 'query': {'key0': ["val00", "val01"], 'key1': "val10"}};
+    assert.equal(JSON.stringify(res31), JSON.stringify(ref31), "Split test31");
+});
+
+/**
+ * Tests for {@link dwv.utils.getUriQuery}.
+ * @function module:tests/utils~getUriQuery
+ */
+QUnit.test("Test get URI query.", function (assert) {
+    var params;
+
+    // test 00
+    var root00 = "http://test.com?input=";
+    var uri00 = "result";
+    var full00 = root00 + encodeURIComponent(uri00);
+    params = dwv.utils.getUriQuery(full00);
+    var res00 = dwv.utils.decodeKeyValueUri( params.input, params.dwvReplaceMode );
+    var theo00 = [uri00];
+    assert.equal(res00.toString(), theo00.toString(), "Http uri");
+    // test 01
+    var root01 = "file:///test.html?input=";
+    var uri01 = "result";
+    var full01 = root01 + encodeURIComponent(uri01);
+    params = dwv.utils.getUriQuery(full01);
+    var res01 = dwv.utils.decodeKeyValueUri( params.input, params.dwvReplaceMode );
+    var theo01 = [uri01];
+    assert.equal(res01.toString(), theo01.toString(), "File uri");
+    // test 02
+    var root02 = "file:///test.html?input=";
+    var uri02 = "result?a=0&b=1";
+    var full02 = root02 + encodeURIComponent(uri02);
+    params = dwv.utils.getUriQuery(full02);
+    var res02 = dwv.utils.decodeKeyValueUri( params.input, params.dwvReplaceMode );
+    var theo02 = [uri02];
+    assert.equal(res02.toString(), theo02.toString(), "File uri with args");
+
+    // test 03
+    var root03 = "file:///test.html";
+    var full03 = root03 + encodeURIComponent(root03);
+    var res03 = dwv.utils.getUriQuery(full03);
+    assert.equal(res03, null, "File uri with no args");
+
+    // real world URI
+
+    // wado (called 'anonymised')
+    var root10 = "http://ivmartel.github.io/dwv/demo/static/index.html?input=";
+    var uri10 = "http://dicom.vital-it.ch:8089/wado?requestType=WADO&contentType=application/dicom&studyUID=1.3.6.1.4.1.19291.2.1.1.2675258517533100002&seriesUID=1.2.392.200036.9116.2.6.1.48.1215564802.1245749034.88493&objectUID=1.2.392.200036.9116.2.6.1.48.1215564802.1245749034.96207";
+    var full10 = root10 + encodeURIComponent(uri10);
+    params = dwv.utils.getUriQuery(full10);
+    var res10 = dwv.utils.decodeKeyValueUri( params.input, params.dwvReplaceMode );
+    var theo10 = [uri10];
+    assert.equal(res10.toString(), theo10.toString(), "Wado url");
+
+    // babymri
+    var root11 = "http://ivmartel.github.io/dwv/demo/static/index.html?input=";
+    var uri11 = "http://x.babymri.org/?53320924&.dcm";
+    var full11 = root11 + encodeURIComponent(uri11);
+    params = dwv.utils.getUriQuery(full11);
+    var res11 = dwv.utils.decodeKeyValueUri( params.input, params.dwvReplaceMode );
+    var theo11 = [uri11];
+    assert.equal(res11.toString(), theo11.toString(), "Babymri uri");
+
+    // github
+    var root12 = "http://ivmartel.github.io/dwv/demo/static/index.html?input=";
+    var uri12 = "https://github.com/ivmartel/dwv/blob/master/data/cta0.dcm?raw=true";
+    var full12 = root12 + encodeURIComponent(uri12);
+    params = dwv.utils.getUriQuery(full12);
+    var res12 = dwv.utils.decodeKeyValueUri( params.input, params.dwvReplaceMode );
+    var theo12 = [uri12];
+    assert.equal(res12.toString(), theo12.toString(), "Github uri");
+
+    // multiple URI
+
+    // simple test: one argument
+    var root20 = "file:///test.html?input=";
+    var uri20 = "result?a=0";
+    var full20 = root20 + encodeURIComponent(uri20);
+    params = dwv.utils.getUriQuery(full20);
+    var res20 = dwv.utils.decodeKeyValueUri( params.input, params.dwvReplaceMode );
+    var theo20 = ["result?a=0"];
+    assert.equal(res20.toString(), theo20.toString(), "Multiple key uri with one arg");
+
+    // simple test: two arguments
+    var root21 = "file:///test.html?input=";
+    var uri21 = "result?a=0&a=1";
+    var full21 = root21 + encodeURIComponent(uri21);
+    params = dwv.utils.getUriQuery(full21);
+    var res21 = dwv.utils.decodeKeyValueUri( params.input, params.dwvReplaceMode );
+    var theo21 = ["result?a=0", "result?a=1"];
+    assert.equal(res21.toString(), theo21.toString(), "Multiple key uri with two args");
+
+    // simple test: three arguments
+    var root22 = "file:///test.html?input=";
+    var uri22 = "result?a=0&a=1&a=2";
+    var full22 = root22 + encodeURIComponent(uri22);
+    params = dwv.utils.getUriQuery(full22);
+    var res22 = dwv.utils.decodeKeyValueUri( params.input, params.dwvReplaceMode );
+    var theo22 = ["result?a=0", "result?a=1", "result?a=2"];
+    assert.equal(res22.toString(), theo22.toString(), "Multiple key uri with three args");
+
+    // simple test: plenty arguments
+    var root23 = "file:///test.html?input=";
+    var uri23 = "result?a=0&a=1&a=2&b=3&c=4";
+    var full23 = root23 + encodeURIComponent(uri23);
+    params = dwv.utils.getUriQuery(full23);
+    var res23 = dwv.utils.decodeKeyValueUri( params.input, params.dwvReplaceMode );
+    var theo23 = ["result?b=3&c=4&a=0", "result?b=3&c=4&a=1", "result?b=3&c=4&a=2"];
+    assert.equal(res23.toString(), theo23.toString(), "Multiple key uri with plenty args");
+
+    // real world multiple URI
+
+    // wado (called 'anonymised')
+    var root30 = "http://ivmartel.github.io/dwv/demo/static/index.html?input=";
+    var uri30 = "http://dicom.vital-it.ch:8089/wado?requestType=WADO&contentType=application/dicom&studyUID=1.3.6.1.4.1.19291.2.1.1.2675258517533100002&seriesUID=1.2.392.200036.9116.2.6.1.48.1215564802.1245749034.88493&objectUID=1.2.392.200036.9116.2.6.1.48.1215564802.1245749034.96207&objectUID=1.2.392.200036.9116.2.6.1.48.1215564802.1245749216.165708";
+    var full30 = root30 + encodeURIComponent(uri30);
+    params = dwv.utils.getUriQuery(full30);
+    var res30 = dwv.utils.decodeKeyValueUri( params.input, params.dwvReplaceMode );
+    var theo30 = ["http://dicom.vital-it.ch:8089/wado?requestType=WADO&contentType=application/dicom&studyUID=1.3.6.1.4.1.19291.2.1.1.2675258517533100002&seriesUID=1.2.392.200036.9116.2.6.1.48.1215564802.1245749034.88493&objectUID=1.2.392.200036.9116.2.6.1.48.1215564802.1245749034.96207",
+                  "http://dicom.vital-it.ch:8089/wado?requestType=WADO&contentType=application/dicom&studyUID=1.3.6.1.4.1.19291.2.1.1.2675258517533100002&seriesUID=1.2.392.200036.9116.2.6.1.48.1215564802.1245749034.88493&objectUID=1.2.392.200036.9116.2.6.1.48.1215564802.1245749216.165708"];
+    assert.equal(res30.toString(), theo30.toString(), "Multiple Wado url");
+
+    // babymri: test for replaceMode
+    var root31 = "http://ivmartel.github.io/dwv/demo/static/index.html?input=";
+    var uri31 = "http://x.babymri.org/?key=53320924&key=53320925&key=53320926";
+    var full31 = root31 + encodeURIComponent(uri31) + "&dwvReplaceMode=void";
+    params = dwv.utils.getUriQuery(full31);
+    var res31 = dwv.utils.decodeKeyValueUri( params.input, params.dwvReplaceMode );
+    var theo31 = ["http://x.babymri.org/?53320924", "http://x.babymri.org/?53320925", "http://x.babymri.org/?53320926"];
+    assert.equal(res31.toString(), theo31.toString(), "Multiple baby mri (replaceMode)");
+
+    // github: not supported
+
+    // simple links (no query)
+
+    // simple test: plenty arguments
+    var root40 = "file:///test.html?input=";
+    var uri40 = "web/path/to/file/?file=0.dcm&file=1.dcm&file=2.dcm";
+    var full40 = root40 + encodeURIComponent(uri40) + "&dwvReplaceMode=void";
+    params = dwv.utils.getUriQuery(full40);
+    var res40 = dwv.utils.decodeKeyValueUri( params.input, params.dwvReplaceMode );
+    var theo40 = ["web/path/to/file/0.dcm", "web/path/to/file/1.dcm", "web/path/to/file/2.dcm"];
+    assert.equal(res40.toString(), theo40.toString(), "Multiple file-like uri");
+
+});
+
+/**
+ * Tests for {@link dwv.utils.decodeManifest}.
+ * @function module:tests/utils~decodeManifest
+ */
+QUnit.test("Test decode Manifest.", function (assert) {
+    // test values
+    var wadoUrl = "http://my.pacs.org:8089/wado";
+    var studyInstanceUID = "1.2.840.113619.2.134.1762680288.2032.1122564926.252";
+    var seriesInstanceUID0 = "1.2.840.113619.2.134.1762680288.2032.1122564926.253";
+    var sOPInstanceUID00 = "1.2.840.113619.2.134.1762680288.2032.1122564926.254";
+    var sOPInstanceUID01 = "1.2.840.113619.2.134.1762680288.2032.1122564926.255";
+    var seriesInstanceUID1 = "1.2.840.113619.2.134.1762680288.2032.1122564926.275";
+    var sOPInstanceUID10 = "1.2.840.113619.2.134.1762680288.2032.1122564926.276";
+    var sOPInstanceUID11 = "1.2.840.113619.2.134.1762680288.2032.1122564926.277";
+    var sOPInstanceUID12 = "1.2.840.113619.2.134.1762680288.2032.1122564926.275";
+
+    // create a test manifest
+    var doc = document.implementation.createDocument(null, "wado_query", null);
+    doc.documentElement.setAttribute("wadoURL", wadoUrl);
+    // series 0
+    var instance00 = doc.createElement("Instance");
+    instance00.setAttribute("SOPInstanceUID", sOPInstanceUID00);
+    var instance01 = doc.createElement("Instance");
+    instance01.setAttribute("SOPInstanceUID", sOPInstanceUID01);
+    var series0 = doc.createElement("Series");
+    series0.setAttribute("SeriesInstanceUID", seriesInstanceUID0);
+    series0.appendChild(instance00);
+    series0.appendChild(instance01);
+    // series 1
+    var instance10 = doc.createElement("Instance");
+    instance10.setAttribute("SOPInstanceUID", sOPInstanceUID10);
+    var instance11 = doc.createElement("Instance");
+    instance11.setAttribute("SOPInstanceUID", sOPInstanceUID11);
+    var instance12 = doc.createElement("Instance");
+    instance12.setAttribute("SOPInstanceUID", sOPInstanceUID12);
+    var series1 = doc.createElement("Series");
+    series1.setAttribute("SeriesInstanceUID", seriesInstanceUID1);
+    series1.appendChild(instance10);
+    series1.appendChild(instance11);
+    series1.appendChild(instance12);
+    // study
+    var study = doc.createElement("Study");
+    study.setAttribute("StudyInstanceUID", studyInstanceUID);
+    study.appendChild(series0);
+    study.appendChild(series1);
+    // patient
+    var patient = doc.createElement("Patient");
+    patient.appendChild(study);
+    // main
+    doc.documentElement.appendChild(patient);
+
+    // decode (only reads first series)
+    var res = dwv.utils.decodeManifest(doc, 2);
+    // theoretical test decode result
+    var middle = "?requestType=WADO&contentType=application/dicom&";
+    var theoLinkRoot = wadoUrl + middle + "&studyUID=" + studyInstanceUID +
+        "&seriesUID=" + seriesInstanceUID0;
+    var theoLink = [ theoLinkRoot + "&objectUID=" + sOPInstanceUID00,
+                     theoLinkRoot + "&objectUID=" + sOPInstanceUID01];
+
+    assert.equal(res[0], theoLink[0], "Read regular manifest link0");
+    assert.equal(res[1], theoLink[1], "Read regular manifest link1");
+});

nv/html/dwv/tests/utils/worker.js

@@ -0,0 +1,12 @@
+/**
+ * Test worker.
+ */
+// Do not warn if these variables were not defined before.
+/* global self */
+
+self.addEventListener('message', function (event) {
+
+    var res = event.data.input + " papagena";
+    self.postMessage([res]);
+
+}, false);

nv/html/dwv/tests/visual/appgui.js

@@ -0,0 +1,115 @@
+/**
+ * Application GUI.
+ *
+ * Snapshots were created using synedra View Personal (http://www.synedra.com),
+ *  version 14 for Microsoft Windows:
+ * - Right click on the thumbnail in the left 'Document tree area',
+ * - Choose 'Convert to JPEG'.
+ */
+
+// Default window level presets.
+dwv.tool.defaultpresets = {};
+
+// Image decoders (for web workers)
+dwv.image.decoderScripts = {
+    "jpeg2000": "../../decoders/pdfjs/decode-jpeg2000.js",
+    "jpeg-lossless": "../../decoders/rii-mango/decode-jpegloss.js",
+    "jpeg-baseline": "../../decoders/pdfjs/decode-jpegbaseline.js"
+};
+
+// Window
+dwv.gui.getWindowSize = dwv.gui.base.getWindowSize;
+// get element
+dwv.gui.getElement = dwv.gui.base.getElement;
+// Progress
+dwv.gui.displayProgress = function (/*percent*/) {};
+
+// check browser support
+dwv.browser.check();
+
+// test data line
+dwv.addDataLine = function (id, fileroot, doc)
+{
+    var mainDiv = document.getElementById("data-lines");
+
+    // dwv container
+    var dwvDiv = document.createElement("div");
+    dwvDiv.id = id;
+    var layConDiv = document.createElement("div");
+    layConDiv.className = "layerContainer";
+    var imgCanvas = document.createElement("canvas");
+    imgCanvas.className = "imageLayer";
+    layConDiv.appendChild(imgCanvas);
+    dwvDiv.appendChild(layConDiv);
+    mainDiv.appendChild(dwvDiv);
+
+    // dwv application
+    var config = {
+        "containerDivId": id,
+        "skipLoadUrl": true
+    };
+    var url = "../data/" + fileroot + ".dcm";
+    var app = new dwv.App();
+    app.init(config);
+    // display loading time
+    var listener = function (event) {
+        if (event.type === "load-start") {
+            console.time("load-data::"+fileroot);
+        }
+        else {
+            console.timeEnd("load-data::"+fileroot);
+        }
+    };
+    app.addEventListener("load-start", listener);
+    app.addEventListener("load-end", listener);
+    // load data
+    app.loadURLs([url]);
+
+    // image
+    var image = document.createElement("img");
+    image.src = "./images/" + fileroot + ".jpg";
+    image.setAttribute("class", "snapshot");
+    mainDiv.appendChild(image);
+
+    // doc
+    var docDiv = document.createElement("div");
+    docDiv.setAttribute("class", "doc");
+    var docUl = document.createElement("ul");
+    var keys = Object.keys(doc);
+    for ( var i = 0; i < keys.length; ++i ) {
+        var li = document.createElement("li");
+        var spanKey = document.createElement("span");
+        spanKey.setAttribute("class", "key");
+        spanKey.appendChild( document.createTextNode(keys[i]) );
+        var spanValue = document.createElement("span");
+        spanValue.setAttribute("class", "value");
+        spanValue.appendChild( document.createTextNode(doc[keys[i]]) );
+        if ( keys[i] === "origin" ) {
+
+            var spanOrig = document.createElement("span");
+            spanOrig.setAttribute("class", "path");
+            spanOrig.setAttribute("title", doc.path);
+            spanOrig.appendChild( document.createTextNode(doc[keys[i]]) );
+            li.appendChild( spanKey );
+            li.appendChild( document.createTextNode( ": " ) );
+            li.appendChild( spanOrig );
+            docUl.appendChild(li);
+        }
+        else if ( keys[i] === "path" ) {
+            // nothing to do
+        }
+        else {
+            li.appendChild( spanKey );
+            li.appendChild( document.createTextNode( ": " ) );
+            li.appendChild( spanValue );
+            docUl.appendChild(li);
+        }
+    }
+    docDiv.appendChild(docUl);
+    mainDiv.appendChild(docDiv);
+
+    // separator
+    var sepDiv = document.createElement("div");
+    sepDiv.setAttribute("class", "separator");
+    mainDiv.appendChild(sepDiv);
+};