The LEADTOOLS HTML5 and JavaScript SDKs are a powerful collection of JavaScript and Web Services that enable web developers to create zero footprint, cross-platform applications with document and medical imaging functionality. Developers can target desktop PCs and mobile devices, such as iPad, iPhone, Android and more, with a single application featuring robust display and processing, and support for mouse and multi-touch gestures. For more information, refer to LEADTOOLS HTML5 Browser Support.

Web developers can use LEADTOOLS HTML5 Annotations to provide zero footprint, cross-platform image annotation and markup applications usable on any browser or device that supports HTML5 including Internet Explorer, Firefox, Chrome, iOS and Android.

The LEADTOOLS HTML5 DICOM Viewer application combines JavaScript libraries and Web Services to create a zero footprint, platform-independent web application to display DICOM images from any PACS. This OEM-ready, fully customizable website is perfect for any developer who needs fast, lightweight DICOM viewing without sacrificing any features healthcare professionals need.

Several LEADTOOLS SDKs offer imaging and recognition functionality in the form of JSON and SOAP Web services that are designed to be easily accessed by any application for a platform-independent solution.

Web Services provide a simple JSON interface for HTML5 / JavaScript applications. Developers using high level environments such as .NET and Java can utilize the LEADTOOLS SOAP Web Services.

All LEADTOOLS JavaScript libraries include the TypeScript definition files (.d.ts) required to develop HTML5/JavaScript applications using Microsoft TypeScript technology.

Overview of LEADTOOLS HTML5 Image Viewer SDK

HTML5 / JavaScript Viewer Control for cross-platform image viewing
Supports mouse and multi-touch (gesture) input
Interactive Modes Include:
- Pan
- Scale
- Zoom to Rectangle
- Center at Point
- Magnifying Glass
- Pinch and Zoom
Built-in image manipulation for:
- Rotate
- Flip
- Resize and Scale
Display images based on physical and logical units

Overview of LEADTOOLS HTML5 Zero Footprint DICOM Viewer SDK

HTML5 / JavaScript Viewer Control for cross-platform medical image viewing
Supports mouse and multi-touch (gesture) input
Cross-platform DICOM image display and processing
Zero footprint deployment provides fast loading times for low bandwidth clients
DICOM images anywhere, on your desktop, tablet or mobile device, from your local archive or a remote PACS using DICOM communication
Web Services for performing query/retrieve and streaming DICOM metadata and image data in any format or compression
HTML5 Image Annotation and Markup
Built-in tools for Window Level, Series Stack, image processing and more
Signed and unsigned display for extended grayscale images typical of medical applications
Client caching of downloaded image data for fast reloads and network traffic reduction
Options to manage user authentication, permissions and patients' access rights

Overview of LEADTOOLS HTML5 Annotation SDK

Cross-platform annotations library
Specialized annotations for document images
Specialized annotations for medical images
Annotations can be added to color, bitonal and grayscale images
Broad range of image annotation objects including text, geometric shapes, rulers, stamps and more
Supports single or multi-page image files
Unlimited undo and redo levels
Resolution independent annotations will scale with an image when loaded at a different DPI
Backwards compatible with other LEADTOOLS annotation interfaces

The LEADTOOLS JavaScript libraries use an object module similar to the Microsoft .NET or Java object class library.

The following members are available in each LEADTOOLS type in addition to the other properties and methods described in the members page.

Type refers to the LEADTOOLS type, such as lt.Controls.ImageViewer. All the functions listed below are "static" methods that must be called directly on the type itself and not an instance of the type.

Type.prototype

[Type].registerNamespace(name)

Registers a new LEADTOOLS namespace

Parameters

name: String containing the fully qualified name of the namespace. Must not be omitted or null

Returns

No return value

Example

Refer to the sample source code at the end of this document.

[Type].registerClass(name, baseType, interfaceType)

Registers a new LEADTOOLS class type

Parameters

name: String containing the fully qualified type name (namespace.name). Must not be omitted or null.

baseType: Base type. Can be omitted or null if the class does not derive from a LEADTOOLS base class.

