Tree View widget: scrolling on mobile
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
Tree View widget: scrolling on mobile
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
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>
OSX 14.3.1 xCode 15 LC 10 DP7 iOS 15> Android 7>
Re: Tree View widget: scrolling on mobile
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:
On the group containing the widget:
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
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>
OSX 14.3.1 xCode 15 LC 10 DP7 iOS 15> Android 7>
Re: Tree View widget: scrolling on mobile
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.
Re: Tree View widget: scrolling on mobile
Thanks Brian, I would really appreciate some knowhow.
Can't wait.
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?
Can't wait.
![Very Happy :D](./images/smilies/icon_biggrin.gif)
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>
OSX 14.3.1 xCode 15 LC 10 DP7 iOS 15> Android 7>
Re: Tree View widget: scrolling on mobile
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.
Re: Tree View widget: scrolling on mobile
Here are the key handlers from that project (trimmed slightly):
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
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
Code from:
https://github.com/Himalayan-Academy/Si ... codescript
Tree used in this module:
https://github.com/Himalayan-Academy/Si ... codescript
Re: Tree View widget: scrolling on mobile
You are right: the performance on your app is quite acceptable: good work.
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.
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.I did not use a group but used the widget itself to overlay the scroller
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>
OSX 14.3.1 xCode 15 LC 10 DP7 iOS 15> Android 7>
Re: Tree View widget: scrolling on mobile
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.
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.
Re: Tree View widget: scrolling on mobile
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.
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>
OSX 14.3.1 xCode 15 LC 10 DP7 iOS 15> Android 7>