How to show data grid scrollbar ONLY when scrolling? [Solved]

LiveCode is the premier environment for creating multi-platform solutions for all major operating systems - Windows, Mac OS X, Linux, the Web, Server environments and Mobile platforms. Brand new to LiveCode? Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Post Reply
stam
Posts: 2634
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

How to show data grid scrollbar ONLY when scrolling? [Solved]

Post by stam » Sun Aug 22, 2021 12:53 pm

Hi all,

I've been stuck trying to achieve a particular cosmetic issue with data grid scrollbars.

This is to replicate the a layout i have in a FileMaker Pro solution:
In a master-detail layout, the 'master' list is on a dark background; the row is indicated by a white triangle on the right side, which blends into the 'detail' section of the layout. To enhance the effect, the scrollbar of the 'master' list is hidden, transiently appears when scrolling or when hovering at the edge of the list, appears semi-transparent at the edge of the list and then auto-hides when scrolling stops. Here is a screen shot showing the master section without and with the scrollbar in the FileMaker Pro solution:
filemaker pro version.jpg
Unfortunately i've not been able to approximate the scrollbar management even remotely in LiveCode.

I can show/hide the scrollbar by trapping the rawKeyDown message to detect when scrolling the list and then send a message to hide the scrollbar. But a) this introduces palpable delays in scrolling, and more importantly
b) because the scroll is ongoing, i end up in an endless cycle of showing/hiding the scrollbar that can go on for minutes while locking the interface.

I tried to check the pendingMessages for rawKeyDown and only try to hide the scrollbar if there are no rawKeyDown messages pending, but that does nothing.

Here's the code in my data grid that tries to achieve this effect:

Code: Select all

on rawKeyDown pKey
    if pKey = 65308 or pKey = 65309 then -- key codes for scroll down and scroll up respectively
        show scrollbar "dgScrollbar" of group "dates"
    end if
    if "rawKeyDown" is not in the pendingMessages then
        hideScroller
    end if
    pass rawKeyDown
end rawKeyDown


on hideScroller
    lock screen for visual effect in rect the rect of  the scrollbar "dgScrollbar" of  me
    set the visible of scrollbar "dgScrollbar" of me to false
    unlock screen with visual effect "dissolve" very fast 
end hideScroller
I on purpose have not set the dgProp to show/hide scrollbar, as i have graphics that are anchored to the right of the row, and setting the dgProp keeps shifting the contents left when showing the VScrollBar, which is undesirable for this, so i'm showing/hiding the scrollbar directly.


What i'd like to achieve is an effect where the scrollbar is not visible, becomes visible on scrolling and then hides again when not scrolling.
Very grateful for any suggestions!
Last edited by stam on Sun Aug 22, 2021 11:48 pm, edited 7 times in total.

stam
Posts: 2634
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: Minimising or hiding a data grid scrollbar...

Post by stam » Sun Aug 22, 2021 12:56 pm

As a second-best option, how could i go about making the scrollbar invisible except for the 'thumb' of the scrollbar? that would be minimally intrusive on the interface.
This is already present in the IDE, so it must be possible, but can't seem to replicate it at all. This can be seen for example in the properties panel:
properties.jpg
Any suggestions on how to replicate this for a data grid scroller?

stam
Posts: 2634
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: Auto-hiding a data grid scrollbar to show only when scrolling

Post by stam » Sun Aug 22, 2021 2:07 pm

Further to this, i have implemented everything the FileMaker solution did, except for showing the scrollbar only when scrolling

This is what it looks like without/with the scrollbar:
LC version.jpg
Still can't figure out a good way to show the scrollbar of the datagrid only when scrolling and hiding it otherwise, without locking up the system for minutes...

Grateful for suggestions on this,
Stam

stam
Posts: 2634
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: How to show data grid scrollbar ONLY when scrolling?

Post by stam » Sun Aug 22, 2021 3:15 pm

To answer my own question, the code above was largely sound - but the apparent locking up of the IDE was caused by the lock screen for visual effect. Removing those statements has eliminated the non-responsiveness that could last minutes; however i now also lose that nice smooth dissolve.

