That is, 2009 is coming to its end. Some parts in Central Europe already enjoy the snow although Oslo still has a touch of autumn feeling.

Here is a list of biweekly Graphics Dojo examples that I managed to pull off this year. Most of them are available for Qt/C++ and PyQt.

Note that although the examples are categorized (for your convenience), often it does not strictly belong to one category, e.g. night mode is both a graphics and WebKit example. Also, all S60 examples are designed with S60 mind but they still run well on the desktop, too.

S60

• Wolfenstein-like ray casting in your pocket.
• Maps solution using OpenStreetMap, of course running on the phone, too.
• Flight tracking utility, useful to check the status and time.
• Weather info on your pocket.
• Still about kinetic scrolling, now with a Flickable interface that works smooth also on a phone.
• Suitable for your S60 phone: flipping digital clock.

Graphics

• Reborn/recycled parallax effect for the home screen.
• Simplified magnifying glass trick.
• A simple trick to get the night-mode vision, just like in some navigation system.
• DragMove charm to allow widget moving by dragging
• simple timeline demo along with a custom S-shape curve
• thumbnail preview via a fast cheat-scaling trick.
• cheap trick to half-scale ARGB32 image very fast.

WebKit

• Doing a talk? Use a presentation tool purely based on web technologies.
• Magnifying glass trick with Google Maps.
• Make your QWebView transparent to achieve some interesting effect.
• snap-scrolling in QWebView, useful for small-screen browser.
• Need to do a visual web scraping? This little weather applet, which scraps the Google-provided page, might be a good start.
• Use jQuery, enjoy selector goodies with QtWebKit
• simple example to integrate Google Suggest
• WYSIWYG HTML Editor using QtWebKit
• Google chat client made in 15 minutes
• web capture, a tool to take a snapshot of web pages.

JavaScript

• Run Monster Evolution demo with Qt and V8 (the JavaScript engine behind Google Chrome)
• Still about Monster, but now with JavaScriptCore of QtWebKit
• Or, just run this cool Monster Evolution demo with QtScript
• simple bar chart using QtScript.

Need more goodies? See also last year (2008) graphics dojo wrap-up.

Until next time.

Though Google Chrome for Linux is not yet officially announced, people have been working to make Chromium, the open-source version thereof, available for different popular distributions. I wrote before about CrossOver Chromium, but not only this is just a hack, it is also not up-to-date at all. The easiest way for OpenSUSE 11.1 users is to use the package from Contrib.

Though for veteran OpenSUSE fans, the steps to install Chromium are obvious, here I write down the idiot-proof version. Go to http://software.opensuse.org/search, type Chromium and click the Search button, wait for a moment, find the entry from openSUSE:Factory:Contrib/openSUSE_11.1, then well, click on the 1-Click Install button there. Follow the usual installation guides (mostly just agreeing and confirming some stuff), then in few minutes you will get:

Who says installing software in Linux is difficult? :)

Something I can always be proud of is to be part of the Nokia QtWebKit team. The fact that we are all the WebKit reviewers from Nokia (at the moment, surely the situation will improve in the future) is one thing, but most important is that the team is small and agile, and it comprises great hackers. You surely already hear a lot from Simon, Tor Arne, and Kent these days, and you will hear from the new blood pretty soon, too.

The least we can do for such great coworkers is to offer them a bit of culinary journey to our culture. Hence, the so-called WebKit dinner. As much as I love Italian food, such as pizza, it's also time for a change.

The starter was Gado-gado, which is just vegetable salad served with peanut sauce as the dressing. The main dish consisted of fish curry (generously contributed by Kavindra) and Nasi Uduk. The latter, which is shown in the photo above, is rice cooked with (among others) coconut milk served with sliced omelette, fried tofu, chicken, fish, and vegetables. A lot of other slight variations also exist. Original (from Sidoarjo) prawn crackers, aka Krupuk, completed the experience.

Dessert? Not forgotten. It was basically just fresh waffles (like I blogged before) served with the sauce made from brown sugar and coconut milk. Let's say it's the European interpretation of Serabi.

Tasty. What else does a man want?

If you were at my Special F/X talk, Desktop Summit in Las Palmas, or if you watched the recorded video (135 MB Ogg), you might notice the tongue-in-cheek gratitudes to Lufthansa dan SpanAir I expressed at the beginning of the talk. The story goes as follows. As all of us, the Trolls, left Oslo to fly to Las Palmas, our flight got delayed twice, in Oslo (by Lufthansa) and Madrid (by SpanAir). Like every other dedicated (read: foolish) hackers, I took advantage of the delay to fulfill my dream (read: obsession): writing my own presentation tool. Hence, the special thanks.

Of course, like every other dedicated hackers, I cheated (after all, great artists steal). Inspired from the previous discussion with Simon (and Holger), I just took S5 and wrapped it with QtWebKit. The result is something I called s5runner. The 200-lines Qt/C++ code (and PyQt, thanks to David) is best demonstrated by watching the following short screencast:

