Data Source

After following the steps outlined in Getting Started, you'll notice that the OHIF Viewer has data for several studies and their images. You didn't add this data, so where is it coming from?

By default, the viewer is configured to connect to a remote server hosted by the nice folks over at dcmjs.org. While convenient for getting started, the time may come when you want to develop using your own data either locally or remotely.

Set up a local DICOM server

ATTENTION! Already have a remote or local server? Skip to the configuration section below.

While the OHIF Viewer can work with any data source, the easiest to configure are the ones that follow the DICOMWeb spec.

Choose and install an Image Archive
Upload data to your archive (e.g. with DCMTK's storescu or your archive's web interface)
Keep the server running

For our purposes, we will be using Orthanc, but you can see a list of other Open Source options below.

Requirements

Docker

Not sure if you have docker installed already? Try running docker --version in command prompt or terminal

If you are using Docker Toolbox you need to change the proxy parameter in package.json to http://192.168.99.100:8042 or the ip docker-machine ip throws. This is the value react-scripts uses to proxy requests

Running Orthanc

Start Orthanc:

# Runs orthanc so long as window remains open
yarn run orthanc:up

Upload your first Study:

Navigate to Orthanc's web interface at http://localhost:8899 in a web browser.
In the top right corner, click "Upload"
Click "Select files to upload..." and select one or more DICOM files
Click "Start the upload"

Orthanc: Learn More

You can see the docker-compose.yml file this command runs at <project-root>/docker/Nginx-Docker/, and more on Orthanc for Docker in Orthanc's documentation.

Connecting to Orthanc

Now that we have a local Orthanc instance up and running, we need to configure our web application to connect to it. Open a new terminal window, navigate to this project's root directory, and run:

# If you haven't already, restore dependencies
yarn install

# Run our dev command, but with the local orthanc config
yarn run dev:orthanc

Configuration: Learn More

For more configuration fun, check out the Essentials Configuration guide.

Let's take a look at what's going on under the hood here. yarn run dev:orthanc is running the dev:orthanc script in our project's package.json. That script is:

cross-env PORT=5000 REACT_APP_CONFIG=config/docker_nginx-orthanc.js react-scripts start

cross-env sets two environment variables
- PORT: 5000
- REACT_APP_CONFIG: config/docker_nginx-orthanc.js
react-scripts runs it's start script. This is the de-facto way to run a "Create React App" in development mode.

The REACT_APP_CONFIG value tells our app which file to load on to window.config. By default, our app uses the file at <project-root>/public/config/default.js. Here is what that configuration looks like:

window.config = {
  routerBasename: '/',
  relativeWebWorkerScriptsPath: '',
  servers: {
    dicomWeb: [
      {
        name: 'Orthanc',
        wadoUriRoot: 'http://localhost:8899/wado',
        qidoRoot: 'http://localhost:8899/dicom-web',
        wadoRoot: 'http://localhost:8899/dicom-web',
        qidoSupportsIncludeField: false,
        imageRendering: 'wadors',
        thumbnailRendering: 'wadors',
      },
    ],
  },
};

To learn more about how you can configure the OHIF Viewer, check out our Configuration Guide.

Open Source DICOM Image Archives

Our example uses Orthanc, but there are a lot of options available to you. Here are some of the more popular ones:

Archive	Installation
DCM4CHEE Archive 5.x	W/ Docker
Orthanc	W/ Docker
DICOMcloud (DICOM Web only)	Installation
OsiriX (Mac OSX only)	Desktop Client
Horos (Mac OSX only)	Desktop Client

Feel free to make a Pull Request if you want to add to this list.

5.8 KiB Raw Blame History