Tree View widget: scrolling on mobile

Interested adding compiled externals from LiveCode and third parties to your LiveCode projects? This is the place to talk about them.

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Post Reply
trevix
Posts: 978
Joined: Sat Feb 24, 2007 11:25 pm
Location: Italy
Contact:

Tree View widget: scrolling on mobile

Post by trevix » Wed Oct 11, 2023 9:02 am

Hello.
My Tree View widget, when unfolded, can be quite high (several pages) and I noticed that the vertical scroll on mobile (iOS and Android) does not perform very well: you can only use a slim side bar and is a little slow.
I was wondering if it will work creating a mobile scroller (that is, putting the widget inside a group and running a MobileControlCreate) and what kind of problems I may run into.
As a matter of fact, I wonder why the widget creator did not implement a finger scrolling from start.
Regards
Trevix
Trevix
OSX 14.3.1 xCode 15 LC 10 DP7 iOS 15> Android 7>

trevix
Posts: 978
Joined: Sat Feb 24, 2007 11:25 pm
Location: Italy
Contact:

Re: Tree View widget: scrolling on mobile

Post by trevix » Fri Apr 26, 2024 12:59 pm

Still struggling with this.
My Widget is populated with around 100 array keys and subkey. On Desktop is fast but on mobile is REALLY slooooow.
Beside that I find very hard to apply a mobile scroller to it, particularly handling the scroll on formattedHeightChanged.
Beside, how do you deal with the group scroll, the mobile scroll and.. the vscroll of the widget!!??
I find it difficult to reconcile these properties.

Anybody has an example to share of a scrolling Tree view widget, where it works fine both on desktop and on mobile?
Thanks
Trevix

This is my code:
on the widget script:

Code: Select all

on formattedHeightChanged
          UpdateScroller 
end formattedHeightChanged
On the group containing the widget:

Code: Select all

local sScrollerId

on openControl
     set the sOldScroll of me  to 0
end openControl

on CloseControl
     StopScroller
end CloseControl

on StartScroller
     put the sOldScroll of me into tOldScroll
     put the formattedHeight of widget "PrefTree" into tFormattedHeight
     put the width of widget "PrefTree" of me into tWidth
     set the height of widget "PrefTree" of me to tFormattedHeight
     set the top of widget "PrefTree" of me to the top of me
     set the vScroll of me to tOldScroll
     if the environment is not "mobile" then
          exit StartScroller
     end if
     set the vScrollBar of me to false
     set the unboundedVScroll of me  to true
     mobileControlCreate "scroller"
     put the result into sScrollerId
     put the rect of me into tRect
     mobileControlSet sScrollerId, "rect", tRect
     mobileControlSet sScrollerId, "contentRect", (0, 0, tWidth, tFormattedHeight)
     mobileControlSet sScrollerId, "visible", "true"
     mobileControlSet sScrollerId, "canBounce", true
     mobileControlSet sScrollerId, "declerationRate", fast
     mobileControlSet sScrollerId, "scrollingEnabled", true
     mobileControlSet sScrollerId, "canScrollToTop", true 
     mobileControlSet sScrollerId, "delayTouches", false
     mobileControlSet sScrollerId, "canCancelTouches", true
     mobileControlSet sScrollerId, "hIndicator", false
     mobileControlSet sScrollerId, "vIndicator", true
     mobileControlSet sScrollerId, "indicatorInsets",  "0,0,15,0"
     mobileControlSet sScrollerId, "hscroll", 0
     mobileControlSet sScrollerId, "vscroll", tOldScroll
end StartScroller

on StopScroller
     --hide the owner of me
     if the environment is "mobile" then
          mobileControlDelete sScrollerId
     end if
end StopScroller

on UpdateScroller 
     breakpoint
     lock screen
     put the sOldScroll of me into tOldScroll
     put the formattedHeight of widget "PrefTree" of me into tFormattedHeight
     set the height of widget "PrefTree" of me to tFormattedHeight
     --set the top of widget "PrefTree" of me to the top of me
     --set the vScroll of me to tOldScroll
     if the environment is not "mobile" then exit UpdateScroller
     put the width of widget "PrefTree" of me into tWidth
     mobileControlSet sScrollerId, "contentRect", (0, 0, tWidth, tFormattedHeight)
     mobileControlSet sScrollerId, "vscroll", tOldScroll
