I have shown parallax sliding example long time ago. It was certainly inspired by the increase use of such an effect in the so-called home screen, typically in the mobile platform. Since there has been also an increase interest on Qt for Symbian example programs, I decided to recycle that old example and to turn it into something that fits the form-factor and user experience on the phone. Thus, the demo is (re)born.
The code is in Graphics Dojo repository, find it in the parallaxhome subdirectory. For a touch device, you can tap on the icons on the bottom bar to switch between different pages (enjoy the subtle bump effect of the icons). With a non-touch device, left and right arrow keys are your friends. The heart of this parallax effect is the difference of speed between the graphics items (those wonderful food photos) and the background. The above screenshot demonstrates that exactly: on the right side, although now the page (with the weather icon) has been shifted from the center one (with the home icon), you can see that these two pages mostly share the same background portions.
Exercise for the reader: use the panning trick to shift between one page to another. If you feel brave, add some kinetic effect, too.
As a last note, this will be my last Graphics Dojo example. For future Qt-related code examples, please check my personal blog on a regular basis (e.g. just track the posts tagged with qt).
By popular demand, I have refactored the magnifying glass trick previously featured in Google Maps and OpenStreetMap demos into its own, simpler example. This time we just zoom in an image so it’s pretty straightforward and easier to digest. The proof is the following screenshot.
On a related note, if you compile Qt 4.6 branch for Symbian, you will find out that some of my demos previously shown in this Qt Labs, among others ray casting (now should also work on touch devices), maps, flight tracking, weather info, kinetic scrolling, flipping clock, have "graduated" to become real examples, even can be accessed from the infamous Fluid Launcher. What does it mean? If hitherto you haven’t tried them yet because you don’t bother to mess up your system with all the build procedures, just grab the (daily) Qt 4.6 for Symbian binary package and now you can enjoy the examples. No more excuse
Influenced by Holger and Simon, I decided to use S5 for my presentation at the Desktop Summit in Gran Canaria few weeks ago. It’s purely based on web technologies, it works in modern web browsers. More information is available at the official website, including demos, even with different styles and effects. Thanks to the use of web technologies, you can even create the slides online.
For the fun of it, instead of just using a web browser (so boring!), I wrote a simple QtWebKit-based tool to run the slide shows, dubbed s5runner. The code is checked in already to the Graphics Dojo repository. Beside just launching the slide shows in a QWebView, the 200-lines C++ code adds a few more goodies (although arguably, all these extra stuff can be implemented in pure HTML/CSS/JavaScript instead). Run the program and open the included slides.html (in the example sub-directory), or just enjoy the following 2-minute screencast:
A countdown timer (currently hard-coded to 30 minutes) is installed at the bottom right corner. The screen can be blanked temporarily to black or white, useful when you want to steal the focus of the audience from the slides. Going full-screen (and back again) is also easy, this is important if you’d like to show some live demos during the talk. The slides look ugly due to the aging or faulty projector? Use the night-mode, something you have seen in the previous OpenStreetMap example.
When doing a talk about programming, it is often unavoidable to show code snippet. Thanks to Chili, the jQuery code highlighter plugin (there are other alternatives to pick: prettify, syntaxhighlighter, and many others), you will get the highlighting feature with zero effort. It’s quite useful as the code fragment (which you likely show only for a few seconds) becomes more understandable. My favorite is however the live-editing feature, just press F3 to start editing the slide while you are showing it at the same time.
If you like this presentation tool, feel free to extend it. For example, you can have more presentation effects, like pulsating or shaking, by using script.aculo.us-based Presentacular. This example tool only supports basic editing, but I have shown a WYSIWYG HTML Editor before, so you can augment its editing features to support e.g. inserting images from the disk, changing character and paragraph styles, and so on. And of course, support for PDF export (with one slide per page) will be just very nice. A PowerPoint-killer, anyone?
A few days ago I was curious how fast Qt for S60 (Tower release) can blit the pixels to the screen. I decided to port the simple ray caster I wrote 14 years ago to Qt for S60 and to test-drive it on a Nokia E71. The result is something that our video maestro, Alessandro, assembled for us nicely (he showed it on a Nokia Navigator), see below or directly on YouTube:
There is a gazillion ray casting implementations (and tutorials) out there, for a number of different platforms/compilers/CPU (even for the web, using HTML canvas and JavaScript). This example will add one more to the crowd. Find the code in Graphics Dojo repository and use Qt 4.3 or newer to enjoy it. The demo weighs slightly less than 300 lines of code (too short for your taste?). It does however work only with keypad navigation, the users of Nokia N97 and 5800 need to implement some kind of mouse/finger navigation (a good exercise!). Of course, try it first on the desktop, it runs just fine:
True to Wolfenstein 3-D that made ray casting popular, my example also shows a different shading between the walls facing different direction. As you may witness from the shipped textures.png (which holds all the textures, adopted from a very nice Wolfenstein 3-D alternative texture library), this is achieved by having two version of the same wall texture, the normal one and the darker one. In addition to that, each wall texture source pixmap is prerotated by 90 degrees. This is again the old trick I used for the first time in PictureFlow (the same effect that powers Qt Fluid Launcher). The basic premise: improve the cache locality, this is because during texture mapping we scan the pixels within the same horizontal row (neighboring integers), not the vertical column (which means jumping far more than the size of the cache lines).
The code can be further optimized (of course!). In fact, there is no so much Qt-specific part in it (afterall, it’s ported from my old Mode X DOS-based test program). For a starter, I am sure a seasoned S60 developer know a bit or two about direct screen access (maybe via CDirectScreenBitmap aka Anti-Tearing API?), this surely improves the blitting although I don’t know how less portable the code would be. On a different side, you might see that I improved the inner loop by using simple fixed-point arithmetic. The outer loop is still based on floating-point, feel free to cast some fixed-point magic there, at the potential cost of readability. Sine and cosine can be stored as look-up tables, especially if you turn the viewing angle also to fixed-point. While you are on that, notice also how I got away with finding the sine and cosine for each ray (which you can nicely solve, once the fast look-up table is at your disposal), similar to Ken’s Labyrinth (afterall great cheaters think alike), at the price of a less perfect rendering. The mechanics behind ray casting is fairly easy (there are tons of tutorials in Internet), however if your math skill is rusty and parts of this example are difficult to decipher, it is time to grab a sheet of blank paper and to start scriblling, drawing, and playing with geometry. Hardware accelerated graphics, even on mobile platforms (via OpenGL ES and OpenVG), already starts to become the norm these days. This leaves classic stuff like ray casting to serve the educational purpose only.
If you are interested in doing more 3-D with Qt, don’t miss the more advanced WolfenQt demo. While this simple ray casting example is pure pixel-manipulation, WolfenQt relies on perspective transformation with Graphics View. It does allow interesting features of Graphics View, like embedding a web browser, a media player, and other fun widgets, as well as exploiting the benefits of OpenGL.
And there are still many steps if you want to base a game on this example (note: there is already S60 Wolfenstein 3-D, if you just want to have a look). Sprites support is still missing, sound also does not exist. On the rendering front, you might want to add some doors (hence the opening and closing logic) for a better game play. All of them is still doable for a weekend project, so have fun if you want to bring Captain Blazkowicz to life!
Like I promised few days ago, here is the demo that shows tile-based OpenStreetMap rendering on Qt/S60. If you never heard of OpenStreetMap before, it is “a collaborative project to create a free editable map of the world” (from its Wikipedia entry). You can try it at www.openstreetmap.org. It might not be as complete as other maps solutions, but surprisingly, OpenStreetMap coverage for many world big cities are detailed enough for most users.
The approach used in this example is by showing prerendered tiles stored as pixmaps, often known as Slippy Map. Of course, we also need to honor the tile usage policy. Much to my surprise, it takes only around 200 lines of code to achieve basic rendering, including tile downloads (via QNetworkAccessManager) and simple disk caching (thanks to QNetworkDiskCache). Add another 100 lines to support panning via mouse dragging and arrow keys. To have some more fun, I also brought the magnifying glass and night mode features and the total code is still less than 600 lines (which was good, as it did not cost me any sleepless night). On top of that, it also runs on Qt/S60 Tower release. Isn’t Qt wonderful?
While the screenshot above serves as a solid proof, these days nothing is more fascinating than watching a videocast from our very own Mr. Portale. See below or watch directly (on YouTube):
This simple maps exampe, dubbed lightmaps (remember Quake source code, anyone?) can be found in the Graphics Dojo repository. You need Qt 4.5, either the desktop or mobile version. So far it has been tested on touch devices like Nokia N97 and Nokia 5800, but it does work also on other phones like Nokia E71.
For the sake of keeping the example simple, I did put only minimal error handling and a very simple tile cache system. This means, the first time you want to zoom with the magnifying glass (tap and hold for a while with touch device, press middle button in the D-pad for other devices), there is a potential delay until the magnified portion is rendered. Since the tile pixmaps are cached, the next attempt will likely result in a faster painting.
What about vectorial rendering of the maps? While that would be a perfect solution (even allows semi 3-D with nice transformation like in common navigation system), unfortunately I believe the amount of code will exceed the suitable size for a typical example program. Of course, this feature along with other possible improvements (custom zoom level, search function, tiles prepackaging, more optimal tile caching, and soon) are always left as exercises for the brave readers.
I hope you are inspired to map-enable your cool apps. No more excuse!
Google Maps, or any similar application, becomes very important in our digital life. Not surprisingly, it also becomes easier to integrate some map functionalities into our application. This is something that attracts the developer side of each and every one of us. The brand-new, work-in-progress Google Maps API v3, via the use of QtWebKit module, is the instant solution for embedding maps in your own beloved Qt-based application.
Since doing so would be almost trivial (you can even do it within Designer or Creator), I decided to raise the bar a bit. What if, when your press the mouse button and hold it for a while, a magnifying glass (remember Sherlock Holmes?) shows up and you can move it around? Thanks to Qt, surprisingly (again) implementing such a demo is easy, the result is less than 300 lines of code, and thus I am glad to share you how it looks like, in a static screenshot and a moving picture (watch in YouTube):
The code is checked in already to the Graphics Dojo repository, it is securely stashed under the mapzoom subdirectory. If you do not bother to digest the code, here is the trick. I keep a larger version of the map in a separate QWebPage. When the user press-and-hold the mouse button for a while, this hidden page is used to render the maps under the magnifying glass, clipped to the shape of a circle. Simple, isn’t it? Of course, you can still move the maps by dragging the mouse, just like in the normal use of Google Maps.
Now I am sure some of you are ready to throw the questions. What about Qt/S60 version? What about OpenStreetMap? Relax and be patient a bit. The combination of both will surely make a cameo, some time in the near future, in the form of another example (a successor to this one). Meanwhile, enjoy your maps, Sherlock!
I am not a frequent flyer, but I was told that interesting travel tools, especially for mobile phones, are valuable for those who fly a lot. Conveniently having your itenaries, the ability to track the status of your flights, getting the alert as the flight time changes, and so on, everything at your fingertip, is just one wonderful aspect of modern phone technology. After all, it is the matter of connecting people.
Right after I saw Qt/S60 Tower release some time ago, flight tracking example was one that came to my mind almost immediately (there were others as well, they will show up in the coming weeks). So here it is, I present you the code. Just do a git pull in your local Graphics Dojo repository (you do have it, right? Otherwise clone from the one in gitorous) and find it in the flightinfo subdirectory. Again, we have to thank Alessandro for the improvements to this little example and especially also for the videocast (watch in YouTube) he did, so that we can enjoy Flight Info in its glory:
The code is far from perfect but should serve as a nice basis for further improvement. The way the data is parsed is quite fragile, this could use some love. And because it uses FlightView as the back-end, you can only use it for flights from and to US. There are still few more useful exercises for the readers from this example. For example, the program does not have the ability to find the flight number given the route. This is however doable because FlightView offers that functionality, you just to have the right hook. Also, how about an integration with the previous Weather Info?
In the spirit of writing more demos for Qt/S60, I thought about having something that I will actually use on a daily basis. A weather applet came to my mind. While my previous weather example was more a visual web-scraping attempt based on QtWebKit, this time I wanted something else and hence I decided to use the unofficial Google Weather API just like what is used in Weather Globe Google gadget. The query for this Google service will give back the result in an XML format, which is quite easy to parse. Unfortunately Qt/S60 Tower release does not bundle the XML Patterns module yet, so I have to use the classic stream reader to digest the XML data.
Here is the screenshot of this little weather tool running on the desktop. Use right-click to pop up the context menu, from which you can choose one of the predefined places. The dialog to ask the user for a custom location is left as an exercise for the readers. The beautiful icons are taken from the Tango Desktop Project with an additional set from darkobra at devianart.com. Because I want to take into account the different S60 phone resolutions, these vector-based icons are rendered at run-time thanks to our QtSvg module.
Just like in the case of both the digital clock and kinetic scrolling demos, Alessandro was (more than) willing to waste his precious time filming the following video, for our pleasure. It shows the weather info running on Nokia 5800.
The code is just one git pull away from the usual repository, see the weatherinfo subdirectory. As you might guess, it is using Graphics View, although the layout and animation are done semi-manually. This is because I want to make sure it looks good both on Portrait and Landscape Mode. If you are brave and want to experiment, convert the simple animation to use the brand-new Animation Framework slated for Qt 4.6. Still need some challenges? How about using XPath and XQuery to process the XML? Feel free to implement auto refresh and multiple cities features, too!
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.
Looking at the standard built-in digital clock for our phone, it seems really boring, isn’t it? Now that Qt/S60 Tower edition has been released, I thought it’s time to get my hands dirty and write few little useful (or useless, depending on your point of view) demos to be enjoyed by millions of loyal S60-based phone users. So here it is, the first Graphics Dojo example designed with S60 platform in mind (of course, it works fine on the desktop, afterall it’s just a normal Qt program). Taking the inspiration from some flipping effect (that I stumbled upon, thanks to YouTube) from another digital clock, here it is:
Except of course the screenshot does not capture the beauty of the animation. So Alessandro decided to show-off his fantastic video-making skill and get us the following:
qmake
make
make release-gcce
createpackage -i digiflip_gcce_urel.pkg
I included three animation effects: Slide, Flip, and Rotate (all in 400 lines of Qt/C++ code). You can switch between them using the softkey (see the source code to know how easy it is to add simplistic softkey feature to your application) or using D-pad (only for non-touch devices).
