Hi,
I am using ohif viewer in my web application
my orthanc server running on docker and in orthanc server I added dicom web plugin.
I git cloned the ohif viewer repo. But One study’s images won’t able to see in ohif viewer in my web application.
I uploaded some DICOM images and the clicked on “View in OHIF” and the OHIF Viewer opened, but no images loaded for that particular Study, It shows me black image in ohif viewer. But that same DICOM images open in orthanc server directly and other viewers that images are also opens like bluelight, weasis etc.
study given below :
https://filebin.net/0m3go7c7gnrw670x
In my Orthanc Server I have below file:-
orthanc.json:
{
"Name": "orthanc",
"StorageCompression": false,
"MaximumStorageSize": 0,
"MaximumPatientCount": 0,
"MaximumStorageCacheSize": 128,
"ConcurrentJobs": 2,
"HttpServerEnabled": true,
"OrthancExplorerEnabled": true,
"HttpPort": 8042,
"HttpDescribeErrors": true,
"HttpCompressionEnabled": true,
"WebDavEnabled": true,
"WebDavDeleteAllowed": false,
"WebDavUploadAllowed": true,
"DicomServerEnabled": true,
"DicomAet": "orthanc",
"DicomCheckCalledAet": true,
"DicomPort": 4242,
"DefaultEncoding": "Latin1",
"AcceptedTransferSyntaxes": [
"1.2.840.10008.1.*"
],
"LuaScripts": [
"/etc/orthanc/logsStudy.lua"
],
"UnknownSopClassAccepted": false,
"DicomScpTimeout": 30,
"RemoteAccessAllowed": true,
"SslEnabled": false,
"SslCertificate": "certificate.pem",
"SslMinimumProtocolVersion": 4,
"SslVerifyPeers": false,
"SslTrustedClientCertificates": "trustedClientCertificates.pem",
"AuthenticationEnabled": true,
"RegisteredUsers": {
"admin": "admin"
},
"DicomTlsEnabled": false,
"DicomTlsRemoteCertificateRequired": true,
"DicomAlwaysAllowEcho": true,
"DicomAlwaysAllowStore": true,
"DicomAlwaysAllowFind": true,
"DicomAlwaysAllowFindWorklist": true,
"DicomAlwaysAllowGet": true,
"DicomAlwaysAllowMove": true,
"DicomCheckModalityHost": true,
"DicomModalities": {},
"DicomModalitiesInDatabase": true,
"DicomScp": {
"CFindEnabled": true,
"CMoveEnabled": true,
"CGetEnabled": true,
"CEchoEnabled": true
},
"DicomEchoChecksFind": false,
"DicomScuTimeout": 10,
"DicomScuPreferredTransferSyntax": "1.2.840.10008.1.2.1",
"DicomThreadsCount": 4,
"OrthancPeers": {},
"EnableAwsSdkLogs": true,
"OrthancPeersInDatabase": false,
"HttpProxy": "",
"HttpVerbose": true,
"HttpTimeout": 60,
"HttpsVerifyPeers": false,
"HttpsCACertificates": "/etc/ssl/certs/ca-certificates.crt",
"UserMetadata": {},
"UserContentType": {},
"StableAge": 60,
"StrictAetComparison": false,
"StoreMD5ForAttachments": true,
"LimitFindResults": 0,
"LimitFindInstances": 0,
"LogExportedResources": false,
"KeepAlive": true,
"TcpNoDelay": true,
"HttpThreadsCount": 50,
"StoreDicom": true,
"DicomAssociationCloseDelay": 5,
"QueryRetrieveSize": 100,
"CaseSensitivePN": false,
"LoadPrivateDictionary": true,
"Dictionary": {},
"SynchronousCMove": true,
"JobsHistorySize": 10,
"SaveJobs": true,
"OverwriteInstances": true,
"MediaArchiveSize": 1,
"StorageAccessOnFind": "Always",
"MetricsEnabled": true,
"ExecuteLuaEnabled": false,
"HttpRequestTimeout": 30,
"DefaultPrivateCreator": "",
"StorageCommitmentReportsSize": 100,
"TranscodeDicomProtocol": true,
"BuiltinDecoderTranscoderOrder": "After",
"IngestTranscoding": "1.2.840.10008.1.2.4.90",
"IngestTranscodingOfUncompressed": true,
"IngestTranscodingOfCompressed": true,
"DicomLossyTranscodingQuality": 90,
"SyncStorageArea": true,
"MallocArenaMax": 5,
"DeidentifyLogs": true,
"DeidentifyLogsDicomVersion": "2021b",
"MaximumPduLength": 16384,
"CheckRevisions": false,
"SynchronousZipStream": true,
"ZipLoaderThreads": 0,
"Warnings": {
"W001_TagsBeingReadFromStorage": true,
"W002_InconsistentDicomTagsInDb": true
},
"DicomWeb": {
"Enable": true
},
"IndexFromStorage": true
}
ohif viewer configuration:
platform\app\public\config\default.js:-
/** @type {AppTypes.Config} */
window.config =function () {
return{
routerBasename: '/',
extensions: [],
modes: [],
customizationService: {},
showStudyList: true,
maxNumberOfWebWorkers: 3,
showWarningMessageForCrossOrigin: true,
showCPUFallbackMessage: true,
showLoadingIndicator: true,
experimentalStudyBrowserSort: false,
strictZSpacingForVolumeViewport: true,
groupEnabledModesFirst: true,
maxNumRequests: {
interaction: 100,
thumbnail: 75,
prefetch: 25,
},
defaultDataSourceName: 'dicomweb',
oidc: [
{
authority: keyAuthorityURL,
client_id: 'telerapps-local',
redirect_uri: keyRedirectURL,
response_type: 'code',
scope: 'openid email profile',
},
],
dataSources: [
{
namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
sourceName: 'dicomweb',
configuration: {
friendlyName: 'AWS S3 Static wado server',
name: 'aws',
wadoUriRoot: 'https://orthang.telerapp.net/dicom-web',
qidoRoot: 'https://orthang.telerapp.net/dicom-web',
wadoRoot:'https://orthang.telerapp.net/dicom-web',
qidoSupportsIncludeField: false,
imageRendering: 'wadors',
thumbnailRendering: 'wadors',
enableStudyLazyLoad: true,
supportsFuzzyMatching: false,
supportsWildcard: true,
staticWado: true,
singlepart: 'bulkdata,video',
bulkDataURI: {
enabled: true,
relativeResolution: 'studies',
},
omitQuotationForMultipartRequest: true,
},
},
{
namespace: '@ohif/extension-default.dataSourcesModule.dicomwebproxy',
sourceName: 'dicomwebproxy',
configuration: {
friendlyName: 'dicomweb delegating proxy',
name: 'dicomwebproxy',
},
},
{
namespace: '@ohif/extension-default.dataSourcesModule.dicomjson',
sourceName: 'dicomjson',
configuration: {
friendlyName: 'dicom json',
name: 'json',
},
},
{
namespace: '@ohif/extension-default.dataSourcesModule.dicomlocal',
sourceName: 'dicomlocal',
configuration: {
friendlyName: 'dicom local',
},
},
],
httpErrorHandler: error => {
console.warn(error.status);
console.warn('test, navigate to https://ohif.org/');
},
hotkeys: [
{
commandName: 'incrementActiveViewport',
label: 'Next Viewport',
keys: ['right'],
},
{
commandName: 'decrementActiveViewport',
label: 'Previous Viewport',
keys: ['left'],
},
{ commandName: 'rotateViewportCW', label: 'Rotate Right', keys: ['r'] },
{ commandName: 'rotateViewportCCW', label: 'Rotate Left', keys: ['l'] },
{ commandName: 'invertViewport', label: 'Invert', keys: ['i'] },
{
commandName: 'flipViewportHorizontal',
label: 'Flip Horizontally',
keys: ['h'],
},
{
commandName: 'flipViewportVertical',
label: 'Flip Vertically',
keys: ['v'],
},
{ commandName: 'scaleUpViewport', label: 'Zoom In', keys: ['+'] },
{ commandName: 'scaleDownViewport', label: 'Zoom Out', keys: ['-'] },
{ commandName: 'fitViewportToWindow', label: 'Zoom to Fit', keys: ['='] },
{ commandName: 'resetViewport', label: 'Reset', keys: ['space'] },
{ commandName: 'nextImage', label: 'Next Image', keys: ['down'] },
{ commandName: 'previousImage', label: 'Previous Image', keys: ['up'] },
{
commandName: 'setToolActive',
commandOptions: { toolName: 'Zoom' },
label: 'Zoom',
keys: ['z'],
},
// ~ Window level presets
{
commandName: 'windowLevelPreset1',
label: 'W/L Preset 1',
keys: ['1'],
},
{
commandName: 'windowLevelPreset2',
label: 'W/L Preset 2',
keys: ['2'],
},
{
commandName: 'windowLevelPreset3',
label: 'W/L Preset 3',
keys: ['3'],
},
{
commandName: 'windowLevelPreset4',
label: 'W/L Preset 4',
keys: ['4'],
},
{
commandName: 'windowLevelPreset5',
label: 'W/L Preset 5',
keys: ['5'],
},
{
commandName: 'windowLevelPreset6',
label: 'W/L Preset 6',
keys: ['6'],
},
{
commandName: 'windowLevelPreset7',
label: 'W/L Preset 7',
keys: ['7'],
},
{
commandName: 'windowLevelPreset8',
label: 'W/L Preset 8',
keys: ['8'],
},
{
commandName: 'windowLevelPreset9',
label: 'W/L Preset 9',
keys: ['9'],
},
],
tours: [
{
id: 'basicViewerTour',
route: '/viewer',
steps: [
{
id: 'scroll',
title: 'Scrolling Through Images',
text: 'You can scroll through the images using the mouse wheel or scrollbar.',
attachTo: {
element: '.viewport-element',
on: 'top',
},
advanceOn: {
selector: '.cornerstone-viewport-element',
event: 'CORNERSTONE_TOOLS_MOUSE_WHEEL',
},
beforeShowPromise: () => waitForElement('.viewport-element'),
},
{
id: 'zoom',
title: 'Zooming In and Out',
text: 'You can zoom the images using the right click.',
attachTo: {
element: '.viewport-element',
on: 'left',
},
advanceOn: {
selector: '.cornerstone-viewport-element',
event: 'CORNERSTONE_TOOLS_MOUSE_UP',
},
beforeShowPromise: () => waitForElement('.viewport-element'),
},
{
id: 'pan',
title: 'Panning the Image',
text: 'You can pan the images using the middle click.',
attachTo: {
element: '.viewport-element',
on: 'top',
},
advanceOn: {
selector: '.cornerstone-viewport-element',
event: 'CORNERSTONE_TOOLS_MOUSE_UP',
},
beforeShowPromise: () => waitForElement('.viewport-element'),
},
{
id: 'windowing',
title: 'Adjusting Window Level',
text: 'You can modify the window level using the left click.',
attachTo: {
element: '.viewport-element',
on: 'left',
},
advanceOn: {
selector: '.cornerstone-viewport-element',
event: 'CORNERSTONE_TOOLS_MOUSE_UP',
},
beforeShowPromise: () => waitForElement('.viewport-element'),
},
{
id: 'length',
title: 'Using the Measurement Tools',
text: 'You can measure the length of a region using the Length tool.',
attachTo: {
element: '[data-cy="MeasurementTools-split-button-primary"]',
on: 'bottom',
},
advanceOn: {
selector: '[data-cy="MeasurementTools-split-button-primary"]',
event: 'click',
},
beforeShowPromise: () =>
waitForElement('[data-cy="MeasurementTools-split-button-primary]'),
},
{
id: 'drawAnnotation',
title: 'Drawing Length Annotations',
text: 'Use the length tool on the viewport to measure the length of a region.',
attachTo: {
element: '.viewport-element',
on: 'right',
},
advanceOn: {
selector: 'body',
event: 'event::measurement_added',
},
beforeShowPromise: () => waitForElement('.viewport-element'),
},
{
id: 'trackMeasurement',
title: 'Tracking Measurements in the Panel',
text: 'Click yes to track the measurements in the measurement panel.',
attachTo: {
element: '[data-cy="prompt-begin-tracking-yes-btn"]',
on: 'bottom',
},
advanceOn: {
selector: '[data-cy="prompt-begin-tracking-yes-btn"]',
event: 'click',
},
beforeShowPromise: () => waitForElement('[data-cy="prompt-begin-tracking-yes-btn"]'),
},
{
id: 'openMeasurementPanel',
title: 'Opening the Measurements Panel',
text: 'Click the measurements button to open the measurements panel.',
attachTo: {
element: '#trackedMeasurements-btn',
on: 'left-start',
},
advanceOn: {
selector: '#trackedMeasurements-btn',
event: 'click',
},
beforeShowPromise: () => waitForElement('#trackedMeasurements-btn'),
},
{
id: 'scrollAwayFromMeasurement',
title: 'Scrolling Away from a Measurement',
text: 'Scroll the images using the mouse wheel away from the measurement.',
attachTo: {
element: '.viewport-element',
on: 'left',
},
advanceOn: {
selector: '.cornerstone-viewport-element',
event: 'CORNERSTONE_TOOLS_MOUSE_WHEEL',
},
beforeShowPromise: () => waitForElement('.viewport-element'),
},
{
id: 'jumpToMeasurement',
title: 'Jumping to Measurements in the Panel',
text: 'Click the measurement in the measurement panel to jump to it.',
attachTo: {
element: '[data-cy="data-row"]',
on: 'left-start',
},
advanceOn: {
selector: '[data-cy="data-row"]',
event: 'click',
},
beforeShowPromise: () => waitForElement('[data-cy="data-row"]'),
},
{
id: 'changeLayout',
title: 'Changing Layout',
text: 'You can change the layout of the viewer using the layout button.',
attachTo: {
element: '[data-cy="Layout"]',
on: 'bottom',
},
advanceOn: {
selector: '[data-cy="Layout"]',
event: 'click',
},
beforeShowPromise: () => waitForElement('[data-cy="Layout"]'),
},
{
id: 'selectLayout',
title: 'Selecting the MPR Layout',
text: 'Select the MPR layout to view the images in MPR mode.',
attachTo: {
element: '[data-cy="MPR"]',
on: 'left-start',
},
advanceOn: {
selector: '[data-cy="MPR"]',
event: 'click',
},
beforeShowPromise: () => waitForElement('[data-cy="MPR"]'),
},
],
tourOptions: {
useModalOverlay: true,
defaultStepOptions: {
buttons: [
{
text: 'Skip all',
action() {
this.complete();
},
secondary: true,
},
],
},
},
},
],
};
}
function waitForElement(selector, maxAttempts = 20, interval = 25) {
return new Promise(resolve => {
let attempts = 0;
const checkForElement = setInterval(() => {
const element = document.querySelector(selector);
if (element || attempts >= maxAttempts) {
clearInterval(checkForElement);
resolve();
}
attempts++;
}, interval);
});
}