DICOM in Dart (DCMiD)

Last updated: 1200 8 May 2014


Our goal is to determine the feasibility of using binary DICOM for building brower-based medical applications. We want to design and implement a DICOM editor that reads and writes binary DICOM and displays it using HTML5, CSS3, and Google’s open source programming language, Dart. Our program should be able to parse and display binary DICOM imaging studies in less than 3 seconds.

  • Students: Damish Shah (dshah15@jhu.edu); Danielle Tinio (dtinio1@jhu.edu)
  • Mentor: Dr. James Philbin (james.philbin@jhmi.edu)

The DICOM Standard

Learning about the structure of the DICOM Standard and its nuances was the most crucial part in writing the web application. The DICOM Standard specifies the information entity hierarchy that a DICOM file should be stored in. At the very top it specifies a Patient which has a list of Studies. The hierarchy continues through Series followed by Instance until image frames occur at the lowest level, each stored within a separate Instance. At each level there exist information attributes about the current level, as well as a list of objects at the next lowest level of the hierarchy.

The DICOM Standard also specifies the way in which each of the information entities need to be stored in memory. A binary DICOM file has a top level Dataset that contains a list of Attributes. It is important to recognize the structure of an Attribute as the lowest level of storage specification in the DICOM Standard. Every bit of information in a DICOM file is stored as an Attribute. An Attribute is structured as shown in figure 1. An Attribute contains a unique, 4 byte, identifying Tag depending on the data that is being stored in the Attribute. The Tag contains a group part and an element part each of which is 2 bytes long. An Attribute also contains a 2 or 4 byte Value Representation that specifies the encoding of the value field contents and which parser should be used to read this Attribute. Next in the Attribute is a length field that contains the length in bytes of the Value Field. Finally, the Attribute has a Value Field that stores the actual data of the Attribute.

A Value Field within an Attribute can also contain a Sequence, which is the way that an element in the top level information entity hierarchy is stored. A Study, Series, and Instance is stored as a Sequence in memory. A Sequence is defined as a list of Items and each Item contains a Dataset allowing the entire data structure to be recursive. The Dataset structure and relationships are shown in figure 2.

Figure 1

Figure 1: Structure of a DICOM Attribute

Figure 2

Figure 2: Data structure of DICOM Data


While software for viewing DICOM studies exists, the reading and writing of binary DICOM data can be improved.

Create a Zero-Footprint Web Application

Dart, Google’s new, class-based, single-inheritance, object-oriented programming language designed explicitly for creating web applications is proposed to handle this task. One goal is to demonstrate the viability of retrieving and displaying binary DICOM in a web application. Using the nested structure shown in Figure 2, the client will display DICOM data in a nested tree-table format, allowing the user to expand and collapse the information levels. A zero-footprint web client offers many advantages over traditional software applications. It allows the application to stream data and prevents the need for sensitive, HIPAA covered patient data to be stored on the end point device. It also allows the web application to be maintained and upgraded without the need for access control on the end point device, lowering management costs. There is also an opportunity for improved security since the data can be encrypted before transmission.

Decrease Development Overhead

One of the goals for the open-source DICOM web viewer was to decrease the amount of time and effort required for developers to contribute to and continue the project. The Dart programming language is a fast and intuitive tool to create and maintain the web application. Dart is similar to many object-oriented programming languages, such as Java, C++, and C#. In contrast to JavaScript, the primary language used to create web applications, Dart is easy to learn and use because it is class-based and has good library and package management functionality. Like JavaScript, it is dynamically typed and functions and their closures are first class.

Increase Parsing Speed

Increased speed of DICOM data management is significant for users such as large hospitals, which process hundreds of images daily, and regional Health Information Exchanges, that manage millions of images. As the use of medical imaging studies increases, it becomes more important to access and manipulate this data faster. Dart has an advantage over JavaScript in that it performs better on several major benchmarks.2 Native Dart is currently only supported in Google based browsers, but is also able to compile to JavaScript to run in other web browsers. Even when compiled to JavaScript through the dart2js compiler, Dart still maintains a large speed advantage over native JavaScript. The goal was to be able to parse all of the DICOM test files in under 3 seconds.


  • Expected: (April 28) Complete
    1. Display a work list of studies of n patients
    2. Display patient as collapse/expand tree for study information model
    3. Develop a stand-alone collapsible tree-table Polymer UI Element
    4. Clean code and finish API
    5. Create a user domain
  • Maximum: Future Work
    1. Edit metadata
    2. Display images
    3. Encrypt and decrypt studies using AES (GCM) using an encryption framework created at Hopkins Security Institute.
  • Minimum: (April 5) Complete
    1. Read and display DICOM in a browser and then write it
    2. Build a test program that compares input and output to validate correctness
    3. Create unit tests for each class (final version is put on hold until close to project completion.)

Technical Approach

