Build Medical Radiology DICOM Viewer in HTML 5 & jQuery for iPhone

May 18, 2012 31 Comments


For Medical Radiology domain, it’s indispensable to develop DICOM Viewer in order to view medical images (CT, MR, Endoscopy,X-Ray) on smartphones. For desktop it’s easy to build for webkit browsers (Mozilla Firefox, Chrome) on HTML 5 & jQuery. Lets develop such app for iPhone.

To build this app, several js libraries are needed which is available @ github.

  • Lets check for the code to build the DICOM Web viewer on HTML 5 :

<html>

<head>

<title>DICOM Web Viewer</title>

<meta name=”apple-mobile-web-app-capable” content=”yes”/>

<meta name=”viewport” content=”width=device-width”/>

<meta http-equiv=”content-type”content=”text/html; charset=ISO-8859-1″>

<link rel=”stylesheet” href=”css/style.css”>

<link rel=”stylesheet” href=”css/ui-darkness/jquery-ui-1.8.16.custom.css”>

</head>

<body>

<!– Third party –>

 

<script type=”text/javascript”src=”ext/jquery/jquery-1.7.1.min.js”></script>

<script type=”text/javascript”src=”ext/jquery/jquery-ui-1.8.18.custom.min.js”></script>

<script type=”text/javascript”src=”ext/flot/jquery.flot.min.js”></script>

<script type=”text/javascript”src=”ext/jpg.js”></script>

<script type=”text/javascript”src=”ext/jpx.js”></script>

<!– Local –>

<script type=”text/javascript”src=”src/dwv.js”></script>

<script type=”text/javascript”src=”src/application.js”></script>

<script type=”text/javascript”src=”src/dicom/dicomParser.js”></script>

<script type=”text/javascript”src=”src/dicom/dictionary.js”></script>

<script type=”text/javascript”src=”src/html/html.js”></script>

<script type=”text/javascript”src=”src/html/style.js”></script>

<script type=”text/javascript”src=”src/html/layer.js”></script>

<script type=”text/javascript”src=”src/image/image.js”></script>

<script type=”text/javascript”src=”src/image/lookupTable.js”></script>

<script type=”text/javascript”src=”src/image/luts.js”></script>

<script type=”text/javascript”src=”src/math/shapes.js”></script>

<script type=”text/javascript”src=”src/tools/toolbox.js”></script>

<script type=”text/javascript”src=”src/tools/draw.js”></script>

<script type=”text/javascript”src=”src/tools/rectangle.js”></script>

<script type=”text/javascript”src=”src/tools/roi.js”></script>

<script type=”text/javascript”src=”src/tools/line.js”></script>

<script type=”text/javascript”src=”src/tools/circle.js”></script>

<script type=”text/javascript”src=”src/tools/windowLevel.js”></script>

<script type=”text/javascript”src=”src/tools/zoom.js”></script>

<script type=”text/javascript”src=”src/tools/filter.js”></script>

<script type=”text/javascript”src=”src/tools/undo.js”></script>

<script type=”text/javascript”src=”src/utils/string.js”></script>

<script type=”text/javascript”>

function

toggle(dialogName)

{

if( $(dialogName).dialog(‘isOpen’) )

{

$(dialogName).dialog(‘close’);

}

else

{

$(dialogName).dialog(‘open’);

}

}

// main application

var  app = new dwv.App();

// jquery