Few extra features added on top S5 are screen blanking (white or black), night mode (just for the fun of it), syntax highlighting (useful for code snippet), countdown timer (because my laptop has 100x computing power vs my wristwatch), and (my favorite) live editing.

I will definitely reuse this for my upcoming talks.

I always wanted to help Marble, but I am guilty because until now I can't afford any time to play with it. All these years, I used to compile bleeding-edge Marble from time and time, use it, and basically that is it. Although since a long time ago I promised Torsten that I was willing to help Marble, actually only right after Gran Canaria Desktop Summit finally I devoted some time to study its code. The three of us, Torsten, Andrew and I also had a short but fascinating discussion during the summit.

Now, I still don't manage to contribute anything to Marble yet, but I already have something in my pipeline. You will likely hear from me in the coming weeks, so stay tuned.

Since I reckon I enter the wonderful territory of mapping world, I thought, well, let's familiarize myself a bit with the technology. I took a look at the interesting experimental Google Maps API v3 (which BTW does not require an API key). Using QtWebKit, I wrote a simple 300-lines example that shows a magnifying glass over the map (see the screencast). Of course, the area under is the zoomed version of the map.

Since I am flirting with Qt for S60 these days, I thought about bringing that example to the phone. However, instead of relying on Google Maps, I decided to leave the dark side and jumped to use OpenStreetMap instead. The result is effectively an example of how to render the tiles from OpenStreetMap using Qt, which also runs on S60. It does even have the night-mode feature.

Video, you asked? Thanks to Alessandro, here is the 52-second videocast that demonstrates it (or watch on YouTube), running on Nokia 5800:

Just like last year, this fall we will have another Qt Developer Days. Europeans might want to visit Munich, Americans are better served with San Francisco.

Will I go there? Well, unless there is something wrong, yes I will. Note that a little information about the sessions is already available. I leave it as an exercise to the reader, which talks in the Innovate track I will hold :)

Since three brings the luck and it is the first Mersenne prime, I am glad to list three QWebView tricks for your pleasure:

Night-mode

Snap scrolling:

Transparency, something you have also seen before:

