Add Measurements Manually with out any event

AtmiyaVaghela commented 5 years ago

I want to add rectangleROI without any event(mouse/touch) please help me with demo code.

I have seen that this is depend on the mouse events which creates the measurement. But I have all the necessary information to draw the rectangle already. And I want to add the measurement manually.

I am beginner in node/meteor.

Thanks a lot in advance.

Zaid-Safadi commented 5 years ago

@AtmiyaVaghela the way I would do it is to construct the rectangleROI tool state data from the information that you have then set it into the toolState.

Look at this structure for a starting point on how your data should be converted: https://github.com/cornerstonejs/cornerstoneTools/blob/master/src/imageTools/rectangleRoi.js#L15

eggachecat commented 5 years ago

@AtmiyaVaghela I encountered the same situation and I found a tricky way.. I found there's an event named 'cornerstoneimagerendered' which will be emitted after the image is rendered as the name says. So listening on the event and drawing on the canvas afterwards manually may work (but it won't add measurement on the measurement list on the rightside bar) I don't know if this helps you a little.. Here's a working example that draw a circle on the specific location on the dicom Since the event 'cornerstoneimagerendered' will also be emitted after resizing, so it seems to me the relative location works just fine

<!DOCTYPE html>
<html>
<head>
    <title></title>
        <!-- Dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
    <script src="https://cdn.jsdelivr.net/npm/cornerstone-math@0.1.6/dist/cornerstoneMath.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cornerstone-core@2.2.4/dist/cornerstone.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cornerstone-web-image-loader@2.1.0/dist/cornerstoneWebImageLoader.js"></script>

    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/cornerstone-tools@3.0.0-b.641/dist/cornerstoneTools.js"></script>
    <style type="text/css">
        .cornerstone-element-wrapper,
        .cornerstone-element {
          width: 512px;
          height: 512px;
          margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="cornerstone-element-wrapper">
      <div class="cornerstone-element" data-index="0" oncontextmenu="return false"></div>
    </div>
</body>
<script type="text/javascript">
    // Setup image loader
    cornerstoneWebImageLoader.external.cornerstone = cornerstone;
    cornerstone.registerImageLoader('http', cornerstoneWebImageLoader.loadImage)
    cornerstone.registerImageLoader('https', cornerstoneWebImageLoader.loadImage)

    // Setup tools
    const csTools = cornerstoneTools.init();

    // Enable Element
    const element = document.querySelector('.cornerstone-element');
    cornerstone.enable(element);

    // Display an image
    const imageId = 'https://www.asteris.biz/Keystone/ImageDownload.aspx?ClinicCode=TESTKEYSTONE&ImageId=01b1755e-33d1-4b24-b9af-a4a019689d5f&ImageType=PreviewImage&FrameIndex=0';
    cornerstone.loadImage(imageId).then(function (image) {
      cornerstone.displayImage(element, image);
    });

    // THE event
    element.addEventListener('cornerstoneimagerendered', function (e) {
        var canvas = document.getElementsByClassName("cornerstone-canvas")[0];
        var ctx = canvas.getContext("2d");
        ctx.arc(canvas.width/2, canvas.height/2, 50, 0, 2 * Math.PI);
        ctx.fillStyle = "red";
        ctx.fill();
    }, false);
</script>
</html>

AtmiyaVaghela commented 5 years ago

@Zaid-Safadi your information is very helpful.

Thanks for your time, I have done some workaround to achieve my desire result by adding the rectangle measurement data into the Toolstate.

There is method call the addToolState(element, toolType, rectangleMeasurementData); which is taking care of my rectangle's data.

@eggachecat, this also add the measurement into the rightside bar.

Once again thank you very much guys.

Here is the piece of code, cube contains my rectangle data. Moreover, I have to add multiple cubes so the selectImage will select the specific image for the cube.

function getScanSeriesData (eventData) {
  console.log('scanSeriesAuto clicked');
  if (eventData.cuboids) {
    eventData.measurementData = [];
    eventData.cuboids.forEach((cube) => {
      createNewMeasurementForAutoScan(cube, eventData.element, (element, measurementData) => {
        selectImage(element, measurementData.imageIndex, function () {
          // Associate this data with this imageId so we can render it and manipulate it
          addToolState(element, toolType, measurementData);
        });
      });
    });
  }
}

Zaid-Safadi commented 5 years ago

@AtmiyaVaghela this looks like the right approach, glad it worked for you!

OHIF / Viewers

Add Measurements Manually with out any event #318