Change Text Overlay on ViewPort

Support Development
1

Describe Your Question

  • I would like to change the Text that is overlayed on the viewport. Instead of “W: ## L: ##” in the upper Left quadrant of the viewport I would like to put “WC/WL ##/##” in the BottomRight of the ViewPort.
  • Currently running 3.8.0-beta.54

What steps can we follow to reproduce the bug?

N/A

Could someone point me in the correct direction. I’ve attempted to search the codebase for the Text but have so far come up empty except for a couple of references in the Cypress testing suite.

Thanks in Advance
BITC

2

NM. Found it right after I posted originally. For others looking the component is in
node_modules/@ohif/extension-cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.tsx

3

could also use config file

window.config = {
routerBasename: ‘/’,
extensions: ,
modes: ,
customizationService: {
cornerstoneOverlayTopLeft: {
id: ‘cornerstoneOverlayTopLeft’,
customizationType: ‘ohif.cornerstoneOverlay’,
items: [
{
id: ‘Stage’,
customizationType: ‘ohif.overlayItem’,
title: ‘Stage Name’,
condition: ({ instance }) => instance && instance.StageName,
contentF: ({ instance }) => instance.StageName,
},
{
id: ‘View’,
customizationType: ‘ohif.overlayItem’,
title: ‘View Name’,
condition: ({ instance }) => instance && instance.ViewName,
contentF: ({ instance }) => instance.ViewName,
},
{
id: ‘Timer’,
customizationType: ‘ohif.overlayItem’,
title: ‘Timer Name’,
label: ‘timer =’,
condition: ({ instance }) => instance && instance.EventElapsedTimes,
contentF: ({ instance, formatters: { formatDuration } }) =>
formatDuration(instance.EventElapsedTimes),
},
],
},
cornerstoneOverlayTopRight: {
id: ‘cornerstoneOverlayTopRight’,
customizationType: ‘ohif.cornerstoneOverlay’,
items: [
/** {
id: ‘InstanceNumber’,
customizationType: ‘ohif.overlayItem’,
title: ‘Instance Number’,
condition: ({ instance }) => instance && instance.InstanceNumber,
contentF: ({ instance }) => instance.InstanceNumber,
},
*/
{
id: ‘AcquisitionTime’,
customizationType: ‘ohif.overlayItem’,
title: ‘Acquisition Time’,
condition: ({ instance }) => instance && instance.AcquisitionTime,
contentF: ({ instance, formatters: { formatTime } }) =>
formatTime(instance.AcquisitionTime),
},
{
id: ‘HR’,
customizationType: ‘ohif.overlayItem’,
title: ‘Heart Rate’,
condition: ({ instance }) => instance && instance.HeartRate,
contentF: ({ instance }) => instance.HeartRate + ’ bpm’,
},
],
},
},

4

Hi @AugmentedReporting
I also followed your guide and ohif " Customizable Viewport Overlay" document
at Customization Service | OHIF

Unfortunately, the text is not displayed on the viewport.
Could you give me some hints?

5

please post your config file

6

@AugmentedReporting
Please check my default.js file.

window.config = {
    routerBasename: '/',
    showStudyList: true,
    extensions: [],
    modes: [],
    showWarningMessageForCrossOrigin: true,
    showCPUFallbackMessage: true,
    showLoadingIndicator: true,
    strictZSpacingForVolumeViewport: true,
    defaultDataSourceName: 'dicomweb',
    dataSources: [
        {
            namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
            sourceName: 'dicomweb',
            configuration: {
                friendlyName: 'dcm4chee Server',
                name: 'DCM4CHEE',
                wadoUriRoot: 'http://xxxx/dcm4chee-arc/aets/DCM4CHEE/wado',
                qidoRoot: 'http://xxxx/dcm4chee-arc/aets/DCM4CHEE/rs',
                wadoRoot: 'http://xxxx/dcm4chee-arc/aets/DCM4CHEE/rs',
                qidoSupportsIncludeField: true,
                supportsReject: true,
                imageRendering: 'wadors',
                thumbnailRendering: 'wadors',
                enableStudyLazyLoad: true,
                supportsFuzzyMatching: true,
                supportsWildcard: true,
                dicomUploadEnabled: true,
                bulkDataURI: {
                    enabled: true,
                },
            },
        },
    ],
    customizationService: {
        cornerstoneOverlayTopRight: {
            id: 'cornerstoneOverlayTopRight',
            items: [
                {
                    id: 'PatientNameOverlay',
                    customizationType: 'ohif.overlayItem',
                    attribute: 'PatientName',
                    label: 'PN:',
                    title: 'Patient Name',
                    color: 'white',
                    condition: ({ instance }) =>
                        instance &&
                        instance.PatientName &&
                        instance.PatientName.Alphabetic,
                    contentF: ({ instance, formatters: { formatPN } }) => {
                        if (instance && instance.PatientName && instance.PatientName.Alphabetic) {
                            return formatPN(instance.PatientName.Alphabetic);
                        } else {
                            return 'N/A';
                        }
                    }
                },
            ],
        },
    },
};
7

I think there is something wrong with our overlays, i saw other people creating issues, i will look