WEB DOCUMENT VIEWER WHITEPAPER (11.0)

GETTING STARTED WITH WEB VIEWING in 11.0

PLEASE NOTE: this paper covers version 11.0 of our SDK and is made available for archival purposes. For newer versions of this whitepaper, see:

• INFO: WebDocumentViewer Whitepaper - Getting Started With Web Viewing (11.2 Version)
• INFO: WebDocumentViewer Whitepaper - Getting Started With Web Viewing (11.1 Version)

When creating a new application using the WebDocumentViewer, whether you are migrating from our older web control (WebImageViewer / WebAnnotationViewer), or you are starting a new web project from scratch, there are a few steps you will need in order to get the project up and running.

We will use this document to discuss the requirements of using the WebDocumentViewer, and then walk through its creation, step by step.

WDV HISTORY

WebDocumentViewer (and its companion Thumbnail Viewer, WebDocumentThumbnailer) is a modern HTML5 compatible web viewing control. It replaces WebAnnotationViewer (WebImageViewer) and WebDocumentThumbnailer replaces WebThumbnailViewer. These older controls are still supported, but are considered legacy controls with no new features being added.

As Microsoft further deprecates 'classic asp.net web apps', these legacy controls will become more and more difficult to maintain and support. Customers using WAV/WIV and WTV are encouraged to begin migration to WDV with or without WDT.

When creating a new application using the WebDocumentViewer, whether you are migrating from our older web control (WebImageViewer / WebAnnotationViewer), or you are starting a new web project from scratch, there are a few steps you will need in order to get the project up and running.

We will use this KB to discuss the requirements of using the WebDocumentViewer, and then walk through its creation, step by step.

TECHNICAL REQUIREMENTS

Development Tools/Environment

This document and our SDK assume that you're a developer familiar with basic use of Visual Studio, IIS Express or IIS, and general web application development practices using MS Visual Studio 2013 or later. The samples will be using an HTML 5 approach in a non-MVC application targeting .NET framework 4.5.2 in a 64 bit application and using Visual Studio's built in IIS Express web server.

To ensure you're using the x64 version of IISExpress, in Visual Studio, go to Tools -> Options and then in the options menu, navigate to Projects and Solutions -> Web Projects and ensure the "Use the 64 bit version of IIS Express for web sites and projects" option is checked

NOTE: There is no major difference in using our control in MVC vs non-MVC apps - the only practical differences are that MVC likes to put scripts and css in specific locations and uses a slightly different means of interpolating paths in includes. All of this information should be able to be applied in an MVC app - just make sure you put all the markup on a single ASPX view.

ALSO NOTE: This document covers a standard ASP.NET web app, not ASP.NET Core. We do have support for ASP.NET Core targeting .NET framework (not pure .NET Core), but that is beyond the scope of this document (please see FAQ: Support for ASP.NET Core / .NET Core). The fundamental concepts of this document apply whether you are going to use ASP.NET or ASP.NET Core the client-side code is the same - the difference is in the handler (used for ASP.NET) versus the startup middleware (used by ASP.NET Core).

We will be providing examples in C#. Our SDK works with VB.NET as well, but for the sake of simplicity any .NET code will be provided in C#. You can use a converter tool such as Telerik Code converter to convert examples to VB.NET.

.NET Framework

Currently, DotImage 11.0 maintains a minimum .NET Framework requirement of either 3.5 (using or .NET 3.5 DLLs) or 4.5.2 or higher (using our 4.5.2 DLLs). Please note that .NET 3.0 and lower are not supported in 11.0 and newer. Likewise, .NET 4.0, 4.5, and 4.5.1 are not supported in DotImage 11.0 and newer

If you have an existing app you want to add DotImage to that targets an unsupported .NET framework, you will need to update it.

It will be necessary to make sure that your application meets the minimum framework requirements. We have not seen any conflicts with using any higher frameworks, so there should be no restrictions in terms of which .NET framework version you use, so long as it meets those minimums.

The WebDocumentViewer also requires jQuery, jQuery UI and jQuery Easing libraries. Additionally, the Raphael.js library will be required if using annotations.

jQuery and other libraries

WebDocumentViewer (and WebDocumentThumbnailer) also requires jQuery, jQuery UI and jQuery Easing libraries. Additionally,the Raphael.js library will be required if using annotations.

