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​
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_DOMAIN parameter in platform/viewer/package.json to http://192.168.99.100:8042 or the ip docker-machine ip throws. This is the valueWebPack
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:8042/app/explorer.html
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-Orthanc/
, 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 repository's root directory, and run:
# If you haven't already, enable yarn workspaces
yarn config set workspaces-experimental true
# 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 NODE_ENV=development PROXY_TARGET=/dicom-web PROXY_DOMAIN=http://localhost:8042 APP_CONFIG=config/docker_nginx-orthanc.js webpack-dev-server --config .webpack/webpack.pwa.js -w
cross-env
sets three environment variables- PROXY_TARGET:
/dicom-web
- PROXY_DOMAIN:
http://localhost:8042
- APP_CONFIG:
config/docker_nginx-orthanc.js
- PROXY_TARGET:
webpack-dev-server
runs using the.webpack/webpack.pwa.js
configuration file. It will watch for changes and update as we develop.
PROXY_TARGET
and PROXY_DOMAIN
tell our development server to proxy requests
to Orthanc
. This allows us to bypass CORS issues that normally occur when
requesting resources that live at a different domain.
The APP_CONFIG
value tells our app which file to load on to window.config
.
Here is what that
configuration looks like:
window.config = {
routerBasename: '/',
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.