1. #1
    Sencha User
    Join Date
    Mar 2012
    Location
    Monterrey, Mexico
    Posts
    5
    Vote Rating
    0
    aplimovil.net is on a distinguished road

      0  

    Default Unanswered: Carrousel/scrollable slows down CPU and touchmove events

    Unanswered: Carrousel/scrollable slows down CPU and touchmove events


    I'm developing a tablet app with ST2 for taking designer cake orders. Upon reviewing the order, the app asks for the customers signature on the tablet. This is done using a HTML5 canvas and the touchmove event.

    The following happens on an iPad 3 with iOS 6 with the app running as a native PhoneGap wrapped app (thus, Javascript is slower as it runs in UIWebView).

    When testing the draw speed in the canvas in the first screen of the app, drawing is smooth and responsive, with the drawed line following the finger at the same speed. See screenshot:

    fast.png

    However, the canvas isn't supposed to appear in the first screen (I did this manually for testing purposes). The problem comes when the user advances through the app's interface, which are 6 separate views contained in a carrousel (did this because the client required the ability to swipe left/right on the screen to switch between views).

    When the user is at the 6th (last) view within the carrousel, the drawing speed in the canvas is really slow, as drawed lines are linear rather than curved (following the exact path of the finger), and when the finger is moved quickly, a delay of about 0.5-1.0 seconds between the finger position and the line position is noticeable. See screenshot:

    slow.png

    As you can see, drawed lines are linear rather than curved.

    Naturally, I supposed this has something to do with CPU usage, as it seems touchmove events are being slowed down by the main thread being busy with something else.

    To confirm this, I opened up the app in Chrome (desktop), which doesn't has this issue (as Javascript runs through Chrome's V8 engine always), and entered the following code in the console:

    crawl=setInterval(function(){for(i=0;i<100000;i++){var j=i^(i/2);}}, 10);

    This slowed down the draw speed in an almost identical manner as if I was replicating the problem in my iPad.

    So, there must be something going on with the carrousel or with the scrollable panel in the view that's behind the canvas overlay that's keeping the main thread busy enough to not fire the touchmove events quickly enough.

    What are your insights on what could be causing this and how I can get around it?

    Thanks in advance.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    Answers
    3564
    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


    It really depends how much you have rendered. I have had very great success with the Carousel but can depend how much you have in each child item.
    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.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Location
    Monterrey, Mexico
    Posts
    5
    Vote Rating
    0
    aplimovil.net is on a distinguished road

      0  

    Default


    Well, there are 5 items prior to the carrousel item (the last one I uploaded) where the signature is drawn. Here are the screenshots of those carrousel items so you can have a better idea of the contents rendered, which I believe the only ones that affect the performance is the item before and the one after, as the carrousel in ST2 only renders 3 items (before, current, after) at once, right?

    Thank you.

    step1.pngstep2.pngstep3.pngstep4.pngstep5.png

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Location
    Monterrey, Mexico
    Posts
    5
    Vote Rating
    0
    aplimovil.net is on a distinguished road

      0  

    Default


    Hi guys, may some of you have any insights on the above report? Thanks!

Thread Participants: 1