end UpdateScroller

on scrollerDidScroll pOffsetX, pOffsetY
     lock screen
     set the vScroll of me to pOffsetY
     set the sOldScroll of me  to pOffsetY
     mobileControlSet sScrollerId, "vscroll", pOffsetY   
end scrollerDidScroll

on scrollerScrollToTop
     set the vScroll of me to 0
     set the sOldScroll of me  to 0
     mobileControlSet sScrollerId, "vscroll", 0   
end scrollerScrollToTop

--scrolling in desktop mouse wheel
on rawkeydown pKey
     if pKey = 65309 then
          put the vscroll of me into A
          if A <= 0 then exit rawkeydown
          put A - 15 into B
          set the vscroll of me to B
          if the environment is  "mobile" then 
               mobileControlSet sScrollerId, "vscroll", B  
          end if
     else if pKey = 65308 then
          put the vscroll  of me into A
          put A + 15 into B
          set the vscroll of me to B
          if the environment is  "mobile" then 
               mobileControlSet sScrollerId, "vscroll", B  
          end if
     else
          pass rawkeydown
     end if
end rawkeydown
Trevix
OSX 14.3.1 xCode 15 LC 10 DP7 iOS 15> Android 7>

bwmilby
Posts: 455
Joined: Wed Jun 07, 2017 5:37 am
Location: Henrico, VA
Contact:

Re: Tree View widget: scrolling on mobile

Post by bwmilby » Sat Apr 27, 2024 5:55 am

I think I had this pretty much sorted out in SivaSiva. I have not looked at the code in over a year, but the stories module behavior script and the mobile controller behavior script are the two key places. I'll try to provide some more helpful code references this weekend. The key difference is that I did not use a group but used the widget itself to overlay the scroller. This will dramatically improve things on mobile since you are not rendering the whole array but only the visible portion.
Brian Milby

Script Tracker https://github.com/bwmilby/scriptTracker

trevix
Posts: 978
Joined: Sat Feb 24, 2007 11:25 pm
Location: Italy
Contact:

Re: Tree View widget: scrolling on mobile

Post by trevix » Sat Apr 27, 2024 8:42 am

Thanks Brian, I would really appreciate some knowhow.
Can't wait. :D
Beside the scroll problem, can you confirm that the Tree View widget, on folding and unfolding, is quite slow on mobile, by its own nature?
Trevix
OSX 14.3.1 xCode 15 LC 10 DP7 iOS 15> Android 7>

bwmilby
Posts: 455
Joined: Wed Jun 07, 2017 5:37 am
Location: Henrico, VA
Contact:

Re: Tree View widget: scrolling on mobile

Post by bwmilby » Sat Apr 27, 2024 2:46 pm

It wasn’t slow for me, but the tree was much smaller than 100 keys. You can see it in a live app in the App Store if you download SivaSiva and go to the Stories module. Even though that project is in hiatus the code is all available.
Brian Milby

Script Tracker https://github.com/bwmilby/scriptTracker

bwmilby
Posts: 455
Joined: Wed Jun 07, 2017 5:37 am
Location: Henrico, VA
Contact:

Re: Tree View widget: scrolling on mobile

Post by bwmilby » Sat Apr 27, 2024 11:22 pm

Here are the key handlers from that project (trimmed slightly):

Code: Select all

command createScroller pName
   local tRect
   deleteMobileControl pName -- delete any existing
   if not isMobile() then
      exit CreateScroller
   end if
   put (the rect of control pName) into tRect
   mobileControlCreate "scroller", pName
   mobileControlSet pName, "rect", tRect
   put ("0,0," & (the formattedwidth of control pName) & "," & \
         the formattedheight of control pName) into tRect
   mobileControlSet pName, "contentRect", tRect
   wait 10 milliseconds -- Panos workaround, bug #18924
   mobileControlSet pName, "hScroll", 0
   mobileControlSet pName, "vScroll", 0
   mobileControlSet pName, "hIndicator", false
   mobileControlSet pName, "visible",  true