Our SDK ships with the minimum version of all required libraries. On SDK installation, they are placed in:
C:\Program Files (x86)\Atalasoft\DotImage 11.0\bin\WebResources\WebDocViewer\

As of 11.0, these are:

• clipboard.min.js
• jquery-1.11.0.min.js
• jquery-ui-1.10.4.min.js
• jquery.easing.1.3.js
• raphael-min.js
• atalaWebDocumentViewer.js
• atalaWebDocumentViewer.css
• jquery-ui-1.10.4.min.css

SDK Requirements / Versions

A brief set of instructions for downloading our SDK and activating a license will be given, but the rest of the document assumes you've installed the latest DotImage SDK (currently 11.0.0.10 as of September 2018)

We do provide NuGet packages for our components, but this example will assume you've installed and activated our SDK locally. If you wish to use NuGet with our SDK, please check out our NuGet tutorial. (Please note that as of this writing (September 2018) the NuGet tutorial is out of date.. there are outdated script links which will result in a non-working application.. Support recommends using the information in this WDV whitepaper (This current document and not the NuGet tutorial) for the time being.

If you're a licensed developer, or are actively evaluating our SDK and run into problems/questions, you are welcome to contact support. You can make a support case in writing at our support portal. You may also call in to support during our normal business hours Support Hours: M - F from 8AM - 5PM EDT (New York Time)
Call us: 1-781-743-2119

STANDARD TROUBLESHOOTING

Web applications with WebDocumentViewer / WebDocumentThumbnailer have a lot of "moving parts" and troubleshooting can seem a daunting task.

There is a free third party tool that can greatly enhance troubleshooting and assist you in reporting issues to support

If you are having issues with WebDocumentViewer, problems related to the web components are best diagnosed by looking at a log of the network traffic. Most commonly a faulting application will clearly show a 500 internal server error being thrown and the full response body of that error will offer a great deal of insight into the root cause (licensing issues, and errors in the WebDocumentRequestHandler will most often show up in the 500 error response body)

We recommend Fiddler if you need to collect a log and report it to support.

Please download, install, and run Fiddler web logging

Use it to collect a log while you reproduce the issue, then save the log as a native .saz file and and attach it to your support case as a file attachment/ (please do not save as CSV or text log. The native SAZ file gives us much better access to the tools we need to help diagnose your issue)

PLEASE NOTE: you need to capture a session while NOT using SSL/HTTPS. Fiddler logs cannot see into HTTPS without enabling a special certificate which we do not recommend.. if your capture is of an HTTPS session we will not get useful diagnostic information from the log

INSTALLATION AND LICENSING

If you have not done so already, please download the latest version of Atalasoft DotImage SDK

NOTE: The current version is 11.0.0.10 as of the creation of this document (September 2018) updates of the SDK happen with regularity. We work hard not to make breaking changes so this guide should be compatible with future releases. We will update the specific technical details as needed as changes arise

If you have not done so, please log in or create an account with Atalasoft so that you can activate our SDK.

• Download and install the Atalasoft DotImage SDK
• Run the activation wizard
• If you have SDK serials for DotImage and/or WingScan use the "Activate an SDK serial for use on this machine or a server license" option and activate your serials for version 11.0
• If you do not yet have licenses, you can select the "request 30 day evaluation"
• If you run into issues activating or require assistance, please contact support

NOTE for IIS users: The licensing above should be sufficient if you're using the built in web server in Visual Studio (IIS Express.. which this document assumes you are doing) but if you are using a local copy of IIS, then the IIS process does not run as your user name so it will not pick up your licenses. You'll need to take the extra step of copying your licenses into the application bin directory.

Assuming you have an app named SimpleWDVTestApp hosted in IIS under:
c:\inetpub\wwwroot\SimpleWDVTestApp\

Then you'd copy your licenses from:
C:\users\YOUR_USERNAME\AppData\Local\Atalasoft\DotImage 11.0\
to
c:\inetpub\wwwroot\SimpleWDVTestApp\bin\

EXAMPLE 1

BUILDING A MINIMAL WDV APP

We're going to be creating a very minimal WebDocumentViewer (WDV) based application. We will add a WebDocumentThumbnailer (WDT)at a later stage. It's just going to open a document for viewing and allow for annotation and saving using defaults as much as possible.

