InsightSoftwareConsortium · agirault · Sep 4, 2019 · Sep 4, 2019 · Sep 5, 2019 · Sep 5, 2019
diff --git a/examples/Dicom/.babelrc b/examples/Dicom/.babelrc
@@ -0,0 +1,11 @@
+{
+  presets: [
+    ['@babel/preset-env', {
+      targets: {
+        browsers: ['last 2 versions'],
+      },
+      corejs: 3,
+      useBuiltIns: "usage",
+    }],
+  ],
+}
diff --git a/examples/Dicom/README.md b/examples/Dicom/README.md
@@ -0,0 +1,23 @@
+itk-webpack-example
+===================
+
+This example demonstrates how to load DICOM files using [itk.js](https://insightsoftwareconsortium.github.io/itk-js/).
+More information can be found in the [example
+documentation](https://insightsoftwareconsortium.github.io/itk-js/examples/dicom.html).
+
+## Run Locally
+
+```
+npm install
+npm run start
+```
+
+And visit [http://localhost:8080/](http://localhost:8080/).
+
+## Development
+
+```
+npm install
+npm run build
+npm test
+```
diff --git a/examples/Dicom/dist/index.html b/examples/Dicom/dist/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>itk.js Webpack Example</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="styles.css">
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+  </head>
+
+  <body>
+    <!-- Input selector -->
+    <div>
+      <label>Select dicom file(s):</label>
+      <input name="inputFile" type="file" multiple>
+    </div>
+
+    <!-- Serie selector -->
+    <form name="dicomForm" id="dicomForm">
+      Patient:
+      <select id="patientSelect" size="1">
+        <option value="" selected="selected">Select patient</option>
+      </select>
+      <br>
+      Study:
+      <select id="studySelect" size="1">
+        <option value="" selected="selected">Please select patient first</option>
+      </select>
+      <br>
+      Serie:
+      <select id="serieSelect" size="1">
+        <option value="" selected="selected">Please select study first</option>
+      </select>
+    </form>
+
+    <!-- File information -->
+    <textarea readonly name="fileInformation">File information...</textarea>
+
+    <!-- Javascript -->
+    <script src="index.js"></script>
+    <script>
+      var outputTextArea = document.querySelector('textarea')
+      var handleFile = index.outputFileInformation(outputTextArea)
+      var fileInput = document.querySelector('input')
+      fileInput.addEventListener('change', handleFile);
+    </script>
+  </body>
+</html>
diff --git a/examples/Dicom/dist/styles.css b/examples/Dicom/dist/styles.css
@@ -0,0 +1,10 @@
+html, body {
+  height: 90%;
+}
+
+textarea {
+  resize: none;
+  overflow-y: scroll;
+  width: 100%;
+  height: 100%;
+}
diff --git a/examples/Dicom/package.json b/examples/Dicom/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "itk-dicom-example",
+  "version": "1.0.1",
+  "description": "This example demonstrates how to load DICOM files using itk.js.",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack --progress --colors -p",
+    "start": "webpack-dev-server --mode development --content-base ./dist/ --watch-content-base"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/InsightSoftwareConsortium/itk-js.git"
+  },
+  "keywords": [
+    "itk",
+    "webpack"
+  ],
+  "author": "Matt McCormick <[email protected]>",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/InsightSoftwareConsortium/itk-js/issues"
+  },
+  "homepage": "https://github.com/InsightSoftwareConsortium/itk-js#readme",
+  "dependencies": {
+    "core-js": "^3.6.4",
+    "curry": "^1.2.0",
+    "dicom-parser": "^1.8.3",
+    "expose-loader": "^0.7.5",
+    "itk": "^12.3.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "babel-loader": "^8.0.4",
+    "copy-webpack-plugin": "^4.5.1",
+    "tap-spec": "^4.1.1",
+    "tape": "^4.9.0",
+    "webpack": "^4.27.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10"
+  }
+}
diff --git a/examples/Dicom/src/dicomForm.js b/examples/Dicom/src/dicomForm.js
@@ -0,0 +1,84 @@
+
+function setupDicomForm(patients, callback) {
+  const patientSelect = document.getElementById("patientSelect")
+  const studySelect = document.getElementById("studySelect")
+  const serieSelect = document.getElementById("serieSelect")
+
+  // Remove options
+  var patientList = []
+  var studyList = []
+  var serieList = []
+  patientSelect.length = 1;
+
+  // Add patients
+  for (const key in patients) {
+    const patient = patients[key]
+    patientList.push(patient)
+    const value = patient.metaData.PatientName + " - " + patient.metaData.PatientBirthDate
+    patientSelect.options[patientSelect.options.length] = new Option(value, value);
+  }
+
+  patientSelect.onchange = function () {
+    // Remove options
+    studyList = []
+    serieList = []
+    studySelect.length = 1;
+    serieSelect.length = 1;
+
+    if (this.selectedIndex < 1) return; // done
+
+    // Add underneath studies
+    const patientId = this.selectedIndex - 1
+    const patient = patientList[patientId]
+    for (const key in patient.studies) {
+      const study = patient.studies[key]
+      studyList.push(study)
+      const value = study.metaData.StudyDescription + " - " + study.metaData.StudyDate
+      studySelect.options[studySelect.options.length] = new Option(value, value);
+    }
+
+    if (studyList.length === 1) {
+      studySelect.selectedIndex = 1
+      studySelect.onchange()
+    }
+  }
+
+  studySelect.onchange = function () {
+    // Remove options
+    serieList = []
+    serieSelect.length = 1;
+
+    if (this.selectedIndex < 1) return; // done
+
+    // Add underneath series
+    const studyId = this.selectedIndex - 1
+    const study = studyList[studyId]
+    for (const key in study.series) {
+      const serie = study.series[key]
+      serieList.push(serie)
+      const value = serie.metaData.SeriesDescription + " - " + serie.metaData.Modality
+      serieSelect.options[serieSelect.options.length] = new Option(value, value);
+    }
+
+    if (serieList.length === 1) {
+      serieSelect.selectedIndex = 1
+      serieSelect.onchange()
+    }
+  }
+
+  serieSelect.onchange = function () {
+    if (this.selectedIndex < 1) return; // done
+
+    // Return files for serie
+    const serieId = this.selectedIndex - 1
+    const serie = serieList[serieId]
+    callback(serie)
+  }
+
+  if (patientList.length === 1) {
+    patientSelect.selectedIndex = 1
+  }
+  patientSelect.onchange(); // reset in case page is reloaded
+}
+
+export default setupDicomForm;