The Qt/S60 team continues to make some progresses. After Pyramid, Temple, and Garden, finally Tower came out of its cage. For a quick intro of what is inside Tower, check out the video. In particular, QtWebKit is included in this prerelease (yay!), thanks to the hard work of Simon, Norbert, Laszlo, Janne, Kristian, and other great hackers. My little contribution improves from only the basic engine behind the infamous Fluid Launcher (remember PictureFlow?) to a tech-demo QtWebKit-based web browser (created quickly in 1.5 days, cause I needed to rush to LinuxTag) dubbed Anomaly (Mobile). Once I am free again (now we're busy preparing for Akademy), I will put some more efforts to add more polishes to Anomaly Mobile. Imagine having visual bookmarks, flick support, Google suggest, optimized disk cache, double-tap-to-zoom, of course also smooth zooming in and out, snap scrolling, perhaps even night mode for your Nokia 5800, Nokia N97, and other Nokia touch devices, all implemented with Qt? /me just drools :-)

Again the freshly baked: Qt 4.5.2.

Details on the changes in this release is available in the changes-4.5.2 file. As for QtWebKit, some weeks ago I played the patch monkey role and did backport and test a number of critical fixes from WebKit trunk, among others stuff related to canvas, memory access and leaks, rendering painting and performance, JavaScript, plugin handling, clipboard, SVG, and many others. In addition Simon also tackled the backporting of various security fixes.

Overall, 4.5.2 seems to be a solid patch release. An upgrade from 4.5.x is highly recommended.

In a related note, Qt Creator 1.2 was also out. It brings a better fakevim plugin, regex search/replace, and numerous other improvements. Grab it while it's hot.

Cutting a long story short, check out my latest example of a less-than-150-lines code (pick your battle: C++ version or Python version) to show the weather status and day forecasts for almost all places in this blue planet, powered by Google, based on QtWebKit. As always, let's start with the screenshot (aka the proof):

I doubt there is a need for this to be a plasmoid, as it will just clutter Plasma with yet another weather applet. But hey, if people like it, I (or someone else, preferably) can make it.

These days I am juggling balls. Beside fixing QtWebKit-related bugs, writing more examples on using QtWebKit, I am helping the Kinetic guys with Graphics View optimizations, and working on new Graphics View feature I still can't elaborate (sorry for the teaser :-). On top of that, I already started to work on Qt Script, learning the intricacies of JavaScript along the way, stress-testing Kent's Qt Script binding generators, and surely also playing around with the brand-new Qt Script debugger in Qt 4.5. For the latter, even if you are not really into Qt Script, I highly recommend giving it a try, at least watch the screencast from Kent for a start.

Unless you stayed under the rock for the last few weeks, you already heard about Chrome Experiments. These are some extremely cool demos designed to run in a web browser. Of course, there are already tons of demos out there. Chrome Experiments are however different. It relies on a high-performance browser. The reason: the demo is JavaScript intensive and thus a blazing-fast JavaScript engine will make a different. Coupled with the use of HTML 5 Canvas, some of demos simply show many things which are not possible before. Flash will be still here to stay (due to its authoring tools, advanced features, libraries collections, and so on). But I won't be too surprised if this is going to be a Flash-killer technology. There is O3D but I reckon it tackles a different market segment.

My favorite Chrome Experiment is Monster Evolution, an fantastic demo written by Dean McNamee. Try to launch it in your browser (warning: extremely slow if you don't use state-of-the-art browser). Or just watch the YouTube video. Impressive, isn't it?

When I saw Monster demo for the time, I thought it would be cool to be able to run it as a Qt application. Porting the demo from JavaScript to C++/Qt is one way to do it, but to make the challenge even more painful, I decided to run the monster.js code directly (warning: it's minified, better check Dean's open-source 3-D engine behind the demo). There are tons of ways to do, I almost tried every possible permutations. In the end, I managed to run Monster Evolution smoothly, at more than 25 fps on a fairly modern machine. What was to be just a quick hack turned into a struggling but delirious adventure, resulting in a three-installment series.

For the YouTube generation, here is the time-lapsed screencast (if you prefer, grab the 3 MB AVI).

In the first part, The QtScript Menace, I used Qt's built-in ECMAScript interpreter to run the demo. The performance was not my main concern (though it gave me the chance of using our work-in-progress Qt Script version that uses JavaScriptCore as the back-end), rather the trick on how to run it with as little code as possible. I ended up with a hackish pure JavaScript implementation of the canvas object, along with few lines of glue code, using Qt Script's feature of making a QObject instance available to the script engine. Surprisingly, it works pretty well. It downloads the JavaScript code from the Internet, setups some stuff and then runs it. For a program comprises 240 lines of C++ and 140 line of JavaScript, I am pretty happy.

For the second attempt, Attack of the SquirrelFish, JavaScriptCore was chosen as the engine that powers the demo, used via QtWebKit. Again the same trick was employed, with the glue code now relies on QWebFrame's addToJavaScriptWindowObject and evaluateJavaScript. This requires only minimal changes, with an improved performance as the result (significant and noticeable), especially when JIT is available.

The saga was closed with the third episode, Revenge of the Cylinders. This time the victim was V8, the JavaScript engine which powers Google Chrome. Again, the code change was minimal, consider that V8 glue code to this little Qt application needs to be written manually. Of course this requires you to build V8, I have included the instructions (works on Linux, Mac, Windows) in the accompanying README on how to do that.

Feel free to try all three methods and let us know the frame-per-second speed-up that you get!

Seems that the trick to make a transparent QWebView or QWebPage is not very well known. So here is the magic incantation:

    view = new QWebView(this);
    QPalette palette = view->palette();
    palette.setBrush(QPalette::Base, Qt::transparent);
    view->page()->setPalette(palette);
    view->setAttribute(Qt::WA_OpaquePaintEvent, false);

Or grab it at http://gist.github.com/103126.

Here is the result (click to zoom). I put the famous TuxKiller wallpaper as the background for the main window. The central widget is set to a QWebView instance, using the transparent trick. As everyone loves Cube these days, that is the URL I am loading:

Note 1: of course this does not work if the web page explicitly sets the background color. For example, google.com (see its HTML source) forces a white background.

Note 2: with Qt 4.4's QtWebKit, you have to use the background brush instead of the base brush. This is changed in Qt 4.5 for consistency with the rest of Qt (it is mentioned in Qt 4.5.0 changes file).

Fresh from the oven: Qt 4.5.1, Qt Creator 1.1, new SDK.

Details on what has changed can be examined in the changes file. Now that the release is out, the QtWebKit team is busy again fixing bugs and backporting important fixes for the next patch release (4.5.2). Expect to see more extensive changes there. Few QtWebkit-related examples which I have written are also being cleaned-up and imported as new Qt examples, as we speak.

In case you miss it, Benjamin just added Google Suggest to Arora, within hours after I showed how to do it in Qt Labs. His BSD-licensed Google Suggest implementation is very lightweight, it is pretty trivial to integrate it to most common applications.

Screenshot follows (click to enlarge):

The initial version of WYSIWYG editor based on QtWebKit (see my post on Qt Labs for details) apparently works pretty well. There are rough edges here and there, something which need fixing, but overall I am quite happy. Live editing a web page opens a whole new possibilty. For an HTML-based help system, you can offer annotation feature, where the user can add his own note right inside the documentation (you may want enable editing on certain parts, not the whole document). You can make a note-taking system that copies something from the web (in HTML) and then the user can touch the content to adjust it to his need. Translate web pages easily, with all the formatting and whatnot intact, and without the need to scare the translators with raw HTML black magic. Any more useful examples?

Screenshots follow. Click on each image to enlarge.