Native scroller blues

[brentj84062]

Hello everyone,

I'm finding myself split on using Livecode for iOS and other platforms. There are major advantages, especially when developing relatively simple apps and prototyping. But, I'm hitting a wall with scrollers, specifically when it comes to their performance on devices. It's significantly choppy. I've found a few ways to tweak scrollers to react more fluidly, but it just isn't the same as a native control in Cocoa.

I've found that if you include a "wait 0 seconds with messages" to rapid fire messages (like scrollerDidScroll) it tends to regulate choppy motion to an extent (both in general and with scrollerDidScroll), however it doesn't provide the native responsiveness I'd hope for. This is what it looks like in practice (from the scroller sample stack):

Code: Select all

on scrollerDidScroll pOffsetX, pOffsetY
   -- Set the scroll values of the group based on feedback from the scroller
   -- notice that we can just use the values directly and because out-of-bounds
   -- scrolling is enabled for the group, the bounce effect needs no extra
   -- code.
   lock screen
   set the hScroll of group "Map" to pOffsetX
   set the vScroll of group "Map" to pOffsetY
   wait 0 ticks with messages -- The "timing regulator"
   unlock screen
end scrollerDidScroll

Anyone else find native scrollers a little choppy at times? What do you do to help mitigate the choppiness, or does anyone at RunRev have any feedback?

[Jellicle]

Yes, depending on what you are trying to do, iOS native scrollers can be awful - and especially when using datagrids. In my experience, for simple scrolling fields of text they are as responsive as I've seen on xCoded apps but I've given up trying to use them for lists, preferring to use dynamically generated html files in a browser control, with an iphone .css stylesheet. It isn't perfect (handling tap highlights is awkward, for example) but performance is MUCH better, especially for lists with more than 2-300 items.

[adventuresofgreg]

I'm having the same issues with 'jerky' scrolling fields. I wish there was a way to resolve this issue!

Greg

[Dixie]

Hi Greg...

How long are your lists before they start to get 'jerky' ?

be well

Dixie

[adventuresofgreg]

Hi: My list is a long text field, and it is not smooth right from the start of scrolling. When I say "not smooth", I mean that it is not as seemlessly smooth as a typical Xcode app scroll. The refresh rate seems to be much lower.

[Dixie]

Hi Greg...

I had a little trouble when trying to scroll groups that had images within them... Bernd gave me some good suggestions about how to go about fixing that... but text has been fine. Would you like to post the script for creating your scroller ?

be well

Dixie

[adventuresofgreg]

Hi Greg...

I had a little trouble when trying to scroll groups that had images within them... Bernd gave me some good suggestions about how to go about fixing that... but text has been fine. Would you like to post the script for creating your scroller ?

be well

Dixie

I think this is Bernd's code - I found it in the forum somewhere ?? I works, but it's NOT as smooth as a typical iOS app:

Code: Select all

local sScrollerId

on OpenCard

   
   
   -- Turn on 'out-of-bounds' scrolling for our image group
   set the unboundedHScroll of group "Image Scroller" to false
   set the unboundedVScroll of group "Image Scroller" to true
   
   -- Create the scroller and store its id
   iphoneControlCreate "scroller"
   put the result into sScrollerId
   
   -- The 'rect' is the region of the card it should cover
   iphoneControlSet sScrollerId, "rect", the rect of group "Image Scroller"
   -- The 'contentRect' is the region the scroller scrolls over
   iphoneControlSet sScrollerId, "contentRect", (0, 0, 540, 11900)
   -- The 'visible' determines if the scroller is displayed
   iphoneControlSet sScrollerId, "visible", "true"
   -- The 'canBounce' determines whether the standard iOS 'bouncing' occurs
   -- at extremities of scrolling
   iphoneControlSet sScrollerId, "canBounce", "false"
   -- The 'pagingEnabled' determines whether scrolling only happens in multiples
   -- of the width/height
   iphoneControlSet sScrollerId, "pagingEnabled", "false"
   -- The 'canScrollToTop' determines whether touching the status bar scrolls
   -- the scroller to the top
   iphoneControlSet sScrollerId, "canScrollToTop", "false"
   
   iphoneControlSet sScrollerId, "delayTouches", false
   
   -- Make sure we are the right size for display
   resizeStack
end OpenCard


on closeCard     
   if the environment is not "mobile" then
      exit closeCard
   end if
   iphoneControlDelete sScrollerId
end closeCard

on resizeStack
   if the environment is not "mobile" then
      exit resizeStack
   end if
   
   -- Reset the scroll to 0
   set the hScroll of group "Image Scroller" to 0
   set the vScroll of group "Image Scroller" to 0
   
   -- Layout the card
   set the rect of group "Image Scroller" to the left of this card + 30, the top of this card + 60, the right of this card - 30, the bottom of this card - 130
   --set the topLeft of image "Image 1" to the topLeft of group "Image Scroller"
   --set the topLeft of image "Image 2" to the topRight of image "Image 1"
   --set the topLeft of image "Image 3" to the bottomLeft of image "Image 1"
   --set the topLeft of image "Image 4" to the bottomRight of image "Image 1"
   --set the loc of group "Controls" to item 1 of the loc of this card, the bottom of this card - 18
   
   -- Update the scroller properties
   iphoneControlSet sScrollerId, "rect", the rect of group "Image Scroller"
   iphoneControlSet sScrollerId, "hscroll", 0
   iphoneControlSet sScrollerId, "vscroll", 0
end resizeStack

