StudyCentric – developing a research-oriented open-source web-based DICOM viewer

CBMi designs applications to meet the diverse needs of many different users ranging from sophisticated research scientists to clinicians, office staff, and even patients. Recently during the development of the pediatric hearing impairment research tool, AudGenDB, we found ourselves challenged with a requirement to display anonymized medical image data inside the web browser. There were two major deployment requirements to accomodate users working in academic institutions and hospitals. First, the application needed to work in browsers as old as IE 7 as well as all major modern browsers, and second, it could not require any special privileges to run on the user’s computer. Further, we had one major feature requirement that the application support basic distance measurement. These concerns seriously limited our options.

Where to start?

At the time there were a few Java applet-based applications, one Adobe Flash-based viewer and one JavaScript based viewer.  Previous experience supporting widely deployed applications using Java applet technology left us concerned that we did not have enough resources to field potential issues. The Flash application worked, but was an unsupported personal project using an older Flash application framework. This left us with the JavaScript solution, an open-source application called Oviyam, written by Raster Images, an IT services group associated with SKS Hospital in India. The back-end is a Java web application that uses the Digital Imaging and Communications in Medicine (DICOM ) standard to communicate with any picture archiving and communication system (PACS) that supports basic DICOM and WADO (a standard for requesting images and DICOM files over HTTP) queries. Unfortunately, at the time it did not have any measurement features, but since it was the only application to meet our first two requirements we decided to contribute this functionality to the codebase.  While Oviyam served us well for the first year of our project, the complexity of the interface and the fact that it was not written for research workflows lead us to implement our own DICOM viewer. We named this new application StudyCentric and have made it available on Github under an open-source BSD license.

Goals for StudyCentric

Our major goal in writing StudyCentric was to create an intuitive DICOM viewer suitable for research projects. It runs in both older (IE 7) and newer browsers without any plugins and uses a simple web-service to communicate with a DICOM PACS. We are currently using dcm4chee, but any PACS supporting C-Find and WADO should work. To display a DICOM study, pass the study unique identification number (UID) as part of the query string to the application’s URL. StudyCentric contains window level/width, zoom and distance measurement functionality. It is not a full PACS client nor is it approved as commercial medical device so its use is limited to research applications.

Application Specifics

The front-end application code is written using the Backbone.js MVC framework with jQuery for DOM manipulation. Backbone.js allows us to easily model the relationship between DICOM studies, series and instances on the client. The JavaScript components are modularized using RequireJS, a JavaScript dependency framework. To enable vector-based measurements we used the Raphael graphics library. We hope that by using modern JavaScript frameworks it will be easier for others to add features to the codebase or create versions with functionality for specific use-cases. For example, we are currently maintaining a separate branch of the application for AudGenDB that includes a tool to report issues back to our server.

DICOM Details

Each DICOM object at its highest level is part of a study with an associated Study Instance UID (Unique Identifier).  DICOM studies are further broken up into multiple series, with each series having an associated Series Instance UID. Finally, each individual DICOM object (think image) has its own identifier called the SOP Instance UID (sometimes called Object Instance UID). All UIDs, regardless of level must be world unique. Also, while it is possible for the Series Instance UID to contain and then extend the Study Instance UID (and correspondingly, the SOP Instance UID to contain and extend the Series Instance UID), this is not required.  In the PACS, every DICOM object is a file that holds all three of these identifiers. A DICOM viewer must request all the files having the same Study UID and then display them properly according to the Series UID contained in the file.

StudyCentric Implementation Details

StudyCentric uses Backbone.js to model DICOM study, series, instance hierarchy. There are three Backbone.js model definitions- Study, Series, and Instance. Along with model definitions there are two Backbone.js collection definitions- SeriesStack, and ImageStack. The Study model has one attribute that holds a SeriesStack instance, and the Series model has one attribute that holds an ImageStack. By instantiating a Study model with the Study UID provided in the query string, we can use Backbone.js to create and populate this object hierarchy.

The server component is a single-file Ruby Sinatra application that offers the front-end a REST API for finding all the DICOM objects in the requested study. The server uses the ruby-dicom library to query the PACS system. Ruby-dicom is an open-source library written completely in Ruby (with no external dependencies) that provides both DICOM file and network functionality in a sane API. Those that have worked with the DICOM network protocol may have found it to be esoteric, but the ruby-dicom API does a very nice job of hiding that complexity while still providing useful functionality. To retrieve the DICOM images, StudyCentric can be setup to speak directly to the WADO port of the PACS, or proxied through the ruby web-service.  There is nothing tying the StudyCentric client to this service, and it could easily be re-implemented using another language and API (for example, Java and the dcm4che2 DICOM API).

Resources for DICOM Solutions

Depending on your requirements there are quite a few solutions out there for web-based DICOM viewers, but we hope that others working with similar goals and restrictions find StudyCentric useful. Below we share some useful resources we have found on the web for getting up to speed on DICOM.


In-depth and surprisingly readable book on all things DICOM – a really good place to start if you want to understand DICOM basics or nitty gritty details.


Home of dcm4chee, a popular open source PACS, as well as Oviyam.

The ruby-dicom library. Repository includes some sample DICOM files.

Python library for manipulating DICOM files. Does not have any network functionality.

Popular OS X and iOS DICOM viewer.


A DICOM introduction.

Discusses what a single pixel on-screen actually represents.

Desperate times call for reading specs

DICOM data dictionary spec.

WADO (Web Access to DICOM Objects) spec.

This entry was posted in Tutorial and tagged , , , , , , . Bookmark the permalink.

3 Responses to StudyCentric – developing a research-oriented open-source web-based DICOM viewer

  1. John Heleniak says:

    I have it semi-working. The only thing that won’t come up is the instance image. the series images on the left and right work and produce images. All dicom communication is good. Maybe a script error or bug in client?

    • Jeff Miller says:

      Hi John,

      What web browser are you using? Do you know how to bring up the developer console to display any JavaScript errors that may occur when you clicking on an instance image?

      • john says:

        chrome latest….ie 8 locks up and goes nowhere…. i’m wondering if some of the files from tar/zip from download are messed up. do you have a good copy i could test? im using apache to serve client. the ruby/dicom/wado seems to be working flawlessly. im thinking its a javascript thing too.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s