the final code that seems to work is:

Code: Select all

on rawKeyDown pKey
    if pKey = 65308 or pKey = 65309 then -- key codes for scroll down and scroll up respectively
        if the thumbPosition of scrollbar "dgScrollbar" of me <> the startValue of scrollbar "dgScrollbar" of me and  \
              the thumbPosition of scrollbar "dgScrollbar" of me <> the endValue of scrollbar "dgScrollbar" of me then
            show scrollbar "dgScrollbar" of me
            send "hideScroller" to me in 3 seconds
            pass rawKeyDown
        end if
    end if
end rawKeyDown


on hideScroller
    set the visible of scrollbar "dgScrollbar" of me to false
end hideScroller
what really fixed the issue i was having with a non-responsive interface was changing the hideScroller handler from

Code: Select all

on hideScroller
    lock screen for visual effect in rect the rect of  the scrollbar "dgScrollbar" of  me
    set the visible of scrollbar "dgScrollbar" of me to false
    unlock screen with visual effect "dissolve" very fast 
end hideScroller
to

Code: Select all

on hideScroller
    set the visible of scrollbar "dgScrollbar" of me to false
end hideScroller
This is not expected behaviour (or at least wasn't expecting this!) and I was hoping to keep the dissolve effect for hiding the scrollbar but that seems a no-go. I was able to replicate this issue even with a simple text field - using similar handlers, if i include the lock screen statements it completely locks up my IDE for minutes, but behaves as expected if these statements are removed...

Is this a bug? Or is there a workaround?

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7214
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: How to show data grid scrollbar ONLY when scrolling? [Partially Solved]

Post by jacque » Sun Aug 22, 2021 5:56 pm

I was going to suggest something similar to your working code, but would add a timer and a positional check to hideScroller. This may be pseudo code, because I'm typing on a tablet:

Code: Select all

local sLastPos, sLastTime
on hideScroller
    put the thumbPosition of scrollbar "dgScrollbar" of me into tCurScroll
    if tCurScroll is sLastPos and the seconds - sLastTime > 2 then
        set the visible of scrollbar "dgScrollbar" of me to false
    else 
        put tCurScroll into sLastPos
        put the seconds into sLastTime
        send "hideScroller" to me in 500 milliseconds
    end if 
end hideScroller
Something like that should prevent the scroller from popping in and out on each rawKeyDown.

Then in the rawKeyDown handler, put the values into the two local variables and call hideScroller once to initiate the process. You could see if this method also allows you to use visual effects, since it yields a lot of time to the engine for housekeeping. You'll probably want to adjust the two timing durations.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

stam
Posts: 2634
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: How to show data grid scrollbar ONLY when scrolling? [Partially Solved]

Post by stam » Sun Aug 22, 2021 7:41 pm

jacque wrote:
Sun Aug 22, 2021 5:56 pm
I was going to suggest something similar to your working code, but would add a timer and a positional check to hideScroller.
Brilliant, thanks Jacque! very helpful!
Didn't quite work with that pseudocode, but worked as expected when i defined the script parameters from the rawKeyDown hander (i only later saw that this is what you recommended! But can't see why these should be added in the hideScroller handler as well, so removed them and it works well).
This code now works properly:

Code: Select all

local sPosition, sTime

on rawKeyDown pKey
    if pKey = 65308 or pKey = 65309 then -- key codes for scroll down and scroll up respectively
        show scrollbar "dgScrollbar" of me
        put the thumbPosition of scrollbar "dgScrollbar" of me into sPosition
        put the seconds into sTime
        hideScroller
        pass rawKeyDown
    end if
end rawKeyDown

on hideScroller
    if the thumbPosition of scrollbar "dgScrollbar" of me is sPosition and the seconds - sTime > 1 then -- the action will happen at ∆t + 1 second
        set the visible of scrollbar "dgScrollbar" of me to false
    else
        send "hideScroller" to me in 500 milliseconds
    end if