on scrollerDidScroll pOffsetX, pOffsetY
   -- Set the scroll values of the group based on feedback from the scroller
   -- notice that we can just use the values directly and because out-of-bounds
   -- scrolling is enabled for the group, the bounce effect needs no extra
   -- code.
   lock screen
   set the hScroll of group "Image Scroller" to pOffsetX
   set the vScroll of group "Image Scroller" to pOffsetY
   wait 0 ticks with messages 
   unlock screen
   
   put pOffsetX, pOffsetY into field "Offsets"
end scrollerDidScroll

on doAction pAction
   iphoneControlDo sScrollerId, pAction
end doAction

on doSetProp pProp, pValue
   iphoneControlSet sScrollerId, pProp, pValue
end doSetProp

on errorDialog
   write the params to stderr
end errorDialog

[Jellicle]

Try this (example stack is at http://dl.dropbox.com/u/67170/examples/ ... e.livecode):

Code: Select all

local sScrollerId

on preOpenCard
    
    if the environment is not "mobile" then
        exit preOpenCard
    end if
    
    set the unboundedHScroll of group "Text Scroller" to false
    set the unboundedVScroll of group "Text Scroller" to true
    
    iphoneControlCreate "scroller"
    put the result into sScrollerId
    
    -- general properties
    iphoneControlSet sScrollerId, "visible", "true"
    iphoneControlSet sScrollerId, "canBounce", "true"
    iphoneControlSet sScrollerId, "pagingEnabled", "false"
    iphoneControlSet sScrollerId, "canScrollToTop", "true"
    iphoneControlSet sScrollerId, "indicatorStyle", "black"
    
    
    -- contentRect refers to the rect of the field that appears within the scroll control  
    -- the last 2 values in the rect are the width and height of the field that is being scrolled
    -- the last value can be set programatically or be hard coded (as I have here) to account for more or less 
    --  text in the field.  
    
    iphoneControlSet sScrollerId, "contentRect",  (0, 0, 640, 3400)  

    -- set rect of the scroller area
    -- vary these values to make the scroller control appear just where you want it to
    -- in this case it appears 88 px from the top of the screen, and is positioned up against the other 3 edges of the screen.  
    -- To move the bottom of the scrolling area upwards change the last value
    -- of the following line of code e.g. change "the bottom of this card " to "the bottom of this card -88" or whatever

    iphoneControlSet sScrollerId, "rect", (the left of this card, the top of this card + 88, the right of this card, the bottom of this card ) 
    
end preOpenCard

on closeCard
   if the environment is not "mobile" then
      exit closeCard
   end if
   iphoneControlDelete sScrollerId
end closeCard

on scrollerDidScroll OffsetX, OffsetY
    set the hScroll of group "Text Scroller" to OffsetX
    set the vScroll of group "Text Scroller" to OffsetY
end scrollerDidScroll

-- following stuff added for completeness - does nothing in this example
on doAction whatAction
   iphoneControlDo sScrollerId, whatAction
end doAction

on doSetProp Prop, theValue
   iphoneControlSet sScrollerId, Prop, theValue
end doSetProp

[adventuresofgreg]

Nope - still kind of "scratchy" - like pushing something across very fine sandpaper. I don't think it is good enough to build into an iPhone app because users expect the high resolution scrolling action of a standard Xcode app. Why is it that I can bring up a native pickwheel that acts exactly like an Xcode pickwheel (in fact, I think it is a native iOS pickwheel function), but I can't scroll a group the same native way?

[Jellicle]

Nope - still kind of "scratchy" -

Weird. Works smoothly on my device. And in my app, which testers have found to be very smooth

[adventuresofgreg]

Nope - still kind of "scratchy" -

Weird. Works smoothly on my device. And in my app, which testers have found to be very smooth

Well - that is good news. Perhaps it is due to the large size of my text field? It's 15000 pixels long which is required to fit all of the text I need to display.

[adventuresofgreg]

Nope - still kind of "scratchy" -

Weird. Works smoothly on my device. And in my app, which testers have found to be very smooth

Well - that is good news. Perhaps it is due to the large size of my text field? It's 15000 pixels long which is required to fit all of the text I need to display.

nope. I reduced the size of the text field and the scrolling action is still rough.

[adventuresofgreg]

I found a work-around. And also, this could serve as a comparison test between LiveCode scrolling and native iOS scrolling.

Just stick all of your text into a variable (myvar) and then use this script: "answer myvar with "OK". If your text is longer than a few lines, iOS changes the standard answer dialog to one that is more acceptable for scrolling through large text files. The scrolling action in the native answer dialog is very smooth - much better than the LiveCode script. There are some problems with this solution - one is that your user can't select lines of your text, and you can't insert any graphics into it.

Greg

[brentj84062]

I didn't entirely understand this before, but using a UIWebView is VASTLY better than a UIScrollView, probably because there are no callback messages to be handled. I would bet that it would be faster to create a method to generate HTML and write it to disk, then create the UIWebView and pass the file's URL to the new view. This would be a great way to create table views and other hard to manage views with good performance. It's even possible to make "buttons" or touchable areas by creating links, which can be intercepted in code and turned into relevant function calls.

[Jellicle]

I didn't entirely understand this before, but using a UIWebView is VASTLY better than a UIScrollView, probably because there are no callback messages to be handled. I would bet that it would be faster to create a method to generate HTML and write it to disk, then create the UIWebView and pass the file's URL to the new view. This would be a great way to create table views and other hard to manage views with good performance. It's even possible to make "buttons" or touchable areas by creating links, which can be intercepted in code and turned into relevant function calls.

I'm doing this to handle a 1600+ line list, as well as a couple of much shorter ones, and it works very well . I'm dynamically creating the html and using some iPhone css I found on the internet to mimic the iOS look. Each line is a link, which triggers further actions.