Medical Image Viewer Framework

In the OHIF (Open Health Imaging Foundation) Viewer, the format for annotation coordinates typically follows the DICOM (Digital Imaging and Communications in Medicine) standard, particularly for structures like Regions of Interest (ROI). OHIF uses the cornerstone library for image rendering and manipulation, and annotations are often handled using tools and structures from this library.

1. Rectangle ROI
   For a rectangular region of interest (ROI), the coordinates might be specified as:

```json {
"toolType": "RectangleRoi",
"data": {
"handles": {
"start": {
"x": 100,
"y": 150
},
"end": {
"x": 200,
"y": 250
}
}
}
}
```

1. Elliptical ROI
   For an elliptical ROI, the coordinates might look like:

```json {
"toolType": "EllipticalRoi",
"data": {
"handles": {
"start": {
"x": 150,
"y": 200
},
"end": {
"x": 300,
"y": 350
},
"textBox": {
"x": 175,
"y": 225,
"active": true
}
}
}
}
```

1. Point Annotation
   For a point annotation, the format might be:

```json {
"toolType": "ArrowAnnotate",
"data": {
"handles": {
"start": {
"x": 200,
"y": 300
},
"end": {
"x": 220,
"y": 320,
"highlight": true,
"active": true
}
},
"text": "Annotation text here"
}
}
```

1. Freehand ROI
   For a freehand ROI, the format might include an array of points:

```json {
"toolType": "FreehandRoi",
"data": {
"handles": {
"points": [ { "x": 100, "y": 100 }, { "x": 150, "y": 150 }, { "x": 200, "y": 100 }, { "x": 250, "y": 150 }
],
"activeHandleIndex": 0
}
}
}
```

1. Example: Fetch and Overlay Annotations

In the context of the custom mode we discussed earlier, here's how you might structure the JSON returned by your Python service and how you would overlay it in OHIF:

1. Python Service Response
   ```json
   [ {
   "toolType": "RectangleRoi",
   "data": {
   "handles": {
   "start": { "x": 100, "y": 150 },
   "end": { "x": 200, "y": 250 }
   }
   }
   }, {
   "toolType": "ArrowAnnotate",
   "data": {
   "handles": {
   "start": { "x": 300, "y": 400 },
   "end": { "x": 320, "y": 420, "highlight": true, "active": true }
   },
   "text": "Sample Annotation"
   }
   }
   ]
   ```

1. Overlay Annotations in OHIF

In your custom mode JavaScript file:

```javascript
async function fetchAnnotations(series) {
const response = await fetch('http://localhost:5000/get_annotations', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ image_id: series.imageId }),
});
const annotations = await response.json();
return annotations;
}

function overlayAnnotations(annotations) {
annotations.forEach(annotation => {
const { toolType, data } = annotation;
const toolState = cornerstoneTools.globalImageIdSpecificToolStateManager.saveToolState();
if (!toolState[series.imageId]) {
toolState[series.imageId] = {};
}
if (!toolState[series.imageId][toolType]) {
toolState[series.imageId][toolType] = { data: [] };
}
toolState[series.imageId][toolType].data.push(data);
cornerstoneTools.globalImageIdSpecificToolStateManager.restoreToolState(toolState);
});
cornerstone.updateImage(element);
}
```

@Malavika Krishnakumar