Iphone-like scrolling through controls

[PelleS]

First of all, excuse me if someone else already done this, but I can't find a similar example.

The attached example shows how to implement the "fluid-like" way of scrolling through a list of apps (i.e. controls) just like you see in smart phones. You left-click the mouse to grab onto the list and when you move the mouse the list will follow. As you release the mouse the velocity is calculated and the scrolling attenuates gradually.

I have used a cluster to group the controls to get a cleaner code, but I guess you could scroll the panel just as well, or a listbox or....whatever. The thing you need to do is to dynamically change the objects position. In this example I have only implemented a vertical scroll.

The code is developed without any subvis and without any elaborate design. I have only tried to quickly create an example for you to build from.

So please try to optimize this before you implement it in a real program. The scrolling is eating lots of CPU, that's because mouse move events are triggered all the time. Probably a producer-consumer design pattern would be more efficient.

To get nice icons I have just used the boolean system controls found here: http://decibel.ni.com/content/docs/DOC-9921

/Pelle

[barddya]

دHi,

Does it have to be in version 10? Can you uploade the i ina earlier version say, 9.0. Not all of us have version 10 of Labview

Thanks

[rex1030]

Thank you for posting this. This is very cool. It looks like a great start. Can you provide more information on how to tune it? It seems like faster pulls should last longer and slower pulls not. What is the "velocity factor"? Any ideas on how to make it more efficient? There are some crazy cpu spikes when you use it, like you said. There has to be a way to eliminate this. Do you think you could provide a document describing how it is doing what it is doing? This is very cool, I'd really like to learn as much as I can from it.

[wirebirdlabs]

Consider making the mouse control and animation processes asychronous. This allows you to gain mouse control even as the animation is "settling". Here's a link to a similar application: http://bit.ly/CognoscentUI

[PelleS]

Jack's example is awesome and shows much cooler things than what I've tried to do. What he says is exactly what I also recommend because in my example:

- The mouse triggers events which move the position of the controls in the same loop. So everything is sequential and new mouse moves have to wait for the controls' positions are settled. That means that when you release the mouse button and the animation starts, if you press down the button again it won't respond directly.

- Faster velocities don't last longer. But that is easily fixed by altering the length of the "Attenuating vector"-constant in run-time.

- By the way, the "velocity factor" constant is what determines how many pixels a control should move on each "velocity" unit.

A better way would be to asynchronously from the mouse triggering execute the "animation" process. That can be implemented in Event-driven producer consumer design using queues. In the producer loop you would trigger on mouse moves and create new position elements and in your consumer loop you would execute the requests, i.e. updating your GUI. In that way you could also halt the animation by placing the mouse-down event's new position in the front-end of the queue.

Another benfit would be that Labview would run the loops in different threads, i.e. making use of your multi-core computer.

[PelleS]

Since I will give a seminar next week about version control I just found the motivation to make some changes...

Eventhough it is still not optimal, I think the vi is now using a better design and responds faster to events.

Have fun!