Customizing HTML5 Viewing Modes

[Matt Parizeau]

Q:

We're looking to customize the HTML5 viewer to display the pages in a different way than the default display modes.  How can that be done?

A:

There are a few different options:

1) Creating a custom display mode with ReaderControl

This would involve something similar to what MobileReaderControl does.  You can look at MobileReaderControl.js, in the initViewer function it creates a custom display mode and then overrides several viewing functions.  This can be a bit tricky to get right so we're looking to add a sample showing how to do this in the future.

2) Creating a custom UI layout with DocumentViewer

This is what the flipbook sample is doing and you can find the code in flipbook.js.  Basically DocumentViewer renders the pages that are passed to it in the UpdateView function and then looks for elements with ids of pageContainer0, pageContainer1, etc and places the finished canvases in there.  This allows you to place the page containers wherever you want and also gives you the cancelling and caching functionality of DocumentViewer.

3) Creating a custom UI layout with Document.LoadCanvasAsync

This is what the deck.js sample is doing and you can find the code in samples/deckjs/viewer.js.  You'll need to create a Document object which will then call LoadCanvasAsync which eventually returns the page in canvas form.  With this approach you would need to implement your own caching or page cancelling if you want those features but it also means you have more fine grained control.