end hideScroller
My previous code was OK, but with repeated scrolling the time to the scrollbar disappearing wasn't constant (would happen any time between immediately and 3 seconds), but now it is! Brilliant ;)


The other issue i was having was making the scrollbar fade away nicely. The visual effect "dissolve" with speed very fast achieves that effect but locks up my IDE for minutes.

if i change the hideScroller function to include the lines below in the first part of the if statement:

Code: Select all

 lock screen for visual effect in rect the rect of scrollbar "dgScrollbar" of me
 set the visible of scrollbar "dgScrollbar" of me to false
 unlock screen with visual effect "dissolve" very fast
this completely locks up everything in the IDE for minutes. As mentioned i tested this in a simple test stack to show/hide the vScroller of text field and had similar experience.

This seems really weird and unpleasant.
Am i 'doing it wrong'? is it a bug?
Grateful for any suggestions!

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7214
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: How to show data grid scrollbar ONLY when scrolling? [Partially Solved]

Post by jacque » Sun Aug 22, 2021 8:36 pm

But can't see why these should be added in the hideScroller handler as well
I was pretty sure my off-the-cuff handler would need some adjustments. I usually start a messaging loop and update parameters in the handler that acts on the message, so that's what I did. But in this case I now see that every swipe of the wheel will give you another rawKeyDown, so your changes work fine. I'm glad at least the general concept was good.

I'm not sure why your machine would lock up when using visual effects, I haven't seen that. I wonder if there is some kind of internal loop happening, maybe you need to lock messages as well as locking the screen?
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7214
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: How to show data grid scrollbar ONLY when scrolling? [Partially Solved]

Post by jacque » Sun Aug 22, 2021 8:49 pm

A thought: You may be getting a long queue of commands to hide the scrollbar, and it's taking a long time to work through the built-up pending messages. You could try adding this to the rawKeyDown handler:

Code: Select all

if (pKey = 65308 or pKey = 65309) and "hideScroller" is not in the pendingMessages then...
and also maybe here:

Code: Select all

else if "hideScroller" is not in the pendingMessages
        send "hideScroller" to me in 500 milliseconds
end if
If those change still work okay, try adding the visual effects again.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

SparkOut
Posts: 2839
Joined: Sun Sep 23, 2007 4:58 pm

Re: How to show data grid scrollbar ONLY when scrolling? [Partially Solved]

Post by SparkOut » Sun Aug 22, 2021 8:49 pm

What if you only send the hidescroller message if hidescroller is not in the pendingMessages?

Edit, that's what jwack said a few moments ago.

stam
Posts: 2634
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: How to show data grid scrollbar ONLY when scrolling? [Partially Solved]

Post by stam » Sun Aug 22, 2021 11:42 pm

jacque wrote:
Sun Aug 22, 2021 8:49 pm

Code: Select all

if (pKey = 65308 or pKey = 65309) and "hideScroller" is not in the pendingMessages then...

Code: Select all

else if "hideScroller" is not in the pendingMessages
        send "hideScroller" to me in 500 milliseconds
end if
Thanks Jacque and Sparkout - implemented both as it's possible i'll be calling hideScroller from elsewhere, that fixed it. I'm happy now :)

On a semi-related note, any idea how one would go about creating a scrollbar like the one seen in the properties panel
(as mentioned above)?

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7214
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: How to show data grid scrollbar ONLY when scrolling? [Solved]

Post by jacque » Mon Aug 23, 2021 6:54 pm

On a semi-related note, any idea how one would go about creating a scrollbar like the one seen in the properties panel
I think that's the tree-view widget, which displays a scrollbar of its own. I'm not sure how to replicate that with a standard LC scrollbar.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

stam
Posts: 2634
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: How to show data grid scrollbar ONLY when scrolling? [Solved]

Post by stam » Mon Aug 23, 2021 7:39 pm

Ah ok, makes sense…

Anyway I’m good now and am grateful for your help Jacque!

Post Reply

Return to “Getting Started with LiveCode - Experienced Developers”