Mobile Scrolling Limitations {Solution}

[endernafi]

Hi folks,

As you know, the general convention on using a scroller in Livecode is :
* group the scrolling objects
* set the rect of group to the viewport
* create a mobile scroller
* adjust its rect and contentRect parameters to the main group's.

But this method has a serious drawback.
Livecode uses int16 in its internal drawing routines and the group object is bound to to this limitation, too.
That means a group cannot be longer than 32767 pixels.
This is a deal-breaker for many kinds of productivity apps.
Consider a news reader, for example, like Circa
or a social app like Twitter, Path, Facebook.

If the Facebook for iPhone was coded via Livecode,
then the user would see only ~100 posts in the News Feed.
iPhone 5 screen can show 3 to 4 posts at a given time, and 32k / 1136px...., well, you got the point.

The solution is obvious, of course, create multiple groups then swap them forth and back, up and down as necessary.
Easier to tell than do, unfortunately

I might have done it, though, please check the attached stack:

infiniteScroll.zip

(3.22 KiB) Downloaded 372 times

It has its own limitations, of course, mainly related to the RAM capacity of the device.
You cannot add gazillion of images, putting a 15GB load to the 512MB Ram of iPad
Actually, you can, maybe...
Loading only the active or close-to-viewport groups' content might help.
But I didn't code that, it's another day's task...

Things to know:

• The stack only works on simulator or on the device;
• Scrolling performance heavily depends on the horsepower of underlying platform,
• The stack creates random-colored graphics at first.
  However, if you put some pics inside the *images* folder -next to the stack-
  then it uses them instead of graphics.

Go wild
Seriously, I hope some of you find it helpful...


Best,

~ Ender

[Peregrine]

I've been working on basically the same solution... I'll post here when I learn how it works for me.

[endernafi]

Charles,

I sure want to see your method, probably it'll be flawless.
Please, share your work.

Thanks,

~ Ender

[trevix]

Very very nice. Thanks Ender.

I am not sure I understood the

Code: Select all

 repeat with z=1 to the number of groups of me
          set the top of group ("g" & z) to min(screenHeight, max((-screenHeight), (-pY + (z-1) * screenHeight)))
          //adjust the above constraints according to the *rect* and *contentRect* of the scroller
     end repeat

and the fact that on the "scrollerDidScroll" command there is not a "set the vscroll of ..."
What is it happening? can you explain it?

I am trying to build an infinite calendar, inside a group, that would look like this:

But I am afraid that the time it takes to update the fields of each day/group would render useless the repositioning trick.
What do you think?
Trevix

[endernafi]

Hi Trevix,

First things first, this is a very old thread thus a very old code.
Back then, I was using Livecode for mobile development and needed a smooth scroller which isn't limited to 32k px dimensions as explained in my original post.
This seemed the solution, since I -naively enough- failed to know that DataGrid has a recycler functionality too; and later I've read many threads that its performance on mobile suffers badly.
So, I rolled my own, or tried to
It served well for time being despite that it's not a perfect, drop-in solution.

Now, about your questions.

I am not sure I understood the

Code: Select all

repeat with z=1 to the number of groups of me
   set the top of group ("g" & z) to min(screenHeight, max((-screenHeight), (-pY + (z-1) * screenHeight)))
   //adjust the above constraints according to the *rect* and *contentRect* of the scroller
end repeat

I assume you're asking about my comment.
For the sample, I created a fullscreen scroller, hence the screenHeight property.
If one wants a smaller-than-screen scroller that covers only a portion of the screen, the repositioning coordinates should be adjusted accordingly.

and the fact that on the "scrollerDidScroll" command there is not a "set the vscroll of ..."
What is it happening? can you explain it?

Well, that's easy.
No vScroll, simply because the group's scroll value doesn't change.
I just move the elements, change the position of rows as in topLeft values
Probably, set the vScroll of ... does the same thing behind the curtains; but I can't be sure, of course.

But I am afraid that the time it takes to update the fields of each day/group would render useless the repositioning trick.
What do you think?

Is that a guess or is it a conclusion / result of some actual tests ?
I'm not trying to be sarcastic here, just didn't understand; seriously
For my use cases, it performed excellently.
It's used in 4 production apps.

But your statement might still be true, I'm not sure.
The sample was meant to be just a proof of concept.
And its sole purpose is, keep in mind, to overcome the 32k px limit.
If your content's height is much smaller, if you don't hit that wall then, well, using this recycler solution might be kinda pointless.

