SVG thumbnail viewer

In This Topic

The Vintasoft.Imaging.Svg.WebThumbnailViewerJS class is a JavaScript control for viewing thumbnails in any SVG compatible web browser. The class can be created on a client-side of web application. The class requires a web service for getting information about image and rendering a thumbnail. As the web service can be used HTTP handler, WCF service, Web API controller (ASP.NET MVC 4) or Web API 2 controller (ASP.NET MVC 5).

A step-by-step guide how to embed the SVG thumbnail viewer into an ASP.NET WebForms application can be found here:
"How to add web image and thumbnail viewers to a page of ASP.NET WebForms application?"

Vintasoft.Imaging.Svg.WebThumbnailViewerJS can work separately and in this case:

Vintasoft.Imaging.Svg.WebThumbnailViewerJS creates its own image collection
the associated image collection can be accessed via Vintasoft.Imaging.Svg.WebThumbnailViewerJS.get_Images function
the image collection can be navigated via Vintasoft.Imaging.Svg.WebThumbnailViewerJS.get_FocusedIndex and Vintasoft.Imaging.Svg.WebThumbnailViewerJS.set_FocusedIndex functions
image will be added to the image viewer if the image is added to the associated image collection; image will be removed from image viewer if the image is removed from the associated image collection

Vintasoft.Imaging.Svg.WebThumbnailViewerJS can work as a slave viewer of another Vintasoft.Imaging.Svg.WebThumbnailViewerJS or Vintasoft.Imaging.Svg.WebImageViewerJS, and in this case:

the link between viewers can be set via Vintasoft.Imaging.Svg.WebThumbnailViewerJS.set_MasterViewer function of the slave viewer
the slave viewer uses image collection of the master viewer
the shared image collection can be accessed via Vintasoft.Imaging.Svg.WebThumbnailViewerJS.get_Images function of the master or slave viewer
the image collection can be navigated via Vintasoft.Imaging.Svg.WebThumbnailViewerJS.get_FocusedIndex and Vintasoft.Imaging.Svg.WebThumbnailViewerJS.set_FocusedIndex functions of the master or slave viewer
the focused index in master and slave viewers is changed synchronously
image will be added to the image viewer if the image is added to the associated image collection; image will be removed from image viewer if the image is removed from the associated image collection

Here is an example that demonstrates how to add images to SVG image viewer, add link between SVG image viewer and SVG thumbnail viewer:

Javascript

<script type="text/javascript">
    // create images
    var imageSource = new Vintasoft.Shared.WebImageSourceJS("/Images/SourceImage.pdf");
    var image1 = new Vintasoft.Shared.WebImageJS(imageSource, 0);
    var image2 = new Vintasoft.Shared.WebImageJS(imageSource, 1);
    // create an image viewer
    var imageViewer1 = new Vintasoft.Imaging.Svg.WebImageViewerJS("WebImageViewer1");
    // create a thumbnail viewer
    var thumbnailViewer1 = new Vintasoft.Imaging.Svg.WebThumbnailViewerJS("WebThumbnailViewer1");
    // create a link between image viewer and thumbnail viewer
    thumbnailViewer1.set_MasterViewer(imageViewer1);
    // get an image collection of image viewer
    var images = imageViewer1.get_Images();
    // add images to the image collection
    images.addRange([image1, image2]);
</script>

Appearance of thumbnails

Size of thumbnails

Thumbnails have two sizes:

physical size - the size of bitmap associated with thumbnail
visible size - the size of bitmap associated with thumbnail after scaling

The physical size of thumbnails can be set via Vintasoft.Imaging.Svg.WebThumbnailViewerJS.set_ThumbnailSize function. The minimal physical size of thumbnail is 32x32 pixels, the maximal physical size of thumbnail is 1024x1024 pixels.

The visible size of thumbnails can be set via Vintasoft.Imaging.Svg.WebThumbnailViewerJS.set_ThumbnailScale function. The visible size is calculated as multiplication of physical size and scaling factor. Here is a list of scaling factors:

Smallest - the visible size is 0.5 of the physical size
Small - the visible size is 0.75 of the physical size
Normal - the visible size equals the physical size
Large - the visible size is 1.5 of the physical size

Custom appearance of thumbnails

The Vintasoft.Imaging.WebThumbnailAppearanceJS class allows to define a visual appearance of thumbnail:

Vintasoft.Imaging.Svg.WebThumbnailViewerJS.set_NormalThumbnailAppearance - set "normal" style of thumbnail
Vintasoft.Imaging.Svg.WebThumbnailViewerJS.set_FocusedThumbnailAppearance - set "focused" style of thumbnail
Vintasoft.Imaging.Svg.WebThumbnailViewerJS.set_HoveredThumbnailAppearance - set "hovered" style of thumbnail
Vintasoft.Imaging.Svg.WebThumbnailViewerJS.set_NotReadyThumbnailAppearance - set "not ready" style of thumbnail

Each appearance allows to specify back color, background style and border style of thumbnail.

Here is an example that demonstrates how to create thumbnail appearance and set it as "normal" style in an SVG thumbnail viewer:

Javascript

<script type="text/javascript">
    var appearance = new Vintasoft.Imaging.WebThumbnailAppearance("red", "3px solid green");
    thumbnailViewer1.set_NormalThumbnailAppearance(appearance);
</script>

Adding text to thumbnail

The Vintasoft.Imaging.Svg.WebThumbnailViewerJS.get_ThumbnailCanvas function allows to get a canvas, where thumbnail is drawn. Canvas can be used for drawing additional information (for example, text) on a thumbnail.

Here is an example that demonstrates how to add a text with index of thumbnail under the image of thumbnail:

Javascript

<script type="text/javascript">
    // get a thumbnail canvas
    var canvas = thumbnailViewer1.get_ThumbnailCanvas(0);
    // draw a text on the thumbnail canvas
    canvas.text(canvas.width / 2, canvas.height - 10, '# 1').attr({
        "font-family": "Arial",
        "font-size": 14
    });
</script>

Manipulation of thumbnails

Rendering of thumbnails

Vintasoft.Imaging.Svg.WebThumbnailViewerJS renders thumbnails and generates:

Vintasoft.Imaging.Svg.WebThumbnailViewerJS.thumbnailRendered event when thumbnail is rendered
Vintasoft.Imaging.Svg.WebThumbnailViewerJS.imageRenderingException event when thumbnail rendering failed
Vintasoft.Imaging.Svg.WebThumbnailViewerJS.thumbnailPainting event when thumbnail is being painted
Vintasoft.Imaging.Svg.WebThumbnailViewerJS.thumbnailPainted event when thumbnail is painted
Vintasoft.Imaging.Svg.WebThumbnailViewerJS.visibleThumbnailsPainted event when all visible thumbnails are painted

By default are generated all thumbnails. The Vintasoft.Imaging.Svg.WebThumbnailViewerJS.set_GenerateOnlyVisibleThumbnails function allows to specify whether only visible thumbnails must be generated.

Multiselection

Vintasoft.Imaging.Svg.WebThumbnailViewerJS allows to choose several thumbnails at the same time. The indices of selected thumbnails can be received using the Vintasoft.Imaging.Svg.WebThumbnailViewerJS.get_SelectedIndices function. The indices of selected thumbnails can be specified using the Vintasoft.Imaging.Svg.WebThumbnailViewerJS.set_SelectedIndices function.

Rotation of thumbnails

The Vintasoft.Imaging.Svg.WebThumbnailViewerJS.set_ImageRotationAngle function allows to set an orthogonal rotation angle of thumbnail in the thumbnail viewer.

Caching thumbnails on the server

The Vintasoft.Imaging.Svg.WebThumbnailViewerJS.set_UseCache function allows to specify whether caching of the thumbnails in files on server is necessary.

Send Feedback