This section describes how to ...

Configure Your System to Run the Demo

Before using an ASP.NET demo, you must edit the demo’s web.config file with the proper path to your binaries and Office Core folder. The settings are:
<appSettings>
<add key="igSolutionName" value="Accusoft" />
<add key="igSolutionKey" value="" />
<add key="igLicenseKey" value="" />
<add key="igComponent" value="~/bin/ImageGear.Web.ImageDataProcessor.dll" />
<add key="igPdfResources" value="[INSTALLATION_DIR]\Bin\[x64/x86]" />
<add key="igOfficeCoreDir" value="[INSTALLATION_DIR]\Bin\[x64/x86]\OfficeCore" />
<add key="igBinaries" value="[INSTALLATION_DIR]\Bin\[x64/x86]" />
<add key="maxThreadsPerControl" value="4" />
<add key="igVerifyDocuments" value="true" />
<add key="igDisableFormats" value="dcraw, dcrawHeaderless" />
<add key="igEqualizeNonSquareResolutions" value="false" />
</appSettings>

The HTML5Viewer demo is provided for building in 64-bit mode.

Since all the dependency modules are 64-bit prebuilt, even though you can rebuild the demo from the project in 32-bit mode, it will not work.
- For building this demo in 32-bit mode, replace the contents of $INSTALLDIR\Samples\Source Code\ASP.NET\HTML5Viewer\Bin directory with the contents of $INSTALLDIR\Bin\x86 before building this demo in 32-bit mode.
- For debugging the demo in 32-bit mode, use the Project Properties > WEB > Bitness field with the value x86. If you use the default value, then the Visual Studio value, "Options/Web Projects/Use the 64 bit version of IIS Express for WEB sites and projects", will be used.

Upon extraction of the ImageGear .NET zip archive, the demo project should be located at

$INSTALLDIR/Samples/Source Code/ASP.NET/CSharp/HTML5Viewer/

where $INSTALLDIR is the root folder to which the archive was extracted.

Launch the HTML5 Viewer Demo in Visual Studio

You can launch the HTML5 Viewer from Visual Studio 2015, Visual Studio 2017, or Visual Studio 2019 solutions installed in the Samples directory:

$INSTALLDIR/Samples/Source Code/CSharp/HTML5Viewer

These are the steps when using Visual Studio 2015.

Open HTML5Viewer.VS2015.x64.sln.
Press F5 or click > Google Chrome* in the toolbar. (* The web browser listed may vary based on system and Visual Studio configuration.)

Navigate the HTML5 Viewer

Open the HTML5 Viewer in your web browser. The demo viewer is divided into the Document Selection, Document Navigation, and Document Viewer sections:

Document Selection

At the top of the page is a thumbnail list of the documents. Click a thumbnail to display the document in the viewer and navigate through it.

By default, these documents exist locally in the host website at "~/Documents". You can change this location in the Web.config file or by using the Web.Config Editor.

The thumbnail images are present locally within the Images subfolder:

$INSTALLDIR/Samples/Source Code/CSharp/HTML5Viewer/Documents

The thumbnail images are created in the thumbnail list in the ‘sample.js’ file found in:

$INSTALLDIR/Samples/Source Code/CSharp/HTML5Viewer/Assets/HTML5Viewer/js

In addition to the default sample files provided in the Documents folder, you can upload custom files.

Click the circled up-arrow at the far-left side of the document thumbnails list.
A dialog displays and allows you to upload a custom file into the viewer demo.

Document Navigation

Below the thumbnail list is a toolbar of buttons to navigate and orient the loaded document.

The above buttons control the current zoom level of the document. The larger the value, the closer the zoom, and thus the larger the document is displayed.

In a multi-page document, these buttons may be used to navigate to the first/last page, previous/next page, or to a specific page number.

This button opens the annotations toolbar, shown below.

The annotations toolbar may be used to add annotations to a document. It is possible to add text annotations, as well as draw lines, polylines, polygons, ellipses, and rectangles.

In the HTML5 Viewer demo, the following functions provide support for annotations:

ViewerControl.setCurrentMouseTool - Allows for choosing an annotation tool.
ViewerControl.getSelectedMarks - Obtains all the currently selected annotations.
ViewerControl.getActiveMarkupLayer - Selects the active markup layer.
ViewerControl.requestMarkupLayerNames - Gets a list of markup layer names from the server.
ViewerControl.deleteAllMarks - Deletes all annotations from the document.
ViewerControl.loadMarkupLayers - Loads the annotations.
ViewerControl.saveMarkupLayer - Saves annotations.

The search button opens the search toolbar, shown below.

The text search toolbar is used to find a string of text in the document being viewed. The arrow buttons can be used to find the previous/next occurrence in the document.

Text Search utilizes event handlers and passes a search term to the ViewerControl.search function. This returns a SearchRequest object containing SearchResults. Use the following functions to perform text search:

ViewerControl.setSelectedSearchResult - Selects a search result and navigates to it.
ViewerControl.clearSearch - Clears the results and prepares for a new search.

This button applies a clockwise rotation to the entire document.

This button applies a clockwise rotation to the currently viewed page.

The implementation of the above buttons can be found in the various JavaScript files found under:

$INSTALLDIR/Samples/Source Code/CSharp/HTML5Viewer/Assets/Viewer/js

Document Viewer

Below the navigation toolbar is the document viewer displaying the loaded document.

If the document consists of only a single page, then it will be displayed in its entirety. However, if the document consists of multiple pages you may scroll to view the other pages.

The viewer is responsive and automatically adjusts the page according to screen size changes and is mobile-friendly.

Work with Annotations

When a document containing annotations compatible with ImageGear ART Marks is loaded, its annotations are extracted in XML format, in the Documents folder, next to the uploaded image. A corresponding layers.json file is created which contains references to each of the ART files. The first markup file is then automatically loaded in the demo.

Additionally, when annotations are added or modified in the viewer using the Annotations button, the annotations will be saved as ART marks in the same method as above.

Once a MakupLayer JSON file exists for an image, the MarkupLayer API can be used to load the file, update it, or remove it.