cylab-tw/bluelight

a browser-based DICOM viewer

BlueLight Web-based DICOM Viewer (BlueLight Viewer)

Blue Light is a browser-based medical image viewer is primarily maintained by the Imaging Informatics Labs. It is a pure single-page application (SPA), lightweight, and using only JavaScript and HTML5 technologies so as to deploy it on any HTTP server easily (just put it in HTTP server). It supports not only opening local data, but also connecting to medical image archives which support DICOMweb. It can display the various image markups and annotations such as Annotation and Image Markup (AIM), DICOM-RT structure set (RTSS), DICOM Overlay, and DICOM Presentation State. It provides tools for medical image interpretation and 3D image reconstruction, e.g., Multiplanar Rreformation or Reconstruction (MPR) and Volume Rendering (VR).

Live DEMO    Online Viewer    Video - Basic operation     Video - Labeling tools

Install

• Put all files into any directory in the static directory on any HTTP server.

DICOMWeb Configuration

• go to ./bluelight/data/config.json and change the configuration of DICOM server.

• Reminder the DICOMWeb Plugin of the DICOM server shall be installed first.

About

• BlueLight是少數能在網頁上顯示3D VR、MIP及MPR的開源DICOM瀏覽系統，它擁有平易近人的操作介面並支援RWD及Web零足跡瀏覽，可在任意大小的裝置上執行。
• 標記顯示方面支援RTSS、Overlay、Graphic Annotation、AIM等標記，亦可於3D系統中轉換成3D標記。
• 此專案亦支援LabelImg格式的標記繪製。
• 3D VR顯示模式支援染色、窗度、透明、壓縮、貼皮、內插、降噪、打光、挖洞及最大密度投影，針對骨骼及肺氣管有專門的顯示模式，MPR模式則支援內插、貼皮、染色以及3D切面的顯示。
• 通過台灣醫學資訊聯測 MI-TW 2020 - Track 4: DICOMWeb Query/Retrieve Consumer

Key Features

Network support

• Load local files
• Integration with any DICOMWeb Image Archive, including Raccoon, Orthanc, and dcm4chee server
  • Retrieve methods: WADO-URI (as default) and WADO-RS: specify one of them in config.json
• Integration with XNAT by plugin xnat.js. BlueLight will query the XNAT's API to get the XML and retrieve the DICOM stored in experiments and its scans. Currently we doesn't build it as an XNAT plugin. issue: XNAT Connection
  • Step1: copy BlueLight to XNAT deployment folder
  • Step2: type URL: https://{XNAT's hostname}/bluelight/search/html/start.html?experiments={XNAT expID}&scans={scanID}&format=json

  http://{XNAT's hostname}/REST/projects/test/subjects/XNAT_S00001/experiments/XNAT_E00002/scans/1/files?format=json

Support IODs

• Most general image IODs (CR, DX, CT, MR, US, etc)
• PDF

Native features for 2D image interpretation

• Pan, zoom, move
• Scroll images within a series
• Rotation, Flip, Invert
• Windowing
• Cine
• viewports: 4×4
• Cross-Studies synchronization
• Magnifier, etc
• Line and angle measurement
• hide/display markups and annotations
• Export image

support the display of the kinds of markups and annotations

• GSPS: DICOM Graphic Annotation
• DICOM Overlay
• DICOM-RT structure set (RTSS)
• Annotation and Image Markup (AIM)
• DICOM SEG (Segementation)
• LabelImg
• Provide the function to convert the DICOM Overalys to a DICOM SEG object.

Plugins

• Some advanced features are separated from the native parts of Bluelight to facilitate better performance. All supported functions are placed in folder /scripts/plugin. Using the config enable the selected plugins. If disableCatch is set as false, the plugin is enabled.

