Tutorial: Getting Started with Web Document Viewer

Getting Started with Web Document Viewer

 The WebDocumentViewer(aka WDV) and WebDocumentThumbnailer(aka WDT) are JavaScript based image viewing controls that could be easily created by adding fex snippets of HTML and JavaScript on your web page and a separate bare-bones requests handler on the server side.

sample-image

Backend Overview

Atalasoft HTML5 imaging controls are support following server environments

  • ASP.NET

    Server side functionality is exposed using separate HttpHandler. See ASP.NET demo application tutorial for details.

  • ASP.NET Core on full .net platform

    Server side functionality is exposed using WebDocumentViewerMiddleware that is registered to handle WDV requests. See ASP.NET Core demo application tutorial for details.

Frontend Overview

WebDocumentViewer and WebDocumentThumbnailer requires Jquery and Jquery UI libraries. If annotations support are enabled, Raphael.js library is also required. If text support is enabled, then Raphael.js and ClipboardJS are both required.

Jquery should be included into web page by the application. If some of the other dependent libraries don't exist in the web page scope, controls are trying to automatically load them(using file names from dotImage web resources bundle shipped by installer). When controls are delivered by NuGet or Bower it's required to manually deploy them on the page(since file names could differ for different versions). Automatic dependencies lookup is performed basing on the scripturl url passed to the control constructor or basing on the JQuery lib url, if scripturl is not configured.

Thumbnails.

The WebDocumentThumbnailer class shows thumbnails of pages and annotations, and is used in the same manner as the WebDocumentViewer. It also can create an automatic link between an already defined WebDocumentViewer, so that both the thumbnails and the viewer are as one control.

It's also possible to link multiple thumbnail controls to the single viewer, so the viewer will be able to display multiple documents without need to reload them from the server. WebDocumentThumbnailer also allow to reorder pages within single document or drag them to another thumbnail control from UI.

Save and load annotations

Web Document Viewer support standard dotImage annotations.

When the Web Document Viewer is constructed with the savepath property configured to a relative path on the server, a save button will automatically appear in the upper left corner of the toolbar. When allowannotations is set to true, additional buttons that allow users to draw annotations will also appear in the toolbar.

When you click the Save button, the annotation data for the entire document is sent back to the server, serialized, and then saved in XMP format in the directory specified by the savepath property in the constructor. The file name matches the name of the document open in the Web Document Viewer when the annotations are saved; in the case that Example.tif is opened, annotated, and then saved, the resulting annotation data file is named Example.xmp.

Loading annotations requires a call to a public JavaScript method supported by the viewer, and cannot be done through the toolbar.

jQuery UI styling

The control's toolbar is styled with jQuery UI by default. You can download new themes from https://jqueryui.com/themeroller/ and include them in your web page after the required JavaScript and css includes for the viewer. In order to prevent viewer styling from overriding styling on the rest of your page, some jQuery UI styling is further customized by jQuery UI CSS classes prefixed with atala-. These classes can be overridden to change default styling of the control and toolbar.

Troubleshoot

  • If images don't show up, and you receive an alert that there was an image error, the license file might not have been found by the handler. Try placing the license file in the bin folder of the Web Site.

  • If problems still persist, please contact our Support Team.