interfaceType: Interface type implemented by the class. Can be omitted or null if the class does not implement a LEADTOOLS interface

Returns

No return value

Example

Refer to the sample source code at the end of this document.

[Type].registerInterface(name)

Registers a new LEADTOOLS class type

Parameters

name: String containing the fully qualified namespace name. Must not be omitted or null

Returns

No return value

[Type].registerEnum(name)

Registers a new LEADTOOLS enumeration.

Parameters

name: String containing the fully qualified enumeration name. Must not be omitted or null

flags: true if the members of this enumuration can be OR'ed together, otherwise; false. Treated as false if omitted or null

Returns

No return value

[Type].initializeBase(instance, args)

Initializes the base class of a LEADTOOLS derived class from the constructor.

Parameters

instance: The derived class instance. In almost all cases, this can be set to 'this'. Must not be omitted or null

args: An array containing the arguments to pass to the base class. Can be mitted or null if the base class constructor does not required other arguments.

If you derive a new class from a LEADTOOLS class, then you must call this method in your constructor to initialize the base class.

Returns

No return value

Example

Refer to the sample source code at the end of this document.

[Type].callBaseMethod(instance, name, args)

Calls a function from the base class of a LEADTOOLS derived class

Parameters

instance: The derived class instance. In almost all cases, this can be set to 'this'. Must not be omitted or null

name: String containing the name of the function to call. Must not be omitted or null

args: An array containing the arguments to pass to the base class method. Can be omitted or null if the base class constructor does not have arguments.

Returns

The return value from the base method (if any)

Example

Refer to the sample source code at the end of this document.

[Type].get_baseType()

Gets the base type of this type

Parameters

None

Returns

The base type.

Example

// This will show 'lt.Controls.ImageViewerInteractiveMode' since ImageViewerPanZoomInteractiveMode

// derives from ImageViewerInteractiveMode

alert(lt.Controls.ImageViewerPanZoomInteractiveMode.get_baseType().get_fullName());

[Type].get_fullName()

Returns the full name (namespace.name) of this type

Parameters

None

Returns

The fully qualified name of the type

Example

// This will show 'lt.Controls.ImageViewerPanZoomInteractiveMode'

alert(lt.Controls.ImageViewerPanZoomInteractiveMode.get_fullName());

[Type].get_name()

Returns the name of this type

Parameters

None

Returns

The fully qualified name of the type

Example

// This will show 'ImageViewerPanZoomInteractiveMode'

alert(lt.Controls.ImageViewerPanZoomInteractiveMode.get_name());

[Type].prototype.isInstanceOfType(instance)

Determines if the specified object is an instance of this class or one of its derived classes.

Parameters

Instance: object instance to check.

Returns

True if the specified object is an instance of this class or one of its derived classes, otherwise; false.

Example

var instance = new lt.Controls.ImageViewerPanZoomInteractiveMode();

// This will show true, same type

alert(lt.Controls.ImageViewerPanZoomInteractiveMode.isInstanceOfType(instance));

// This will show true, derived type

alert(lt.Controls.ImageViewerInteractiveMode.isInstanceOfType(instance));

instance = new lt.LeadPointD();

// This will show false

< span>

Example

This example shows how to create a class that derives from ImageViewerInteractiveMode to implement rotation when the user clicks and drags the viewer.

example.html


<!DOCTYPE html>
<html>
<head>
   <title>Rotate Interactive Mode</title>
   <link href="example.css" rel="stylesheet" type="text/css"/>
   <script type="text/javascript" src="Leadtools.js"></script>
   <script type="text/javascript" src="Leadtools.Controls.js"></script>
   <script type="text/javascript" src="example.js"></script>
</head>
<body onload="run()">
   <div id="controlsDiv">
   <div>
         <label for="interactiveModeSelect">Interactive mode:</label>
         <select id="interactiveModeSelect">
           <option>PanZoom</option>
           <option>Rotate</option>
        </select>
         <input id="testButton" type="button" value="Test"/>
      </div>
  </div>
  <div>
      <textarea name="debugTextArea" cols="80" rows="10"></textarea>
     <input type="button" id="debugClearButton" value="Clear" />
  </div>
   <div id="imageViewerDiv"/>
