Viewers: Add Measurements Manually with out any event

Created on 29 Nov 2018 · 4Comments · Source: OHIF/Viewers

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.

Community

Source

AtmiyaVaghela

All 4 comments

@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

Zaid-Safadi on 15 Dec 2018

👍1

@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/[email protected]"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cornerstoneMath.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cornerstone.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cornerstoneWebImageLoader.js"></script>

    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

eggachecat on 30 Dec 2018

@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);
        });
      });
    });
  }
}

AtmiyaVaghela on 3 Jan 2019

👍1

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

Zaid-Safadi on 3 Jan 2019

Was this page helpful?

0 / 5 - 0 ratings