Want suggestion for FitWidth feature in mobile viewer

[Sweta Sonegra]

HI,

 

We are using WebViewer for Hmtl5mobile we want to support FitWidth in mobile landscape mode.

 

Currently we tried to incorporate the support (taking HTML5 reader as reference) but its breaking in CoreControl.js it is minified and not able to understand what exactly need to be fixed.

 

Please suggest

 

 

 

[Matt Parizeau]

Hi,

Take a look at this post that describes how to implement fit width for the mobile viewer: https://groups.google.com/forum/#!topic/pdfnet-webviewer/nr7iX_UA6ek

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Sweta Sonegra]

Thanks Matt it worked.

I had following question:

1. Why PDFTron is not supporting FitWidth and Continous page layout for mobile? Cause FitWidth is useful in landscape mode of mobile.
2. Can I specify the zoom location cause I want to display in FitWidth and user should see the top of the page after fitwidth?
3. I don't want that user have to bring the page to normal size for going to next page. So if Continous page layout can work in FitWidth then it will be great.

Best Regards,
Sweta

[Matt Parizeau]

Hi Sweta,

1. These are both good ideas and we're considering adding them for a future WebViewer release (no timeline right now).  It is possible for you to implement as mentioned in another post but it would take some work.

2. For this I slightly modified the code in onDoubleTap as it does something similar.  You could add functions to ReaderControl like the following.  Calling zoomToFitWidth(0, 0) should place it at the top.

getFitWidth: function() {
    var me = this;
    var currentZoom = me.docViewer.GetPageZoom(me.currentPageIndex);
    var totalPageWidth = 0;

    me.forEachPageInWrapper(me.currentPageIndex, function(i) {
        var page = me.doc.GetPageInfo(i);

        totalPageWidth += page.width * currentZoom;
    });

    var zoomChange = exports.innerWidth / totalPageWidth;
    return zoomChange * currentZoom;
}

zoomToFitWidth: function(x, y) {
    var currentZoom = this.docViewer.GetPageZoom(this.currentPageIndex);
    var newPageZoom = this.getFitWidth();
   
    var offset = this.c.$e.offset();
    var width = this.c.$e.width();
    var height = this.c.$e.height();
   
    var locX = (x - offset.left) - width / 2;
    var locY = (y - offset.top) - height / 2;

    var scaledLocX = locX * (newPageZoom / currentZoom);
    var scaledLocY = locY * (newPageZoom / currentZoom);

    var offsetX = locX - scaledLocX;
    var offsetY = locY - scaledLocY;
   
    this.c.tX += offsetX;
    this.c.tY += offsetY;
   
    this.setZoomLevel(newPageZoom, false);
}

3. You could modify MobileReaderControl.js so that this isn't required.  Look for the onSwipe function and in the first if statement remove me.isZoomedIn() and me.recentlyZoomed from the if check.  This isn't going to be exactly what you want with a continuous layout as the zoom level will jump back to fit page after swiping, but may be an improvement for you.  Swipes can be a bit sensitive so consider taking a look at tweaking jQuery Mobile's swipe options if you decide to use it.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Matt Parizeau]

Here is an improved generic scrollTo function that can be used in combination with zooming to fit width:

scrollTo: function(x, y) {
    var leftPageIndex = this.adjustedPageIndex(this.currentPageIndex);
    var currentZoom = this.docViewer.GetPageZoom(leftPageIndex);
    var pageOffset = this.displayMode.GetPageOffset(leftPageIndex);

    var prevWidth = parseFloat(this.c.$e[0].style.width);
    var prevHeight = parseFloat(this.c.$e[0].style.height);
    var widthChange = (this.newScale * prevWidth / 2) - (prevWidth / 2);
    var heightChange = (this.newScale * prevHeight / 2) - (prevHeight / 2);

    this.c.tX = -(x * currentZoom) - pageOffset.x + widthChange;
    this.c.tY = -(y * currentZoom) - pageOffset.y + heightChange;
   
    this.setZoomLevel(currentZoom, true);
}