{
    "plugin": [
    /*  path: the location of plugin
     *  name: the name of plugin
     *  disableCatch: enable the plugin or not.
     *  examples show as follows:        
     * /
        {"path":"../scripts/plugin/oauth.js", "name": "oauth", "disableCatch": "true"},
        {"path":"../scripts/plugin/mpr.js", "name": "MPR", "disableCatch": "true"},        
    ]
}

• We welcome any idea of adding new plugins from any third party, such as:
  • Create the customized annotations encoded as a xml - see xml_format.js

Plugin: Authentication

• OAuth2 - see oauth.js. If OAuth2 is enabled, and then modify the config.
  • Note: we used Keycloak to test the function of OAuth2.

{
    "enabled":false,
    "hostname":"127.0.0.1",
    "port":"8080",
    "http":"http",
    "client_id":"account",
    "endpoints":
    {
        "auth":"realms/TestRealm/protocol/openid-connect/auth",
        "validation":"realms/TestRealm/protocol/openid-connect/userinfo", 
        "token":"realms/TestRealm/protocol/openid-connect/token" 
    },
    "tokenInRequest":true
}

Plugin : 3D Post-Processing

• MPR (Multiplanar Reconstruction) - see mpr.js
• MIP (maximum intensity projection) - implemented in MPR
• 3D Volume Rendering - see vr2.js

Plugin : Labeling tool interfaces (on experiment state)

• LabelImg
• GSPS: DICOM Graphic Annotation - see graphic_annotation.js
• DICOM-RT structure set (RTSS) - see rtss.js
• DICOM SEG (Segementation) - see seg.js
  • Download as DCMTK DICOM-XML: only launch BlueLight
  • Download as DIOCM SEG: It is integrated with Raccoon.net. Please put the BlightLight on Raccoon.

Plugin : General

• Display DICOM TAG - see tag.js
• Display LUT- see table.js

Supported library

• BlueLight Viewer uses several oepn source libraries as folowing:
  • cornerstone for reading, parsing DICOM-formatted data.
  • dicomParser for parsing DICOM tags.

Roadmap

• FHIR ImagingStudy Query/Retrieve Interface
• Support the IHE Invoke Image Display (IID) Profile [RAD-106]
• Display DICOM Structured Report
• Display DICOM Waveform - 12 Lead ECG Waveform

Special projects

• BlueLight-WSI: 🚧 please visit the project mainecoon
• BlueLight@Orthanc: ㊙️
• BlueLight@XANT: ✅
• [email protected]: ✅ - Raccoon.net is a noSQL-based medical image repository.

Acknowledgement

• To acknowledge the BlueLight in an academic publication, please cite

Chen, TT., Sun, YC., Chu, WC. et al. BlueLight: An Open Source DICOM Viewer Using Low-Cost Computation Algorithm Implemented with JavaScript Using Advanced Medical Imaging Visualization. J Digit Imaging (2022). https://doi.org/10.1007/s10278-022-00746-0

• This project was supported by a grant from the Ministry of Science and Technology Taiwan.
• We acknowledge AI99 teams at Taipei Veterans General Hospital (TVGH) for validation and provides many useful suggestions in many aspects of the clinical domain, especially to thank Dr. Ying-Chou Sun and his professional team.
• Thanks 琦雯Queenie, Queenie's github for contributing the logo design.

bluelight's Issues

Avoid retrieving all image from the server with arbitrary parameters

problem description

in start.html, adding query pentameters that are not defined in DICOMweb will cause a query of all metadata from a DICOMweb server. In this situation, BL will retrieve all images from the server. for example, as the following URL, the QIDO request will get all metadata of the DICOM objects in the server.

https://{host}/bluelight/bluelight/html/start.html?session_code=xxx

solution

1. adding a white list of query parameters before sending QIDO request to a server, filtering the undefined query parameters to avoid the situation described above.
2. after step 1, check the QIDO request if the request has no query parameter, then stop to query the server.

Adding a while list of the query parameters in QIDO

• search query parameters
• define a rule defined in DICOMweb. The syntax of the match Query Parameter shall be:

match          = normal-match / uid-list-match
normal-match   = 1*("&" attribute "=" value)
uid-list-match = 1*("&" attribute "=" 1#value)
attribute      = (attribute-id) *("." attribute-id)
attribute-id   = tag *("." tag) / keyword *("." keyword)
tag            = 8HEXDIG
keyword= ;A keyword from [Table 6-1 “Registry of DICOM Data Elements” in PS3.6](https://dicom.nema.org/medical/dicom/current/output/chtml/part06/chapter_6.html#table_6-1).

One or more DICOM Attribute/Values pairs specify the matching criteria for the search.
Each search transaction defines which Attributes are required or permitted.

Plugin - 2D MPR

Creating a display protocol for 2D MPR with 3 columns.

Open on remote server

Is there any way to open data located on the server running bluelight? And to ensure that the user can't browse around the server and only the specific folder (and sub folders) with the data?

[SIIM Hackathon] add token into http header for authentication

Add the given header and given value to all QIDO/WADO requests for the purpose of authentication of SIIM hackathon DICOMweb server.

Configuration for local files?

Where do we configure Bluelight to load local files?

Add the display of the Study Description (0008,1030) in the right corner

Frontal and Saggital view

Hi @cylien and @birdeggb2777,

Currently, we see axial on the main screen. How can we convert this to frontal or saggital?

Thank you.

Use arrow keys to cycle through images

Hi, scrolling through images is difficult with just a trackpad. Is it possible to add support for scrolling through images with arrow keys?

Parameter Json

Congratulations, very good. You can pass the information through a json for example. So you could open DICOM images stored on Amazon S3 for example.

Reduce QIDO requests in Search page

Using DICOM-Study-Series-Image heretically search to replace the current method. The current method sends a QIDO Study level query and then sends too many QIDO-RS series/instance queries to cause the search page slow.
while clicking the search button, send a QIDO Study Level query. If the user clicks the study, then launch the QIDO series/instance level query to avoid sending all QIDO requests of studies.

oauth2 support

Please add oauth2 or openid connect support to the development roadmap. It's important in real world deployments. Currently I use ohif viewer and it has support for it.

Add the support of the RetrieveURL (0008,1190) that can be configured in config.

Some DICOMweb server creates the WADO-RS RetrieveURL (0008,1190) by host name as 127.0.0.1 default, e.g., DCM4CHEE, which causes the invalided link. This feature will be added in the config to allow two options for creating WADO-RS URL: (1) created by BL. (2) created by the DICOMweb server.

Adjusting WW/WL values to multiframe image does not apply to all frames.

          Hi! Working on a Tomosynthesis image, the WW/WL values applied to an image are not preserved when scrolling to the adjacent images, requiring continuos WW/WL adjustments.

Originally posted by @Terabuck in #29 (comment)

Keep the drawing annotations on canvas

The distance and angle measurements don't keep the drawings on the canvas. Keep the results of drawing on the viewport.

XNAT Connection

Hi!

I would like to know how it is possible the connection with XNAT. I see the way to connect to Orthanc but no way to see the solution for XNAT. Could you help me on that?

Great work with bluelight!

code refactoring to separate advanced functions as plugins

To manage the functions more easily, some advanced features will be separated from the main functions such as 3D, labeling, etc. The separated functions will be configured in a plugin.json when launching BL.

Add the feature to view image by hounsfield units(HU) provided by CT image

Retrieve a large number of instances causes partial WADO requests timeout.

If a study contains many number instances e.g., a CT exam contains more than 1,000 images, sending WADO requests will be time out. It needs to redesign the retrieving mechanism to avoid this situation. For example, mixing asynchronous and synchronous HTTP requests may be a solution to avoid request large number of HTTP requests in a short period. The other method is to re-send a WADO request if a timeout happened.

deploy issues

I tried to put the file in the browser's root directory，but don't know how to run it.If click "start.html",it local html folder open.I use Orthanc .If i want to use bluelight in Orthanc ,where can i put it.

Add the display of the GSPS, which it's GraphicType is INTERPOLATED

PDF

Is encapsulated PDF DICOM rendering possible? can it be included in the roadmap, please?

Support of displaying multiframe image

Display the text of the Modality id is not correct in search page.

On the search page, if a study contains multiple modalities, the display of text should be multiple modalities with commas to list all of the modalities in a study.

Display multiple frames in an Image

Hi @cylien and @birdeggb2777 , we are trying to figure out if we are able to see multiple frames of an image with Bluelight but this moment we only can see the first frame. Is that correct?

I saw that there was this development to support multiframe images:
#10

I understand that right now you can open a multiframe image but you are not able to visualize the other frames.

Thank you.

when load multiple dcm files, only 2 of these loaded correctly

Here is the images for reproduction.
When load the 16 dicom files, only the first and the last one were loaded correctly.

Link update on Readme

The link for DICOMweb needs to be updated to this: https://www.dicomstandard.org/using/dicomweb