Our first step is to learn the DICOM standard to understand how medical imaging data is stored. From this knowledge, we will design a data structure for DICOM studies. After creating a project plan which includes packages and classes for our viewer and editor, we will use Dart syntax to translate our plan into code while simultaneously unit testing each class. Once we have functional code, we will work to iteratively optimize it to achieve our goal speed.

The flowchart below is a visualization of the information pipeline that our program implements:


  • Access to our mentor – Our mentor has agreed to weekly meetings on Wednesdays at 9:30 a. m. and is open to setting up additional meetings when needed.
  • Computer to write code – Both team members have computers to write code on. If our computers face any unforeseen disasters, we have access to computers on campus.
  • Bitbucket to share code – As of February 13, 2014, we have access to the Bitbucket repository for this project.
  • Dart & DICOM Reference Information – Our mentor has provided us with the DICOM documents that we need. Dart reference information can easily be accessed online.
  • Access to DICOM Test Data – Our mentor has provided us with five anonymous test studies, with access to more if the need arises.

Milestones and Status

  1. Have project proposal finished and all of the programming planned and reviewed by Dr. Philbin
    • Planned: February 20
    • Status: ✔
  2. Read input (parse)
    • Planned: March 6
    • Status: ✔
  3. Write and validate output
    • Planned: March 20
    • Status: ✔
  4. HTML5/CSS3 display metadata
    • Planned: April 3
    • Status: ✔
  5. Display/Edit images
    • Planned: May 1
    • Status: Further work
  6. Final Poster Presentation
    • Planned: May 9
    • Status:✔

Reports and presentations

Project Bibliography

Other Resources and Project Files

Project code: https://bitbucket.org/ohtmiami/dicom-in-dart-dcmid

You can read more about DICOM here.

You can learn more about Google's Dart programming language here.

You can learn about the Polymer Project here.



  • First Meeting with Dr. Philbin
  • Received DCMiD Project Plan
  • Review initial list of classes and packages


  • Meeting with Dr. Philbin
  • Went over presentation


  • Received access to Bitbucket repository
  • Damish was able to access the code
  • Danielle was unable to access the code


  • Max 5 people per private repository
  • Danielle now able to access code


  • Meeting with Dr. Philbin
  • Received Reading list of papers (listed under “Project Bibliography” below)


  • Idea for byte storage
  • The IO documentation specifies a readAsBytes method for File objects that returns a Future<List<int» (which means that the data is stored when it becomes available as a list of ints).
  • The Uint8List class is meant to replace the List class for unsigned 8-bit ints, which the documentation claims is more space- and time- efficient for long lists.
  • implement the static typing when we read the input files


  • Meeting with Dr. Philbin
  • Read metadata without parsing value fields and print dataset
  • all attributes have an even length - if length is odd, padding byte at end. length -1 : look for item delimiter
  • Figure out efficient string UTF8 to string conversion
  • Writing and testing parsers for value fields


  • Not completely sure how to use makeValueArray list in the VR class in base.dart.
  • How exactly should we create a VR object?
  • Tried: VR vr_object = VR.valueOf( bdv.getInt16( offset += 2, Endianness.LITTLE_ENDIAN ) ); but does not work
  • will getInt16 method give the int code that we're looking for to create a VR?
  • How to get code in valueOf method?


  • Dr. Philbin uploaded modified version of dataset.dart showing his intended structure


  • Plan presentation.


  • Meeting with Dr. Philbin


  • Created new branch for Damish and Danielle
  • fixed readStringList method in bytebuf.dart
  • Wrote Parsers:
    • readAETitleList
    • readCodeStringList
    • readText
    • readDateTimeList
    • readIntegerStringList
    • readDecimalStringList
    • readPersonName (PersonName.parse not working)
    • readPersonNameList (PersonName.parse not working)
    • readUriList
    • readAgeString
  • TODO: write parsers
    • readUidList
    • readBulkdataReference
    • readFloat32List
    • readFloat64List)


  • VR = 2 bytes (chars or vrCodes)
  • UUID = 16 bytes (Wikipedia)
  • Offset = 4 bytes (int32)
  • Length = 4 bytes(int32)


  • Meeting with Dr. Philbin
  • Updated most recent version of unit test code.
  • “Closure” errors occur when there's no closure, ()



  • Meeting with Dr. Philbin


  • Meeting with Dr. Philbin
  • TODO: Try Uint16 without the endianness argument


  • Check Point presentation



  • Meeting with Dr. Philbin
  • Testing on new sets of data


  • Danielle paper presentation




  • Damish paper presentation



  • Meeting with Dr. Philbin
  • example table code excel example layout for user interface


  • Meeting with Dr. Philbin
  • Work on poster teaser and poster
  • Finish the API
  • Debug all of the parsers
  • Clean up the user interface


  • Meeting with Dr. Philbin
  • Finish Poster and send to be printed

Lab Safety Certificates

courses/446/2014/446-2014-13/dicom_viewer_editor_in_dart.txt · Last modified: 2014/05/09 17:54 by dshah15@johnshopkins.edu