Displaying an Image in the LEADTOOLS HTML5 Medical WebViewer

Summary

Take the following steps to display an image in the LEADTOOLS HTML5 Medical Web Viewer:

Create a new html file and name it display.html and copy the following HTML5 template into the file:

<!DOCTYPE html> 
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> <meta charset="utf-8" /> <title>LEADTOOLS Demo</title> 
    <!-- LEADTOOLS Libraries --> 
    <script type="text/javascript" src="lib/Leadtools.js"></script> 
    <script type="text/javascript" src="lib/Leadtools.Controls.js"></script> 
          <script type="text/javascript" src="lib/Leadtools.Annotations.Core.js"></script> 
          <script type="text/javascript" src="lib/Leadtools.Annotations.Designers.js"></script> 
          <script type="text/javascript" src="lib/Leadtools.Annotations.Rendering.JavaScript.js"></script> 
          <script type="text/javascript" src="lib/Leadtools.Annotations.Automation.js"></script> 
    <script type="text/javascript" src="lib/Leadtools.Controls.Medical.js"></script> 
    <script type="text/javascript" src="app.js"></script> 
    </head> 
    <body>  
    <!-- DIV to use as the container for the LEADTOOLS image viewer--> 
    <div id="MedicalViewerParentDiv" style="width: 600px; height: 600px; background-color:darkgray"></div> 
    </body> 
 </html>

Create a folder named lib in the same location as the html and copy the LEADTOOLS JavaScript files to this folder. These files can be found in "<LEADTOOLS_INSTALLDIR>\Bin\JS":
- Leadtools.js
- Leadtools.Controls.js
- Leadtools.Annotations.Core.js
- Leadtools.Annotations.Designers.js
- Leadtools.Annotations.Rendering.JavaScript.js
- Leadtools.Annotations.Automation.js
- Leadtools.Controls.Medical.js

The HTML contains the minimum code required to use the LEADTOOLS JavaScript Image Viewer in your application. 
   Leadtools.js is the kernel of the LEADTOOLS JavaScript support and is required by all other libraries. 
   Leadtools.Controls.js contains the basic image viewer functionality. 
   Leadtools.Annotations.Core.js, Leadtools.Annotations.Automation.js, 
   Leadtools.Annotations.Designers.js and 
   Leadtools.Annotations.Rendering.JavaScript.js contain the annotations functionalities that will be handled by the medical viewer. 
-   Leadtools.Controls.Medical.js contains the medical image viewer that holds the medical images, and contains various medical functionalities, like window level, reference line, MPR...etc. All of these JS files are added to the head section of the HTML. 
 
Next, create an HTML DIV element to act as the container for the viewer. 
Next, create the app.js that will contain the JavaScript code to create and use the viewer.

3. Create a text file called display.html and add the following code to it:

window.onload = function () { 
    // Get the parent DIV 
   var imageViewerDiv = document.getElementById("MedicalViewerParentDiv"); 
 
   // Create the medical viewer control, and specify the number or rows and columns. 
   var viewer = new lt.Controls.Medical.MedicalViewer(imageViewerDiv, 2, 2); 
 
   // [optional] Update the splitter size so it become thick and easy to move. 
   viewer.get_gridLayout().set_splitterSize(7); 
    
   // Create a cell name var  
   cellName = 'MedicalCell' + Date.now(); 
    
   // Create a cell. It will contain an image or a series of images, based on how many Frames are added (see below for more details). 
   var cell = new lt.Controls.Medical.Cell(viewer, viewer.get_divId(), 1, 1); 
    
   // Set the show border to "true", to show a border around the cell. 
   cell.set_showFrameBorder(true); 
    
   // Add the cell to the viewer.  
   viewer.layout.get_items().add(cell); 
    
   // [optional] Select the cell (it can also be selected by clicking on it.) 
   cell.set_selected(true); 
    
   // Now create a frame object which will hold the image inside the cell. 
   var cellFrame = new lt.Controls.Medical.Frame(cell); 
    
   // Add the frame to the cell class. 
   cell.get_frames().add(cellFrame); 
    
   // Now load an image inside the frame by using the following method (and change the url to a valid image url). 
   cellFrame.set_imageURL("http://xxx.jpg"); 
    
   // [optional] Add an action that allows the user to move the loaded image using either the mouse or by touch and drag. we are adding an offset action. 
   cell.setCommand(1, new lt.Controls.Medical.OffsetAction()); 
    
   // [optional] Run the action. Now if the user clicks or touches the image and drags it, the image will move correspondingly. 
   cell.runCommand(1); 
    
   // [optional] Create an overlay text that will appear at the top of the loaded image. 
   var overlay = new lt.Controls.Medical.OverlayText(); 
    
   // [optional] Set the aligment for the overlay text. 
   overlay.set_alignment(lt.Controls.Medical.OverlayAlignment.topLeft); 
    
   // [optional] Set the row index of overlay text. 
   overlay.set_positionIndex(0); 
    
   // [optional] Specify that this overlay text is filled by the user through the method (set_text) which is called after this line. 
   overlay.set_type(lt.Controls.Medical.OverlayTextType.userData); 
    
   // [optional] Specify the overlay text. 
   overlay.set_text("testing overlay text"); 
    
   // [optional] Add this overlay to the overlay list of the cell. Currently there is only one overlay, but the user can add multiple overlay texts. 
   cell.get_overlays().add(overlay); 
};