Published
Edited
Jul 9, 2020
md`# Hello ITK (unfinished)`
html` <div>
<label>Select image or mesh:</label>
<input name="inputFile" type="file">
</div>
<!-- File information -->
<textarea readonly name="fileInformation">File information...</textarea>
<!-- File visualization -->
<div id="viewer"></div>
`
{
var fileInput = document.querySelector("input");
fileInput.addEventListener("change", processFile);
return fileInput;
}
function processFile(event) {
const outputTextArea = document.querySelector("textarea");
outputTextArea.textContent = "Loading...";
const dataTransfer = event.dataTransfer;
const files = event.target.files || dataTransfer.files;
const viewerElement = document.getElementById('viewer')
//!!viewerElement && itkVtkViewer.createViewerFromFiles(viewerElement, files)
return itk.readFile(null, files[0]).then(function({ image, mesh, polyData, webWorker }) {
webWorker.terminate();
var imageOrMeshOrPolyData = image || mesh || polyData;
function replacer(key, value) {
if (!!value && value.byteLength !== undefined) {
return String(value.slice(0, 6)) + "...";
}
return value;
}
outputTextArea.textContent = JSON.stringify(imageOrMeshOrPolyData, replacer, 4);
});
}
image = itk.readImageLocalDICOMFileSeries(filePaths, false);
itk = require('https://unpkg.com/itk@12.4.0/umd/itk.js').then(() => window.itk);
itkViewer = require('https://unpkg.com/itk-vtk-viewer@9.23.2/dist/itkVtkViewerCDN.js');
vtk = require("vtk.js").then(() => window.vtk);
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
