Image Viewer Single Item Mode

Summary

ImageViewer supports any number of items with multiple view layouts. However, some applications simply want to use the viewer with a single image and do not want to deal with setting up the layouts or dealing with the item collection. For these types of applications, ImageViewer offers the single item mode.

As described in Image Viewer Items, if there are items in the viewer, one of them is donated as the active item and from Image Viewer Layouts, the viewer supports the ImageViewerSingleViewLayout that displays a single item at the item - the active item. Therefore it is easy to setup the viewer to display a single item all the time:

JavaScript Example
// Get the div element for the viewer 
var div = document.getElementById("imageViewer"); 
// Create a single view layout 
var layout =  new lt.Controls.ImageViewerSingleViewLayout(); 
// Create the viewer, passing this layout 
var createOptions = new lt.Controls.ImageViewerCreateOptions(div); 
createOptions.viewLayout = layout; 
var imageViewer = new lt.Controls.ImageViewer(createOptions); 
// Add an empty item 
var item = new lt.Controls.ImageViewerItem(); 
imageViewer.items.add(item); 
// Now, ImageViewer.activeItem is item 
             

This is exactly what happens when we pass null for ImageViewerCreateOptions.ViewLayout:

JavaScript Example
var createOptions = new lt.Controls.ImageViewerCreateOptions(div); 
createOptions.viewLayout = null; 
var imageViewer = new lt.Controls.ImageViewer(createOptions); 
             

After the viewer is set up like this, it is easy to forget about the view layout and the items collection and just use the ActiveItem property to view images. Set an image into the viewer:

imageViewer.activeItem.image = myImage;

Or to remove the image:

imageViewer.activeItem.image = null;

To get its transform:

var transform = imageViewer.getItemImageTransform(imageViewer.activeItem);

Or to convert a point from image to control coordinate and back:

JavaScript Example
controlPoint = imageViewer.convertPoint(imageViewer.activeItem, lt.Controls.ImageViewerCoordinateType.image, lt.Controls.ImageViewerCoordinateType.control, imagePoint); 
imagePoint = imageViewer.convertPoint(imageViewer.activeItem, lt.Controls.ImageViewerCoordinateType.control, lt.Controls.ImageViewerCoordinateType.image, controlPoint); 
             

In addition to using the ActiveItem property, the viewer also contains shortcut methods and properties that can be used in single item mode. The following is the same code as above using these shortcuts. Set an image into the viewer:

imageViewer.image = myImage;

Or to remove the image:

imageViewer.image = null;

To get its transform:

var transform = imageViewer.imageTransform;

Or to convert a point from image to control coordinate and back:

JavaScript Example
controlPoint = imageViewer.convertPoint(null, lt.Controls.ImageViewerCoordinateType.image, lt.Controls.ImageViewerCoordinateType.control, imagePoint); 
imagePoint = imageViewer.convertPoint(null, lt.Controls.ImageViewerCoordinateType.control, lt.Controls.ImageViewerCoordinateType.image, controlPoint); 
             

With these properties/methods, you can use the ImageViewer control without touching any of the "view" or "item" property or methods. These shortcuts perform all the necessary check to make sure an active item is added to the viewer. For example, ImageViewer.Image get method is implemented like this:

JavaScript Example
if (this.activeItem != null) // Do we have an active item? 
   return this.activeItem.image; // Yes, return its image 
else 
   return null; // No, return null 
             

And the set method:

JavaScript Example
if (this.activeItem != null) // Do we have an active item? 
   this.activeItem.image = value; // Yes, set its image 
// Else, nothing to do 
             

The following table lists all the single item mode shortcuts and the equivalent internal code:

Shortcut Equivalent
ImageViewer.Image

ImageViewer.ActiveItem.Image

ImageViewer.Canvas

ImageViewer.ActiveItem.Canvas

ImageViewer.ImageSize

ImageViewer.ActiveItem.Size

ImageViewer.ImageResolution

ImageViewer.ActiveItem.Resolution

ImageViewer.ImageUrl

ImageViewer.ActiveItem.Url

ImageViewer.BackImageUrl

ImageViewer.ActiveItem.BackImageUrl

ImageViewer.LoadImageUrlMode

ImageViewer.ActiveItem.LoadUrlMode

ImageViewer.BackImageLoadImageUrlMode

ImageViewer.ActiveItem.BackImageLoadUrlMode

ImageViewer.HasImage

ImageViewer.ActiveItem.Image or ImageViewer.ActiveItem.Canvas is not null

ImageViewer.ImageTransform

ImageViewer.GetItemImageTransform(ImageViewer.ActiveItem)

ImageViewer.GetImageTransformWithDpi

ImageViewer.GetItemImageTransformWithDpi(ImageViewer.ActiveItem, useDpi)

ImageViewer.Floater

ImageViewer.ActiveItem.Floater

ImageViewer.FloaterTransform

ImageViewer.ActiveItem.FloaterTransform

ImageViewer.ImageBounds

ImageViewer.GetItemViewBounds(ImageViewer.ActiveItem, ImageViewerItemPart.View, false)

ImageViewer.ConvertPoint, ImageViewer.ConvertPoints and ImageViewer.ConvertRect

Accept null as the item parameter to donate the active item

In addition to these shortcuts, the following are members used only when ImageViewer is used in single item mode:

Member Description
ImageViewer.AutoResetOptions

Determines which transformation values to reset when a new image is set into the viewer.

ImageViewer.Reset

Reset the transformation values

Help Version 20.0.2018.1.19
Products | Support | Contact Us | Copyright Notices
© 1991-2018 LEAD Technologies, Inc. All Rights Reserved.
LEADTOOLS HTML5 JavaScript