$(document).ready(function(){

// create buttons and dialogs

$(“button”).button();

$(“#openFile”).dialog({ position: [10, 110] });

$(“#toolbox”).dialog({ position: [10, 280] });

$(“#history”).dialog({ position: [10, 450], autoOpen: false });

$(“#tags”).dialog({ position: [‘right’, 110], autoOpen: false, height: 400, width: 400 });

$(“#layerContainer”).dialog({ position: [340, 110],

width: [550], height: [570] });

// initialise the application

app.init();

});

</script>

<!– Title –>

<h1>DICOM Web Viewer </h1>

<!– Buttons –>

<button onclick=”toggle(‘#openFile’)”>Open File</button>

<button onclick=”toggle(‘#toolbox’)”>Toolbox</button>

<button onclick=”toggle(‘#history’)”>History</button>

<button onclick=”toggle(‘#tags’)”>Tags</button>

<button onclick=”toggle(‘#layerContainer’)”>Image</button>

<!– Open file –>

<div id=”openFile”title=”Open File”>

<p><form>

Path:

<input type=”file”id=”files”name=”files[]”multiple/>

</form></p>

<div id=”progressbar”></div>

</div>

<!– Toolbox –>

<div id=”toolbox”title=”Toolbox”>

</div>

<!– History –>

<div id=”history”title=”History”></div>

<!– Tags –>

<div id=”tags”title=”Tags”style=”display:none;”></div>

<!– Layer Container –>

<div id=”layerContainer”title=”Image”>

<canvas id=”imageLayer”width=”512″height=”512″></canvas>

<canvas id=”drawLayer”width=”512″height=”512″></canvas>

<canvas id=”infoLayer”width=”512″height=”512″></canvas>

<canvas id=”tempLayer”width=”512″height=”512″></canvas>

</div>

</body>

</html>

  • Lets run the Viewer on iPhone 4s.

Filed under Mobile ASP.Net, Responsive Design Tagged with , ,

About Anindita
Anindita Basak is a Cloud Architect. Worked in as Developer & Senior Developer on Microsoft Azure, Data Platform, IoT & BI , Data Visualization, Data warehousing & ETL & of course in Hadoop platform.She played both as FTE & v- employee in Azure platform teams of Microsoft.Passionate about .NET , Java, Python & Data Science. She is also an active Big Data & Cloud Trainer & would love share her experience in IT Training Industry. She is an author, forum contributor, blogger & technical reviewer of various books on Big Data Hadoop, HDInsight, IoT & Data Science, SQL Server PDW & PowerBI.

31 Responses to Build Medical Radiology DICOM Viewer in HTML 5 & jQuery for iPhone

  1. Naga Harish Movva says:
    May 21, 2012 at 10:05

    Please point the all JS files URLs or else please upload your work to Github.. Great work

    Reply
  2. René Laqua says:
    June 8, 2012 at 21:26

    Impressive Work! I would love to see the whole source code, if this is possible. Are you planing to release your work as open source or freeware?

    Reply
  3. nycvacationrental says:
    July 26, 2012 at 06:09

    good work, i’m also intereste din which JS file from github you used. thanks.

    Reply
  4. nycvacationrental says:
    July 26, 2012 at 10:16

    it’s right in the code. https://github.com/ivmartel/dwv this is the js used.

    Reply
  5. ivmartel says:
    July 27, 2012 at 16:07

    Hi, I’m the developer of the dwv. Any comments, bugs, suggestions are welcome! The full code and a demo are available on github.

    Reply
  6. redoxitive says:
    August 7, 2012 at 04:19

    hi,
    I want to open a dicom file via http server. you know now only local files.
    I think I must simulate javascript readAsBinaryString function in server with c# .net.
    but I got encoding problems.

    do you have an idea about this?

    Reply
  7. ganeshtechgene says:
    December 7, 2012 at 15:00

    Nice work Anindita, i need to run the same code in Android but this code not run in Android mobile can please provide code for android Jquery App.

    Reply
  8. pabloyepes says:
    June 17, 2013 at 16:13

    Excellent job. Would you have an updated version? I would like to see a CT scan with multiple slices. I see you foresaw that in the code but it is not implemented yet.
    I would also like to add the organ contours and dose delivered for radiotherapy

    Reply
  9. pabloyepes says:
    June 17, 2013 at 19:05

    Ok, I got it, but it is v0.4beta. Can you read the contours from a DICOM file?
    What needs to be done to include multislice? I’ll be willing to help.
    When do you think you will have the multi-slice option available?

    Reply
    • ivmartel says:
      June 17, 2013 at 19:22

      v0.3 is the latest stable version, v0.4 is in progress. They cannot read contours from DICOM but I would be interested, would you have data you could share that contains contours? About multislice, I would like to have something ready in a month or so. Thanks for proposing to help, feel free to fork the repository and add your improvements. I’ll merge them back once ready.

      Reply
  10. pabloyepes says:
    June 17, 2013 at 19:35

    Ivmartel,
    Ok, thanks. I am not familiar with this code development environment (forks), but let me see what I can do.
    How can I send you a patient with contours?

    Reply
  11. pabloyepes says:
    June 18, 2013 at 16:12

    I just sent you a set of CT, with a contour file (structures) and a few dose files.

    Reply
  13. soheilrad says:
    August 14, 2013 at 17:31

    First of all i should thank you for your rich and advance DICOM library ,
    I can see that you are always answering to all the questions perfectly,
    I have problem while using your DICOM library ,let me ask :
    How I can user thumbnail image and define Click event for all thumbnail images and then i want to show real image in canvas on each thumbnail Clicking, how can i do it ?
    Thanks in advance.

    Reply
    • ivmartel says:
      August 19, 2013 at 15:48

      If you are talking of thumbnails from a database of images, like a PACS, then this should be done by the web of the PACS. If WADO is enabled, you can query the images in jpg/png format, from all the Uids you could generate a thumbnail page. It would be too costly to generate the thumbnails from the generated canvases of dwv. Hope this answers your question…

      Reply
  14. soheilrad says:
    August 27, 2013 at 10:51

    Thanks ivmartel

    Reply
  15. miquinti says:
    December 4, 2013 at 17:17

    First, I do agree with other comments about your great work,
    I have tried to import the proyect with eclipse and I get problems because Eclipse change the main structure. How can I do to make the proyect works within Eclipse or should I use other IDE?

    Thank you very much in advantage.

    Reply
  16. manushakrishna says:
    April 7, 2014 at 11:16

    can u please explain the flow of converting the dicom image to jpeg2000

    Reply
  17. manushakrishna says:
    April 17, 2014 at 11:31

    thanks for your help . how can we generate the thumbnails for the above process…for dwv viewer

    Reply
  18. vivek gupta says:
    August 5, 2014 at 10:53

    Hi All,

    I want to pick Dicom image from server URL. Please guide me or provide any live example source code. I am using code from https://github.com/ivmartel/dwv. Here i saw we can passed URL but unable to replicate it.

    Thanks,
    Vivek

    Reply
  19. vivek gupta says:
    August 6, 2014 at 17:21

    Can we implement below feature
    1. Enter text orver the dcm image
    2. Add scale feature

    Reply

Leave a reply to ivmartel Cancel reply