</body>
</html>

example.css


html, body
{
   margin: 0px;
   padding: 0px;
   min-height: 100%;
   height: 100%;
   overflow: hidden;
   overflow: hidden;
   background: white;
   font-family: helvetica;
   font-size: 10pt;
   -ms-touch-action: none;
   -webkit-user-select: none;
   -webkit-text-size-adjust: none;
}
#imageViewerDiv
{
   border: 1px solid #000000;
   background-color: #7F7F7F;
   width: 400px;
   height: 400px;
}

example.js


'use strict';



// Register the namespace
Type.registerNamespace('demo');

// RotateInteractiveModeEventArgs begin
// Data for the custom event
// ctor
demo.RotateInteractiveModeEventArgs = function
demo_RotateInteractiveModeEventArgs(rotateAngle) {
   // Call initializeBase since deriving from a LEADTOOLS type
requires it   demo.RotateInteractiveModeEventArgs.initializeBase(this);
 this._rotateAngle = rotateAngle;
}
demo.RotateInteractiveModeEventArgs.prototype = {
     // function to
return the rotation angle
    get_rotateAngle: function () {
      return this._rotateAngle;
  }
};

// Define the properties
Object.defineProperty(demo.RotateInteractiveModeEventArgs.prototype, 'rotateAngle', {
get:
demo.RotateInteractiveModeEventArgs.prototype.get_rotateAngle, enumerable: true, configurable: true });
//
Register this class
demo.RotateInteractiveModeEventArgs.registerClass('demo.RotateInteractiveModeEventArgs', lt.LeadEventArgs);
//
RotateInteractiveModeEventArgs end
// RotateInteractiveMode begin
// Class that derives from a LEADTOOLS lt.Controls.ImageViewerInteractiveMode class
demo.RotateInteractiveMode =
function demo_RotateInteractiveMode() {
   demo.RotateInteractiveMode.initializeBase(this);
     // Create the
event
     this._rotate = lt.LeadEvent.create(this,
'rotate');

     // Event handlers
     this._dragStartedHandler = null;
  
this._dragDeltaHandler = null;
   this._dragCompletedHandler = null;
}

demo.RotateInteractiveMode.prototype = {

   // We must provide an implementation for name
   get_name: function () {
   return 'Rotate';
   },




 


     // The event
   get_rotate: function () {
      return this._rotate;
   },

    // Called when the mode is started
    // This is an overridden method
   start: function (viewer) {
       // Call the
base class Start method
      
demo.RotateInteractiveMode.callBaseMethod(this, 'start', [viewer]);



       // Subscribe to the dragStarted, dragDelta and dragCompleted events
       var service = this.interactiveService;
    var _this = this;



  this._dragStartedHandler = service.dragStarted.add(function (sender, e) {
  _this.dragStarted(sender, e);
  });



  this._dragDeltaHandler = service.dragDelta.add(function (sender, e) {
  _this.dragDelta(sender, e);
  });



  this._dragCompletedHandler = service.dragCompleted.add(function (sender, e) {
  _this.dragCompleted(sender, e);
  });
},



// Called when the mode is stopped
stop: function (viewer) {
   // Check if we have started
     if (this.isStarted) {
      // Unsubscribe from the events
          var service = this.interactiveService;
      service.dragStarted.remove(this._dragStartedHandler);
      service.dragDelta.remove(this._dragDeltaHandler);
      service.dragCompleted.remove(this._dragCompletedHandler);



          // Call the base class Stop method
     demo.RotateInteractiveMode.callBaseMethod(this, 'stop', [viewer]);
   }
},


 


// Called when the user starts a drag operation
dragStarted: function (sender, e) {
     // This will check if the mouse button (if
any) is correct and if we are on top of the image
   if (this.canStartWork(e))
{
           // Inform whomever is listening that we have started
working
      this.onWorkStarted(lt.LeadEventArgs.empty);
   }
},

