Cornerstone Tools not loading built in tools

Question

Cornerstone Tools not loading built in tools

996 views Asked by One FootN At 22 November 2024 at 08:09

Not sure what happening, but image is loading correctly, but the tool won't show. I don't load the tool until the image is actually in the Dom (that's what the bottom is for). all the modules in the console.log print to console just fine. any help would be appreciated. Fyi rich tnow im running with vs code live server,

html file

    <!DOCTYPE html>
<html>
  <head>
    <script src="./wado/dicomParser.min.js"></script>
    <script src="./wado/cornerstoneWADOImageLoader.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

    <script src="./wado/cornerstone.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cornerstoneTools.js"></script>
  </head>
  <body>
    <input type="file" id="fileInput" multiple />

    <div style="width: 512px; height: 512px" id="image"></div>
    <button id="addTools">Add Tool</button>

    <script src="main.js"></script>
  </body>
</html>

Javascript

    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.Hammer = Hammer;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;

cornerstone.registerImageLoader("wadouri", loadAndViewImage);

const csTools = cornerstoneTools.init();
const LengthTool = cornerstoneTools.LengthTool;

console.log("cornerstone", cornerstone);
console.log("loader", cornerstoneWADOImageLoader);
console.log("tools", cornerstoneTools);
console.log("cstools", csTools);
console.log("math", cornerstoneMath);
console.log("hammer", Hammer);

const imageHolder = document.getElementById("image");
cornerstone.enable(imageHolder);

const toolButton = document.getElementById("addTools");

toolButton.addEventListener("click", (e) => {
  loadTool();
});

fileInput.addEventListener("change", (e) => {
  const file = fileInput.files;
  const ima = file[0];

  const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(ima);

  loadAndViewImage(imageId);
});

function loadAndViewImage(imageId) {
  cornerstone
    .loadImage(imageId)
    .then((image) => {
      const viewport = {
        invert: false,
        pixelReplication: false,
        // voi: {
        //   windowWidth: 256,
        //   windowCenter: 256,
        // },
        scale: 1.5,
        translation: {
          x: 0,
          y: 0,
        },
      };
      cornerstone.displayImage(imageHolder, image, viewport);
      console.log(image);
      console.log(image.data.uint16("x00280010"));
      console.log(image.data.uint32("x00020000"));
    })
    .catch((e) => console.log(e));
}

function loadTool() {
  csTools.addTool(LengthTool);
  csTools.setToolActive(LengthTool.name, {
    mouseButtonMask: 1,
  });
  console.log(csTools.store.state);
}

Original Q&A

There are 1 answers

**One FootN** · Answer 1 · 2021-05-30 19:30:47

Im answering my own question here, I switched to imports and redid some of the code. the following seems to work fine so far.

    import Hammer from "hammerjs";
import dicomParser from "dicom-parser";
import * as cornerstone from "cornerstone-core";
import * as cornerstoneMath from "cornerstone-math";
import * as cornerstoneWADOImageLoader from "cornerstone-wado-image-loader";
// import * as cornerstoneWebImageLoader from "cornerstone-web-image-loader";

import * as cornerstoneTools from "cornerstone-tools";

_initCornerstone();

cornerstone.registerImageLoader("wadouri", loadAndViewImage);

const imageHolder = document.getElementById("image");

const toolButton = document.getElementById("addTools");
const windowing = document.getElementById("changeWindow");
const fileInput = document.getElementById("fileInput");
const newWidth = document.getElementById("width");
const newCenter = document.getElementById("center");

fileInput.addEventListener("change", (e) => {
  const file = fileInput.files;
  const ima = file[0];

  const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(ima);
  loadAndViewImage(imageId);
});

toolButton.addEventListener("click", () => {
  _initTool();
});

console.log(cornerstone);

cornerstoneTools.init({
  showSVGCursors: true,
});

cornerstone.enable(imageHolder);

function _initTool() {
  const EllipticalRoiTool = cornerstoneTools.EllipticalRoiTool;
  // let imageId;

  cornerstoneTools.addTool(EllipticalRoiTool);
  cornerstoneTools.setToolActive("EllipticalRoi", { mouseButtonMask: 1 });
}

windowing.addEventListener("click", (e) => {
  let viewport = cornerstone.getViewport(imageHolder);
  viewport.voi.windowWidth = parseFloat(newWidth.value);
  viewport.voi.windowCenter = parseFloat(newCenter.value);
  cornerstone.setViewport(imageHolder, viewport);
});

function loadAndViewImage(imageId) {
  cornerstone
    .loadImage(imageId)
    .then((image) => {
      image.windowWidth = 3000;
      image.windowCenter = 1500;

      cornerstone.displayImage(imageHolder, image);
      console.log(image);
    })
    .catch((e) => console.log(e));
}

function _initCornerstone() {
  // Externals
  cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
  cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
  cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
  cornerstoneTools.external.cornerstone = cornerstone;
  cornerstoneTools.external.Hammer = Hammer;
  localStorage.setItem("debug", "cornerstoneTools");
  // Image Loader
  const config = {
    maxWebWorkers: navigator.hardwareConcurrency || 1,
    startWebWorkersOnDemand: true,
    taskConfiguration: {
      decodeTask: {
        initializeCodecsOnStartup: false,
        usePDFJS: false,
      },
    },
  };
  cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
}

TechQA.

Cornerstone Tools not loading built in tools

There are 1 answers

Related Questions in CORNERSTONEJS

Popular Questions

Popular Tags

Trending Questions