1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    6
    Answers
    1
    Vote Rating
    0
    redgeoff is on a distinguished road

      0  

    Default Answered: Using Native Browser Zooming in an Android/iOS Sencha App

    Answered: Using Native Browser Zooming in an Android/iOS Sencha App


    Without Sencha (just PhoneGap) I’m able to use the viewport meta tag to create a graphics page with about 2,000 vector graphics that can be panned and zoomed and it is all beautifully handled by the underlying WebKit browser. Whenever I try to incorporate this idea into a Sencha app and use the Sencha native packager, Sencha disables the viewport scaling.

    I’ve tried many things such as using JavaScript to modify the viewport and embedding the graphics page in an iframe and nothing seems to be working. I have even tried implementing the zooming and panning from scratch by processing the zoom and drag events and using a canvas and translation to clip the graphics, but this too slow in the mobile app (the speed is fine in the desktop version). I hope a Sencha Guru out there can help me find a solution—it would be a shame to have to abandon Sencha just because I cannot get this one aspect to work properly.

  2. Well it looks like even the gurus at Sencha can't solve this one. Oh well, JQuery Mobile to the rescue...

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,994
    Answers
    3487
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Since Sencha Touch uses it's own scroller and such you will need to handle the pinch and other touch events to get the same affect.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    6
    Answers
    1
    Vote Rating
    0
    redgeoff is on a distinguished road

      0  

    Default


    Thank you for the response, but the problem isn't really capturing the events, which isn't hard to do with Sencha. Instead, the issue is with how to actually make the graphics page zoom in and out in a responsive way, while still using the Sencha framework. I've tried:
    1. CSS scaling in JavaScript using the webkitTransform property
    2. Scaling using the canvas.scale() function
    3. Recalculating the vertices of all the vectors, scaling them manually and then redrawing
    All of these options are very responsive in a desktop browser, but none of them are quick enough on my native mobile device and I have a Samsung Galaxy S2, with a dual core, which should have more than enough power to do this quickly. On my phone, it takes about 1 second to scale using the methods above and unfortunately, this is too slow. (Please recall that I have about 3,000 vector graphics on my page, which means that the zooming must be very efficient). I consider this an issue with Sencha as without Sencha the browser's native scaling of the viewport works amazingly well. Surely there must be a way to utilize the browser's native viewport scaling within the Sencha framework, right?

    I know I can do this with JQuery Mobile by "redirecting" my app to an "external" page and then utilizing the browser's native viewport scaling, but Sencha's UI is so much nicer so I'd love to stick with Sencha. Can you help me?

  5. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    6
    Answers
    1
    Vote Rating
    0
    redgeoff is on a distinguished road

      0  

    Default


    Well it looks like even the gurus at Sencha can't solve this one. Oh well, JQuery Mobile to the rescue...

  6. #5
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    393
    Answers
    14
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default Hav u tried...?

    Hav u tried...?


    Maybe I am misunderstanding, but have you tried the pinch zoom carousel for sencha touch 2 that handles zooming?? I guess with the amount of graphics you are trying to display this will probably not work, but might be worth a look...

  7. #6
    Sencha User
    Join Date
    Jul 2012
    Posts
    6
    Answers
    1
    Vote Rating
    0
    redgeoff is on a distinguished road

      0  

    Default


    Thanks for the suggestion. I'm assuming that you're referring to this carousel?

    http://docs.sencha.com/touch/2-0/#!/api/Ext.carousel.Carousel

    If so, I'm not sure I understand how this carousel has built in support for scaling the graphics page. Can you clarify?

  8. #7
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    393
    Answers
    14
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default No this one...

    No this one...


    No that's the built-in one. I just successfully implemented this one in my tabpanel based app, and it is a carousel that zooms image content:

    http://www.sencha.com/forum/showthread.php?197903-Pinch-Image-with-carousel-and-working-fine&highlight=pinch+zoom

    I changed the name to my namespace of this part:

    Code:
    Ext.define('WPMobile.Viewport', {
                            extend: 'Ext.Carousel',
                            xtype: 'my-viewport',
                            config: {
                                fullscreen: true,
                                layout: 'fit',
                                items: [
    to 'MyApp.view.Zoomcarousel', changed the xtype to 'zoomcarousel' and named the file zoomcarousel.js and put it in my views folder

    I then added just below:
    Code:
    Ext.define('MyApp.view.Zoomcarousel', {
    requires: ['MyApp.view.Imagezoomer']

    and renamed the second part :

    Code:
    Ext.define('Arkivus.ImageViewer',{        
        extend: 'Ext.Container',
        config: {
    From 'Arkivus.ImageViewer' to 'MyApp.view.Imagezoomer' and saved the file as Imagezoomer.js in my views folder.

    Then in my tabpanel app, which requires an xtype to display each tab, I put 'zoomcarousel'.

    It works great, and seems to be just like the native safari zoomer with pinch to zoom an image. There is a Sencha Fiddle here if you want to test on a device:

    http://www.senchafiddle.com/#opdT7

    :-)

  9. #8
    Sencha User
    Join Date
    Jul 2012
    Posts
    6
    Answers
    1
    Vote Rating
    0
    redgeoff is on a distinguished road

      0  

    Default


    Your widget looks pretty cool, but unfortunately I don't think it would work for me. I quickly browsed your code and it appears that your widget uses the webkitTransform to set the scaling:

    Code:
    me.imgEl.dom.style.webkitTransform = 
       'matrix('+fixedScale+',0,0,'+fixedScale+','+fixedX+','+fixedY+')'
    }
    In my testing, I found that scaling a graphics page with 3,000 vectors using the webkitTransform took about a second on my dual-core phone, which is too slow.

    Thanks for trying to help!

  10. #9
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    393
    Answers
    14
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default I thought so...

    I thought so...


    I thought it would be too much, with so many vectors. Oh and it's not my widget, it was posted by someone else on that thread :-)

    Here's a crazy idea, I have recently been working on Leaflet maps implementation in my app. I believe some mapping plugins have the ability to have an SVG graphics layer. These all work very nice on Android and iOS. I wonder if you would be able to use an SVG tile layer with your graphics? Not sure if this would work but it might...

    http://geojason.info/leaflet-vector-layers/
    http://api.geoext.org/1.1/examples/vector-legend.html
    http://geojason.info/google-vector-layers/

    The leaflet URL points to a folder that has all the tiles in different folders, with different zoom layers e.g. 1-16.

    :-)

  11. #10
    Sencha User
    Join Date
    Jul 2012
    Posts
    6
    Answers
    1
    Vote Rating
    0
    redgeoff is on a distinguished road

      0  

    Default


    This is another great suggestion and if it weren't for the fact that the browser's native scaling was so perfect already, I would probably choose to use a tiling method like this with Sencha. In fact, our current desktop website uses a tiling method, but this results in a delay when you update the vectors as they need to render into tiles.

    JQuery Mobile with native browser scaling is now my clear choice.