Ariya Hidayat
Graphics Dojo
S60
Posted by Ariya Hidayat
 in Graphics Dojo, S60
 on Sunday, July 19, 2009 @ 01:50

Remember the Flick Charm [1]? Seems that for many developers, it is simple and easy enough to use and so far the feedback has been positive. On the other hand, one thing that people want to do [2] is to have the flick support for widgets that do not subclass QScrollArea. I wrote this new example exactly for this purpose. It is of course a bit more complicated than Flick Charm (because we do not abuse the event filters), but basically it involves subclassing Flickable (an abstract class) and implementing two functions to set and get the scroll offset. Since Flickable does not inherit QWidget, you also need to forward the interesting mouse events there. And if you still want to receive a click event (useful for e.g. a selection list), there is an option to do so. Now you can kinetically scroll anything!

The code is already landed in the repository (under the flickable subdirectory). There are both the Qt/C++ version and PyQt one (thanks to David for the latter!). The example is a dual-color list which draws almost a thousand items. The code works just fine on Qt for desktop, however just like my last digital clock example, try to grab Qt/S60 and then compile (and launch) this flickable example on your favorite touch-based S60 phones. We spent a great deal of time to ensure that it can scroll fast on real devices. So far it has been tested on both on Nokia 5800 and Nokia N97. Again, thanks to our Video Maestro Alessandro, check the following YouTube video as the proof:

What about bouncing-on-edge feature? Stay tuned, it will be here in a few weeks :)

Footnotes:

[1] On a related note, if you are still using Flick Charm, recently I also managed to fix the scrolling bug there, so make sure you grab the latest version. Also, for those who think the charm does not work on e.g. a list view (because the list would go wild), double check again: did you set the scroll mode to ScrollPerPixel?

[2] And BTW, if you can wait, you have the alternative to use Declarative UI because then you can leverage the pan and flick feature without writing any custom code at all.

12 Responses to “Kinetic scrolling on any widgets”

» Posted by Richard Stellingwerff
 on Sunday, July 19, 2009 @ 11:50

I tried the example app that comes with Flickable, but I don’t seem to be able to scroll in the opposite direction while it is still ‘auto scrolling’. I can only start scrolling again when the auto scroll has completely stopped. Same goes for selecting. That seems slightly counter intuitive to me.

But apart from that, I really like it!

» Posted by ariya
 on Sunday, July 19, 2009 @ 16:56
Ariya Hidayat

@Richard: I can’t reproduce the problem. Please tell us the platform/compiler/version/more info where it does not work. Thanks!

» Posted by Marcelo Barros
 on Sunday, July 19, 2009 @ 20:20

Great code. I tested it using Carbide.c++ and N97 emulator. Have you seen the S60 5th ed browser ? The scrollbars just appear when you touch the screen, showing your position via some alpha effect (transparencies). However, you can not use them to scroll. Interesting feature to be added to flickable.

» Posted by ariya
 on Sunday, July 19, 2009 @ 20:47
Ariya Hidayat

@Marcelo: Scroll indicator overlay should be in implemented in the widget, not in the Flickable class. This is left as an exercise for the readers. Hint: just paint the overlay for a short duration while setScollOffset() function is still being called.

» Posted by Richard Stellingwerff
 on Monday, July 20, 2009 @ 07:51

@ariya, I just tried it out again but this time I wasn’t able to reproduce it either. I did notice that scrolling was much smoother this time around, as it was horribly slow on this machine when I first tried it. I think it has something to do with flaky Intel drivers. I’m trying it on my Macbook 1.1 running Ubuntu jaunty. Maybe the problem reappears when trying to scroll through a really paint heavy list.

» Posted by Nils
 on Monday, July 20, 2009 @ 10:33

Hi!

I just bought a new phone last saturday. I had a look at the N97. While its hardware seems to be rock solid (multitouch screen issues put aside) the Symbian UI ist really terrible. While it would be fun having a device for playing around with Qt/S60, having a device that is actually fun to use was more important to me. So guess what I left the store with…

I’ll visit that shop again as soon as Nokia will have a cool, shiny, consistent to use (Qt based) UI, perfect sync with Mac and PC, good additional Apps, open development model, better and more complete APIs etc. (short: the better iPhone). Come on!

» Posted by tty56
 on Friday, July 24, 2009 @ 20:44

This stuff looks perfect! However, when trying to run the PyQt example, I get an error:
ImportError: No module named PyQt.QtCore
Where do I get PyQt?
I have Qt Tower and Python 1.9.5 svn3302 installed.

Any hints?
Johannes

» Posted by ariya
 on Saturday, July 25, 2009 @ 17:55
Ariya Hidayat

@ tty56 (or Johannes): Of course it won’t work, PyQt is not (yet) available for Qt/S60.

» Posted by tty56
 on Saturday, July 25, 2009 @ 21:11

What is the PyQt example for then? So I should try C++ instead *shudders*

» Posted by ariya
 on Saturday, July 25, 2009 @ 22:18
Ariya Hidayat

@ tty56: The obvious answer: for the platforms where PyQt is already available (e.g. desktop, Maemo, Greenphone).

» Posted by jackson
 on Tuesday, July 28, 2009 @ 14:57

Thanks to your perfect work.Can I use the code logic in my shareware without open my source ,though it’s under GPL license?

» Posted by ariya
 on Thursday, July 30, 2009 @ 15:54
Ariya Hidayat

@jackson: You have to comply with the license, in this case GPL.



© 2008 Nokia Corporation and/or its subsidiaries. Nokia, Qt and their respective logos are trademarks of Nokia Corporation in Finland and/or other countries worldwide.
All other trademarks are property of their respective owners.