Adding a Rectangle annotation programmatically

Describe Your Question

I am having trouble understanding how to add an annotation programmatically. Specifically, a rectangle annotation, given a Reference image ID and normalized x/y center, width, and height

What steps can we follow to reproduce the issue?

Here is an example of where I am at, I am having trouble filling in the gaps.

  1. What do I need to do for annotation ID?
  2. How do I find/generate a “Frame of Reference UID”
  3. What data do I need to take my normalized (0-1) x/y center, width, and height values, as well as color?

example code:

import * as cornerstoneTools from '@cornerstonejs/tools';
const {
  xCenter, // normalized to 0-1
} = exampleApiInformation()

const manager = cornerstoneTools.annotation.state.getAnnotationManager()

  annotationUID: "TEST-ID", // should I just generate one?
  highlighted: false,
  isLocked: true,
  invalidated: false,
  metadata: {
    toolName: cornerstoneTools.RectangleROITool.toolName,
    FrameOfReferenceUID: "test", // 00200052 - not sure how to get this
    referencedImageId: referenceImageId
  data: {
    frameNumber: 0, // How to set the x/y/width/height and color?

// or should i use this?

Thank you in advance for the help!

1 Like