VintaSoft Imaging .NET SDK v8.8 for Web
In This Topic
    View thumbnails with annotations in web browser with HTML5 support
    In This Topic

    1. JavaScript UI control for viewing thumbnails with annotations in web browser with HTML5 support

    The Vintasoft.Imaging.Annotation.UI.WebAnnotatedThumbnailViewerJS class is a JavaScript control for viewing thumbnails with annotations in any HTML5 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, rendering a thumbnail and deserializing of annotations. As the web service can be used ASP.NET Web API 2 controller (ASP.NET MVC 5), ASP.NET Web API controller (ASP.NET MVC 4), or any other .NET Framework compatible web service.

    The Vintasoft.Imaging.Annotation.UI.WebAnnotatedThumbnailViewerJS class complements the functionality of Vintasoft.Imaging.UI.WebThumbnailViewerJS class and allows to preview image thumbnails with annotations.



    2. Web Document Viewer UI for viewing thumbnails with annotations in web browser with HTML5 support

    The WebUiThumbnailViewerPanelJS class represents a web UI panel that can be used in web document viewer and allows to display a thumbnail viewer. Panel can be shown in side panel or separately.
    Panel will create HTML5 thumbnail viewer if Vintasoft.Imaging.DocumentViewer.js file is used together with Vintasoft.Imaging.Html5.js file and if "annotations" flag is NOT enabled in web document viewer settings.
    Panel will create SVG thumbnail viewer if Vintasoft.Imaging.DocumentViewer.js file is used together with Vintasoft.Imaging.Svg.js file and if "annotations" flag is NOT enabled in web document viewer settings.
    Panel will create HTML5 annotated thumbnail viewer if Vintasoft.Imaging.DocumentViewer.js file is used together with Vintasoft.Imaging.Html5.js and Vintasoft.Imaging.Annotation.Html5.js files and if "annotations" flag is enabled in web document viewer settings.
    Panel will create SVG annotated thumbnail viewer if Vintasoft.Imaging.DocumentViewer.js file is used together with Vintasoft.Imaging.Svg.js and Vintasoft.Imaging.Annotation.Svg.js files and if "annotations" flag is enabled in web document viewer settings.

    The WebThumbnailViewerSettingsDialogJS class represents a JavaScript UI dialog that can be used in web document viewer and allows to view and edit the thumbnail viewer settings.
    The WebThumbnailViewerSettingsJqueryDialogJS class represents a jQuery UI dialog that can be used in web document viewer and allows to view and change the thumbnail viewer settings.

    Here is screenshot of annotated thumbnail viewer panel in web application:



    Here is an example of JavaScript code, which demonstrates how to add the panel with annotated thumbnail viewer into web document viewer:

    // create the default web document viewer settings with annotations support
    var docViewerSettings = new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerSettingsJS("documentViewerContainer", { annotations: true });
    
    // create the document viewer
    var docViewer = new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerJS(docViewerSettings);
    
    // get items of document viewer
    var items = docViewerSettings.get_Items();
    
    // get the main menu of document viewer
    var mainMenu = items.getItemByRegisteredId("mainMenu");
    // if main menu is found
    if (mainMenu != undefined) {
        // get items of main menu
        var mainMenuItems = mainMenu.get_Items();
    
        // add "Annotation" menu panel
        mainMenuItems.addItem("annotationsMenuPanel");
    }