While this may seem not too useful, it's the fundamental minimum you need to get the WDV running. Don't worry, we will get fancier in a bit. For now, we're going to start with the basics.

The first step will be to open Visual Studio 2013. You can use later versions of Visual Studio, however for the purpose of this project, 2013 is the platform we will be following. From there, you will create a new ASP.Net web application. Lets also target .NET 4.5.2 as our target framework, since it is the minimum version.

• Open Visual Studio 2013
• Create a new project a C# ASP.NET web application targeting .NET framework 4.5.2 (or higher if you wish, but NOT .NET Core)
  
  
  
  
• Name the project/solution SimpleWDVTestApp
• We will be setting it up for EMPTY project
  
  
  
  
• Now, add references to the following Atalasoft components:
  Atalasoft.dotImage.AdvancedDocClean.dll
  Atalasoft.dotImage.dll
  Atalasoft.dotImage.Lib.dll
  Atalasoft.dotImage.Ocr.dll
  Atalasoft.dotImage.Pdf.dll
  Atalasoft.dotImage.PdfDoc.Bridge.dll
  Atalasoft.dotImage.PdfReder.dll
  Atalasoft.dotImage.WebControls.dll
  Atalasoft.PdfDoc.dll
  Atalasoft.Shared.dll
  
  
  
  NOTE:You may be wondering why all the PDF and OCR refs. This has to do with the WebControls.dll having certain dependencies. Do not worry at this time about why, but multiple issues have arisen in cases where customers have missed one or more of these references.
• Make sure you're using the 64 bit .NET 4.5.2 versions from:
  C:\Program Files (x86)\Atalasoft\DotImage 11.0\bin\4.5.2\x64\
• In Solution explorer, add the following two new folders at the root of the project:
  SampleImages
  WebDocViewer
• Copy the contents of:
  C:\Program Files (x86)\Atalasoft\DotImage 11.0\bin\WebResources\WebDocViewer\
  into the WebDocViewer folder
  
  
  
  
• Place a couple of test files we will use to test the viewer into the SampleImages folder. For this sample code, I'll use:
  • DocCleanMultipage.tif
  • GettysburgAddress.tif
  • DCM.pdf
  • Hamlet.pdf
  (download all of these HERE). If you want to use your own start document, you will need to change any text referring to DocCleanMultipage.tif to your file name
• Add a new aspx page (Default.aspx)
  go to Add New item
  WebForm
  name it Default.aspx
  
  
  
  
• Edit the Default.aspx page
  in the <header> section, add the following:
  

      <script src="WebDocViewer/jquery-1.11.0.min.js" type="text/javascript"></script>
      <script src="WebDocViewer/jquery.easing.1.3.js" type="text/javascript"></script>
      <script src="WebDocViewer/jquery-ui-1.10.4.min.js" type="text/javascript"></script>
      <script src="WebDocViewer/raphael-min.js" type="text/javascript"></script>
      <script src="WebDocViewer/clipboard.min.js" type="text/javascript"></script>
      <script src="WebDocViewer/atalaWebDocumentViewer.js" type="text/javascript"></script>
      <link href="WebDocViewer/jquery-ui-1.10.4.min.css" rel="Stylesheet" type="text/css" />
      <link href="WebDocViewer/atalaWebDocumentViewer.css" rel="Stylesheet" type="text/css" />

  
  
  
  
  
• Now, we'll need to set up the server side component. The ASHX handler that will be responsible for the back end server side calls.
• Go to the solution explorer, and right click and add new item of type Generic Handler
  
  
  
  
• Name it WebDocViewerHandler.ashx. (Note that it will actually create two files: WebDocViewerHandler.ashx and WebDocViewerHandler.ashx.cs - this is expected)
• That handler will have some default content. You now need to edit the WebDocViewerHandler.ashx.cs and wipe out its content and replace it all with this:
  

  using System;
  using System.IO;
  using System.Web;
  using Atalasoft.Imaging.WebControls;
  namespace SimpleWDVTestApp
  {
      public class WebDocViewerHandler : WebDocumentRequestHandler
      {
          public WebDocViewerHandler()
          { }
      }
  }

  
  
  
  
  NOTE: This is a really simple handler for now - we will be revisiting this in future sections. For now this is the minimum needed to make this work.
  
  
