Configure Your System to Run the Sample

Upon successful installation on a machine pre-configured for IIS, the sample project should be located at

ImageGear.NET v24/Samples/Source Code/ASP.NET/CSharp/HTML5Viewer/

Launch the HTML5 Viewer Sample

There are multiple ways to launch the viewer. Use the method that suits you best.

Launch via IIS

You can launch the HTML5 Viewer directly from IIS with the following steps:

1. Open Internet Information Services (IIS) Manager.
2. Under Connections, expand the following tree nodes:
   • YOUR-PC-NAME → Sites → Default Web Site
3. Right-click the site, ImageGear24.NET_HTML5Viewer, and select Manage Application → Browse.
4. Your default web browser will open the HTML5 Viewer page.

Launch via ImageGear .NET Samples

Within the ImageGear .NET installation directory, there are two shortcuts which open the HTML5 Viewer page in your default web browser:

• ImageGear.NET v24/Samples/Executables/Web Samples/HTML5 Viewer Sample.lnk
• ImageGear.NET v24/Samples/Source Code/ASP.NET/CSharp/HTML5Viewer/HTML5ViewerSample.url

Launch via Visual Studio

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

ImageGear.NET v24/Samples/Source Code/CSharp/HTML5Viewer

These are the steps when using Visual Studio 2015.

1. Open HTML5Viewer.VS2015.x86.sln.
2. 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 sample 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:

ImageGear.NET v24/Samples/Source Code/CSharp/HTML5Viewer/Documents

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

ImageGear.NET v24/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.

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

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 sample, 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.

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 sample.

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.