end createScroller

on updateScroller pName
   local tRect
   if not isMobile() then
      exit updateScroller 
   end if
   if pName is among the lines of mobileControls() then -- update
      put ("0,0," & (the formattedwidth of control pName) & "," & \
            the formattedheight of control pName) into tRect
      mobileControlSet pName, "contentRect", tRect
      mobileControlSet pName, "hScroll", 0
      mobileControlSet pName, "vScroll", 0 --the vScroll of control pName
   else
      createScroller pName
   end if
end updateScroller

on scrollerDidScroll hScrolled, vScrolled
   local tControlID
   put mobileControlTarget() into tControlID
   set the vscroll of control tControlID to vScrolled
end scrollerDidScroll
In our use case, the tree didn't need a scroller initially so the first formattedHeightChanged is what would trigger the initial one. We used hiliteChanged to detect the "click" action, but the widget will take care of expand/collapse on its own.

Code from:
https://github.com/Himalayan-Academy/Si ... codescript

Tree used in this module:
https://github.com/Himalayan-Academy/Si ... codescript
Brian Milby

Script Tracker https://github.com/bwmilby/scriptTracker

trevix
Posts: 978
Joined: Sat Feb 24, 2007 11:25 pm
Location: Italy
Contact:

Re: Tree View widget: scrolling on mobile

Post by trevix » Sun Apr 28, 2024 11:26 am

You are right: the performance on your app is quite acceptable: good work.
I did not use a group but used the widget itself to overlay the scroller
Your approach, that I will sure test in my app, sends me in confusion: the widget, when unfolding a line, does not changes its height by itself, to accomodate for the new lines. I have to use the "formattedHeightChanged" message to resize it to its formatted height.
This is why I was using it inside a scrolling group, with the locked size of the widget. The group height is confined in the card height and the widget height can expand at will.

I am not sure how the mobile scroller code, in the widget script of your app, applies to itself, since in any case the widget height must be less then the card height.
I am confused.
If you don't mind, I really would like to see some of you code and your widget properties.
Thanks for any help.
Trevix
OSX 14.3.1 xCode 15 LC 10 DP7 iOS 15> Android 7>

bwmilby
Posts: 455
Joined: Wed Jun 07, 2017 5:37 am
Location: Henrico, VA
Contact:

Re: Tree View widget: scrolling on mobile

Post by bwmilby » Wed May 01, 2024 1:29 am

I started a reply on my phone Sunday morning and lost it when I hit submit. I apologize for the delay in my response.

Here is a much simpler example stack:
https://github.com/bwmilby/mobileDemo/tree/master

The third card is the one with the tree widget. The resizeStack handler is the one that has the call to create the scroller (it is called as part of preOpenStack). The ScrollerBehavior button has all of the scroller code (pretty similar to what was posted above, but it includes the "formattedHeightChanged" handler):
https://github.com/bwmilby/mobileDemo/b ... codescript
(In reviewing the code tonight I realized that there was an error in the scroller code and corrected it. TreeView Widgets don't have a formattedWidth property - that is probably a bug that should be fixed where it just reports the width.)

You are correct, the widget height is smaller than the card but one of the properties that is available is the formattedHeight which will be the height of the data at the current fold state. Detecting changes with that message (as you did) is what triggers updating the scroller. You don't need to resize the widget itself, just change the scroller rect.
Brian Milby

Script Tracker https://github.com/bwmilby/scriptTracker

trevix
Posts: 978
Joined: Sat Feb 24, 2007 11:25 pm
Location: Italy
Contact:

Re: Tree View widget: scrolling on mobile

Post by trevix » Thu May 02, 2024 12:04 pm

Thanks: it was very helpful.
I also found that there is no need to put a RawKeydown to control the mouse scroll on OSX. I guess it is included on the Widget...

By any chance, do you know how to scroll (by script) to the bottom of the widget, no matter what is folded or not?
The formattedheight does change, of course, whend folding and unfolding, but formattedheight/textHeight does not report the correct vScroll.
Trevix
OSX 14.3.1 xCode 15 LC 10 DP7 iOS 15> Android 7>

Post Reply

Return to “Using Externals”