• Ok, you've got the prerequisites all set. Now we need to give the WDV a "home" on the page... so, down in the empty body ... replace this:
  

      <form id="form1" runat="server">
      <div>
      
      </div>
      </form>

  with this:
  

      <form id="form1" runat="server">
          <div id="_toolbar1"></div>
          <div id="_containerViewer" style="width: 710px; height: 600px;
          display: inline-block;"></div>   
      </form>

  
  
  
• Now, need to actually initialize the component and configure it.
  
  Go back to default.aspx and in the header and just after the call to the scripts we included above, we need to add a manual script block
  

  <script type="text/javascript">
      var _viewer = null;
      var _docUrl = 'SampleImages/DocCleanMultipage.tif';
      // Initialize Web Scanning and Web Viewing... this will run at startup
      $(function () {
          _viewer = new Atalasoft.Controls.WebDocumentViewer({
              parent: $('#_containerViewer'), // parent container to put the viewer in
              toolbarparent: $('#_toolbar1'), // parent container to put the viewer toolbar in
              serverurl: '/WebDocViewerHandler.ashx', // server handler url to send image requests to
              documenturl: _docUrl, // set this to non-empty string to open with an initial document
              allowannotations: true, // flag to enable annotations
              showscrollbars: true,
              forcepagefit: true
          });
      });
  </script>

  
  
  

Alright. If you've followed everything this far, you should have a ready-to-run application. Go ahead and have Visual studio build and run. If everyting worked out right, it should look like this:

Congratulations! you've built the most basic working WebDocumentViewer!

MAKING IT BETTER

OK, so the interface is really minimal and all it does is opens a single document at startup. It has annotations available but no option to save your changes. It also (as currently configured) has no support for PDF (the base SDK support out of the box supports PNG, BMP, TIF, GIF, JPEG, and several others, but not PDF).

That's OK, we can make it better.

So, lets flesh this out.. we will start by showing you how to add support for saving, then we'll show you how to programmatically open an arbitrary file, and then we'll add support for viewing PDF in the viewer.

Add support for Saving

The WebDocumentViewer has "out of the box" saving capabilities, but the save button is hidden in our current app/view. This is because the default saving requires at a minimum that you specify a save folder in the configuration.

• First, we need to have a folder to save to. In Solution Explorer, add new folder to the root of the app and call it "Saved"
• Now, we need to modify the viewer configuration to add a savepath value of 'Saved/' .. so the viewer config will look like this:
  

  _viewer = new Atalasoft.Controls.WebDocumentViewer({
   parent: $('#_containerViewer'), // parent container to put the viewer in
   toolbarparent: $('#_toolbar1'), // parent container to put the viewer toolbar in
   serverurl: '/WebDocViewerHandler.ashx', // server handler url to send image requests to
   documenturl: _docUrl, // set this to non-empty string to open with an initial document
   allowannotations: true, // flag to enable annotations
   savepath: 'Saved/', // relative url to save annotation data to
   showscrollbars: true,
   forcepagefit: true
  })

Thats it for basic saving. If you run your app again, you should now see a save option on the toolbar.. if you add some annotations to the document and then hit save.. it will save a copy to the Saved/ directory with the same name as the original and will save an xmp sidecar file with the annotations.

Look in Saved and you should see a DocCleanMultipage.tif and DocCleanMultipage.xmp file now in the Saved directory

This is the super basic out of the box saving.. We could have just included the savepath in the initial config and it would already have been there, but it's important to let you know that the save button does not show automatically unless that option is set. When we get to advanced functionality, we will revisit saving to do something slightly more useful.. like saving to arbitrary locations or even preparing a save to send to a database or web service.

Open Files Programmatically

This next upgrade, we will add buttons to open some additional files. We already had you copy some test files to SampleImages before. If you haven't done so, add a directory called SampleImages to the root of the project and add the files from SampleImages.zip to that directory.

For this example we are going to make super simple HTML buttons. You can use any valid means of triggering programmatically, using third-party controls etc.. the only key issue is that you must never cause / call a postback. The WebDocumentViewer is essentially a Single Page Application (SPA) pattern and works with asynchronous callbacks. Causing a postback (resubmitting/loading the page) completely starts over from scratch and loses all changes.