That been said, it still might present some benefits even on smaller groups, by not loading all the content into the ram at once.
But given the fact that it's not a plugin, an easily maintainable drop-in solution like DataGrid, it'll be hard to implement and maintain.


Finally, thanks for your kind words.
Any questions you might have, or ideas to share; I'd be happy to read and answer.


Best,

~ Ender

[trevix]

I modified your stack in order to:
- Limit the scroll to inside a group (the "calendar" group). More useful to me
- have a default group, "TempGroup", to copy in each reiteration, instead of creating each group ex novo.

It works fine BUT only if you remove the field from inside the "TempGroup".
May be you areable to explain me this. That is, why a field inside each group stops the scrolling.

Thanks
Trevix

[endernafi]

I modified your stack in order to:
- Limit the scroll to inside a group (the "calendar" group).

That's exactly what I meant by adjust things.

I modified your stack in order to:
- have a default group, "TempGroup", to copy in each reiteration, instead of creating each group ex novo.

Excellent solution, this way you can have even different types of templates and use them mixed in the scroller.
Like a social news feed: a template for video content, another for photo yet another for text-based posts.

It works fine BUT only if you remove the field from inside the "TempGroup".
May be you areable to explain me this. That is, why a field inside each group stops the scrolling.

The problem is, you can't embed multiple mobile controls as you can do in native platforms ( Xcode&ObjC in iOS, And. Studio in Android ).
They can't even overlap.
In case of overlap the top-most one catches the events.
Embed is not possible at all, I mean a native scroller can't be child of another native scroller.

There's only one workaround I can think of.
Create a delegate scroller.
That is, you have to calculate the scroll position and decide whether to scroll the main group or the field itself.
If the row with the field is on the screen and under the touch location, then scroll the field.
If user touches outside of the field then scroll the group.
Easier said than done, unfortunately.

I can't replicate the issue, because my Livecode version is still 7 and it doesn't work with the latest Xcode.
If I get the time to download an older version of Xcode and a newer version of Livecode, I'll look into it and try to come up with an implementation to address this.
But I can't promise, I'm quite busy these days, sorry for that.


Best,

~ Ender

[trevix]

I use LC 8.1.2 and xCode 8.2.1 with OS X 10.11.6 and everything works. I tested the stack on the simulator.

[endernafi]

Ok, I've checked again and Livecode doesn't complain about the Xcode version rather missing simulators.
See, I keep only the most recent one.
I started to download the iOS 9.2 simulator, just now.
Once it finishes, I'll give it a go.


~ Ender

[trevix]

Solved:
As I thought , it had nothing to do with multiple mobile control. Using "field 1" instead of field "stats" for the stats field was blocking the iOS simulator script.
What is great is your use of the "min max" to set the position of the pages. Genius...

I modified a few things, for my use: now loads 2000 days (!) in less then 3 seconds and the scroll is great.

Thank you so much.

Now i have to decline it for desktop app and put some useful scroll buttons or bar (touch scrolling 2000 items takes forever...)
Regards
Trevix

[endernafi]

Solved:
As I thought , it had nothing to do with multiple mobile control. Using "field 1" instead of field "stats" for the stats field was blocking the iOS simulator script.

Finally, I could download Xcode 7 and find a chance to have a look at your code.
It seems that I'm 'little bit late, you already solved the problem.
It looks and works great, btw, congrats.

What is great is your use of the "min max" to set the position of the pages. Genius...
I modified a few things, for my use: now loads 2000 days (!) in less then 3 seconds and the scroll is great.

That min/max thing is way faster and more reliable than checking the boundaries by an if-clause as

Code: Select all

if tLeft < tLeftBoundary then
...

else if tRight > tRightBoundary then
...

I don't know why, maybe it has something to do with the internal calculations of Livecode.

Now i have to decline it for desktop app and put some useful scroll buttons or bar (touch scrolling 2000 items takes forever...)

For desktop, as you know, there's no native scroller.
You'll have to read the rawKeyDown for mouse scroll events, from 65308 to 65311.
Not pretty, but that's the way.

And the scrollbar, again, you'll have to create it by hand.
Read the percentage and apply to the group as a scroll value.
You can't use a Livecode scrollable group with a simulated height, because you'll hit the 32k pixel wall.
It should be fairly trivial, though, having a vertical scrollbar and read its percentage value.


I'm glad that you found it useful Trevix and would love to help if you happen to have any questions.


Best,

~ Ender