+ Scroll Mode Active: Slices +
- - +- Open form: Allows to modify DICOM tags and download the - modified image/images -
-- Drag and drop a folder or a list of dicom files to visualize in the - current viewer -
-+ Open form: Allows to modify DICOM tags and download the modified + image/images +
++ Drag and drop a folder or a list of dicom files to visualize in the + current viewer +
+| Tag | -Name | -Value | -
|---|
| Tag | +Name | +Value | +
|---|
- Press "m" to cycle through color maps -
-- Active Color Map: Gray -
+ +Press "m" to cycle through color maps ->
+Active Color Map: Gray
-
-
- let demoFiles = [];
- let counter = 0;
-
- const getDemoFileNames = function () {
- let demoFileList = [];
- for (let i = 1; i < 25; i++) {
- let filename = "anon" + i;
- demoFileList.push(filename);
- }
- return demoFileList;
- };
-
- // init all
- larvitar.initializeImageLoader();
- larvitar.initializeCSTools();
- larvitar.store.initialize();
- larvitar.store.addViewport("viewer");
-
- async function createFile(fileName, cb) {
- let response = await fetch("./demo/" + fileName);
- let data = await response.blob();
- let file = new File([data], fileName);
- demoFiles.push(file);
- counter++;
- if (counter == 24) {
- cb();
- }
- }
-
- function renderSerie() {
- larvitar
- .readFiles(demoFiles)
- .then(seriesStack => {
- // render the first series of the study
- let seriesId = _.keys(seriesStack)[0];
- let serie = seriesStack[seriesId];
- larvitar.renderImage(serie, "viewer").then(() => {
- console.log("Image has been rendered");
- });
- larvitar.addDefaultTools();
- larvitar.setToolActive("Wwwc");
- })
- .catch(err => console.log(err));
- }
-
- let demoFileList = getDemoFileNames();
- _.each(demoFileList, function (demoFile) {
- createFile(demoFile, renderSerie);
- });
-
- let color_counter = 0;
- document.onkeypress = function (e) {
- e = e || window.event;
- let color_maps = larvitar.getColormapsList();
- color_counter =
- color_counter == color_maps.length - 1 ? 0 : color_counter + 1;
- let color_map = color_maps[color_counter];
- if (e.keyCode == 109) {
- larvitar.applyColorMap(color_map.id);
- $("#active-color-map").html("Active Color Map: " + color_map.name);
- }
- };
-
-
-
+
+ - Left Mouse Button: Press "t" to cycle through tools -
-- Active Tool: Wwwc -
-- Right Mouse Button: drag >> Zoom || drag + Ctrl >> Pan -
-
-
-
-
- let demoFiles = [];
- let counter = 0;
+
+
- const getDemoFileNames = function () {
- let demoFileList = [];
- for (let i = 1; i < 25; i++) {
- let filename = "anon" + i;
- demoFileList.push(filename);
- }
- return demoFileList;
- };
+
+
- // init all
- larvitar.initializeImageLoader();
- larvitar.initializeCSTools();
- larvitar.store.initialize();
- larvitar.store.addViewport("viewer");
+
+
+
+
- async function createFile(fileName, cb) {
- let response = await fetch("./demo/" + fileName);
- let data = await response.blob();
- let file = new File([data], fileName);
- demoFiles.push(file);
- counter++;
- if (counter == 24) {
- cb();
- }
- }
+
+
- let tool_counter = 0;
- document.onkeypress = function (e) {
- e = e || window.event;
- if (e.keyCode == 116 || e.keyCode == 84) {
- let tools = _.map(larvitar.DEFAULT_TOOLS, "name");
- // remove useless tools for the live example
- tools = _.without(
- tools,
- "StackScrollMouseWheel",
- "TextMarker",
- "ZoomTouchPinch",
- "PanMultiTouch",
- "OrientationMarkers",
- "ScaleOverlay"
- );
- // remove not working tools for the live example
- // see open issue
- tools = _.without(
- tools,
- "Brush",
- "ThresholdsBrush",
- "RectangleScissors",
- "FreehandScissors",
- "CircleScissors",
- "CorrectionScissors",
- "PolylineScissors"
- );
- let increment = e.shiftKey ? -1 : 1;
- tool_counter =
- tool_counter == tools.length - 1 ? 0 : tool_counter + increment;
- tool_counter = tool_counter < 0 ? 0 : tool_counter;
- let tool = tools[tool_counter];
- larvitar.setToolActive(tool);
- $("#active-tool").html("Active Tool: " + tool);
- }
- };
-
-
-
+ + Left Mouse Button: Press "t" to cycle through tools +
++ Active Tool: Wwwc +
++ Right Mouse Button: drag >> Zoom || drag + Ctrl >> Pan +
+ + + +- Press "1" to render standard image -
-- Press "2" to apply digital subtraction angiography mask -
-- Press "w | a | s | d" to apply a pixel shift in the designed direction - on current frame -
-- Press "x" to reset pixel shift on current frame -
-- Press "3" to apply pixel shift on all the stack -
-- Press "p" to play/pause frame animation -
- - + ++ Press "1" to render standard image +
++ Press "2" to apply digital subtraction angiography mask +
++ Press "w | a | s | d" to apply a pixel shift in the designed direction + on current frame +
++ Press "x" to reset pixel shift on current frame +
++ Press "3" to apply pixel shift on all the stack +
++ Press "p" to play/pause frame animation +
+ + + + + +- Press "p" to play/pause frame animation -
-- Press "e" to play/pause ecg animation -
- - -- Press "+/-" to change frame rate -
- - - -
-
-
- let demoFiles = [];
-
- // init all
- larvitar.initializeImageLoader();
- larvitar.registerMultiFrameImageLoader();
- larvitar.initializeCSTools();
- larvitar.store.initialize();
- larvitar.store.addViewport("viewer");
-
- function renderSerie() {
- larvitar.readFiles(demoFiles).then(seriesStack => {
- let seriesId = _.keys(seriesStack)[0];
- let serie = seriesStack[seriesId];
- larvitar.populateLarvitarManager(seriesId, serie);
- let manager = larvitar.getImageManager();
- let multiFrameSerie = manager[seriesId];
- let frameId = 0;
- // check if the series has waveform data
- if (multiFrameSerie.waveform) {
- larvitar.parseECG(seriesId, manager[seriesId].dataSet, "x50003000");
- }
- larvitar.renderImage(multiFrameSerie, "viewer", frameId).then(() => {
- console.log("Image has been rendered");
- larvitar.addDefaultTools();
- let animation = false;
- let animationId = null;
- let numberOfFrames = multiFrameSerie.numberOfFrames;
- let frameTime = multiFrameSerie.frameTime;
- // generate trace data and render the ECG
-
- const trace_data = larvitar.renderECG(
- manager[seriesId].ecgData,
- "ecg",
- "red",
- numberOfFrames,
- frameTime,
- 0
- );
- // save trace data in the manager for futrue use
- manager[seriesId].trace_data = trace_data;
- // sync the ECG frame with the image frame
- larvitar.syncECGFrame(
- trace_data,
- seriesId,
- "viewer",
- numberOfFrames,
- "ecg"
- );
-
- let frameRate = multiFrameSerie.frameTime;
- $("#frame-rate").html("Frame Rate: " + parseInt(frameRate) + "ms");
- $("#current-frame").html("Current Frame: 1 of " + numberOfFrames);
-
- document.onkeypress = function (e) {
- e = e || window.event;
- if (e.keyCode == 112) {
- animation = !animation;
- if (animation) {
- frameId = larvitar.store.get([
- "viewports",
- "viewer",
- "sliceId"
- ]);
- animationId = setInterval(function () {
- let series =
- larvitar.getSeriesDataFromLarvitarManager(seriesId);
- frameId = frameId == numberOfFrames - 1 ? 0 : frameId + 1;
- larvitar.updateImage(series, "viewer", frameId, false);
- larvitar.updateStackToolState("viewer", frameId);
- $("#current-frame").html(
- "Current Frame: " +
- parseInt(frameId + 1) +
- " of " +
- numberOfFrames
- );
- larvitar.updateECGMarker(
- trace_data,
- frameId,
- numberOfFrames,
- "ecg"
- );
- }, frameRate);
- } else {
- clearInterval(animationId);
- $("#current-frame").html();
- }
- }
- };
- });
- });
- }
+
+
+ Press "p" to play/pause frame animation
+
+
+ Press "e" to play/pause ecg animation
+
+
+
+
+ Press "+/-" to change frame rate
+
+
+
+
+
- async function createFile(fileName, cb) {
- let response = await fetch("./demo/" + fileName);
- let data = await response.blob();
- let file = new File([data], fileName);
- demoFiles.push(file);
- cb();
- }
- createFile("119265", renderSerie);
-
-
-
+
+
-
-
- let demoFiles = [];
- let counter = 0;
-
- const getDemoFileNames = function () {
- let demoFileList = [];
- for (let i = 1; i < 25; i++) {
- let filename = "anon" + i;
- demoFileList.push(filename);
- }
- return demoFileList;
- };
-
- // init all
- larvitar.initializeImageLoader();
- larvitar.initializeCSTools();
- larvitar.store.initialize();
- larvitar.store.addViewport("viewer");
-
- async function createFile(fileName, cb) {
- let response = await fetch("./demo/" + fileName);
- let data = await response.blob();
- let file = new File([data], fileName);
- demoFiles.push(file);
- counter++;
- if (counter == 24) {
- cb();
- }
- }
-
- function renderSerie() {
- larvitar.resetImageManager();
- larvitar
- .readFiles(demoFiles)
- .then(seriesStack => {
- // render the first series of the study
- let seriesId = _.keys(seriesStack)[0];
- let serie = seriesStack[seriesId];
- larvitar.renderImage(serie, "viewer").then(() => {
- console.log("Image has been rendered");
- });
- // optionally cache the series
- larvitar.populateLarvitarManager(seriesId, serie);
- larvitar.cacheImages(serie, function (resp) {
- if (resp.loading == 100) {
- let cache = larvitar.cornerstone.imageCache;
- console.log(
- "Cache size: ",
- cache.getCacheInfo().cacheSizeInBytes / 1e6,
- "Mb"
- );
- }
- });
- larvitar.addDefaultTools();
- larvitar.setToolActive("Wwwc");
- })
- .catch(err => console.log(err));
- }
-
- let demoFileList = getDemoFileNames();
- _.each(demoFileList, function (demoFile) {
- createFile(demoFile, renderSerie);
- });
-
-
-
+
+ @@ -50,119 +141,68 @@ style="position: absolute; top: 40px; color: white" >
+ -
-
-
- let demoFiles = [];
- let counter = 0;
-
- const getDemoFileNames = function () {
- let demoFileList = [];
- for (let i = 1; i < 25; i++) {
- let filename = "anon" + i;
- demoFileList.push(filename);
- }
- return demoFileList;
- };
-
- // init all
- larvitar.initializeImageLoader();
- larvitar.initializeCSTools();
- larvitar.store.initialize();
- larvitar.store.addViewport("viewer");
-
- async function createFile(fileName, cb) {
- let response = await fetch("./demo/" + fileName);
- let data = await response.blob();
- let file = new File([data], fileName);
- demoFiles.push(file);
- counter++;
- if (counter == 24) {
- cb();
- }
- }
-
- let layer_1, layer_2;
-
- function renderSerie() {
- larvitar
- .readFiles(demoFiles)
- .then(seriesStack => {
- let seriesId = _.keys(seriesStack)[0];
-
- let serie_1 = { ...seriesStack[seriesId] };
- let serie_2 = { ...seriesStack[seriesId] };
-
- layer_1 = larvitar.buildLayer(serie_1, "main");
- layer_2 = larvitar.buildLayer(serie_2, "colored", {
- opacity: 0.25,
- colormap: "hotIron"
- });
-
- // define a layer into the series object to be rendered
- serie_1.layer = layer_1;
- serie_2.layer = layer_2;
-
- larvitar.renderImage(serie_1, "viewer").then(() => {
- console.log("Image 1 has been rendered");
- });
- larvitar.renderImage(serie_2, "viewer").then(() => {
- console.log("Image 2 has been rendered");
- });
-
- $("#active-layer").html("Active Layer: main");
- $("#opacity").html("Opacity: 1.0");
-
- larvitar.addDefaultTools();
- })
- .catch(err => console.log(err));
- }
- let demoFileList = getDemoFileNames();
- _.each(demoFileList, function (demoFile) {
- createFile(demoFile, renderSerie);
- });
-
- document.onkeypress = function (e) {
- e = e || window.event;
- if (e.keyCode == 97) {
- let activeLayer = larvitar.getActiveLayer("viewer");
- let newActiveLayer =
- activeLayer.layerId == layer_1.id ? layer_2 : layer_1;
-
- larvitar.setActiveLayer("viewer", newActiveLayer.id);
- $("#active-layer").html(
- "Active Layer: " + newActiveLayer.options.name
- );
- $("#opacity").html("Opacity: " + newActiveLayer.options.opacity);
- }
- if (e.keyCode == 111) {
- let activeLayer = larvitar.getActiveLayer("viewer");
- let opacity =
- activeLayer.options.opacity == 1.0
- ? 0.0
- : activeLayer.options.opacity + 0.25;
- larvitar.updateLayer("viewer", activeLayer.layerId, {
- opacity: opacity
- });
- $("#opacity").html("Opacity: " + opacity);
- }
- };
-
-
-
+
+ -+ +- Example of loading a segmentation - mask on the image. - You can modify the mask using Brush tool. - (press ctrl to delete instead of adding) -
- - ---- let demoFiles = []; - let counter = 0; + + - const getDemoFileNames = function () { - let demoFileList = []; - for (let i = 1; i < 25; i++) { - let filename = "anon" + i; - demoFileList.push(filename); - } - return demoFileList; - }; + + - // init all - larvitar.initializeImageLoader(); - larvitar.initializeCSTools(); - larvitar.store.initialize(); - larvitar.store.addViewport("viewer"); - larvitar.registerNRRDImageLoader(); + + + + - async function createFile(fileName, cb) { - let response = await fetch("./demo/" + fileName); - let data = await response.blob(); - let file = new File([data], fileName); - demoFiles.push(file); - counter++; - if (counter == 24) { - cb(); - } - } + + - async function loadMasks() { - larvitar.initSegmentationModule(); - - // fetch data - let response = await fetch("./demo/" + "segmentation.nrrd"); - let data = await response.blob(); - let nrrd_file = new File([data], "segmentation.nrrd"); - // read file - let reader = new FileReader(); - reader.readAsArrayBuffer(nrrd_file); - reader.onload = function () { - // create volume - let volume = larvitar.importNRRDImage(reader.result); - // define mask properties - let properties = { - // color: "#00ff00", - opacity: 0.2, - labelId: 0 - }; - // add to viewport - larvitar - .addSegmentationMask(properties, volume.data, "viewer") - .then(() => { - // activate brush on this labelmap - larvitar.setActiveLabelmap(0, "viewer"); - larvitar.setToolActive("Brush"); - }); - }; - } - - let activeLabel = 1; - function switchLabel() { - let nextLabel = activeLabel == 1 ? 2 : 1; - larvitar.setActiveSegment(nextLabel, "viewer"); - activeLabel = nextLabel; - let btn = document.getElementById("btn-label"); - let btnClass = btn.className; - if (activeLabel == 1) { - btn.className = btnClass.replace("warning", "danger"); - } else { - btn.className = btnClass.replace("danger", "warning"); - } - } - function undo() { - larvitar.undoLastStroke("viewer"); - } - function redo() { - larvitar.redoLastStroke("viewer"); - } +
Larvitar - Masks rendering example + - /** - * Undo: larvitar.undoLastStroke("viewer"); - * Redo: larvitar.redoLastStroke("viewer"); - * Switch: larvitar.setActiveSegment(1|2, "viewer"); - */ - -
+ Example of loading a segmentation mask on the image. You can modify the + mask using Brush tool. (press ctrl to delete instead of adding) +
+ + ++ Example of loading a segmentation mask on the image. You can modify the + mask using Brush tool. (press ctrl to delete instead of adding) +
+ + + + +
@@ -102,65 +179,68 @@
id="totalTaskDelayTime"
>
+
-
-
-
- let demoFiles = [];
- // init all
- larvitar.initializeImageLoader();
- larvitar.registerMultiFrameImageLoader();
- larvitar.initializeCSTools();
- larvitar.store.initialize();
- larvitar.store.addViewport("viewer");
-
- async function renderSerie() {
- const t0 = performance.now();
- const seriesStack = await larvitar.readFiles(demoFiles);
- // render the first series of the study
- let seriesId = _.keys(seriesStack)[0];
- let serie = seriesStack[seriesId];
- larvitar.populateLarvitarManager(seriesId, serie);
- let manager = larvitar.getImageManager();
- let multiFrameSerie = manager[seriesId];
-
- let frameId = 0;
- await larvitar.renderImage(multiFrameSerie, "viewer", frameId);
- const t1 = performance.now();
- console.log("Time to render First frame: " + (t1 - t0) + "ms");
- larvitar.addDefaultTools();
- larvitar.setToolActive("StackScroll");
-
- await larvitar.loadAndCacheImageStack(multiFrameSerie);
- console.log(
- "Stack has been loaded and cached",
- multiFrameSerie.bytes / 1048576
- );
- }
-
- async function createFile(fileName, cb) {
- let response = await fetch("./demo/" + fileName);
- let data = await response.blob();
- let file = new File([data], fileName);
- demoFiles.push(file);
- cb();
- }
- createFile("xa_integris.dcm", renderSerie);
-
-
-
+
+
-
-
- // init all
- larvitar.initializeImageLoader();
- larvitar.registerNRRDImageLoader();
- larvitar.initializeCSTools();
- larvitar.store.initialize();
- larvitar.store.addViewport("viewer");
-
- createFile("example.nrrd", function (nrrd_file) {
- let reader = new FileReader();
- reader.readAsArrayBuffer(nrrd_file);
- reader.onload = function () {
- let volume = larvitar.importNRRDImage(reader.result);
- let serie = larvitar.buildNrrdImage(volume, "1234", {});
- larvitar.renderImage(serie, "viewer");
- larvitar.addDefaultTools();
- larvitar.setToolActive("Wwwc");
- };
- });
-
- async function createFile(fileName, callback) {
- let response = await fetch("./demo/" + fileName);
- let data = await response.blob();
- let file = new File([data], fileName);
- callback(file);
- }
-
-
-
+
+
-
-
- let demoFiles = [];
- let counter = 0;
-
- const getDemoFileNames = function () {
- let demoFileList = [];
- for (let i = 1; i < 25; i++) {
- let filename = "anon" + i;
- demoFileList.push(filename);
- }
- return demoFileList;
- };
-
- // init all
- larvitar.initializeImageLoader();
- larvitar.registerResliceLoader();
- larvitar.initializeCSTools();
- larvitar.store.initialize();
- larvitar.store.addViewport("viewer-base");
- larvitar.store.addViewport("viewer-reslice");
-
- async function createFile(fileName, cb) {
- let response = await fetch("./demo/" + fileName);
- let data = await response.blob();
- let file = new File([data], fileName);
- demoFiles.push(file);
- counter++;
- if (counter == 24) {
- cb();
- }
- }
- function renderSerie() {
- larvitar
- .readFiles(demoFiles)
- .then(seriesStack => {
- // render the first series of the study
- let seriesId = _.keys(seriesStack)[0];
- let serie = seriesStack[seriesId];
- larvitar.populateLarvitarManager(seriesId, serie);
- larvitar.renderImage(serie, "viewer-base").then(() => {
- console.log("Image axial has been rendered");
- });
- larvitar.cacheImages(serie, function (resp) {
- if (resp.loading == 100) {
- larvitar.resliceSeries(serie, "coronal").then(data => {
- larvitar.renderImage(data, "viewer-reslice").then(() => {
- console.log("Image resliced has been rendered");
- });
- larvitar.addDefaultTools();
- larvitar.setToolActive("Wwwc");
- });
- }
- });
- })
- .catch(err => console.log(err));
- }
+
+
+
- let demoFileList = getDemoFileNames();
- _.each(demoFileList, function (demoFile) {
- createFile(demoFile, renderSerie);
- });
-
-
-
+
+
+ Press "t" to cycle through tools
+
+ Active Tool: Brush
+
- Press "t" to cycle through tools
-
- Active Tool: Brush
-
-
-
- function triggerHandleToggle() {
- let isMultiImage =
- larvitar.DEFAULT_TOOLS["WSToggle"].configuration.multiImage === false
- ? true
- : false;
- larvitar.DEFAULT_TOOLS["WSToggle"].configuration.multiImage =
- isMultiImage;
- toggleButton.innerHTML =
- isMultiImage === true ? "Multi Image" : "Current Image";
- startInput.style.display = isMultiImage === true ? "block" : "none";
- endInput.style.display = isMultiImage === true ? "block" : "none";
- }
-
- const bindInputEvent = (inputElement, configKey) => {
- inputElement.addEventListener("input", function (event) {
- larvitar.DEFAULT_TOOLS["WSToggle"].configuration[configKey] =
- event.target.value;
- });
- };
- masksNumberInput.addEventListener("input", function (event) {
- larvitar.DEFAULT_TOOLS["WSToggle"].configuration.masksNumber =
- event.target.value;
- });
-
- bindInputEvent(startInput, "startIndex");
- bindInputEvent(endInput, "endIndex");
- toggleButton.addEventListener("click", triggerHandleToggle);
-
- let demoFiles = [];
- let counter = 0;
-
- const getDemoFileNames = function () {
- let demoFileList = [];
- for (let i = 1; i < 25; i++) {
- let filename = "anon" + i;
- demoFileList.push(filename);
- }
- return demoFileList;
- };
-
- // init all
- larvitar.initializeImageLoader();
- larvitar.initializeCSTools();
- larvitar.store.initialize();
- larvitar.store.addViewport("viewer");
- larvitar.registerNRRDImageLoader();
- larvitar.initSegmentationModule();
-
- async function createFile(fileName, cb) {
- let response = await fetch("./demo/" + fileName);
- let data = await response.blob();
- let file = new File([data], fileName);
- demoFiles.push(file);
- counter++;
- if (counter == 24) {
- cb();
- }
- }
-
- async function renderSerie() {
- larvitar.resetImageManager();
- larvitar
- .readFiles(demoFiles)
- .then(seriesStack => {
- // render the first series of the study
- let seriesId = _.keys(seriesStack)[0];
- let serie = seriesStack[seriesId];
- larvitar.renderImage(serie, "viewer").then(() => {
- console.log("Image has been rendered");
- });
- // optionally cache the series
- larvitar.populateLarvitarManager(seriesId, serie);
-
- larvitar
- .cacheImages(serie, function (resp) {
- if (resp.loading == 100) {
- let cache = larvitar.cornerstone.imageCache;
- console.log(
- "Cache size: ",
- cache.getCacheInfo().cacheSizeInBytes / 1e6,
- "Mb"
- );
- }
- })
- .then(() => {
- setTimeout(function () {
- console.log("Cache has been loaded. Calling loadMasks.");
- larvitar.addDefaultTools();
- larvitar.setToolActive("Brush");
- loadMasks();
- }, 3000);
- });
- let mouseConfig = {
- mouse_button_right: {
- ctrl: "Pan",
- default: "Zoom"
- },
- debug: true
- };
-
- // NOTE: this also activate the tools marked as default for each mouse button
- larvitar.addMouseKeyHandlers(mouseConfig);
- })
- .catch(err => console.error(err));
- }
-
- async function loadMasks() {
- let data = new Int16Array(768 * 768 * 24); //fix dimensions based on loaded images dimensions
- let properties = {
- // color: "#00ff00",
- opacity: 0.2,
- labelId: 0
- };
- // add to viewport
- await larvitar
- .addSegmentationMask(properties, data, "viewer")
- .then(() => {
- // activate brush on this labelmap
- larvitar.setActiveLabelmap(0, "viewer");
- });
- }
-
- let demoFileList = getDemoFileNames();
- _.each(demoFileList, function (demoFile) {
- createFile(demoFile, renderSerie);
- });
- let element = document.getElementById("viewer");
- let tool_counter = 0;
- let tool;
- document.onkeypress = function (e) {
- e = e || window.event;
- //larvitar.clearSegmentationState();
- if (e.keyCode == 116 || e.keyCode == 84) {
- if (tool != undefined) {
- //clearToolData(element, tool);
- }
- const selectedNames = [
- "Brush",
- "RectangleScissors",
- "FreehandScissors",
- "CircleScissors",
- "CorrectionScissors",
- "PolylineScissors",
- "WSToggle"
- ]; // Replace with your selected names
- const selectedTools = _.filter(larvitar.DEFAULT_TOOLS, tool =>
- _.includes(selectedNames, tool.name)
- );
-
- const tools = _.map(selectedTools, "name");
-
- let increment = e.shiftKey ? -1 : 1;
- tool_counter =
- tool_counter == tools.length - 1 ? 0 : tool_counter + increment;
- tool_counter = tool_counter < 0 ? 0 : tool_counter;
- tool = tools[tool_counter];
-
- larvitar.setToolActive(tool);
- if (tool === "WSToggle") {
- larvitar.clearSegmentationState();
- document.getElementById("info").innerHTML =
- "ctrl+mouse wheel to change brush radius
" +
- "click to activate watershed segmentation of features with greyscale " +
- "value of interest
" +
- "ctrl+click for Label Eraser: erases selected label
" +
- "alt+click for LabelPicker: allows you to pick a label, click again to " +
- "apply the picked label
" +
- "shift+click+drag for Manual Eraser";
-
- buttonBar.style.removeProperty("display"); // make it visible
- //TODO: do not use block, delete display parameter from style instead
- //to make it return to boostrap's default (flex)
- //remove flex grow for
- buttonDiv.style.removeProperty("display");
- loader.style.display = "none";
- [maskDiv, loaderDiv, startDiv, endDiv, buttonDiv].forEach(div => {
- div.style.flexGrow = 0;
- div.style.paddingLeft = "3px";
- });
- element.addEventListener("click", rotateLoader);
- } else {
- document.getElementById("info").innerHTML = "
";
- buttonBar.style.display = "none"; // make it invisible
- element.removeEventListener("click", rotateLoader);
- }
- $("#active-tool").html("Active Tool: " + tool);
- }
- };
-
-
-
-
-
+ ctrl+mouse wheel to change brush radius
click to activate watershed segmentation of features with greyscale
+ value of interest
+ ctrl+click for Label Eraser: erases selected label
+ alt+click for LabelPicker: allows to pick label, click again to
+ apply picked label
+ shift+click+drag for Manual Eraser
+
- ctrl+mouse wheel to change brush radius
click to activate watershed segmentation of features with greyscale
- value of interest
- ctrl+click for Label Eraser: erases selected label
- alt+click for LabelPicker: allows to pick label, click again to
- apply picked label
- shift+click+drag for Manual Eraser
-
-
-
-
- function triggerHandleToggle() {
- let isMultiImage =
- larvitar.DEFAULT_TOOLS["WSToggle"].configuration.multiImage === false
- ? true
- : false;
- larvitar.DEFAULT_TOOLS["WSToggle"].configuration.multiImage =
- isMultiImage;
- toggleButton.innerHTML =
- isMultiImage === true ? "Multi Image" : "Current Image";
- if (isMultiImage) {
- startInput.style.removeProperty("display");
- endInput.style.removeProperty("display");
- } else {
- startInput.style.display = "none";
- endInput.style.display = "none";
- }
- }
- const masksNumberInput = document.getElementById("masksNumber");
- // Add an input event listener
- masksNumberInput.addEventListener("input", function (event) {
- // Update the variable with the input value
- larvitar.DEFAULT_TOOLS["WSToggle"].configuration.masksNumber =
- event.target.value;
- });
- const startInput = document.getElementById("startImage");
- // Add an input event listener
- startInput.addEventListener("input", function (event) {
- // Update the variable with the input value
- console.log("Start", event.target.value);
- larvitar.DEFAULT_TOOLS["WSToggle"].configuration.startIndex =
- event.target.value;
- });
- const endInput = document.getElementById("endImage");
- // Add an input event listener
- endInput.addEventListener("input", function (event) {
- // Update the variable with the input value
- console.log("end", event.target.value);
- larvitar.DEFAULT_TOOLS["WSToggle"].configuration.endIndex =
- event.target.value;
- });
- // Attach click event to the button
- const toggleButton = document.getElementById("toggleButton");
- toggleButton.addEventListener("click", triggerHandleToggle);
-
- let demoFiles = [];
- let counter = 0;
- const getDemoFileNames = function () {
- let demoFileList = [];
- for (let i = 101; i < 125; i++) {
- let filename = "I" + i;
- demoFileList.push(filename);
- }
- return demoFileList;
- };
- // init all
- larvitar.initializeImageLoader();
- larvitar.initializeCSTools();
- larvitar.store.initialize();
- larvitar.store.addViewport("viewer");
- let element = document.getElementById("viewer");
- element.addEventListener("click", rotateLoader);
- larvitar.registerNRRDImageLoader();
- larvitar.initSegmentationModule();
- const cornerstone = larvitar.cornerstone;
- async function createFile(fileName, cb) {
- let response = await fetch("./demo/covid/" + fileName);
- let data = await response.blob();
- let file = new File([data], fileName);
- demoFiles.push(file);
- counter++;
- if (counter == 24) {
- cb();
- }
- }
-
- async function renderSerie() {
- larvitar.resetImageManager();
- larvitar
- .readFiles(demoFiles)
- .then(seriesStack => {
- console.log(seriesStack);
- // render the first series of the study
- let seriesId = _.keys(seriesStack)[0];
- let serie = seriesStack[seriesId];
- larvitar.renderImage(serie, "viewer").then(() => {
- console.log("Image has been rendered");
- });
- // optionally cache the series
- larvitar.populateLarvitarManager(seriesId, serie);
-
- larvitar
- .cacheImages(serie, function (resp) {
- if (resp.loading == 100) {
- let cache = larvitar.cornerstone.imageCache;
- console.log(
- "Cache size: ",
- cache.getCacheInfo().cacheSizeInBytes / 1e6,
- "Mb"
- );
- }
- })
- .then(() => {
- setTimeout(function () {
- console.log("Cache has been loaded. Calling loadMasks.");
- larvitar.addDefaultTools();
- loadMasks();
- }, 3000);
- });
- })
- .catch(err => console.error(err));
- }
-
- async function loadMasks() {
- console.log("loadMasks() called");
- let data = new Int16Array(768 * 768 * 24); //fix dimensions based on loaded images dimensions
- let properties = {
- // color: "#00ff00",
- opacity: 0.2,
- labelId: 0
- };
- // add to viewport
- await larvitar
- .addSegmentationMask(properties, data, "viewer")
- .then(() => {
- // activate brush on this labelmap
- larvitar.setActiveLabelmap(0, "viewer");
- larvitar.setToolActive("WSToggle");
- });
- }
-
- let demoFileList = getDemoFileNames();
- _.each(demoFileList, function (demoFile) {
- createFile(demoFile, renderSerie);
- });
- /*Hahn and Peitgen [2000] extracted the brain with a single watershed transform from MRI data.
- Also, the cerebral ventricles were reliably segmented with minimal interaction.
- Hahn and Peitgen [2003] demonstrated the application to the challenging problem of
- delineating individual bones in the human wrist (see Fig. 4.17).
- Kuhnigk et al. [2003] employed the above-described variant of the watershed segmentation
- to the delineation of lung lobes in CT data.
- Ray et al. [2008] used the iterative watershed transform
- for hepatic tumor segmentation (and volumetry).*/
-
-
-
-
-