Skip to main content
Version: 3.10.0-beta.80 (Latest)

Viewport Overlay

Viewport Overlays are the information that is displayed on the viewport.

There are 4 viewport overlays customization end points

  • viewportOverlay.topRight
  • viewportOverlay.topLeft
  • viewportOverlay.bottomLeft
  • viewportOverlay.bottomRight

viewportOverlay.topRight

IDviewportOverlay.topRight
Description
Defines the items displayed in the top-right overlay of the viewport.
Default Value
[]
Example

window.config = {
  // rest of window config
  customizationService: [
    {
      'viewportOverlay.topRight': {
        $set: [
          // Add your overlay items here, e.g.:
          // { id: 'CustomOverlay', inheritsFrom: 'ohif.overlayItem.custom' },
        ],
      },
    },
  ],
};

viewportOverlay.topLeft

IDviewportOverlay.topLeft
Description
Defines the items displayed in the top-left overlay of the viewport.
Default Value
[
  {
    "id": "StudyDate",
    "inheritsFrom": "ohif.overlayItem",
    "label": "",
    "title": "Study date"
  },
  {
    "id": "SeriesDescription",
    "inheritsFrom": "ohif.overlayItem",
    "label": "",
    "title": "Series description"
  }
]
Example

window.config = {
  // rest of window config
  customizationService: [
    {
      'viewportOverlay.topLeft': {
        $splice: [
          [0, 1], // Remove 1 item starting at index 0 (removes StudyDate)
        ],
      },
    },
  ],
};

viewportOverlay.bottomLeft

IDviewportOverlay.bottomLeft
Description
Defines the items displayed in the bottom-left overlay of the viewport.
Default Value
[
  {
    "id": "WindowLevel",
    "inheritsFrom": "ohif.overlayItem.windowLevel"
  },
  {
    "id": "ZoomLevel",
    "inheritsFrom": "ohif.overlayItem.zoomLevel"
  }
]
Example


    // the following will push a yellow PatientNameOverlay to the bottomLeft overlay
window.config = {
  // rest of window config
  customizationService: [
    {
      'viewportOverlay.bottomLeft': {
        $push: [
           {
            id: 'PatientNameOverlay',
            inheritsFrom: 'ohif.overlayItem',
            attribute: 'PatientName',
            label: 'PN:',
            title: 'Patient Name',
            color: 'yellow',
            condition: ({ instance }) =>
              instance &&
              instance.PatientName &&
              instance.PatientName.Alphabetic,
            contentF: ({ instance, formatters: { formatPN } }) =>
              formatPN(instance.PatientName.Alphabetic) +
              ' ' +
              (instance.PatientSex ? '(' + instance.PatientSex + ')' : ''),
          },
        ],
      },
    },
  ],
};

viewportOverlay.bottomRight

IDviewportOverlay.bottomRight
Description
Defines the items displayed in the bottom-right overlay of the viewport.
Default Value
[
  {
    "id": "InstanceNumber",
    "inheritsFrom": "ohif.overlayItem.instanceNumber"
  }
]
Example

      // same as above