We will add a button to open a different document (Gettysburgaddress.tif) as well as one to open the document that we already have present (DocCleanMultipage.tif) so you can see the proper method to implement a programmatic OpenURL. Optionally, we will disable the initial document load so that your viewer loads empty and doesn't have any document until it's loaded.

The signature of the OpenUrl command is:

_viewer.openUrl(DocumentUrl, AnnotationsUrl, CallbackFunction);

DocumentUrl
A string containing the relative path (within the web app) of the document to open.

AnnotationUrl (optional)
A string containing the relative path (Within the web app) of the annotations file to open.

If this is left blank, then no annotations are opened and the current annotations (if any) are preserved. This can cause issues if you open a document with less pages in it than you have of annotations (you had a 3 page doc open with annotations on all pages then you openUrl(NewOnepageDoc);.. this would leave the 3 pages of annotations with the unreachable 2nd and 3rd pages hanging out awkwardly.

If this is set to an empty string ('') then it will tell the control to destroy any existing annotations (so load fresh without any annotations).

CallbackFunction (optional)
A JavaScript function that will be called after the openUrl is completed. This is useful for situations where you need to take some specific action ONLY AFTER the new document loads.. for instance, say you are going to load a 2 page doc and want it to open "to the last page"...

You can not do this:

 _viewer.openUrl('my2pageDoc.tif');
 _viewer.showPage(1); // page indices are zero indexed so 1 is the second page

If you try, it will error because the openUrl does not hold execution.. so _viewer.showPage will call before the document is open and has the page..

Instead, you'd use the callback like this:

 _viewer.openUrl('folderFor/my2pageDoc.tif', null, function() {_viewer.showPage(1);});

Note that the null is required as a placeholder .. you must either provide an annotations url or give it null because the THIRD argument is the callback, not eh second.. if you wanted to open a new document and clear annotations too and then scroll to the second page, the code would be:

 viewer.openUrl('folderFor/my2pageDoc.tif', '', function() {_viewer.showPage(1);});

Now, calling raw JavaScript is not really "a thing" it's usually called as part of some action. Maybe you have a third party grid or tree control or maybe you have some other code entirely.. either way you normally would be binding to some kind of onclick action or other. So for this example we will make HTML buttons.

This is actually a good excuse to talk about postbacks. If you make an HTML button or (even worse) an ASP:Button, and do not take steps to prevent a callback, your button will break the viewer/ make it do undesirable things.

This is because the viewer is following an SPA pattern and uses asynchronous Ajax calls to the back end.. a postback completely destroys all data on the control as it requests a reload.

To avoid callbacks, we must ensure any onclick event is done correctly.. that it returns false (a signal to the browser to NOT do a postback)

So, to put this all together, lets add a button for each test file (modify the HTML form tag to add the buttons right above the viewer divs:

<form id="form1" runat="server">
 <input type="button" id="btn_open_DocCleanMultipage" value="Open DocCleanMultipage" 
     onclick="_viewer.openUrl('SampleImages/DocCleanMultipage.tif', ''); return false;" />
 <input type="button" id="btn_open_GettysburgAddress" value="Open GettysburgAddress" 
     onclick="_viewer.openUrl('SampleImages/GettysburgAddress.tif', ''); return false;" />
 <input type="button" id="btn_open_dcm" value="Open DCM (pdf)" 
     onclick="_viewer.openUrl('SampleImages/DCM.pdf', ''); return false;" />
 <input type="button" id="btn_open_hamlet" value="Open Hamlet (pdf)" 
     onclick="_viewer.openUrl('SampleImages/Hamlet.pdf', ''); return false;" />
 <div id="_toolbar1"></div>
 <div id="_containerViewer" style="width: 710px; height: 600px; display: inline-block;"></div>   
</form>

This will make your Default.axpx look a bit like this:



and when you run it you will have some (admittedly ugly, but functional) buttons at the top of the page..



Well, the first two work but when you try and open the PDFs the viewer will go blank... So that brings us to the final improvement for this app..

Add PDF support

PDF is a very common file format and DotImage has a lot of really awesome PDF related tools and features. However, PDF viewing is not part of the base SDK.. it requires an add-on license for our PdfReader component. It also requires that you explicitly add PDF support to applications you want to be able to view PDFs

You may have noticed in the earlier stages, we added references to several PDF related dlls (Atalasoft.dotImage.Pdf.dll, Atalasoft.dotImage.PdfDoc.Bridge.dll, Atalasoft.dotImage.PdfReader.dll, Atalasoft.PdfDoc.dll). We did so because the WebControls dll requires them as dependencies.. becuase these dlls are integral to support for text searching for PDFs .. an "out of the box" feature of the control we won't be directly covering in this paper.

So, first thing, if you have not added those references please revisit the earlier section on adding references to the dlls we need. This will assume you have either a valid license for our Pdf reader component or you have an active, valid evaluation license that includes the PdfIum license (in 11.0 and newer, your PdfReader addon license will create an Atalasoft.dotImage.PdfIum.lic file as this is our new PDF engine in 11.0 and newer)

Now we need to add support for PDF.. this will be the first actual server-side code we need to modify past the original creation of the WebDocViewerHandler.ashx.

• Open the WebDocViewerHandler.ashx.cs file in your editor
• Up in the using statements, add the following two entries:
  using Atalasoft.Imaging.Codec;
  using Atalasoft.Imaging.Codec.Pdf;
• Inside the public class WebDocViewerHandler : WebDocumentRequestHandler, but NOT inside the public WebDocViewerHandler(), add a new static constructor static WebDocViewerHandler() { }
• Inside that static constructor, add a new PdfDecoder to the RegisteredDecoders.Decoders collection .. like this:
  RegisteredDecoders.Decoders.Add(new PdfDecoder() { Resolution = 200 });

The full updated handler will now look like this:

using System;
using System.IO;
using System.Web;
using Atalasoft.Imaging.Codec;
using Atalasoft.Imaging.Codec.Pdf;
using Atalasoft.Imaging.WebControls;
namespace SimpleWDVTestApp
{
    public class WebDocViewerHandler : WebDocumentRequestHandler
    {
        static WebDocViewerHandler()
        {
            RegisteredDecoders.Decoders.Add(new PdfDecoder() { Resolution = 200 });
        }
        public WebDocViewerHandler()
        { }
    }
}

Believe it or not, that's all it takes.. if you're licensed for PDF reader and have those dlls referenced and have this in your handler and run your app, the PDF open buttons should now work.

EXAMPLE 2

BUILDING A MINIMAL WDV APP WITH THUMBNAIL VIEWER

Up to this point, the whole setup has been bare minimum. This is intentional as we wanted to show you the minimum needed to just get WebDocumentViewer up and running and then add a bit of info for the most common first questions (how do I open other documents?, how do I save?, how do I add PDF support?).

There are MANY more things we could do from here, and in a future WDV whitepaper covering more advanced topics, we'll delve into those a bit more. However, many customers want /need a Thumbnail based viewer for their WDV.. they want a thumbnail control to let users see/scroll a quick high level presentation of their document and use it to trigger viewing of the selected page on the main big viewer.

So, we're going to start from scratch again to show you how to build an app using WebDocumentViewer (WDV) with WebDocumentThumbnailer (WDT). We won't be going quite as slowly (less screenshots) because most of this is review from the previous.. we will be concentrating here on some of the subtle changes needed to get that thumbnail viewer running and connected to the viewer.

Many of the advanced use cases that will be covered in more advanced papers will start from this base WDV with WDT sample app.

• Open Visual Studio 2013
• Create a new project a C# ASP.NET web application targeting .NET framework 4.5.2 (or higher if you wish, but NOT .NET Core)
• Name the project/solution SimpleWDVWDTTestApp
• We will be setting it up for EMPTY project
• Now, add references to the following Atalasoft components:
  
  • Atalasoft.dotImage.AdvancedDocClean.dll
  • Atalasoft.dotImage.dll
  • Atalasoft.dotImage.Lib.dll
  • Atalasoft.dotImage.Ocr.dll
  • Atalasoft.dotImage.Pdf.dll
  • Atalasoft.dotImage.PdfDoc.Bridge.dll
  • Atalasoft.dotImage.PdfReder.dll
  • Atalasoft.dotImage.WebControls.dll
  • Atalasoft.PdfDoc.dll
  • Atalasoft.Shared.dll
• Make sure you're using the 64 bit .NET 4.5.2 versions from:
  C:\Program Files (x86)\Atalasoft\DotImage 11.0\bin\4.5.2\x64\
• In Solution explorer, add the following three new folders at the root of the project:
  • SampleImages
  • Saved
  • WebDocViewer
• Copy the contents of:
  C:\Program Files (x86)\Atalasoft\DotImage 11.0\bin\WebResources\WebDocViewer\
  into the WebDocViewer folder
• Place a couple of test files we will use to test the viewer into the SampleImages folder. For this sample code, I'll use:
  • DocCleanMultipage.tif
  • GettysburgAddress.tif
  • DCM.pdf
  • Hamlet.pdf
  (download all of these HERE). If you want to use your own start document, you will need to change any text referring to DocCleanMultipage.tif to your file name
• Add a new aspx page (Default.aspx)
  go to Add New item
  WebForm
  name it Default.aspx
• Edit the Default.aspx page
  in the <header> section, add the following:
  

      <script src="WebDocViewer/jquery-1.11.0.min.js" type="text/javascript"></script>
      <script src="WebDocViewer/jquery.easing.1.3.js" type="text/javascript"></script>
      <script src="WebDocViewer/jquery-ui-1.10.4.min.js" type="text/javascript"></script>
      <script src="WebDocViewer/raphael-min.js" type="text/javascript"></script>
      <script src="WebDocViewer/clipboard.min.js" type="text/javascript"></script>
      <script src="WebDocViewer/atalaWebDocumentViewer.js" type="text/javascript"></script>
      <link href="WebDocViewer/jquery-ui-1.10.4.min.css" rel="Stylesheet" type="text/css" />
      <link href="WebDocViewer/atalaWebDocumentViewer.css" rel="Stylesheet" type="text/css" />

• Now, we'll need to set up the server side component. The ASHX handler that will be responsible for the back end server side calls.
• Go to the solution explorer, and right click and add new item of type Generic Handler
• Name it WebDocViewerHandler.ashx. (Note that it will actually create two files: WebDocViewerHandler.ashx and WebDocViewerHandler.ashx.cs - this is expected)
• replace all the default code of that handler with this:
  

  using System;
  using System.IO;
  using System.Web;
  using Atalasoft.Imaging.Codec;
  using Atalasoft.Imaging.Codec.Pdf;
  using Atalasoft.Imaging.WebControls;
  namespace SimpleWDVTestApp
  {
      public class WebDocViewerHandler : WebDocumentRequestHandler
      {
          static WebDocViewerHandler()
          {
              RegisteredDecoders.Decoders.Add(new PdfDecoder() { Resolution = 200 });
          }
          public WebDocViewerHandler()
          { }
      }
  }

• Ok, you've got the prerequisites all set. Now we need to give the WDV and WDT a "home" on the page... so, down in the empth body ... replace this:
  

      <form id="form1" runat="server">
      <div>
      
      </div>
      </form>

  with this:
  

      <form id="form1" runat="server">
          <div style="width: 900px;">
              <div id="_toolbar1"></div>
              <div id="_containerThumbs" style="width: 180px; height: 600px; display: inline-block;"></div>
           <div id="_containerViewer" style="width: 710px; height: 600px; display: inline-block;"></div>
          </div>
      </form>

• Now, need to actually initialize the components and configure them. Unlike the previous app, we have two components: WebDocumentViewer AND WebDocumentThumbnailer. The WDT needs to be linked to the viewer, so we must ensure we configure the viewer first.
• Go back to default.aspx and in the header and just after the call to the scripts we included above, we need to add a manual script block
  

  <script type="text/javascript">
          var _viewer = null;
          var _thumbs = null;
          var _docUrl = 'SampleImages/DocCleanMultipage.tif';
          // Initialize Web Viewing... this will run at startup
          $(function () {
           _viewer = new Atalasoft.Controls.WebDocumentViewer({
               parent: $('#_containerViewer'), // parent container to put the viewer in
               toolbarparent: $('#_toolbar1'), // parent container to put the viewer toolbar in
               serverurl: '/WebDocViewerHandler.ashx', // server handler url to send image requests to
               allowannotations: true, // flag to enable annotations
               savepath: 'Saved/', // relative url to save annotation data to
               showscrollbars: true,
               forcepagefit: true
           });
           _thumbs = new Atalasoft.Controls.WebDocumentThumbnailer({
               parent: $('#_containerThumbs'), // parent container to putthe thumbnails in
               serverurl: '/WebDocViewerHandler.ashx', // server handler url to send image requests to
               documenturl: _docUrl, // document url relative to the server handler url
               allowannotations: true, // flag to enable annotations 
               viewer: _viewer, // link actions to the _viewer so they open the same doc
               allowdragdrop: true,
               showscrollbars: true
           });
          });
      </script>

Alright. If you've followed everything this far, you should have a ready-to-run application. Go ahead and have Visual studio build and run. If everyting worked out right, it should look like this:

Congratulations! you've built the most basic working WebDocumentViewer With WebDocumentThumbnailer!

We've taken the liberty of enabling saving AND of enabling drag drop - so try this - go ahead and gran an image from the thumb viewer and drag it to a different position relative to other pages.. say take page 1 and move it below page 2... the thumbnail viewer will update, the main viewer will update, AND if you save.. the saved image will match the order in which you placed them in teh viewer!

MAKING IT BETTER

If you notice, we didn't just drop in the buttons from our previous example. The openUrl works ALMOST the same but there's a key difference we wanted to highlight explicitly.. When using WDV with WDT, you do NOT openUrl on the _viewer (WDV) you must openUrl on the WDT (_thumbs)

You might have even noticed that we slipped something in there already - when we gave you the viewer initialization notice how the updated WDV initialization removed the documenturl and we added it instead to the _thumbs viewer? this was intentional.

So, knowing what you know now, it's really easy - we can add the same buttons from before and just change _viewer to _thumbs ...like this:

<form id="form1" runat="server">
    <input type="button" id="btn_open_DocCleanMultipage" value="Open DocCleanMultipage" 
        onclick="_thumbs.openUrl('SampleImages/DocCleanMultipage.tif', ''); return false;" />
 <input type="button" id="btn_open_GettysburgAddress" value="Open GettysburgAddress" 
     onclick="_thumbs.openUrl('SampleImages/GettysburgAddress.tif', ''); return false;" />
 <input type="button" id="btn_open_dcm" value="Open DCM (pdf)" 
     onclick="_thumbs.openUrl('SampleImages/DCM.pdf', ''); return false;" />
 <input type="button" id="btn_open_hamlet" value="Open Hamlet (pdf)" 
     onclick="_thumbs.openUrl('SampleImages/Hamlet.pdf', ''); return false;" />
    <div style="width: 900px;">
        <div id="_toolbar1"></div>
        <div id="_containerThumbs" style="width: 180px; height: 600px; display: inline-block;"></div>
        <div id="_containerViewer" style="width: 710px; height: 600px; display: inline-block;"></div>
    </div>
</form>

SAMPLE APP DOWNLOADS

It is our hope that you've been following along with the tutorial and have successfully built your solution. However, if you've run into issues or if you want a working reference app, we've implemented both the SimpleWDVTestApp and SimpleWDVWDTTestApp for you to download and run if needed. They also make great test harnesses for any experimental WDV / WDT code you want to try out... letting you start from a known-working application.

• SimpleWDVTestApp
• SimpleWDVWDTTestApp

CONCLUSION

In many respects we have barely even scratched the surface of the WebDocumentViewer and WebDocumentThumbnailer. This paper was meant as a very basic getting started that will serve you well as a step by step guide to just getting the viewer set up and working. Atalasoft support engineers use a very similar base "boilerplate" app that we used as our inspiration for this demo nearly every day .. as a quick test harness / repro base solution to quickly test customer cases/issues and to test out various coding ideas having to do with WDV/ WDT.

In order to keep this document to a manageable size, we will end here for now. There are plans in the works for more advanced tutorials.. all of those will focus on the starting apps we've done here.

If you're looking for a getting started for WingScan .. our Web Scanning SDK, please see INFO: WingScan Whitepaper - Getting Started with Web Scanning

v007 - 2020/01/22 - TD

Original Article:

Q10475 - INFO: WebDocumentViewer Whitepaper - Getting Started With Web Viewing (11.0 Version)