// Called when the user is dragging
dragDelta: function (sender, e) {
     // If we are not working (for example, the
user has clicked the mouse outside the image) then
     // nothing to do
   if (!this.isWorking) {
      return;
   }



     // Perform the operation. Get the change of the drag then increase
     // or decrease the current rotation angle depending on the direction
   var viewer = this.imageViewerControl;
   var change = e.change;// this is a lt.LeadPointD object    
     var delta = 2;
   var oldRotateAngle = viewer.rotateAngle;
   if (change.x > 0) {
   viewer.rotateAngle = viewer.rotateAngle - delta;
   } else if (change.x < 0) {
   viewer.rotateAngle = viewer.rotateAngle + delta;
   }
   if (viewer.rotateAngle != oldRotateAngle) {
      // The rotate angle has changed, fire our event
      this._rotate.invoke(this, new
demo.RotateInteractiveModeEventArgs(viewer.rotateAngle));
   }
},

   // Called when the user stops dragging
 dragCompleted: function (sender, e) {
      // If we are working, signal completion
   if (this.isWorking) {
      this.onWorkCompleted(lt.LeadEventArgs.empty);
   }
  }
};

// Define the properties
Object.defineProperty(demo.RotateInteractiveMode.prototype, 'name', { get: demo.RotateInteractiveMode.prototype.get_name, enumerable:
true, configurable: true });
Object.defineProperty(demo.RotateInteractiveMode.prototype, 'rotate', { get: demo.RotateInteractiveMode.prototype.get_rotate, enumerable:
true, configurable: true });
// Register this class
demo.RotateInteractiveMode.registerClass('demo.RotateInteractiveMode', lt.Controls.ImageViewerInteractiveMode);
// RotateInteractiveMode end
function run() {
   // Create the viewer
 var imageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions('imageViewerDiv',
'myViewer');
 var viewer = new lt.Controls.ImageViewer(imageViewerCreateOptions);
   // Create a new instance of the custom interactive mode
  var rotateInteractiveMode = new demo.RotateInteractiveMode();
   // Subscribe to the custom event
  var rotateEventHandler = rotateInteractiveMode.rotate.add(function (sender, e) {
  console.log('Rotate angle: ' + e.rotateAngle);
  });
   // Set up interactive modes, pan zoom and the custom rotation mode
  var interactiveModes = [
  new lt.Controls.ImageViewerPanZoomInteractiveMode(),
  rotateInteractiveMode
  ];
  var interactiveModeSelect = document.getElementById('interactiveModeSelect');
  interactiveModeSelect.addEventListener('change', function () {
  viewer.defaultInteractiveMode = interactiveModes[interactiveModeSelect.selectedIndex];
     if (demo.RotateInteractiveMode.isInstanceOfType(viewer.defaultInteractiveMode)) {
        alert('rotate');
     } else if
(lt.Controls.ImageViewerPanZoomInteractiveMode.isInstanceOfType(viewer.defaultInteractiveMode)) {
        alert('pan zoom');
      }
   }, false);
   viewer.defaultInteractiveMode = interactiveModes[0];
    // Finally, set an image into the viewer (change this to a valid URL)
  viewer.imageUrl = 'http://example/image.jpg';
}

Libraries

Leadtools	Introduction	Getting Started	JavaScript
Leadtools.Annotations.Automation	Introduction	Getting Started	JavaScript
Leadtools.Annotations.Core	Introduction	Getting Started	JavaScript
Leadtools.Annotations.Documents	Introduction	Getting Started	JavaScript
Leadtools.Annotations.Designers	Introduction	Getting Started	JavaScript
Leadtools.Annotations.Rendering	Introduction	Getting Started	JavaScript
Leadtools.Ccow	Introduction	Getting Started	JavaScript
Leadtools.Controls	Introduction	Getting Started	JavaScript
Leadtools.Controls.Medical	Introduction	Getting Started	JavaScript
Leadtools.Documents	Introduction	Getting Started	JavaScript
Leadtools.Documents.UI	Introduction	Getting Started	JavaScript

Environment

Supported Environments

Reference

Error processing SSI file