PDA

View Full Version : zoom a PDF in a Panel on an Ipad



torsten.t
19 Oct 2010, 7:38 AM
Scrolling of a PDF in a Panel is partly working, but i can not zoom.
I basically copied the code from evant.


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){

pan2 = new Ext.Panel({
fullscreen: true,
scroll: 'vertical',
html: '<iframe width="99%" height="10000px" type="application/pdf" scrolling="yes" src="http://www.test.de/test.pdf"></iframe>',
listeners: {
resize: function(c, w, h){
c.body.child('iframe').setSize(w, h);
}
}
});
pan2.show();
pan2.doLayout();
}
});

The vertical scrolling is working for two and a half pages, but I can not zoom.
Does anybody have an idea how to work with PDFs in a Panel (zooming and scrolling) on an Ipad/Iphone?
I would like to keep my Panel as I need a Backbutton in my Toolbar.
Thanks Torsten

jay@moduscreate.com
19 Oct 2010, 8:07 AM
Ext JS was not meant for iPad development.

That said, this is most likely an ipad issue versus Ext JS.

torsten.t
19 Oct 2010, 11:08 PM
Thanks for your reply JGarcia.
I know I could say leave it to the user and their browser. But on the Iphone / Ipad the experience of the "normal" apps is different. The user just touches around in _one_ window.
I thought of helping the user by using a Panel and show the PDF inside and giving him a back button.

If somebody could enlighten me and says its impossible to zoom / scroll a PDF on Iphone / Ipad I will stop searching around :-)
Torsten

Animal
19 Oct 2010, 11:19 PM
pan2 = new Ext.Panel({
fullscreen: true,
scroll: 'both',
html: '<img src="http://www.test.de/test.pdf">',
listeners: {
// listeners to handle pinch/scaling.
}
});

dead_end
28 Oct 2010, 11:06 PM
Nice idea using good old IMG for PDF linkage. Downside: it only renders first page of a given PDF.
I've tried both code samples with different PDF samples: Though the code does show scrollbars it does not perform a real scrolling of PDF. When I scroll the document the rest of PDF is not rendered visible. I've tried this with EMBED, IMG and IFRAME. Does this work for you?

Sesshomurai
1 Nov 2010, 4:58 AM
At the moment, to do what you want will require some kind of JS to native PDF viewer API. I'm not aware of any.

The approach I am taking instead is to convert my PDF's to SVG and use an SVGPan.js panning/zooming library I found.
Then use Animal's handler callbacks to call the svg pan/zoom javascript. I haven't tested it on ipad yet though. Need to get one first.

Animal
1 Nov 2010, 6:26 AM
At the moment, to do what you want will require some kind of JS to native PDF viewer API. I'm not aware of any.

The approach I am taking instead is to convert my PDF's to SVG and use an SVGPan.js panning/zooming library I found.
Then use Animal's handler callbacks to call the svg pan/zoom javascript. I haven't tested it on ipad yet though. Need to get one first.

Have you got any details on that? I might have to do that with the app I'm working on.

Sesshomurai
2 Nov 2010, 3:27 AM
I use a linux command pdf2svg. I haven't tried it on ipad yet, which I believe has optimized SVG support built into the firmware.

Then I found a library called SVGPan.js which uses the mouse to pan and zoom the SVG. Works fine. From there I was going to map the touch gesture callbacks to those. There are a few SVG javascript libraries out there. I can post my code once its semi-useful.

Animal
2 Nov 2010, 3:51 AM
Sencha Touch should pan the SVG element for you. That's what the Scroller object on a scroll:'both' Panel does. It "pans" the contained element.

Sesshomurai
3 Nov 2010, 6:08 AM
I'm not sure if that's the same. The SVG libraries may pan/zoom relative to the browsers SVG rendering canvas, not the DOM. I know for zoom its entirely based on the SVG rendering plugin, so I assume the pan is as well. Not 100% sure though.