don't code today what you can't debug tomorrow

open and freedom

2011-07-28T18:07:00.004+02:00

After almost 6 years, 500 blog posts, and over half a million visits, I decide to have a new playground for my (often crazy) experiments. From now on, if you want to follow my ramblings, check ariya.ofilabs.com.

tablets and web performance

2011-07-26T20:24:00.009+02:00

Benchmarks, and the results of running them, are attractive because they eliminate the need to digest an arbitrary complex machinery, reducing it into a meaningful and powerful number. Comparison is thereby made easier, as it is now a matter of playing who has the biggest gun game.

In the areas of web performance, every benchmark becomes more like durian, either you hate it or you love it. No matter how useful (or useless) a benchmark is, there are always folks who defend it and others who despise it. Signal-to-noise ratio changes dramatically when the discussion over some benchmark results is started.

I still reckon that in the years to come, what makes a great experience while browsing the web depends on the performance of (surprise!) DOM access. Common JavaScript frameworks (like jQuery, Prototype, Ext JS, MooTools, YUI, Dojo, and many others) still form the basis for a lot of rich web sites and interactive web applications out there, at least for the time being and till the near future.

While SunSpider and V8 benchmarks are geared towards pure JavaScript performance and Kraken is better suited for future heavyweight applications, Dromaeo becomes a solid candidate for DOM performance analysis. In particular, its set of DOM tests is very valuable because it presents a nice sample of the behavior of framework-based sites. In this context, butter-smooth DOM modification has a bigger impact than just blazing-fast trigonometric computation, at least for gajillions web pages out there.

Since more and more people are accessing the web through mobile platforms these days, I decided to test several popular tablets out there and summarize the result in one graph below (updated):

For the detailed comparisons, check out the complete Dromaeo numbers of all tablets (left-to-right: Galaxy Tab, iPad 2, Playbook, TouchPad). If you find the above result is different that what you test yourself, shout out. I want to be careful not to propagate any discrepancies or misleading results. As usual, take the above beautiful collection of colored bars with a pinch of salt.

Samsung Galaxy Tab 10.1 is powered by Android 3.1 (Honeycomb) Build HMJ37, iPad 2 is using iOS 4.3.3, RIM Playbook's firmware is 1.0.7.2670, which the HP TouchPad has webOS 3.0. The choice of the devices represent a variety of fresh ARM-based tablet operating systems in the market as of this writing.

With Qt coming closer and closer to the become a good companion of the green robot, I wonder how would QtWebKit compete with those numbers. I think we will find out the answer in a couple of months, maybe even sooner.

fluid animation with accelerated composition

2011-07-06T09:10:00.003+02:00

Those who work on web-based applications on mobile platforms often recall the advice, "Use translate3d to make sure it's hardware accelerated". This advice seems magical at first, and I seldom find anyone who explains (or wants to explain) the actual machinery behind such a practical tip.

For a while, Safari (and Mobile Safari) was the only WebKit-based browser which supports hardware-accelerated CSS animation. Google Chrome caught up, QtWebKit-powered browser (like the one in Nokia N9) also finally supported it. Such a situation often gave the wrong impression that Apple kept the hardware-acceleration code for themselves.

The above two are basically the reasons for this blog post.

In case you miss it (before we dive in further), please read what I wrote before about different WebKit ports (to get the idea of implementation + back-end approach) and tiled backing store (decoupling web page complexity with smooth UX). The GraphicsContext abstraction will be specially useful in this topic. In particular, because animation is tightly related to efficient graphics.

Imagine if you have to move an image (of a unicorn, for example) from one position to another. The pseudo-code for doing it would be:

  for pos = startPosition to endPosition
    draw unicorn at pos

To ensure smooth 60fps, your inner loop has only 16 ms to draw that unicorn image. Usually this is a piece of cake because all the CPU does is sending the pixels of the unicorn image once to the GPU (in the form of texture) and then just refer the texture inside the animation loop. No heavy work is needed on the CPU and GPU sides.

If, however, what you draw is very complicated, e.g. formatted text consisting of different font typefaces and sizes, this gets hairy. The "draw" part can take more than 16 ms and the animation is not butter-smooth anymore. Because your text does not really change during the animation, only the position changes, the usual trick is to cache the text, i.e. draw it onto a buffer and just move around the buffer as needed. Again, the CPU just needs to push the buffer the GPU once:

    prepare a temporary buffer
    draw the text onto the buffer
    for pos = startPosition and endPosition
       set a new transformation matrix for the buffer

As you can imagine, that's exactly what happens when WebKit performs CSS animation. Instead of drawing your div (or whatever you animate) multiple times in different position, it prepares a layer and redirect the drawing there. After that, animation is a simple matter of manipulating the layer, e.g. moving it around. WebKit term for this (useful if you comb the source code) is ~~accelerated composition~~ accelerated compositing.

Side note: Mozilla has the same concept, available since Firefox 4, called Layer.

If you understand immediate vs retain mode rendering, non-composited vs composited is just like that. The idea to treat the render tree more like a scene graph, a stack of layers with different depth value.

Because composition reduces the computation burden (GPU can handle varying transformation matrix efficiently), the animation is smoother. This is not so noticeable if you have a modern machine. In the following video demo (http://youtu.be/KujWTTRkPkM), I have to use my slightly old Windows laptop to demonstrate the frames/second differences:

The excellent falling leaves animation is something you have seen before, back when WebKit support for CSS animation was announced.

Accelerated composition does not magically turn every WebKit ports capable of doing fluid animation. Analog to my previous rounded corner example, composition requires the support from the underlying platform. On Mac OS X port of WebKit, composition is mapped into CoreAnimation (part of CoreGraphics), the official API to have animated user interface. Same goes for iOS WebKit. On Chromium, it is hooked into sandboxed GPU process.

With QtWebKit, composition is achieved via Graphics View framework (read Noam's explanation for details). The previous video you have seen was created with QtWebKit, running without and with composition, i.e. QGraphicsWebView with different AcceleratedCompositingEnabled run-time setting. If you want to check out the code and try it yourself, head to the usual X2 repository and look under webkit/composition. Use spacebar (or mouse click) to switch between composited and non-composited mode. If there is no significant frame rate improvement, increase NUMBER_OF_LEAVES in leaves.js and rebuild. When compositing is active, press D to draw thin yellow border around each layer. Since it's all about Graphics View, this debugging is easy to implement. I just inject a custom BorderEffect, based on QGraphicsEffect (which I did prototype back when I was with Nokia):

Thus, there is nothing like hidden secret with respect to Safari hardware-accelerated CSS support. In fact, Safari is not different than other Mac apps. If you compile WebKit yourself and build an application with it, you would definitely get the animation with hardware acceleration support.

As the bonus, since Mac and iOS WebKit delegate the animation to CoreAnimation (CA), you can use various CA tweaks to debug it. CA_COLOR_OPAQUE=1 will emphasize each layer with red color overlay (as in the demo). While this applies to any CA-based apps (not limited to WebKit or Safari), it's still very useful nevertheless. Chromium's similar feature is --show-composited-layer-border command line option.

How does WebKit determine what to composited? Since the goal is to fully take advantage of the GPU, there are few particular operations which are suitable for such a composition. Among others are transparency (opacity < 1.0) and transformation matrix. Ideally we would just use composition for the entire web page. However, composition implies a higher memory allocation and a quite capable graphics processor. On mobile platforms, these two translate into additional critical factor: power consumption. Thus, one just needs to draw a line somewhere and stick with it. Hence, that's why currently (on iOS) translate3d and scale3d are using composition and their 2-D counterparts are not. Addendum: on the desktop WebKit, all transformed element is accelerated, regardless whether it's 2-D or 3-D.

If you make it this far, here are few final twists.

First of all, just like the tiled backing store approach I explained before, accelerated composition does not force you to use the graphics processor for everything. For efficiency, your layer (backing store) might be mapped to GPU textures. However, you are not obligated to prepare the layer, i.e. drawing onto it, using the GPU. As an example, you can use a software rasterizer to draw to a buffer which will be mapped to OpenGL texture.

In fact, a further variation of this would be not to use the GPU at all. This may come as a surprise to you but Android 2.2 (Froyo) added composition support (see the commit), albeit doing everything with in software (via its Skia graphics engine). The advantage is of course not that great (compared to using OpenGL ES entirely), however the improvement is really obvious. If you have two Android phones (of the same hardware specification), one still running the outdated 2.1 (Eclair) and the other with Froyo, just open the Falling Leaves demo and watch the frame rate difference.

With the non-GPU composition-based CSS animation in Froyo, translate3d and other similar tricks do not speed-up anything significantly. In fact, it may haunt you with bugs. For example, placing form elements in a div could wreck the touch events accuracy, mainly because the hit test procedures forget to take into account that the composited layer has moved. Things which seem to work just fine Eclair may start behaving weird under Froyo and Gingerbread. If that happens to you, check your CSS properties.

Fortunately (or unfortunately, depending on your point of view), Android madness with accelerated composition is getting better with Honeycomb and further upcoming releases. Meanwhile, just take it for granted that your magical translate3d spell has no effect on the green robots.

Last but not least, I'm pretty excited with the lightweight scene graph direction in the upcoming Qt 5. If any, this will become a better match for QtWebKit accelerated composition compared to the current Graphics View solution. This would totally destroy the myth (or misconception) that only native apps can take advantage of OpenGL (ES). Thus, if you decide to use web technologies via QtWebKit (possibly through the hybrid approach), your investment would be future-attractive!

birds of paradise

2011-07-03T06:56:00.001+02:00

PhantomJS, the headless QtWebKit tool, is now listed as one of the Qt Ambassador show cases. There is also a growing list of projects using PhantomJS (let me know if you want to be listed). In fact, PhantomJS running in several Amazon EC2 instances is used as the primary tool in a web security analysis.

Few days ago, right during the summer solstice, I tagged and released PhantomJS 1.2, codenamed Birds of Paradise. There are some exciting changes there that I will briefly outline as follows (for details, see the Release Notes).

Most important change is the fix to the security model. Your PhantomJS script now does not run in the context of the loaded QWebPage anymore (more precisely, the main frame thereof). Rather, we have a new WebPage object that abstracts (surprise) the web page. This forces a major breakage in the API since there is no way to support 1.1 style of API with the same code. Again, check the Release Notes to find out how to migrate your script.

The bonus with the above WebPage object abstraction is a bunch of external callbacks we can set up, most notably onLoadStarted and onLoadFinished, useful to trigger some actions upon page loading. Speaking of JavaScript evaluation, dynamic script tag loading is a quite popular trick to asynchronously load external libraries, e.g. those part of Google Libraries API. Rather than writing your own code, there is now easy-to-use includeJS() function for that specific purpose.

My personal #1 favorite feature is the simple network traffic analysis. I already demonstrated the technique before, i.e. by subclassing QNetworkAccessManager and recording the major network activities (see my previous blog post discussing this in details). The new PhantomJS example script netsniff.js shows the use of this feature: it logs network requests and responses and dumps them in HTTP Archive (HAR) format. You can then use online HAR viewer to see the waterfall diagram, or post-process the data the way you like it. For example, here is what BBC News web site produced:

Since the entire traffic capture can be fully automated, you can have it checked against various rules. For example, you may want to ensure that KDE.org does not get significantly slower (in terms of page loading) every time someone changes the web site design. Perhaps you want to compare the resource loading with gnome.org just to confirm that it loads faster. Gathering the stats of the same site from different geographical locations might also reveal how the web page is perceived by some fans on the other side of the planet.

The use of mobile devices for consuming information is exploding. It would be fun to see PhantomJS leveraged to get the metrics behind the data traffic. I haven't bothered yet to port and test PhantomJS on Qt-based Harmattan-powered phone like the new shiny Nokia N9. Of course, if you a spare one, feel free to Fedex me :)

quaternion multiplication: two years later

2011-06-30T18:03:00.003+02:00

Sometime back I wrote (fun fact: it's Google first hit for faster quaternion multiplication) about my favorite commit I did exactly two years ago to Qt :

git show cbc22908
commit cbc229081a9df67a577b4bea61ad6aac52d470cb
Author: Ariya Hidayat 
Date:   Tue Jun 30 11:18:03 2009 +0200

    Faster quaternion multiplications.
    
    Use the known factorization trick to speed-up quaternion multiplication.
    Now we need only 9 floating-point multiplications, instead of 16 (but
    at the cost of extra additions and subtractions).

Ages ago, during my Ph.D research, when I worked with a certain hardware platform (hint: it's not generalized CPU), minimizing the needed number of hardware multipliers with a very little impact in the computation speed makes a huge different. With today's advanced processor architecture armed with vectorized instructions and a really smart optimizing compiler, there is often no need to use the factorized version of the multiplication.

Side note: if you want to like quaternion, see this simple rotatation quiz which can be solved quite easily once you know quaternion.

I try to apply the same trick to PhiloGL, an excellent WebGL framework from Nicolas. Recently, to my delight, he added quaternion support to the accompanying math library in PhiloGL. I think this is a nice chance to try the old trick, as I had the expectation that reducing the number of multiplications from 16 to just 9 could give some slight performance advantage.

It turns out that it is not the case, at least based on the benchmark tests running on modern browsers with very capable JavaScript engine. You can try the test yourself at jsperf.com/quaternion-multiplication. I have no idea whether this is due to JSPerf (very unlikely) or it's simply because the longer construct of the factorized version does not really speed-up anything. If any, seems that the amount of executed instruction matters more than whether addition is much faster than multiplication. And of course, we're talking about modern CPU, the difference is then becoming more subtle.

With the help of Nicolas, I tried various other tricks to help the JavaScript engine, mainly around different ways to prepare the persistent temporary variables: using normal properties, using Array, using Float32Array (at the cost of precision). Nothing leads to any significant improvement.

Of course if you have other tricks in your sleeve, I welcome you to try it with the benchmark. Meanwhile, let's hope that someday some JavaScript engine will run the factorized version faster. It's just a much cooler way to multiply quaternions!

progressive rendering via tiled backing store

2011-06-27T09:31:00.002+02:00

Imagine you have to create a CAD-grade application, e.g. drawing the entire wireframe of a space shuttle or showing the intricacies of 9-layer printed circuit board. Basically something that involves a heavy work to display the result on the screen. On top of that, the application is still expected to perform smoothly in case the user wants to pan/scroll around and zoom in/out.

The usual known trick to achieve this is by employing a backing store, i.e. off-screen buffer that serves as the target for the drawing operations. The user interface then takes the backing store and displays it to the user. Now panning is a matter of translation and zooming is just scaling. The backing store can be updated asynchronously, thus making the user interaction decoupled from the complexity of the rendering.

Moving to a higher ninja level, the backing store can be tiled. Instead of just one giant snapshot of the rendering output, it is broken down to small tiles, say 128x128 pixels. The nice thing is because each tile can be mapped as a texture in the GPU, e.g. via glTexImage2D. Drawing each textured tile is also a (tasty) piece of cake, GL_QUAD with glBindTexture.

Another common use-case for tiling is for online maps. You probably use it every day without realizing it in Google Maps, OpenStreetMap, or other similar services. In this case, the reason is to use tiles is mainly to ease the network aspect. Instead of sending a huge image representing the area seen by the user in the viewport, actually lots of small images are transported and stitched together by the client code in the web browser.

Here is an illustration of the concept. The border of each tile is emphasized. The faded area is what you don't see (outside the viewport). Of course every time you pan and zoom, new fresh tiles are fetched so as to cover the viewport as much as possible.

When I started to use the first generation iPhone years ago, I realized that the browser (or rather, its WebKit implementation) uses the very similar trick. Instead of drawing the web page straight to the screen, it uses a tiled backing store. Zooming (via pinching) becomes really cheap, it's a matter of scaling up and down. Flicking is the same case, translating textures does not bother any mobile GPU that much.

Every iOS users know that if you manage to beat the browser and flick fast enough, it tries to catch up and fills the screen as fast as possible but every now and then you'll see some sort of checkerboard pattern. That is actually the placeholder for tiles which are not ready yet.

Since all the geeks out there likely better understand the technique with a piece of code, I'll not waste more paragraphs and present you this week's X2 example: full-featured implementation of tiled backing store in < 500 lines of Qt and C++. You can get the code from the usual X2 git repository, look under graphics/backingstore. When you compile and launch it, use mouse dragging to pan around and mouse wheel to zoom in/out. For the impatient, see the following 50-second screencast (or watch directly on YouTube):

For this particular trick, what you render actually does not matter much (it could be anything). To simplify the code, I do not use WebKit and instead just focus on SVG rendering, in particular of that famous Tiger head. The code should be pretty self-explanatory, especially for the TextureBuffer class, but here is some random note for your pleasure.

At the beginning, every tile is invalid (=0). Every time the program needs to draw a tile, it checks first if the tile is valid or not. If yes, it substitutes it with the checkerboard pattern instead (also called the default texture) and triggers an asynchronous update process. During the update, the program looks for the most important tile which needs to be updated (usually the one closes to the viewport center). What is a tile update? It's the actual rendering of the SVG, clipped exactly to the rectangular bounding box represented by the tile, into a texture.

To show the mix-n-match, I actually use Qt built-in software rasterizer to draw the SVG. That demonstrates that, even though each tile is essentially an OpenGL texture, you are not forced to use OpenGL to prepare the tile itself. This is essentially mixing rasterization done by the CPU with the texture management handled by the GPU.

As I mentioned before, panning is a matter of adjusting the translation offset. Zooming is tricky, it involves scaling up (or down) the textures appropriately. At the same time, it also triggers an asynchronous refresh. The refresh function is nothing but to reset all the tiles to invalid again, which in turns would update each one by one. This gives the following effect (illustrated in the screenshot below). If suddenly you zoom in, you would see pixelated rendering (left). After a certain refresh delay, the tile update makes the rendering crisp again (right).

Because we still need to have the outdated tiles scaled up/down (those pixelated ones), we have to keep them around for a while until the refresh process is completed. This is why there is another texture buffer called the secondary background buffer. Rest assured, when none of the tiles in the background buffer is needed anymore, the buffer is flushed.

If you really want to follow the update and refresh, try to uncomment the debug compiler define. Beside showing the individual tiles better, that flag would also intentionally slows down both update and refresh so your eyes can have more time to trace them.

BTW how would you determine the tile dimension in pixels? Unfortunately this can vary from one hardware to another. Ideally it's not too small because you'd enjoy the penalty of logical overdraw. If it's too large, you might not be progressive enough. Trial and error, that can be your enlightenment process.

Being an example, this program has a lot of simplifications. First of all, usually you want the tile update to take place in a separate thread, and probably updating few tiles at once. With a proper thread affinity, this helps improving the overall perceptive smoothness. Also, in case you know upfront that it does not impact the performance that much, using texture filtering (instead of just GL_NEAREST) for the scaling would give a better zooming illusion.

You might also see that I decided not to use the tile cache approach in the texture buffer. This is again done for simplicity. The continuous pruning of unused textures ensures that we actually don't grow the textures and kill the GPU. If you really insist on the absolutely minimal amount of overdraw and texture usage, then go for a slightly complicated cache system.

Since I'm lazy, the example is using Open GL and quad drawing. If you want to run it on a mobile platform, you have patch it so that it works with Open GL ES. In all cases, converting it to use vertex and texture arrays is likely a wise initial step. While you are there, hook the touch events so you can also do the pinch-to-zoom effect.

If you are brave enough, here is another nice final finish (as suggested by Nicolas of InfoVis and PhiloGL fame). When you zoom in, the tiles in the center are prioritized. However, when you zoom out, the tiles nearby the viewport border should get the first priority, in order to fill the viewport as fast as possible.

Progressive rendering via a tiled backing store is the easiest way to take advantage of graphics processor. It's of course just one form, probably the simplest one, of hardware acceleration.

your webkit port is special (just like every other port)

2011-06-10T10:07:00.002+02:00

One of the most often question I got, "Since browser Foo and browser Bar are using the same WebKit engine, why do I get different feature set?".

Let's step aside a bit. Boeing 747, a very popular airliner, uses Pratt & Whitney JT9D engine. So does Airbus A310. Do you expect both planes to have the same flight characteristics? Surely not, there are other bazillion factors which decide how that big piece of metal actually flies. In fact, you would not expect A310-certified pilot to just jump into 747 cockpit and land it.

(Aviation fans, please forgive me if the above analogy is an oversimplification).

WebKit, as a web rendering engine, is designed to use a lot of (semi)abstract interfaces. These interfaces obviously require (surprise) some implementation. Example of such interfaces are network stack, mouse + key handling, thread system, disk access, memory management, graphics pipeline, etc.

What is the popular reference to WebKit is usually Apple's own flavor of WebKit which runs on Mac OS X (the first and the original WebKit library). As you can guess, the various interfaces are implemented using different native libraries on Mac OS X, mostly centered around CoreFoundation. For example, if you specify a flat colored button with specific border radius, well WebKit knows where and how to draw that button. However, the final actual responsibility of drawing the button (as pixels on the user's monitor) falls into CoreGraphics.

With time, WebKit was "ported" into different platform, both desktop and mobile. Such flavor is often called "WebKit port". For Safari Windows, Apple themselves also ported WebKit to run on Windows, using the Windows version of its (limited implementation of) CoreFoundation library.

Beside that, there were many other "ports" as well (see the full list). Via its Chrome browser (and the Chromium sister project), Google has created and continues to maintain its Chromium port. There is also WebKitGtk which is based on Gtk+. Nokia (through Trolltech, which it acquired) maintains the Qt port of WebKit, popular as its QtWebKit module.

(This explains why any beginner scream like "Help! I can't build WebKit on platform FooBar" would likely get an instant reply "Which port are you trying to build?").

Consider QtWebKit, it's even possible (through customized QNetworkAccessManager, thanks to Qt network modularity) to hook a different network backend. This is for example what is being done for KDEWebKit module so that it becomes the Qt port of WebKit which actually uses KDE libraries to access the network.

If we come back to the rounded button example, again the real drawing is carried out in the actual graphics library used by the said WebKit port. Here is a simplified diagram that shows the mapping:

GraphicsContext is the interface. All other code inside WebKit will not "speak" directly to e.g. CoreGraphics on Mac. In the above rounded button example, it will call GraphicsContext's fillRoundedRect() function.

There are various implementation of GraphicsContext, depending on the port. For Qt, you can see how it is done in GraphicsContextQt.cpp file.

Should you know a little bit about graphics, you would realize that there are different methods and algorithms to rasterize a filled rounded rectangle. A certain approach is to convert it to a fill polygon, another one is to scanline-convert the rounded corner directly. A fully GPU-based system may prefer working with tessellated triangle strips, or even with shader. Even the antialiasing level defines the outcome, too.

In short, different graphic stacks with different algorithm may not produce the same result down to the exact pixel colors. It all depends various factors, including the complexity of the drawing itself.

Now the same concept applies to other interfaces. For example, there is no HTTP stack inside WebKit code base. All network-aware code calls specific function to get resources off the server, post some data, etc. However, the actual implementation is in system libraries. Thus, don't bother trying to find SSL code inside WebKit.

This gets us to this question, "If browser X is using WebKit, why it does not have feature Z?". You may be able to deduce the reason. Imagine a certain graphic stack which glues GraphicsContext for that platform does not implement fillRoundedRect() function, what would happen? Yes, your rounded button suddenly becomes a square button.

As a matter of fact, when someone ports WebKit to a new platform, she will need to implement all these interfaces one by one. Until it is complete, of course not everything would work 100% and most likely only the basics are there. That should feel like putting a jet engine into an airframe that can't fly yet.

"Can we have one de-facto graphics stack that powers WebKit so we always have pixel-perfect rendering expectation?" Technically yes, but practically no. In fact, while Boeing and Airbus may buy the same engine from Pratt & Whitney, they may not want to have the exact same landing gears. Everyone of us wants to be special. A certain system wants to use OpenGL ES, squeeze the best performance out of it and doesn't really care if the selling price goes up. Others want to sacrifice the speed, trim the silicon floor and make the device more affordable. More often, you just have to live with diversity.

And if you want to put aside all the differences, two WebKit ports of the same revision share tons of stuff, especially if they use the same JavaScript engine. They will parse HTML and CSS in the same way, produce the same DOM, yield the same render tree, have the same JavaScript host objects, and so on.

Thus, next time someone shouts "there is no two exact WebKit", you know the story behind it.

rectangular gradient

2011-06-06T08:43:00.003+02:00

Thorsten Zachmann, from Calligra (and previously KOffice) fame, asked me once on how to draw a different kind of gradient: a rectangular one. While Qt itself has built-in supports for linear, radial, and conical gradient types, apparently for office apps we may need more than that. In short, the goal is creating the following:

It turns out that this is not so difficult at all, about 50 lines of code. Check it out at the usual X2 repository and find it under graphics/rectgradient.

Basically it boils down to a two-step process, as illustrated below. The first one is easy, just create a linear gradient from the center going north and south. The second one is similar, but now we are going east and west and clip it to two triangles. Once we combined both, we get the rectangular gradient.

Have fun with the gradient!

on the story of browser names

2011-05-31T00:45:00.001+02:00

One of the early graphical web browser that got really popular was Mosaic, developed at National Center for Supercomputing Applications (NCSA). Some folks from the team, along with SGI founder Jim Clark, decided that it's worth a venture and formed a company, originally called Mosaic Communication and then later renamed to Netscape Communication.

Netscape's flagship desktop product was a much more advanced web browser than Mosaic. Jamie Zawinski coined the name "Mozilla", as it was supposed to be Mosaic Killer (Mozilla = Mosaic + Godzilla). At the later stage, the final browser was widely known as Netscape Navigator. For browsing the web, obviously you need a navigator.

Parallel to that, another company called Spyglass licensed the technology from NCSA and produced a web browser, Spyglass Mosaic. It is fun to see the same theme here (probably even slightly coincidental), typical Hollywood movies always portray the naval ship's navigator using his spyglass for some sort of observations.

Then came along Microsoft. It licensed Spyglass Mosaic, called it Internet Explorer, and distributed with Windows. The browser war has just started. I mean of course, the name war. Why would you stop at navigating (and using spyglass) if you can continue exploring?

On the other side of the planet, KDE slowly emerged as the attractive supplement to the otherwise boring Unix desktop. Internet technologies became the centerpiece of the early version of KDE, thus its developers grew a set of applications from e-mail program, newsgroup reader, IRC client, and (surprise) a web browser. There was no free-software-friendly modern and capable web rendering engine back then, thus a bunch of brave young hackers initiated the adventure of (re)writing one, under the name KHTML (which was itself a replacement of the original attempt, khtmlw).

From this KDE camp, the ultimate web browser (which actually could serve other tasks as well, e.g. file manager and document viewer) was popular as Konqueror (indeed, those were the days where KDE stuff was named K-this or K-that). History showed how Age of Discovery was not about navigation and exploration only. After all, who would not want to repeat the glory of "I came, I saw, I conquered"?

When Apple decided that it must give the best browsing experience for Mac (and could not just rely on Microsoft for its Internet Explorer), they took KHTML, ported it to Mac, improved it, and later released it as an open-source project called WebKit. Apple's proprietary web browser, which is powered by WebKit (till today), was announced by Steve Jobs as Safari. Already conquered a land? Might as well enjoy it with a little bit of safari and collect exotic pictures. Shall we?

Just like in your favorite comic books, the world is however multiverse. Netscape lost the browser war, Mozilla became an open-source project and its Firefox browser (formerly Firebird, and formerly Phoenix) remains as the icon of freedom, independence, and community. Opera, originally a Telenor research project, was something that came all the way from Norway, has loyal followers and remains dominant in the embedded space. Google even joined the fun and launched WebKit-based Chrome (and Chromium). All these three are excellent web browsers, they just don't have the names which fit the story of navigation, exploration, and so on.

As the closing, here is a side twist. In its early WebKit days, how did Apple engineers name the code branch of its ported Konqueror's KHTML? Alexander.

meego conf 2011 impressions

2011-05-29T01:54:00.001+02:00

It's a mixed feeling. Personally it was (always) fun to meet my former coworkers from Qt, Nokia and other KDE folks and catch up and exchange tech gossips. I am also excited to get to know MeeGo team from Intel side as well. The conference itself is professionally organized. The Hacker Lounge idea is perfect, a basement to hang out 24 hours with free cold drinks, lots of games (from fussball to pingpong), superfast and reliable WiFi, and of course a bunch of comfy couches. Hyatt Regency itself proves to be a really really nice venue from such a developer conference.

The three-day program was packed with tons of sessions, anything from Qt 5, Wayland, Scene Graph, Media and IVI, and various other BoFs. Lots of exciting new technologies coming to the next version of MeeGo! Oh BTW, the releases will be every 6 months, expect MeeGo 1.3 in October 2011, along with its experimental Wayland support.

From the device-give-away perspective, Intel threw a lot of ExoPC tablets (flashed with MeeGo 1.2 preview), as part of its AppUp program. I got one for a while, it's really easy to port your existing Qt apps using its SDK (but that's a separate blog post).

But that's about it. LG was supposed to showcase its MeeGo-based LG GW990 (based on Intel Moorestown). There was even rumor that LG has also a tablet product, instead of only just a smartphone. And of course Nokia has its own N9 phone in the pipeline. None of this happened.

When I remember back at Maemo Summit 2009 in Amsterdam, there was an accelerated momentum just because Nokia gave N900 to everyone. It was a top-of-the-line phone at that time, I still even use it for various demos. Back then I was still with Nokia and after all these years, it's not funny to see that everyone is still using it. It's fine and dandy to have millions of cars using MeeGo for its infotainment, smart TVs based on MeeGo, and so on. A refresh in this smartphone party however would have made a much more dramatic impact with respect to the momentum in the development community.

Seems I still need to wait until I can use a MeeGo phone as my primary phone. Meanwhile, I'll stick with ExoPC tablet to learn various bits of MeeGo. And hopefully nothing would exhaust my patience.

meego conf 2011

2011-05-22T11:15:00.004+02:00

It's MeeGo time! 2011 conference will be held in Hyatt Regency, San Francisco.

The complete program has been published. For topics related to Qt (among others), check what Thiago listed. In particular, of course yours truly be there, talking about Hybrid Apps (Native + Web) using WebKit.

If you will be around, see you there!

tango papa echo, charlie golf kilo

2011-04-28T01:22:00.005+02:00

Currently stranded at TPE. Few minutes before leaving SFO I managed to tag 1.1.0 release for PhantomJS (lesson learned: never attempt a release few hours before boarding). Thanks to Ivan and Alessandro, few source tarballs and binaries are now ready.

It's been hectic days. 2011 WebKit Contributors Meeting was just over, it was fantastic and I got to meet and talk to a lot of WebKit rockstars. Parallel to that, my fellow brave Sencha lads finally unleashed The Quattro!

Next stop, also the final destination: CGK. Bracing for the impact of reverse culture shock...

camp kde 2011

2011-04-23T02:57:00.001+02:00

Camp KDE 2011 was a fabulous experience. First of all, there is definitely something with me and Camp KDE. The previous one was in San Diego and at that time I was there working for Qualcomm. This year it is San Francisco, right after I moved to the Bay Area.

Videos of the sessions have been published. I contributed two talks there, one is about the (usual) graphics stuff with Qt (video, slides). The other one is a series of demos of web technologies (video, slides).

There are some interview videos as well. If you watch Wade and me, you can spot a little guy there. Pay attention to his shirt :)

The venue can't be better, it's in the center of Japantown. Even better, the weekend after is the Cherry Blossom Festival.

Since I don't live in a big city anymore, it's also fascinating to be able to spot a cozy cafe right between all the big buildings. Right in Japantown, we found YakiniQ which serves a must-try sweet potato latte!

All in all, it was a blast for me. Beside catching up with the people I met before, finally I got to meet folks I only know through our online interaction.

Kudos to the Camp KDE organizers! See you in 2012.

camp kde in 2 weeks

2011-03-19T07:25:00.000+01:00

My first Camp KDE experience was when it was held in San Diego, which was also interesting since at that time, I just moved there.

Just like the planets align themselves, apparent my move to the Bay Area is matched with this year Camp KDE in San Francisco. This time, it is co-located with Linux Foundation Collaboration Summit. For more info, just check the official site: camp.kde.org.

The schedule for the tracks has been finalized, there will be various talks around KDE on Mobile, PIM, and of course Qt. I myself will have two presentations: Introduction to QtWebKit and Efficient Graphics with Qt: Beautiful and Blazing Fast.

See you there!

SenchaCon 2010

2011-03-12T17:47:00.001+01:00

At the last successful, sold-out Sencha Conference 2010, I did two introductory talks about JavaScript and WebKit, mainly targeted for web application developers. Since a few weeks ago, the videos for these talks have been available for you to watch.

JavaScript Engines: Under the Hood is 10,000-foot overview on how a typical JavaScript engine works. Watch it below or at vimeo.com/18783283, with the accompanying slides at http://slidesha.re/gGx9aA.

The other talk Compiling and Optimizing Your Own Browser with WebKit (vimeo.com/18780399 for the video, http://slidesha.re/fPSvXX for the slide deck), mostly showing few tricks you can leverage to understand how your web applications work. For example, by using QtWebKit and capturing all the drawing commands and the corresponding timestamp, it is very easy to have a slow-motion rendering of your web page. As I showed it in the talk, it is even possible to go back in time, i.e. rendering your web page backwards.

Many other videos from SenchaCon 2010 have been published as well. Make sure you check them out.

Enjoy!

PhantomJS meets CoffeeScript

2011-03-11T16:56:00.000+01:00

I did something related to CoffeeScript before, namely simple command-line compiler. For those who are not aware of CoffeeScript, it's basically (from Wikipedia) JavaScript with "syntactic sugar inspired by Ruby and Python".

On the hand, surprisingly PhantomJS generates more interest than I ever imagined before (with over 240 watching its repository), prompting me not to abandon it too soon :) In fact, I decided to dump my tought on its roadmap since more and more people are willing to help.

My secret feature, which is not secret anymore, for the upcoming 1.1 release is to incorporate the CoffeeScript compiler so that PhantomJS scripts can be written in CoffeeScript. Since the intention of PhantomJS is for various scripting purpose utilizing headless QtWebKit, this is a perfect match.

Gone are the curly braces...

vim: fast file navigation with Command-T

2011-02-22T19:17:00.001+01:00

Judging from the hits, my blog post on lightning-fast project navigation in vim seems to be still popular. While the Project script is still my favorite these days, especially when dealing with hundreds of files, let me show you here another gem: Command-T script.

Similar to Command-T in TextMate, basically this Command-T script allows quick and incremental search for files. This works very well. The official site for Command-T has several good screencasts which demonstrate how to install and set it up.

Manual installation is fairly simple. In fact, if you use Janus (which what I strongly do recommend these days for vim lovers), you are already set.

Command-T's documentation is quite extensive, make sure you read it. For the impatient, here are three important tidbits.

(1) Command-T requires vim with Ruby support. One way to find this is:

vim --version | grep '\+ruby'

(2) The default binding is Leader-t. For MacVim (or other GUI-based vim on Mac) and you'd like to have it on your Command-t (or D-T, in vim's terminology), just insert the following in your .vimrc:

  if has("gui_macvim")
    macmenu &File.New\ Tab key=
    map  :CommandT
  endif

(3) If you like to open the selected file in a new tab, hit Ctrl+T instead of just Enter.

One side note: if you have MacVim but don't have the mvim shortcut, add this to your .profile (or .bash_profile):

alias mvim='/Applications/MacVim.app/Contents/MacOS/Vim -g'

This way, you can launch MacVim from terminal, e.g. mvim code.js.

And in case you still want to use TextMate, why don't you check out TextMate2 instead?

color wheel on Canvas

2011-02-21T17:16:00.000+01:00

While I played with HSV pie and color wheel before, usually I just use the excellent Qt graphics stack to try out various things. This days, I lean towards using web technologies and for that purpose, HTML Canvas suits me just fine. With PhantomJS, I even got the result rendered as PNG image.

The new example I added to PhantomJS is colorwheel.js which produces the above screenshot. The entire script code is as follows (if some parts look cryptic, read about HSL and HSV color space):

if (phantom.state.length === 0) {
    phantom.state = 1;
    phantom.viewportSize = { width: 400, height : 400 };
    phantom.content = '<html><body><canvas id="surface">' +
        '</canvas></body></html>';
} else {
    var el = document.getElementById('surface'),
        context = el.getContext('2d'),
        width = window.innerWidth,
        height = window.innerHeight,
        cx = width / 2,
        cy = height / 2,
        radius = width  / 2.3,
        imageData,
        pixels,
        hue, sat, value,
        i = 0, x, y, rx, ry, d,
        f, g, p, u, v, w, rgb;

    el.width = width;
    el.height = height;
    imageData = context.createImageData(width, height);
    pixels = imageData.data;

    for (y = 0; y < height; y = y + 1) {
        for (x = 0; x < width; x = x + 1, i = i + 4) {
            rx = x - cx;
            ry = y - cy;
            d = rx * rx + ry * ry;
            if (d < radius * radius) {
                hue = 6 * (Math.atan2(ry, rx) + Math.PI) / (2 * Math.PI);
                sat = Math.sqrt(d) / radius;
                g = Math.floor(hue);
                f = hue - g;
                u = 255 * (1 - sat);
                v = 255 * (1 - sat * f);
                w = 255 * (1 - sat * (1 - f));
                pixels[i] = [255, v, u, u, w, 255, 255][g];
                pixels[i + 1] = [w, 255, 255, v, u, u, w][g];
                pixels[i + 2] = [u, u, w, 255, 255, v, u][g];
                pixels[i + 3] = 255;
            }
        }
    }

    context.putImageData(imageData, 0, 0);
    document.body.style.backgroundColor = 'white';
    document.body.style.margin = '0px';

    phantom.render('colorwheel.png');
    phantom.exit();
}

Beside the above example, there are few other things which you'll get in the upcoming PhantomJS 1.1 release, among others support for Unix shebang, file upload for form submission, disable/enable images loading and plugins, as well as support for QUnit integration.

virtual globe in the browser

2011-02-04T06:43:00.003+01:00

Latest stable version of Chrome 9 now has built-in support for WebGL. Hopefully this would increase the amount of people trying out various cool 3-D stuff, from the infamous Aquarium demo to the fancy Jelly Fish animation, and many others.

What excites me is the following: WebGL Earth, a free and open-source implementation of a virtual globe using WebGL. The live demo supports showing the map tiles from OpenStreetMap, MapQuest, and Bing. Just awesome!

PhantomJS: minimalistic headless WebKit-based JavaScript-driven tool

2011-01-23T07:07:00.001+01:00

PhantomJS is a headless WebKit packaged as a JavaScript-driven tool. It can be used in command-line utilities which requires web stack, or even as the basis for testing rich web application. It uses WebKit in a headless mode, so you get access to the real native and fast implementation (not a simulated environment) of various standards such as DOM, CSS selector, Canvas, SVG, and many others.

The project page contains a bunch of examples, from easy ones to some more complicated uses. Feel free to contribute more examples!

Let's look at one of the examples, the page rasterizer (yes, it's only 16 lines!):

if (phantom.state.length === 0) {
    if (phantom.args.length !== 2) {
        console.log('Usage: rasterize.js URL filename');
        phantom.exit();
    } else {
        var address = phantom.args[0];
        phantom.state = 'rasterize';
        phantom.viewportSize = { width: 600, height: 600 };
        phantom.open(address);
    }
} else {
    var output = phantom.args[1];
    phantom.sleep(200);
    phantom.render(output);
    phantom.exit();
}

If I want to have the famous PostScript tiger from its SVG source, all I have to do is to run:

phantomjs rasterize.js http://ariya.github.com/svg/tiger.svg tiger.png

But static vector graphic is boring. Replacing the above with

phantomjs rasterize.js http://raphaeljs.com/polar-clock.html clock.png

gives me Polar Clock, one notable example from RaphaelJS.

Should you need to deal with JSONP, process XML, and integrate with YQL, that's all easily done. Again, refer to the various service integration examples. Let me show one example, which is actually my favorite:

if (phantom.state.length === 0) {
    var origin, dest;
    if (phantom.args.length < 2) {
        console.log('Usage: direction.js origin destination');
        console.log('Example: direction.js "San Diego" "Palo Alto"');
        phantom.exit(1);
    }
    origin = phantom.args[0];
    dest = phantom.args[1];
    phantom.state = origin + ' to ' + dest;
    phantom.open(encodeURI('http://maps.googleapis.com/maps/api/directions/xml?origin='
        + origin +  '&destination=' + dest + 
        '&units=imperial&mode=driving&sensor=false'));
} else {
    if (phantom.loadStatus === 'fail') {
        console.log('Unable to access network');
    } else {
        var steps;
        steps = phantom.content.match(/<html_instructions>(.*)<\/html_instructions>/ig);
        if (steps == null) {
            console.log('No data available for ' + phantom.state);
        } else {
            steps.forEach(function (ins) {
                ins = ins.replace(/\&lt;/ig, '<').replace(/\&gt;/ig, '>');
                ins = ins.replace(/\<div/ig, '\n<div');
                ins = ins.replace(/<.*?>/g, '');
                console.log(ins);
            });
        }
    }
    phantom.exit();
}

If I run it like the following:

phantomjs direction.js 'Redwood City' 'Sunnyvale'

what I got is the complete driving direction:

Head east on Broadway toward El Camino Real
Take the 1st left onto El Camino Real
Turn right at Whipple Ave
Slight right to merge onto US-101 S toward San Jose
Take exit 398B to merge onto CA-85 S toward Santa Cruz/Cupertino
Take exit 22A to merge onto CA-82 S/E El Camino Real toward Sunnyvale
Destination will be on the right

Map data ©2011 Google

Make sure you check out other examples, such as getting weather forecast conditions, finding pizza in New York, looking up approximate location based on IP address, pulling the list of seasonal food, displaying tweets, and many others.

Headless execution of any web content also enables fast unit testing. Obviously, the goal is not to replace comprehensive, cross-browser framework such as Selenium or Squish for Web. Rather, it serves a quick sanity check just before you check in some changes.

Since this can happen automatically and does not need to launch any browser, even better, you can hook the test so that it executes right before a commit and actually prevents the commit if any of the test fails. It is easily done using git via its hook support. This is something I have written at Sencha blog. It demonstrated precommit hook with Jasmine, but technically it can work with any test framework.

I have been working on and off on PhantomJS for the past few years. You may be already familiar with some of its inspiration (also involving headless WebKit): SVG rasterizer, page capture, visual Google, etc. Finally I managed to overcome my laziness, cleaned up the code, and published it for your pleasure. Obviously it's not a surprise if you find out that PhantomJS uses QtWebKit.

I got a few tasks for next PhantomJS version 1.1. You are encouraged to file bugs and feature requests in the said issue tracker.

Get it while it is hot!

command line CoffeeScript

2011-01-08T07:52:00.000+01:00

CoffeeScript seems to be picking up some momentum these days. No doubt, it is very valuable to help writing cleaner code.

The command-line choices to run CoffeeScript compiler right now are either using Rhino (jcoffeescript) or using NodeJS. While I love NodeJS, seems that it is an overkill to require the entire NodeJS stack/infrastructure/package manager to invoke CoffeeScript compiler.

The solution is to use V8, the powerful JavaScript engine, with a little binding so that it can access file system. This is exactly filejs, something I have shown before, e.g. to invoke JSLint from command line.

Combining filejs and CoffeeScript is terribly easy. Just follow these steps.

Note: filejs does not support Windows yet. Sorry.

First of all, if you have not done it, build filejs. Go to the X2 repository, it is under the javascript/filejs folder. Open the included README.TXT and follow the instructions on how to build V8 and filejs.

After you build it, copy both filejs executable and coffee.js to somewhere in your PATH. Usually I stash that kind of stuff in ~/bin and ensure that ~/bin is in my PATH.

Now get coffee-script.js (the CoffeeScript to JavaScript compiler) and store it somewhere, e.g. ~/bin again.

Create a new file called coffee, which has the following one-line content:

filejs ~/bin/coffee.js $1

Make that file executable and then save it to ~/bin (again).

Open coffee.js and modify the value of the compiler variable to point to your coffee-script.js. Note: this must use the absolute path name.

Now you can do the following:

coffee hello.coffee

If hello.coffee is your script written in CoffeeScript, the converted JavaScript version will be dumped to the standard output.

Feel free to tweak coffee.js so that it understands and passes various CoffeeScript compiler options!

Fun, isn't it?

X2 from Ofi Labs: wrap-up 2010

2011-01-01T06:00:00.001+01:00

It got started when I needed a new home for my examples. It has even a nice logo.

sensor

accelerometer viewer for Maemo 5 (Nokia N900).

bouncing ball, where the gravity affects the movement of the ball.

box of marbles, where the gravity affects a bunch of colored marbles.

combining accelerometer and network to do inter-device marbles transfer.

motion and orientation for web applications.

web-based version of marble box.

widgets

morphing clock, where the transition between the digital and analog version is a kind of morphing effect.

qpalette viewer so you know which color is which one.

graphics

fast approximation of Gaussian blur to create a blurry drop shadow.

command-line capture tool to save maps from OpenStreetMap, MapQuest and Ovi Maps.

simple tool to list all chunks inside a PNG image.

webkit & javascript

file processing, including using jslint, in command-line using JavaScript.

play Canvas-based game as normal desktop app.

offline, command line beautifier for JavaScript code, utilizing Qt Script.

another variant of the beautifier, this time using V8.

minimalistic editing widget for JavaScript code, with custom syntax highlighting.

white background is boring? just try some color inverted web pages.

detect the closest link to ease following it on a touch device.

Canvas pixel manipulation for plasma effect.

network

simple proxy server for HTTP, in 100 lines.

tracenet: trap all network requests+replies to show them with Speed Tracer.

filterproxy: another variant of the proxy server with added URL filtering feature.

motion vs orientation

2010-12-16T17:15:00.001+01:00

I already showed the use of device orientation in a fun game called Box of Marbles. Based on my experience trying out this API implementation, often it is easy to get confused by device motion vs device orientation. Thus, I created two web-based applications (using on Sencha Touch): Device Motion and Device Orientation. Each basically just visualizes the values of the data in a bunch of sliders:

You can find the code in the usual X2 repository, under the subdirectory javascript/devicemotion and javascript/deviceorientation, respectively. Obviously, the rest of Sencha Touch library is needed before you can deploy and run the examples. For the lazy, just run the live demo for Device Motion and Device Orientation (they support offline mode).

While right now only iOS 4.2 on iPhone/iPad/iPod Touch implements this API, I have a strong hope that Android (post Gingerbread) and Nokia (thanks to QtWebKit and Qt Mobility) will support this cool API in the near future. Well, at least I do plan to revive my Symbian setup to custom compile QtWebKit and test it on Nokia N8.

Side note: from my limited understanding, seems that both accelerometer and gyroscope are needed in order to supply the accurate data, much like in an inertial navigation system ("Inertial Phone", anyone?).

the art of repository access

2010-12-13T08:19:00.001+01:00

What will occur when a software team is working on a project? How to tackle the change control?

The first and foremost obvious approach is simply giving full access for everyone. This is what typically happens in a group of friends working together on a cool project, a school assignment, a short hackathon, an early prototype, or any other collaborative efforts.

While this approach is very democratic (all developers are created equal), it is not very scalable. It works on a small and agile team, mainly because everyone knows each other. Once the team grows beyond a certain limit, the overhead of the communication makes it impossible to continuously get a full picture of what is being work on by whom.

Usually this problem is minimized by having somebody responsible for each module, essentially putting some organizational hierarchy in the project. However, a slight problem in the communication (which happens quickly, we're talking about engineers here) is enough to provoke a situation where conflict occurs due to a certain check in which carries over the problems and bugs from one module to another (Law of Unintended Consequences).

Another approach, certainly an evolution from the first one, is limited commit access. This particularly works well if there is a dedicated army of maintainers, whose job is to review incoming patches, give feedback, check them in. Usually this approach is very beneficial for the new members of the team, because they can learn what works and what does not work (since they are indirectly guided by the maintainer).

Quality control is definitely easier since all patches will be always filtered. Limiting the damage due to a broken commit is also not difficult since the repository can be frozen while the disaster mitigation team carries out the work.

This approach however falls apart if there is not enough maintainers and/or the rate of submitted patches increases. The symptoms are easy to spot: patches stay far too long in the queue, a maintainer has no time to do his own development, bad patches sneak in due to the time pressure, etc.

Keep in mind that due to its implicit (often also explicit) social stratification, it is important to take into account what everyone thinks about the approach. There should not be someone who feels left behind because only certain chosen guardians have the ultimate privilege access the repository. When such a situation is not tackled early on, it would grow latently and explode at some point in the future.

If there is a worry like that, then another (slightly reversal) evolution is inevitable: full access to everyone, as long as the patch is reviewed. The gut of this approach is basically "Let's trust each other, but let's also watch each other's back". Thus, inherent code review becomes mandated as well. Everyone is free to check in his patch directly to the repository, as long as some other competent fellow has looked at it and gave the green light. In fact, this should be called "brotherhood repository access" except that it may sound too exclusive and mystical.

Sometimes the system is also setup as far as rejecting the commit (e.g. from the server-side) when the log does not contained something like Reviewed by: Joe Sixpack. This is of course not always necessary, it may even require a consensus from everyone, under the pretext of preventing accidental check in.

This last approach may still not work in some situations. For example, if the team is global and located in different time zones, then coordinating the review becomes challenging (distributed control system may alleviate the problem). When code review is not a encouraged culture, counterproductive dead lock can be depressing. Also, because it is based on mutual trust, it breaks down when some people do not play by the same rule. In short, the approach depends heavily on the strong and committed communication between the team members.

In the end, the repository access approach must be evaluated on a case by case basis. Of course, in some places, no approach will work to satisfy everyone. In that case, consider again that technology can't and won't solve every social problem.

What kind of repository access do you have in your group? Which one do you prefer and why?

ubiQt

2010-12-11T20:04:00.004+01:00

Since coming back from Qt Developer Days 2010 in San Francisco (more precisely in Burlingame, near SF airport), one thought really bothered my mind: "when will Qt become ubiquitous?".

Now, if you are active in the KDE and Qt community, this seems like a strange question. But ubiquitous means omnipresence, in particular for the whole developer community.

Flash back to ages ago. You wrote a cool Python script (could be also in Ruby, or Lua, pick your battle) to do FooBar, everyone you know was impressed, you wanted to share the love with the world and then some fellow hacker noticed, "That's cool, man. But I don't want to install Python, can you give me the executable?". What would you think?

The situation is similar with Qt these days. You write a nice Qt-based utility, running on different platforms, somebody spots it and the first thing he asks is "Where is the binary?"; never mind he has just grabbed and installed hundreds MB worth of utilities.

These days, when you are developing some software, the first thing you'd do on a fresh machine is to download and install a gazillion tools (Xcode with iOS SDK weighs around 3.8 GB). With the initiative towards open governance, I hope Nokia and others will be able to steward Qt in that direction: being included in the de-facto standard of development tool sets. The most interesting challenge is to overcome the doubt, "Why do I need to install some Nokia SDK to use your cool app?".

calligra

2010-12-07T18:07:00.001+01:00

Long live Calligra Suite!

Box of Marbles meets Device Orientation

2010-11-27T01:02:00.002+01:00

Remember my Box of Marble demo?. It was a native Qt/C++ application running on Maemo-powered Nokia N900.

With the wave of DeviceOrientation Event Specification implementation, now it's possible to have the demo as a web app, running just inside the web browser. In fact, this is what you can see from this demo: ariya.github.com/js/marblebox.

Right now, it works with iPhone or iPad or iPod Touch running the new iOS 4.2, due to the brand new DeviceMotionEvent support. If you own a MacBook with accelerometer and you use Google Chrome, that works as well (tilt your laptop to see the gravity effect). But fear not, with the recent support to hook the acceleration data from Qt Mobilty to QtWebKit, don't be shocked if the next Nokia phone with built-in QtWebKit sports this feature as well.

While my previous demo uses Chipmunk physics engine, this web version relies on box2d-js instead, mostly because I am too lazy to port Chipmunk to JavaScript and also I want to try something else. If you are curious about the code, check the usual X2 repository under javascript/marblebox directory. Enjoy!

V8 + jslint + vim

2010-11-10T05:18:00.001+01:00

Usually, you would want to use scripting solution, e.g. Perl/Python/whatever, to manipulate file contents. Somehow, it's also fun to use JavaScript instead. After I did the V8-based jsbeautify, I was doing V8-based jslint as well. Then I realized, let's just extend it to be generic. With API loosely modelled after CommonJS, filejs was born. Find it in the usual X2 repository under the javascript/filejs. There are two examples so far, ROT-13 and line counter. If you write more examples, feel free to pass them to me!

Of course, the twist is: use filejs to drive a command-line jslint. This is one way to do it. First build filejs (follow the instructions in the included README), then place the executable in your PATH. Create a simple shell script, which contains one line filejs /path/to/filejs/jslint.js $1 and make it executable. That's it! If you also store this shell script in your PATH, then you just need to run:

jslint source-code.js

If you use vim, jslint can be combined with Quickfix. First of all, associate *.js with the tool by putting this line in your personal .vimrc:

au FileType javascript set makeprg=jslint\ %

Now open a JavaScript file and run :make (or whatever shortcut you map this into), which will launch jslint with the current file. After a while, use :cope to open the quickfix little window, move up and down, and press Enter to bring you back to the main editor and set the cursor at the specified problem. Use standard window navigation, e.g. Ctrl+W W to switch to quickfix pane again. Check the quickfix documentation for details. All in all, you may want to map mostly used commands to some shortcuts for faster access.

Note that since this is dynamic JavaScript, rather than matching errorformat, technically I just tweaked the tool to spit something similar to what a C/C++ compiler would do. Also, if you need different jslint options, simply edit the invocation to suit your needs.

It's been a while since I blogged about vim. The last one was about the project plugin, which is surprisingly still quite popular. Hopefully this one also teaches you a trick or two, especially if you work a lot with JavaScript code.

Note 1: It does not work on Windows yet. No idea if I would have the time to do it, patch is welcomed.

Note 2: This is not a replacement for NodeJS, nor would it grow to include more functions.

Note 3: For the sake of completeness, let me mention that there are already other countless solutions for command-line jslint (using Rhino, SpiderMonkey, JSC, etc), even with vim integration.

chunks inside PNG

2010-11-09T07:14:00.001+01:00

Here is a few minutes of hack which would hopefully help someone else:

pngchunks logo.png
File size: 5967 byte(s)

Offset    Chunk    Size
      8    IHDR      13
     33    iCCP    2627
   2672    IDAT    3271
   5955    IEND       0

Useful to quickly find out if we can further strip unnecessary chunks from the PNG image. Or even as a warming up before you fire your favorite hex viewer/editor.

It's pure, stand-alone, self-contained C code (i.e. compile using gcc -o pngchunks pngchunks.c), available at the usual X2 repository, find it under graphics/pngchunks.

the fun of remote JavaScript debugging

2010-11-05T20:44:00.005+01:00

Remote feature of Web Inspector, whereby you use an instance of WebKit and debug another one in different machine, is one important feature (that is being worked on) of WebKit I can't wait to start using. Till that day, remote debugging is always a challenge. There are of course assorted workarounds out there. At Sencha we decide to have and share with you a little tool that helps JavaScript remote debugging. It is available in two flavors: GUI-based (using Qt obviously) and Python-based for scripts and automation. Right now, the target is Android WebKit but there is no reason why we should not march to other platforms as well (e.g. QtWebKit on Symbian and MeeGo). Get it while it's hot!

morphing clock revisited

2010-10-28T22:22:00.005+02:00

If you can't see the clock below, visit the stand alone demo.

Technically, I had wanted to wait till it can display the actual time and perhaps ask some designer to polish it. But rather than keeping this lunch-break hack in a safe deposit box forever, let me just release this ugly clock transition (since everyone is on the animation frenzy). So far it works only if you use latest version of Safari, Chrome, Opera, Firefox. Canvas and/or VML fallback (which sadly will require JavaScript) for other browser are in the pipeline.

Basically it is another version of my previous morphing clock attempt (see the video). The principle is the same, except now I modified that C++ program to also output an HTML which renders the clock as above.

Also it morphs only once. Reload the page to enjoy the morphing once more. Maybe I'll find the time (in another lunch break) to toggle the two clock modes. Update: morphing from/to both analog and digital mode is implemented.

Like I said, it's a creepy, machine-generated, ugly looking clock. You've been warned, but feel free to write me anything (should you need to vent your anger).

Look ma, no JavaScript!

2010-10-27T07:07:00.002+02:00

Take a look at the following CSS 3 demo. No Flash. No JavaScript. No image.

Hungry for more? Enjoy some other demos created using Sencha Animator.

Qt Developer Days, Bay Area Mobile meetup

2010-10-18T19:24:00.001+02:00

We heard that Munich Qt Developer Days was an awesome event, which is why I look forward to the San Francisco Qt Developer Days, which will be held November 1-3.

Now, if you are from outside US, drop me an email in case you fancy some quality tea/coffee time. Even better, on the next day (November 4), Sencha will host the first Meet the Sencha Team, the first Bay Area Mobile meetup. Our team will give an overview of Sencha and the mobile technologies we are developing. RSVP and drop by!

sencha touch hackathon

2010-10-14T20:37:00.001+02:00

Are you in the Bay Area? Don't miss our Sencha Touch Hackathon this Saturday (Oct 16) in our Palo Alto Office, 1pm to 5pm. There will be food and drinks as well.

Drop by and upgrade your Sencha Touch kungfu!

yet another command-line JavaScript beautifier (based on V8)

2010-10-14T07:48:00.002+02:00

While we're still on the topic of JavaScript, I took the afternoon break to create a command-line runner for jsbeautifier.org . In case you miss it, I did the similar thing using Qt Script module. This time however, the command-line tool uses and exploits Google V8 instead.

If you update your clone of js-beautify repository, check out the fresh v8 subdirectory. I also mirror the code in the usual X2 repository, under the javascript/jsbeautify8 subdirectory. Also, grok the included README.txt first.

Update: I added --overwrite option which (surprise!) will overwrite the original source file (and thus, use it with care). This is useful if you invoke the beautifier tool from your text editor. Nicolas also implemented various settings support so you can specify the indentation level, braces placement, etc.

This is probably the last thing the world needs now, but hey, it was a fun break.

on JavaScript engines

2010-10-13T18:33:00.001+02:00

If you are using a modern browser, likely you already have the (arguably) most widely deployed scripting environment: JavaScript engine (or ECMAScript, if you insist). There are many things you can do with it (just look at tons of cool web apps out there). However, since it is contained in the browser, there are also things the embedded JavaScript engine can not do for you.

If you are using KDE, you also have two excellent JavaScript engines: KJS and Qt Script. You can embed either of them (i.e. KJSEmbed) and make your application scriptable. In a not-so-strange twist, they both relate (distantly) to each other via JavaScriptCore, WebKit's default JavaScript engine, because long time ago Apple forked KJS and used it as the base for JavaScriptCore, and Qt Script (for version 4.6 and 4.7) also uses JavaScriptCore as the back-end.

If you are interested in learning, using, and/or dissecting other open-source JavaScript engines, have a look at JavaScript Engines: How to Compile Them I wrote for our Sencha blog, which covers Mozilla's SpiderMonkey, WebKit's JavaScriptCore, and Google V8. The instructions should work on the supported platforms, including ARM, in case (just like me) you want to have and carry around every JavaScript engines in this planet on your Maemo-powered Nokia N900. That is fun.

As the closing, just remember, "Ask not what the JavaScript engine can do for you — ask what you can do for the JavaScript engine".

cinquantamila

2010-10-08T19:35:00.003+02:00

'nuff said, head to www.sencha.com/contest!

color inversion for web pages

2010-10-06T09:47:00.001+02:00

Something I worked on during my last few weeks with Qualcomm was color inversion for the web browser in Android. The patch was then integrated by Enrico (see the diff) because I switched job.

Later on this feature was also pulled into CyanogenMod. Thus, if you are running CyanogenMod 6 on your shiny Android device, you can try this feature already! In the web browser, just pick the Settings menu and then scroll a bit until you see a checkbox for Invert Color. You should get something like the captured screens below:

The idea behind this is to reduce the power consumption of Organic LED display, because on mostly-white web page, it hungrily grabs to 3x more power compared to LCD. This is similar to Jeff's trick of applying color filter in SurfaceFlinger.

Doing it at the user-space level gives one advantage: we can keep the embedded images non-inverted. Blindly inverting the entire screen would result in web pages look rather funky, especially those new sites with photos to accompany the articles. Of course, this hackish approach will not work 100%, (hint: double XOR?) since the web designer likely never intend the page to be color inverted. However it seems to work most of the time, at least with pages which do not have ueberartistic look-and-feel.

Faithful followers of my blog know that I already played with the color inversion ages ago, in the form of giving night mode appearance for QWebView. Thus, it happened that in one afternoon break I played with QtWebKit to do something similar to this selective color inversion.

Now, in the case of Android WebKit, the effect was rather easy to achieve. This is because Skia's SkCanvas is basically an interface which can be subclassed easily, while none of the functions in QPainter is virtual. The trick using Skia was to use a proxy canvas (a slight variation of Skia's built-in SkProxyCanvas) which I invented for this purpose but somehow also useful for another feature.

For QtWebKit however, we need to tweak it with some QPaintEngine voodoo. Check out the code at the usual X2 repository, find it under webkit/nightcapture (it still has some rooms for improvement, left as exercises for the adventurous readers). For simplicity, I made it as capturing tool so you need to pass a URL and the output filename. Unless you do something wrong, expect to get something like this:

The trick is the same as my approach for the Android patch: invert the colors of each image before drawing it, at the end invert the entire viewport. This seems like slow, but it's the best compromise I found out working with most sites. Note how we skip inverting any brush pixmap as usually brush is for the tiled background (and thus we want to keep it that way, i.e. not inverted). You can do some fancy magic with clipping and whatnot, but I doubt the end result is much better. Again, this whole stuff is a hack anyway and there will be always corner cases which will not work, no matter what approach you pick, thus there is no need to make it more complicated that it should be.

Just like they say, we code for life, i.e. the battery life.

quattroporte and hummingbird

2010-10-03T21:41:00.001+02:00

Fermi problem of the day, anyone?

Assume there is this large organization, say with over ten thousands employees. For some (legal) reason, each employee needs to write down what she has been doing for the week, usually by Friday afternoon. Some record everything in details (down to the hours), some prefer to just express "8 hours doing FooBar" for every working day.

Since this is 2010, usually the system is web-based. To prevent abuse, some login/credential check and anti-bot system are also in place. It is often unheard that people use their beloved smartphones to do the job.

Let us say it takes one minute to do this. With a really conservative $30/hour rate, this is worth 50 cents. Assume ten thousands do that, so it's worth $5,000. This translates to $260,000 per year.

Of course this is just a gross approximation. It does not even include/exclude the extra time the managers spend to double-check their staff's entries, typically (much) higher hourly rates, non-working (also known as vacation time), wasted effort to setup (and forget) the reminders, occasional weekend shock at times you forgot it, and other similar (intangible) overhead. Or if you just need 5 seconds to accomplish the task. But you get the idea.

Now, $260,000 is a lot of money. You can buy a decent house in San Diego. Or two shiny Maserati Quattroporte. Or several hundreds Hummingbird-powered phones. Or, in some parts of the world, access to fresh water for the entire city all year long.

Surely for a quarter million per year some smart people will figure something out?

invade & destroy

2010-09-24T07:52:00.001+02:00

Developing games using HTML5 Canvas and JavaScript is simply the future. Something classic like Egor Balishev's RGB Invader, an entry in the 10K Apart, is usually my favorite.

If for some reasons (which I would not elaborate in this post) you need to deploy the game as a desktop or a mobile application, using Canvas and JavaScript gives another advantage: just package it with WebKit, for example QtWebKit if you do not mind using Qt.

However, since usually it is just about Canvas, often it is enough to run the game logic with a JavaScript interpreter and use some Canvas implementation for the display. This was something that I demonstrated before, i.e. running the Monster Evolution demo via JavaScriptCore and V8. Applying the same technique, and adjusting the shim so that it layers whatever RGB Invader requires, gives the following:

Basically it is using Qt Script (also in attempt to popularize it even more) along with a mix of C++/QObject and JavaScript machinery to fool the game code to think it's running in a browser environment. It was a nice afternoon fun project.

The code is in the X2 repository, find it under the javascript/invader directory. Get it while it's hot, and save our Earth!

offline, command-line beautifier for JavaScript code

2010-09-20T20:28:00.002+02:00

There are many different ways to autoformat JavaScript code, my favorite is always jsbeautifier.org. Apparently, you can also use it locally without a web browser since it supports running it with Rhino.

It took me just few minutes to reimplement the same functionality, but using Qt Script, the fantastic ECMAScript support built into Qt.

The code is in the usual X2 repository, under the javascript/jsbeautify. Note that this is just a convenient mirror as Einar's js-beautify repository already includes this Qt Script driver.

With the rise of server-side JavaScript and desktop-esque JavaScript tools, I hope Qt Script will become more popular. It is sadly still "underrated" right now.

san francisco

2010-09-18T17:05:00.003+02:00

I have been in Qt Developer Days twice, in the previous two years. This year I am still going there, but only the San Francisco event, for the first time as a participant (as opposed to as a speaker). I'll bring other new engineers at Sencha, too.

Since I live in the Bay Area these days, feel free to email me should you want to meet for coffee/lunch/dinner. See you there!

geocoding based on IP address

2010-09-13T22:17:00.001+02:00

Given an IP address, there are different ways to obtain the approximate location: online web service or offline database. It is far from perfect, but it is very useful to give some initial guess before locking into GPS signals or using WiFi-based tracking.

Today's example for X2 is actually an old code lying around which does the former: relying on IpInfoDB web service to guess where your computer is. Combined with the previous example, MapSnap, the guessed position is used to center the shown map (OpenStreetMap, of course).

Of course, as with other examples, it works fine on Maemo-powered Nokia N900 as well. Feel free to give it a try on Symbian or other supported Qt platforms.

The code is found in the usual X2 repository, under the sensor/ipgeocoder subdirectory.

For completeness' sake, let me mention also that Matteo did something similar, using hostip.info and Google Maps via QtWebKit.

capture OpenStreetMap and MapQuest (and Ovi Maps)

2010-09-13T03:52:00.001+02:00

Over a year ago, I showed how to render OpenStreetMap on your Qt application. While there were few follow-ups after that, I never found some time to clean it up. But worry no more, here is one OpenStreetMap-related example (at roughly 250 lines of code) I just made public, freshly available from X2 repository under the graphics/mapsnap. It's operated from command line, basically you pass the center latitude and longitude, zoom level (1..17, with 17 is the detailed, street-level zoom), output filename (e.g. mymap.png), and the size.

The following image is the result of running:

mapsnap 37.45108 -122.15917 12 sample.png 600 450

The tool will grab the tiles, more precisely Mapnik-rendered tile images, and stitch them for the final outcome:

Few weeks ago I wrote about MapQuest embracing OpenStreetMap. One positive impact of this awesome move is that you can show OpenStreetMap-based MapQuest tiles in your application. It's just the same map data but rendered using different styles. Running the previous example but with MapQuest flavor gives the following:

When checking out Qt Mobility after its 1.1 TP announcement, I found out that its Maps/Navigation API actually uses the tile data from Ovi Maps. If you read the source code, the tile server encoding scheme is pretty obvious. Since it is also based on Mercator projection, changing this MapSnap example to use tiles from Ovi Maps is a breeze: it's a matter of setting up the correct tileURL.

I'm curious about the terms of such Ovi Maps tile usage, though. Although it is more or less "exposed" via Qt Mobility and there is no API key whatsoever, surely it should not mean the tiles are free for everyone, should it? As a comparison, Google Static Maps API specifically allows only browser-based application. Feel free to share your investigation!

minimalistic JavaScript editing widget

2010-09-11T16:57:00.001+02:00

In the spirit of clean-up-and-publish, here is another code example of X2: a subclass of QPlainTextEdit which acts as a nice and minimalistic JavaScript editor. Basically it just adds a sidebar for the line number and a syntax highlighter. Thanks to QPlainTextEdit and QSyntaxHighlighter, this editing widget is quite performant. At just about 500 lines, think about it as another example on how to use these two classes.

It does support specifying different colors so you can have funky color scheme if you want:

The widget is BSD licensed. Find it out in the X2 repository under the javascript/jsedit subdirectory.

It does not have fancy features such as code folding or autocomplete (not sure I would have time to add them, so patches are welcomed!), but if you want feature packed editor, use QScintilla, KDE's Kate, Qt Creator's editor, or grab something else or even write your own.

Eid Mubarak

2010-09-10T08:30:00.000+02:00

Happy Eid Al-Fitr to all!

the art of blurring the shadow

2010-09-09T08:53:00.001+02:00

In the recent weeks, sporadically I have been working on QtWebKit to fix the missing blur support for Canvas and CSS shadow (see the tracking bug 34479). This brings some good memory; before I left Nokia, I was involved in prototyping the special effect stuff, both for the low-level (non-public) QPixmapFilter and the high-level QGraphicsEffect.

Usually blurring drop shadow for a shape is a very typical: grab the alpha channel of the shape, apply the blur filter, and finally tint it with the intended shadow color. The last step is trivial using the SourceIn composition mode. The blur filter is supposed to follow the SVG specification on feGaussianBlur. The said specification mentions one possible way to approximate the perfect Gaussian blur: three successive box blurs.

Since QPixmapFilter is private anyway and QGraphicsEffect is not suitable for this task, an attempt to implement what the specification outlines became my hobby for a few evenings. This is basically what emerges as the shadow blur implementation in QtWebKit. For the sake of code reuse, I pushed the implementation to the X2 repository under the graphics/shadowblur subdirectory. The shadowBlur() function itself is BSD licensed, there is a demo program included for your pleasure:

Performance-wise, the code is as satisfactory (for such a portable implementation). Another good approach is to use stack blur, adopted among others by AGG. KHTML notably uses stack blur for its Canvas shadow blur support. Exponential blur is known to be very fast, although quality-wise it deviates farther from a true Gaussian one. The portable, raster version of QGraphicsDropShadowEffect (via QPixmapFilter) is using this algorithm.

For this particular use-case, namely blurring the shadow (as opposed to generic blur filter), I'm surprised that the Gaussian blur approximation is not necessary slower than KHTML's stack blur approach or even QGraphicsDropShadowEffect's exponential blur. I did a quick benchmark, measuring the time spent creating the shadow for two images (horizontal 149x13 and vertical 13x149) for different radii (small 4px and medium 17px), on a Core i7 machine. The outcome is shown in the following bar chart. The result was from several runs, with the overall confidence level observed to make sure it was statistically sound. Still, take it with a pinch of salt.

With a very large blur radius, e.g. 50, stack blur performance deteriorates quickly, probably because the pre-loop initial setup. Exponential blur is pretty much radius-agnostic, although I can't find cases where it wins against my shadow blur code (which is BTW only 60 lines). Larger source images would highlight the performance difference even more. Maybe I am doing something wrong, or maybe that's how it is. In any case, I insert a low-priority entry in my (already infinite) TODO list: spend some quality evenings with callgrind and examine those blur implementations.

On mobile devices however the situation is reversed. The approximated Gaussian blur is consistently slower, around 10%, compared to exponential or stack blur, when tested on 600 MHz Cortex A8-powered Nokia N900. Due to slower memory speed and smaller cache, the repetitive memory access for the successive box blurs cancels its fast processing benefit. Hopefully the 1 GHz generation CPU (like in Nokia N8) and improved memory bus will eliminate this minor slow down.

Anyway, in all cases, just like Andreas mentioned, now you can enjoy the fancy Parcycle demo in its full glory:

Sencha Touch and N900

2010-09-08T07:32:00.000+02:00

Being part of the awesome Sencha Team, I did shoot a quick attempt to run Sencha Touch, more precisely its Kitchen Sink demo, on Maemo-powered Nokia N900. Since Sencha Touch targets WebKit but Maemo default browser is Gecko/Firefox-based, I crafted a mini launcher which wraps Sencha Touch in QtWebKit. The screenshots below serve as the proof:

Most of the stuff works just fine. There are some minor issues and performance problems, but I worry not. With the amazing amount of optimizations Qt+Nokia put in place for Qt 4.7 and QtWebKit 2.x, writing applications for Maemo/MeeGo will be fun (again).

box of marbles redux

2010-08-18T10:11:00.001+02:00

If you enjoy the box of marbles demo, now we extend it to include some basic network support. The premise is simple, look at this short video first (or watch on YouTube):

The code to handle the physics of the marbles remains the same, i.e. we just use Chipmunk physics engine. However, I added a simple feature to transfer marbles from one place to another. To keep it simple, it is done using UDP. The Qt network module supports UDP quite well, making the datagram code short and readable.

The intended use of this example is easy: run the desktop version and then run the mobile version (tested with Nokia N900). Each instance should find each other and start communicating. Again, we simplify the situation here and handle only 2 (two) peers. To facilitate troubleshooting, the application window title will contain the network address information, if the two peers are fully connected. To avoid complicated setup, discovery is carried out automagically through broadcast. This makes such a demo runs only under the same subnet, which is not a big deal.

It would have been much more fun doing the transfer between two smartphones (instead of a phone and my laptop). However, I own only one Nokia N900. Hint: I will not refuse your donation of Nokia N8 or (preferably) MeeGo-powered Nokia N9 (i.e. the N900's successor, whatever the real name is).

If you want to give it a try, head to the usual X2 repository and look at demo/marblenet subdirectory. Again, have the patient to follow the README file before you start compiling it.

Of course, feel free to extend this example to suit your (more wild) fantasy!

adventure to the land of green tea

2010-08-11T09:16:00.001+02:00

Now I work for Sencha, the company behind the leading JavaScript frameworks such as Sencha Touch, Ext JS, Ext GWT, Ext Designer, jQTouch, Raphaël, Connect, which empower developers to create, deploy and optimize application using web-standard technologies (HTML5, CSS, JavaScript). Beside, it's a hot startup to work for.

quattro cinque

2010-08-11T08:13:00.000+02:00

It's released!

box of marbles

2010-08-10T08:02:00.001+02:00

The next logical step after simple bouncing ball example is something which uses a real, full-featured physics engine. Box2D is usually the popular choice. Combining Box2D with Qt has been done by many people, recently demonstrated before by Andreas and Thorbjørn. I decided to pick something else, i.e. Chipmunk physics engine.

Because this is supposed to an example, I tried to make it as simple as possible (you'd be able to extend it, once you grab the basics). Basically we have a box full of colorful marbles (yes, I loved to play marbles when I was a kid, there was not any PlayStation back then). A mouse click, or a screen tap, will generated a new marble with a random color. If you run the example on Nokia N900, you can control how the marbles move and hit each other by tilting and shaking the phone.

Check the code yourself at the usual X2 repository under the demo/marblebox subdirectory. Make sure you open and follow the instructions in the included README file.

For a sneak peek, just watch this video (or enjoy on YouTube).

There is still a sequel to this marble box. And still with Chipmunk.

what is it with this froyo obsession

2010-08-10T07:57:00.000+02:00

Eclair still rocks :)

bouncing ball with accelerometer on N900

2010-08-09T03:14:00.000+02:00

First of all, I apologize for my laziness in updating X2 with new code example. I have actually written quite a number of interesting examples, some of which have even been shown back in March, during my talk at Bossa Conference 10, though I did not find the time to clean up and polish them. Although I'd face new challenges in my upcoming adventure, I am quite confident I will reach the designated rate of new X2 example fortnightly.

Now let's focus on the newest example: a minor modification to the previous accelerometer code on Nokia N900 [1]. There has been confusion with my statement there: put this function is a separate thread. This is the alternative to a non-blocking D-Bus code. The main goal of course is not to be able to get faster acceleration values per second, it is only to prevent your code from being blocked by the synchronous D-Bus call.

Rather than just updating the code with the threaded version, I also added some high-school Newtonian physics. Instead of boring sliders, you'll get a ball which moves based on the acceleration [2], i.e. it follows the gravity if you keep your N900 straight.

Here is the obligatory video. Or watch directly on YouTube.

The code can be found in the X2 repository under the sensor/bouncingball subdirectory.

In the next installment, we will integrate a third-party real physics engine and make the example more alive!

[1] Another approach is to use Qt Mobility. However, QTMOBILITY-381 (which was spawn from QTMOBILITY-326) has not been solved yet (as of today).
[2] The overall math is not too scientifically correct, but hey, I always need to leave out something, for your homework :P

even LOST has its season finale

2010-08-06T11:06:00.002+02:00

Today is my last day at Qualcomm.

It still feels like yesterday when I set foot in this continent, started some fun with X2, enjoyed Brazil, had this meet-up in Cupertino, did little exploration around San Diego, and then got blessed with a cute boy. Time really flies. Now it's already time to move on, again (though this time without a geeky resignation).

I will miss Snapdragon (the pictured HTC EVO is powered by the said platform). Or any other dragons.

Those who are annoyed by a certain obsession of mine probably can guess where I'm heading to. In the grand mission of inspiring and pushing developers to write better and more exciting applications, a particular productivity barrier needs to be broken. And I dropped enough (subtle) hints in my previous blog entries already.

Stay tuned.

crowdsourcing for the win

2010-08-02T08:04:00.000+02:00

In some news, MapQuest embraces OpenStreetMap, launches the maps site at open.mapquest.co.uk using the data from OpenStreetMap, as well as sets aside $1 million funding to improve the maps situation in USA. Let's see if other maps services will follow.

var Adam = new Child(Ariya);

2010-07-16T06:21:00.001+02:00

> Adam.prototype
Human
> Adam.timestamp
1279148700
> Adam.length
50.17
> Adam.weight
3.4
> Adam.health
Checking.... Good
> Adam.mother.health
Checking... Good
> Adam.father.status
"Happy"

faster quaternion multiplication

2010-07-09T16:47:00.001+02:00

Sweet memories, it was fun to derive it.

Faster here however must be taken with a grain of salt as the new code is not always guaranteed to be better pipelined.

And of course, it's trivial to beat this generic C code with architecture-specific hand-rolled assembly.

git show cbc22908
commit cbc229081a9df67a577b4bea61ad6aac52d470cb
Author: Ariya Hidayat 
Date:   Tue Jun 30 11:18:03 2009 +0200

    Faster quaternion multiplications.
    
    Use the known factorization trick to speed-up quaternion multiplication.
    Now we need only 9 floating-point multiplications, instead of 16 (but
    at the cost of extra additions and subtractions).
    
    Callgrind shows that the function now takes 299 instructions instead of
    318 instructions, which is not a big win. However I assume the speed-up
    has a better effect for mobile CPU, where multiplications are more
    expensive.
    
    Reviewed-by: Rhys Weatherley

diff --git a/src/gui/math3d/qquaternion.h b/src/gui/math3d/qquaternion.h
index 55c871d..9a1b590 100644
--- a/src/gui/math3d/qquaternion.h
+++ b/src/gui/math3d/qquaternion.h
@@ -198,24 +198,17 @@ inline QQuaternion &QQuaternion::operator*=(qreal factor)
 
 inline const QQuaternion operator*(const QQuaternion &q1, const QQuaternion& q2)
 {
-    // Algorithm from:
-    // http://www.j3d.org/matrix_faq/matrfaq_latest.html#Q53
-    float x = q1.wp * q2.xp +
-                    q1.xp * q2.wp +
-                    q1.yp * q2.zp -
-                    q1.zp * q2.yp;
-    float y = q1.wp * q2.yp +
-                    q1.yp * q2.wp +
-                    q1.zp * q2.xp -
-                    q1.xp * q2.zp;
-    float z = q1.wp * q2.zp +
-                    q1.zp * q2.wp +
-                    q1.xp * q2.yp -
-                    q1.yp * q2.xp;
-    float w = q1.wp * q2.wp -
-                    q1.xp * q2.xp -
-                    q1.yp * q2.yp -
-                    q1.zp * q2.zp;
+    float ww = (q1.zp + q1.xp) * (q2.xp + q2.yp);
+    float yy = (q1.wp - q1.yp) * (q2.wp + q2.zp);
+    float zz = (q1.wp + q1.yp) * (q2.wp - q2.zp);
+    float xx = ww + yy + zz;
+    float qq = 0.5 * (xx + (q1.zp - q1.xp) * (q2.xp - q2.yp));
+
+    float w = qq - ww + (q1.zp - q1.yp) * (q2.yp - q2.zp);
+    float x = qq - xx + (q1.xp + q1.wp) * (q2.xp + q2.wp);
+    float y = qq - yy + (q1.wp - q1.xp) * (q2.yp + q2.zp);
+    float z = qq - zz + (q1.zp + q1.yp) * (q2.wp - q2.xp);
+
     return QQuaternion(w, x, y, z, 1);
 }

proxy server with filtering feature

2010-06-21T09:35:00.002+02:00

Beside exploring San Diego, I had done some coding intermittently only. My apology if I do not update X2 with fresh new examples often enough.

Having said that, here is one network-related example: a minor tweak to the previous example of Qt-based proxy server. Basically it adds a minimalistic URL filtering support, in the form of blacklisting certain URLs which start with some predefined strings. The code is available in the usual place, X2 repository, under the directory network/filterproxy.

While major browsers support some variants of content blocking, be it via an extension like AdBlock or as a feature built-in into the browser itself, this new filterproxy should work with any browser that supports proxy. Alas, I did not bother to implement an AdBlock-compatible rule system because it would complicate the code. Again, consider this is a proof of concept only. A challenging exercise would be to fully support the most known subscription filters.

It is unheard that content filtering can dramatically improve your browsing experience. Because it cuts the bandwidth usage, it does translate to lower cost for those who are not lucky enough to get unlimited data plan. But most importantly, throwing garbage out of the web pages definitely speeds up the page loading. For this filterproxy example, I did a very unscientific benchmark and test it with Detik.com news site (now you get the answer why the included blacklist.txt contains only some basic advertisement-laden sites). The screenshots below (click to enlarge) show the unfiltered version (left) and the filtered version (right). Notice also the whopping 40% of bandwith saving!

My promise was to post two variations from that simple proxy example. This counts as one of them, and when the time allows me to clean-up to the other, you'll know it. Stay tuned and happy proxying!

spring-to-summer: photo blog

2010-06-21T07:36:00.000+02:00

Since I've not been blogging for a while, let me do a post on some pictures (plus the stories) instead.

On a weekend, Balboa Park is a very nice attraction. Rather than explaining it in details, I suggest to just drop the park a visit. Beside a lot of different types of museum, there is also this Japanese Friendship Garden. A small cafe there, the Tea Pavillion, is a very nice place to relax and enjoy the surrounding. They serve sencha and other types of tea. Hungry? Get a rice bowl:

If you are more a beach person instead, then there is a plenty of choices, for example Silver Strand Beach. It is rather small, but it is always a nice spot to enjoy the sunset.

When I was at Google IO, I took some pictures of the large overhang banners because I wanted to test the 8 megapixel camera of HTC EVO 4G that Google gave away (see more in the complete set):

Getting a fantastic gift for the Father's day? Thinking of something for the next Mother's Day? What about a beautiful pendant (get one from LuShae Jewelry) like what my other better half elegantly captured below?

google io 2010

2010-05-18T08:54:00.002+02:00

In few hours, I am scheduled to fly to San Francisco, bracing for the impact of Google I/O 2010!

Quake and WebGL

2010-05-18T08:29:00.002+02:00

While I'm there, let me just quickly blog about it. Using the developer version of Chromium on OpenSUSE, I just run it with the following arguments:

/usr/bin/chromium --enable-webgl --in-process-webgl

and then I have WebGL at my fingertip. You can test it with some O3D samples (the pool one is pretty cool).

In fact, just go ahead and play Quake II at http://playwebgl.com/games/quake-2-webgl/.

I got bad FPS because I own a cheap laptop (8 FPS is more than what I expect from a $330 box). Obviously you can get 25 FPS or more on a much better machine!

QNetworkAccessManager, tracenet, Speed Tracer

2010-05-15T21:10:00.001+02:00

Just like Rich's trick with QNetworkAccessManager, I have done something similar which I call tracenet (around 150 lines of code). Though I have committed this example to X2 some time ago, only now I have the chance to blog about it.

The idea is to subclass QNetworkAccessManager and reimplement its createRequest method so that we can keep track all the network responses and replies. This is useful for your network-based application, or even for e.g. QtWebKit. As a matter of fact, the tracenet example captures the network traffic as you load a URL into a web page.

Now, the next step is how to visualize the result. While it's certainly possible to craft a Qt-based fancy GUI for this (maybe using Qt Quick?), let's think outside the box. Unless you live in a cave, I am sure you are aware that there is this nice tool called Speed Tracer, part of GWT, an extension for Google Chrome or Chromium. For this purpose, we won't use the live profiling feature of Speed Tracer, but rather its ability to visualize network requests and replies (with nice timeline and so on). All we have to do is to carefully spit some JSON-formatted data that match the Speed Tracer data dump format. And that is exactly what tracenet does!

The screenshot below gives an exemplary result from running tracenet on my Nokia N900 when it accesses New York Times front website, a notoriously complicated web page. All I did was to execute "tracenet > nytimes.htm", transfer back the HTML file to the laptop and then open it with Chromium on OpenSUSE, click on "Network (resources)" line, and voila! You can click on each entry to get detailed timing info, use zoom in/out, and many other features of Speed Tracer. Refer to some tutorials if you are new to Speed Tracer.

If you want some follow-up and challenging exercise, try to split Speed Tracer code so that the pure GWT-part can run on any browser. Then you can just package it with QtWebKit and use it to show the outcome of all your network sniffing. Have fun!

vittoria: tiger in color

2010-05-09T21:40:00.003+02:00

Continuing from the saga I started some time ago, at least now I got to the point where it's rendered anti-aliased in full color:

Stay tuned, I'd clean-up and release the code soon-ish.

vector graphics, tiger in wireframe

2010-05-06T17:23:00.004+02:00

At the risk of starting another yet-will-be-unmaintained project, sometime ago I decided to continue learning about graphics stuff in my spare time. I will not announce it of course until its code is better for public consumption. However, I really can't contain my excitement when it reaches an important milestone:

This sounds like childish, but as a graphics n00b, the above screenshot means a lot to me.

Stay tuned!

cupertino

2010-04-10T08:07:00.002+02:00

Tomorrow, we (a bunch of Qualcomm folks working on WebKit) will go up north. We'll be at Apple HQ in Cupertino for the WebKit contributors meeting. I look forward to meeting all the great WebKit hackers (again) face-to-face!

simple http proxy server in 100 lines

2010-04-05T00:31:00.002+02:00

I guess a simple proxy server should have been an example in Qt Network module. What I mean of course a real proxy server based on Qt, not about using a proxy server via QNetworkProxy class. After all, there are other more complex examples like the torrent client and Google suggest (yeah, blame me for the latter). As a matter of fact, there are e.g. a gazillion proxy servers written in Python.

Look no more. I posted an example in the X2 repository, under the directory network/webproxy. The code is written for clarity and not for performance. In fact, fancy error handling is even omitted (minimalism rulez!). There is no support for pipelining, or in-memory cache, or per-connection thread, or even secure connection via https. I leave them as exercises for the curious readers.

If we focus on things which work, here they are: asynchronous socket handling, different request methods (GET/PUT/POST/HEAD), persistent connection aka keep alive, and even Flash and HTML 5 video streaming. Yes, you can still watch YouTube or Vimeo if you hook your browser into this little proxy. For a few hours of hacking and 92 lines of code (as reported by sloccount) and certain ways to abuse QObject, I could not be more happier.

There will be two other offspring examples based on this one. So stay tuned. Meanwhile let's just hope nobody would ask me for a colorful UML diagram for this snippet...

PS: Special thanks to Jan Erik for his feedback and review.

multiples of 3 or 5

2010-03-26T01:37:00.001+01:00

One day Helder showed me Project Euler, a collection of interesting math problems to be solved using computer programs.

I took a look at the first problem: find the sum of all the multiples of 3 or 5 below 1000. Getting the linear time solution was trivial, the constant time solution was also not hard. However, I could not help it, I continued by applying some obfuscation voodoo and came up with this answer (of course, constant time as well):

return "uncopyrightable"[n % 15] - 'a' + 44 - "xzoxy}pge]_LAKD"[n% 15] +
'A' - (!(n % 15)) * 9 + 15 * ((n / 15) * (4 + ("aaabbcdddeffggg"[n % 15] - 'a')) +
(n / 15) * (n / 15 - 1) * 7 / 2);

How did a word ("uncopyrightable") end up in that solution? Believe me, it was (a lot of) fun! :)

morphing clock

2010-03-20T14:45:00.002+01:00

As I promised before, here is a fresh X2 example. Those who attended Bossa Conference 10 and followed my talk are lucky to have seen it for the first time there. In fact, this example is ridiculously simple that I am not surprised at all if somebody has done this ages ago.

Let's start with a screen capture, or two:

Basically the above shows an analog and digital clock running on my Nokia N900, hardly a shock. However, the fun part is when you switch the clock from analog to digital and vice versa. Check out this video, or watch directly on YouTube, courtesy of Signor Portale from Nokia/Qt, showing the morphing on Nokia 5800:

The trick is simple. Actually it's not even generic enough, meaning that you can't morph from an arbitrary path to another arbitrary path. However, for this clock use-case, the gross approximation is good enough. First, we need to convert the path into a polygon, which is done easily via QPainterPath::toFillPolygon() function. Then any line segment in the polygon longer than a certain tolerance is further split into smaller segments. As I claimed above, the result is not perfect, i.e. it does not approximate the original path into line segments with equal length. But hey, it is good enough for this animation purpose (unless your user has ueberhuman eyes).

The target path needs to be sliced into segments as well. Since we have only two types, circle (for the analog clock frame) and solid block (for the hour and minute hands), it is easier to special-case both. The secret is to have the same number of segments as the source path. The following figure shows the digit '7' and a circle, each splitted to 28 line segments. Small dots indicate the start and end points of those segments. The animation is now a matter of doing tweening, or linear interpolation, between each segment.

The flaw of this trick is when the source path contains holes inside it, e.g. for digits like 0, 4, 6, 8, and 9. Again, we are cheating here for the sake of keeping the code simple, so I leave the code as it is. Doing a more advanced, better handling for those cases is left as a motivational exercise for the perfectionist readers. Another bonus puzzle: find out why 503 ms is the morphing time (hint: find the same number in Qt source tree).

The code is in the X2 repository, check the sub-directory widget/morphingclock. You need Qt 4.5 or later. It is not long at all (surprise!), sloccount reports 191 lines of code. A morphing-clock plasmoid is also underway, just be patient.

For the sake of completeness, let me mentioned Dali Clock (even in Canvas and JavaScript version) from the famous Jamie Zawinski (jwz). It is similar, however Dali Clock just morphs the digits of the digital clock.

Also, if you just prefer a normal (but old-fashioned!) digital clock with the flipping effect, check the digiflip example I did back then. You already have it if you install Qt 4.6 for Symbian.

Last but not least, I'd like to mention my "special thanks to Delta Airlines for such a long (but safe) flight to Brazil so I had the chance to write this example while I was bored", but then I was told by the Trolls that this kind of intro line can't be funny anymore.

new X2 logo

2010-03-11T17:36:00.001+01:00

I got few proposed designs after I announced X2 project back then. It is tough to pick the winner cause they are all very good. In the end, the one from Elvis Stansvik becomes the new official logo of X2:

Thank you to everyone who has sent me the logo design!

manaus and bossa conf

2010-03-08T19:45:00.004+01:00

Right now I am in Manaus, in the middle of the Amazon, Brazil. Good weather, beautiful nature. Fresh tropical rain, feels just like home.

Yes, I am here for the (legendary) Bossa Conference '10 from the awesome INdT folks. I had delivered my talk, Redefining Mobile Graphics Stack this morning. I used the chance to preview (and got feedback) some of upcoming graphics example for X2 from Ofi Labs (what's X2? read the explanation), even straight from my N900, so just watch its git repository in the next few weeks. BTW, Radeon HD 3200 of my new toy and TV output of N900 worked out-the-box with the projector.

It is also nice to meet few INdT guys I knew, and get to know new folks as well. Since a few Trolls are also here, I also catch up (and share more jokes) with them. Gosh, feels like ages since I left Oslo.

This is my first visit to Brazil. Looks like it won't be the last time!

n900 and its accelerometer

2010-03-05T06:24:00.003+01:00

There is a bunch of code out there (which can be copied and pasted) to grab the acceleration values from Nokia N900. Here I contribute one more, it's Qt-based and using the QtDBus module. The values in x, y, z will have the unit of G.

    QDBusConnection connection(QDBusConnection::systemBus());
    QDBusInterface interface("com.nokia.mce", "/com/nokia/icd", QString(), connection);
    QDBusPendingReply<QString, QString, QString, int, int, int> reply;
    reply = interface.asyncCall("get_device_orientation");
    reply.waitForFinished();
    x = static_cast<qreal>(reply.argumentAt<3>()) / 1000;
    y = static_cast<qreal>(reply.argumentAt<4>()) / 1000;
    z = static_cast<qreal>(reply.argumentAt<5>()) / 1000;

As usual, error checking is omitted (left as an exercise for the reader). Like Star Wars, there is also a reason I skip the first 3 QStrings. Debug it yourself to see what you would get. In addition, I found out that at most it would take 25 ms to grab all three values. It means, if you run your application at > 40 fps, then better put this function is a separate thread. Actually, consider that you don't want QDBusPendingReply::waitForFinished() to block your entire GUI, this is likely a good idea anyway.

For a full-version of an accelerometer tool, check out the X2 repository under the sub-directory sensor/accelview. Note that technically acceleration > 1 G is always possible, I clamp the values in this example to keep the UI simple.

(q)palette viewer

2010-02-28T02:08:00.001+01:00

Qt documentation mentions QPalette as the class that contains color groups, Active, Inactive, and Disabled, for each widget state. Knowing the color for many different color roles is important. For example, a style author might want to tweak the colors of each buttons depending on QPalette::Button, QPalette::ButtonText, QPalette::Highlight and likely play with the shades and the saturation. There are probably few different ways to get the RGB values of those colores, here I show one of them: using a small tool that display all the color roles for active, inactive and disabled states:

And here how it looks like on Nokia N900:

The code is in the X2 repository, check the sub-directory widget/palview. A possible exercise for the brave reader: allow the user to choose other color spaces such as HSL or HSV.

Have fun with the colors!

web browser and touch device: problem with links

2010-02-23T18:35:00.000+01:00

Time for X2 premier, like I promised before.

Like what every interface designer would tell you, you can't just reuse desktop user interface to your mobile version of the application and pray that the application will be useable. Here is an example. In a web browser designed for a mobile device armed with a touchscreen, the typical mapping the touch coordinate to the usual mouse event presents a problem because seems every screen has its own accuracy and precision problem. Sometimes it's hard trying to visit a link, merely because it is not possible to hit the link properly with your finger.

The solution seems to be quite (ridiculously) easy. Instead of trying to find what is exactly under your finger (point of contact with the screen), let's also probe the area in the nearby. If there is a link very close to it, then assume the user wants to go there, she just misses the link accidently by a few pixels. If there are multiple links, then pick the nearest one.

I have written a very short example, using Qt 4.6 (or later), based on QtWebKit, to demonstrate this workaround. Check the code in the X2 repository under the directory webkit/probelink. It might not work on web pages with multiple frames, but at least you got the basic idea. The chosen link is even highlighted before the browser loads it, just like in the screenshot above.

Next week, or the week after, let's see another simple example which implements something like Opera Fingertouch.

introducing X2

2010-02-21T15:18:00.002+01:00

I know the number of Qt experts out there is growing (like crazy). Still, I believe we should do more to help people master this great framework. I am aware that I might bore you with few Qt code examples I did last year or even the year before, but somehow I feel that I won't do no harm if I keep sharing new stuff I learn every now and then (especially since now I got a new toy). And maybe it's not too bad if I change this blog tagline to "don't code today what you can't share tomorrow" :)

Since I am not with Nokia/Qt anymore, I also left the Graphics Dojo corner behind. I decide to publish my new and upcoming Qt examples under a new moniker: X2 from Ofi Labs. The two Xs there stand technically for eXperiments and eXamples, though X2 only sounds cool (even if that X-Men movie would not exist) and I prefer it that way. The name "Ofi Labs" will require a longer explanation, which I rather not elaborate right now.

The git repository for X2 is at gitorious.org/ofi-labs/X2. In the next few days, watch this space for the first few examples.

Meanwhile, enjoy the logo. If you are an artist, feel free to propose a new and better logo!

distcc, VirtualBox, NAT

2010-02-20T21:09:00.001+01:00

The following scenario is quite typical. Your family member, spouse, or coworker has this fantastic, powerful, brand-new multicore machine which, for some reasons, has to run Windows or Mac OS X. On the other hand, you probably have some el-cheapo laptop which is also wonderful but it lacks the processing power to do heavy-duty build and compile. Now, what if you can exploit the other box for a distributed compile? Especially if the powerful box seems to be idle once a while, doing nothing.

Many of you already figure it out the solution: let's install Linux on a virtual machine and use tools like distcc or icecream. In fact, this is quite easy to do. I managed to find out the details, even if I have only little idea about network stuff.

Side note: I don't see why icecream would not work. But since I did try distcc, that's what I wrote below.

For the following explanation, refer to the above exemplary network setup. Basically I run virtualized openSUSE inside VirtualBox. You don't even need a full-blown graphical system, you can create a customized openSUSE installation (no X11 but with some development tools like make, gcc, g++, etc) using SUSE Studio.

First of all, we need to configure VirtualBox to do port forwarding. If you read the manual, you see that the default networking is NAT, which is what we use, along with extra forwarded ports. To do this, run the following on the command prompt (in your installation folder, e.g. C:\Program Files\Sun\VirtualBox for Windows, tweak for Mac OS X), changing openSUSE with the name of your virtual machine:

VBoxManage.exe setextradata "openSUSE" "VBoxInternal/Devices/pcnet/0/LUN#0/Config/distcc/HostPort" 3632
VBoxManage.exe setextradata "openSUSE" "VBoxInternal/Devices/pcnet/0/LUN#0/Config/distcc/GuestPort" 3632
VBoxManage.exe setextradata "openSUSE" "VBoxInternal/Devices/pcnet/0/LUN#0/Config/distcc/Protocol" TCP
VBoxManage.exe setextradata "openSUSE" "VBoxInternal/Devices/pcnet/0/LUN#0/Config/ssh/HostPort" 2222
VBoxManage.exe setextradata "openSUSE" "VBoxInternal/Devices/pcnet/0/LUN#0/Config/ssh/GuestPort" 22
VBoxManage.exe setextradata "openSUSE" "VBoxInternal/Devices/pcnet/0/LUN#0/Config/ssh/Protocol" TCP

The last 3 lines are not important for distcc itself, however it's quite handy since you will be able to ssh to the machine (on the port 2222, i.e. the forwarded one and not port 22) and start or stop distcc remotely.

Side note: I was told that bridged networking mode should work as well (even without the hassle of port forwarding). However, I did not manage to make it working in my setup.

In addition, tweak the settings of your virtual machine so you get more than one CPU cores. For example, on a quad-core machine, giving the virtualized openSUSE two or three cores might be better, considered if the host system does not run need all that burning power.

Next step is to install distcc both on the virtualized openSUSE (anjali) and your laptop (latika). The easiest way is to use the one click install feature, just go to software.opensuse.org, click on Package Search, type in distcc and press Enter and then install both distcc and distcc-server. To do it manually, add http://download.opensuse.org/repositories/home:/dbahi/openSUSE_11.2/ to your repositories and install using:

sudo zypper in distcc distcc-server

After that, on anjali, run the following (as normal user, no need to sudo/root):

/usr/sbin/distccd --daemon --allow 192.168.1.0/24

Now on your own machine, latika in the above example, set first where you want to distribute the compile:

export DISTCC_HOSTS='anjali,lzo'

If you want, do this in your .bashrc or shell startup script for your convenient.

Compiling and building a project is now as easy as replacing the plain make command with:

make -j4 CC=distcc CXX=distcc

For troubleshooting, run distccmon-text 3 (nice for static logging) or watch distccmon-text (useful for real-time view).

Supposed another machine, e.g. naina, wants to join the party, just do the same steps. Don't forget to adjust DISTCC_HOSTS so that the compile will be distributed also to naina.

That's it! For more info (I barely scratch the surface) and better optimization, refer to the manpage of distcc and distccd.

Now the (trivia) question is, the host that runs anjali, who do you think he is? :)

new laptop, free yourself!

2010-02-15T23:36:00.003+01:00

The other day, I couldn't resist buying the el-cheapo Athlon 1.6 GHz-powered Acer Aspire 5532 in BestBuy for $330. With its 15.6 inch screen, seems that it is quite a nice bargain. It comes (of course) with Windows 7 Home Premium, but after slapping openSUSE 11.2 DVD I got from the last Camp KDE (must be from Will, thanks dude!) and a bunch of keystrokes, a few hours later the machine happily runs the shiny KDE 4.4. Sound was not a problem, even WiFi was easy to get it working (hard to believe that after all these years, NetworkManager still does not work for me, maybe my bad karma). The included radeonhd driver is good enough for its Radeon HD 3200 (RS780M chipset), but for the sake of testing, I did install ATI fglrx ~~7.4~~ 10.1 and, voila, I got flawless KWin desktop effects. Even proprietary stuff like Opera, Skype, and Flash plugin faced no serious problem as well.

Time for some fun hacking! :)

Obligatory click-to-enlarge desktop snapshot follows:

camp kde: day two (sunday)

2010-01-18T03:11:00.000+01:00

Again, just track all the tweets and blogs to know what happens in Camp KDE in almost real-time. For more pictures, check out KDE Events Pool at Flickr.

In one of the talks today, Romain "Frankenstein" Pokrzywka showcased KDE 4 on Windows. Though he blogged about it recently, it is definitely interesting to see a live demo, especially things like Plasma running (and crashing, occasionally) on Windows, and that some apps are really usable already. Well, who knows? In the not so distant future, it is definitely easier to convince Window users like Joe Sixpack to start using KDE apps.

camp kde: day one (saturday)

2010-01-17T05:53:00.001+01:00

Showing up at this year's Camp KDE feels a bit weird. First of all, because I do not need to travel at all since I already moved to San Diego some time ago. In addition to that, while I was still with Nokia (Qt), usually I could only attend conferences only if I have something to present. It is a great relief not to worry about my own talks and just enjoy the event.

There were few talks today. As you can guess, you can pretty much follow them if you keep an eye on #campkde tweets and/or follow Planet KDE these days.

The keynote was from Professor Bourne, he had a presentation about open access to data, in particular in the field of science (in his example, pharmaceutical sciences), such as the initiatives with protein databank, Public Library of Science, SciVee. I fully agree with his opinions in this matter, especially since they resemble some of my observations when I was doing my graduate research years ago. In particular, "publish or perish" could potentially destroy the sharing spirit of researches. I do believe that competition is good, but I also do strongly believe that science is about sharing.

I hope more people will show up tomorrow. The sunset here is so fantastic, you just have to experience it yourself.

To be continued (to day 2).

"i" for innovate

2009-12-30T18:18:00.002+01:00

As I have hinted before, somehow I aimed to move to some sunny place in California. Well, lucky as we could be, after days of experiencing the transient stage (with tons of good and bad experiences, what a roller-coaster), we slowly settle in San Diego, (arguably) a beautiful place to live. The proof is the following picture, basically I can enjoy watching sunset from our balcony every day when the weather permits (it does usually).

Few weeks ago, I started a new position within Qualcomm Innovation Center Inc., specifically in the new Web Technologies team. This center is a wholly-owned subsidiary of Qualcomm, one of the top 10 semiconductor sales leaders last year. The official party line of Qualcomm Innovation Center is best understood by what our president, Rob Chandhok, has expressed once: focus on such important open source initiatives as Linux and Webkit, and on open source operating systems such as Symbian, Android and Chrome.

Of course, faithful followers of my blog can quickly point out that this whole thing is just a cover-up for the real motive: the strong desire to live in a perfect symmetry :)

In addition, to convince you that the alignment of the planet has been planned for this, surely you know (perfectly) where the upcoming Camp KDE will be held?

See you in 2 weeks. Happy 0x7da!

putu, kelepon, terang bulan

2009-11-28T12:22:00.000+01:00

While enjoying this vacation, I managed to steal few hours to do some fun coding. Nothing spectacular, but it yielded something I will surely share in the near future. However, since I am still in the mood of bombing the planet again, here is another post with food pictures.

Something else we were glad to taste during our extremely short visit to Bandung were Putu and Kelepon, typically sold at the price of 1 EUR for 25 pieces. They are basically rice cake filled with palm sugar and served with grated coconut. Putu is steamed, while kelepon is boiled. The latter is also colored using pandan leaves.

While sampling culinary specialties means that we do not cook quite often, when the opportunity presents itself, it is of course a good feeling to eat something home-made once a while. Here is one: Terang Bulan (literally: bright moon). It is some sort of pancake, very similar to Martabak except Terang Bulan is filled with sugar, sprinkles, condensed milk, cheese, and the likes. Hence, it is also known as Martabak Manis (literally: sweet Martabak), a term that is somehow I dislike (because language-wise it is unnecessary as there exists a good name for that and thus it extends and pollutes the meaning of Martabak with a very weak reason).

The recipe? Check what this lady has posted. Terang Bulan is sweet and healthy (reduce the amount of sugar if in doubt), it makes for a good snack in the afternoon.

Last but not least: Eid Mubarak to everyone!

parijs van java

2009-11-24T02:41:00.002+01:00

Somehow the wind finally leads me to Bandung, the place where I spent years studying at ITB. While still trying to absorb all the deja-vu sensations (last time I was here, when I left the place, was 6 years ago!), nothing beats having breakfast (and potentially also lunch and dinner later on) in one of those food stalls. Since I promised to write about my culinary excitement, here is one to pollute the planets (the aggregated blogs, not our blue marble): Kupat Tahu. Essentially it is fried tofu, bean sprouts, and lontong (compressed rice) served with peanut sauce and some crackers. That makes it for a good breakfast.

I will be in Bandung today and tomorrow, mostly just around the university. If you are around and want to have a chat, feel free to drop me an email!

english vs indonesian

2009-11-04T23:04:00.002+01:00

One thing which recently made it into my reverse-culture-shock impact list is the widespread use of incomprehensible (read: broken), mixed-language expressions, potentially due to many reasons (to name a few: innocent show-off, following the mainstream, or just trying to look more "educated"). It starts with an easy one, like denoting the printer cartridge types as "black" and "color", i.e. in English, although we have good Indonesian words for that ("hitam" and "warna", in case you can't recall). The worse part is yet to come, it kills me when someone starts to sprinkle English words in an otherwise perfect sentence, e.g. "tapi you mesti ngajak aku to follow your, ehm [can't find the English words], kegiatan, which is sebenarnya quite interesting". This wonderful fragment is ridiculously non-sense for both foreigners who never learned Indonesian and for my fellow countrymen who do not know English at all.

Of course it won't surprise you if I say that you can easily find flyers and other promotion materials exactly using the same pattern. Just today we found a state-sponsored, free Shopping & Travelling Guide booklet featuring dozens of pages with English headings. Again, the contents are written in Indonesian. This leads to a number of striking typos and mistakes, one of which is shown here:

I have nothing against foreign languages (I have my share by learning few of them), but I also still love my wonderful mother tongue, Bahasa Indonesia.

even QPainter has QPainter::end()

2009-10-22T12:26:00.001+02:00

I came to Trolltech (then became Qt Software, then Qt Development Framework) early last year, at the time when the Trolls were busy stabilizing Qt 4.4. I was assigned to work on QtWebKit, so right from Day 0, I did carry out my best patching skills and committed my burst fixes as fast as I could. Qt 4.4.0 was released shortly after, followed by 4.4.1, and the remaining 4.4.x series.

Summer was fun. I learned a lot about WebKit, git, development workflow, the art of backporting, and a lot of other stuff. Together with Samuel, we did resurrect Graphics Dojo. Ever since, I am sure you spotted a bunch of biweekly graphics and WebKit examples I posted: 27 examples this year and 12 examples last year. Autumn brought me to my first Qt Developer Days 2008, both in Munich and Redwood City. We also did a bit of tour to the east coast, back to around Mountain View, and most importantly I got to know the best juice in the world.

I completely forgot to blog about this, probably because it was not worth mentioning, but during this time I rightfully obtained my Ph.D degree (or rather the official Dr. -Ing). My 70-page dissertation is available for download, still I suggest reading the summary in the 8-page paper. FWIW, I passed with magna cum laude.

After the winter break (I did two trips to my home country), spring brought us the long-waited Qt 4.5 along with other blessings (LGPL, open repository, contribution model, S60 port). Qt for S60 was getting hot, I wrote a bunch of smaller examples, OpenStreetMap, ray casting, and some others, all of them showed up as new examples in Qt 4.6. After all, I am always thrilled to offer our valued customers some blue sky approaches and streamlined, breakthrough paradigm shifts so that they can better monetize their mission-critical, enterprise graphical applications in this quality-driven, business-focused Web 2.0 world :-)

It also meant the traveling time (for doing talks) started again for me. For a lowly code monkey like me, I am proud (on Nokia's behalf) that this year alone, I had delivered 5 (mostly successful) graphics-related presentations in open-source/developer conferences: Pycon Italia in Florence, LinuxTag in Berlin, and of course Akademy in Gran Canaria, Maemo Summit in Amsterdam and Qt Developer Days in Munich.

At this point, you can probably guess how it would end. Our last short, memorable vacation around Europe was enough hint. Yes, today is my last day in the office. Our flight back to Indonesia is due within few days. The parting is amicable and amiable. The Last Supper, for my (soon ex-) team mates has been served, too.

Spare the tears, follows is the actual resignation e-mail I sent to our internal mailing-list (the "Foul Stench Officer" refers to the durian incident back then). Last note: my e-mails ariya.hidayat@trolltech.com and ariya.hidayat@nokia.com will soon RIP.

Subject: Even QPainter has a QPainter::end() function
From: Ariya Hidayat <ariya.hidayat@trolltech.com>

After being involved in the affair of "connecting people" <insert the jingle here> for some time, I decided that it is the time to move on. If everything goes smoothly, then starting from November 1st (which is a good day, since November is the 11th Gregorian month and 11 is the first double-digit prime number) I would not work for QtSW anymore. Going through a lengthy discussion, my other (better) half and I finally came to a conclusion that Oslo, as beautiful as it is, is not really the place where we want to settle down, at least for the near future.

I still hesitate to definitely mention where I would be stationed by the end of this year. This is because many things depend on e.g. the visa process (as uncertain as the Schrödinger's cat), and being a citizen of a country stamped in the "terrorism haven" list does not really help. In the worst case, I will take a short leave in my career and spend time with my family, in some sunny city (comparable, if not better, than Las Palmas) in our home country. In the best case (finger crossed!), it will be another sunny city, somewhere in California (to avoid speculation, I can safely say beforehand: no, right now I have zero interest to work for a search engine or a fruit company).

I have been using Qt since my C++ skill was still a joke. Rest assured, I will be still using Qt in the future, at least for my personal pet projects and/or my spare-time joyful endeavor with KDE. And although it has nothing to do with Qt, I can proudly say that my coming professional activities will be still around open-source projects (surprise!).

It is an honor to serve with all of you, my fellow Trolls!

Your Chief Foul Stench Officer

END OF TRANSMISSION

graphics dojo in 2009: wrap-up

2009-10-22T12:07:00.002+02:00

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.

kinetic scrolling: the state machine

2009-10-21T19:18:00.001+02:00

Some of the slides from last Maemo Summit in Amsterdam have been made online. Here is the one from the Cross Platform with Qt talk that I held. It does not give much, though, since mostly what counts is the real live demo. Let us hope that at some point in time, the recorded videos will be online as well. Of course, there are also other interesting slides such as Harmattan highlights and its architecture, Web Runtime, Quake3, and many others.

Cross Platform Qt

View more documents from Nokia, Qt Development Frameworks.

While I am there, if you check the slides from my talk above, page 9 shows the secret behind kinetic scrolling code, which I featured before as Flick Charm or Flickable interface. Or, in another version as follows (click to enlarge):

Of course, it is the simplified version and ignore some details, but that should be a good start to really digest the code. Since it was hacked in the old 4.4/4.5 time, I did not have the luxury of using the new state machine framework in Qt 4.6. As an exercise for you, the brave readers, convert the code to use the framework. In addition, it does not support yet bouncing-on-edge feature, something which can serve as another exercise, too.

Have fun with scrolling :)

Chromium on OpenSUSE

2009-10-20T09:36:00.001+02:00

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? :)

from autumn to winter

2009-10-18T20:05:00.000+02:00

The wave of cold weather is approaching us, the nature's way of saying Wind of Change. While some parts of Europe enjoy the snow already, Oslo is relative still calm and actually enjoyable, even in the afternoon, for a walk.

(Picture was taken and shared to Flickr using Nokia N900 :)

bye munich (and D2)

2009-10-16T17:03:00.000+02:00

After kickstarted on Tuesday, Qt Developer Days 2009 Munich has ended. Some of us, the Trolls, are already back in Oslo, recovering from the intense adrenalin kicks within the last 72 hours (or more). The extra surprise was to experience the first snow in Munich (and this is still mid October!). Most must recharge pretty fast, considering the San Francisco version of the event is in about two weeks time.

There already a bunch of articles covering the event which show up in some sites, Aron has most of them in his wrap-up blog entry. More links are and will be available via qtbynokia twitter. Fancy some pictures instead? Search for qtdd09 tag on Flickr and enjoy them!

As for me, I am glad that this is finally over. It's all about people: it was exciting to meet old friends and make new ones. In addition, my Special FX with Graphics View talk was well received (the room was jam-packed), I got some very interesting feedback and questions to follow-up. The other talk, Copy Your Favourite Nokia App with Qt, was a bit quiet (the typical problem of all presentations in the afternoon of the last day) but still, it was as interactive as it could be.

This mini wrap-up is not complete without food photos. While we were in Munich, we ventured some different possibilities for dinner. Let me just show you two of them: Low-carb Seafood and Biryani:

Qt Developer Days 2009 - Live

2009-10-13T12:26:00.005+02:00

Like I mentioned before, now I am in Munich for Qt Developer Days 2009. The training sessions started yesterday already, the plenary was initiated this morning as we had the keynotes from Sebastian, Lars, Walter, and Matthias. We are now in the middle of lunch break, the technical track will start very soon.

This is the biggest Qt Developer Days so far, we have over 650 participants (last year it was only around 400). Can you imagine now what happens during the lunch break? Hint: the queue. As a nice touch, we even show a coffee machine running Qt:

I will have two talks tomorrow (Day 2) for the Innovate track: Special FX with Graphics View and Copy Your Favourite Nokia App with Qt. See you there!

bye amsterdam. next stop: munich

2009-10-11T10:53:00.001+02:00

Today is the last day of Maemo Summit 2009. I am sure the news spreads quickly; everyone and his uncle know already that Nokia lends around 300 shiny N900 (preproduction devices), worth 500 EUR, to the summit participants, excluding Nokia employees and contractors. It's Christmas in Amsterdam!

I had done my Cross Platform with Qt talk, I was quite content with it (that hopelessly small room was jam-packed). There were (and still will be) many other interesting tracks as well. For the detailed coverage, check out All About Maemo site, they are doing great jobs keeping the rest of the world up-to-date with the latest excitements from WesterGasFabriek.

While waiting in Schiphol for my next flight to Munich (for Qt Developer Days 2009), I had a quick glance at some of photos taken in the last few days. Let me just post one:

One evening, we picked Restaurant Sari Citra for our dinner. It serves Indonesian cuisine, the proof is the picture above. You have the choice to mix your own rice dish, such Nasi Kuning (rice with coconut milk and turmeric) with Tempe Kering (slices of fried, crispy tempe mixed with peanuts), Perkedel Kentang (mashed potato fritters) along with a wide selection of vegetables. Authentic experience with a reasonable price. Everyone enjoyed the dinner; happy Trolls :)

And see you in Munich!

Maemo Summit 2009 - Live

2009-10-09T10:44:00.000+02:00

Like mentioned before, with other few Trolls, we are now in Amsterdam for the Maemo Summit 2009. If you are there, don't forget to look for us and/or drop us a visit!

webkit dinner: gado-gado + nasi uduk

2009-10-07T08:38:00.001+02:00

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?

paris lisbon madrid

2009-10-06T08:30:00.000+02:00

Finally I had a real vacation, albeit short. Like many typical holidaymakers, I decided to do a little tour passing three selected cities in Europe, at the same time also using the chance to practice light, one-bag travelling (with a great success, mind you!).

Paris can always make a good start. The target at this second visit to Paris was to enjoy it at night. After all, it is supposed to be la Ville Lumière (City of Light). However, a long walking tour during the day was still inevitable, as evidenced from the picture of Église Saint-Eustache above.

As for the food, we decided to try non-local cuisine instead. We dined at the nicely-decorated Restaurant Indonesia, one of two restaurants in Paris (the other one is Djakarta-Bali) serving authentic culinary experience from my home country. If you happen to be nearby, give it a try as the dishes were good and reasonably priced.

Lisbon is fabulous and rich with history. We managed to explore the downtown area on foot, enjoying the busy Marquês de Pombal, even walking up to the Castelo de São Jorge. However I feel that exploring the surrounding would have been much better with a car. The view of Lisbon from the castle was majestic, also from the dozens of the short alleys on the way up there (the photo above). Of course, passing Ponte 25 de Abril - the sister bridge of San Francisco's Golden Gate - both on the motorway and using the train, was also a wonderful experience. Due to our limited time, we had to skip some other tourist attractions. We already compiled a list of must-visit places for the future, in case we fly to Lisbon again.

Nevertheless we had the obligatory fantastic dinner with cod. In another occasion, a simplistic but enjoyable dinner buffet in a Churrascaria was also memorable. A short detour to the beach at midnight completed the unforgettable journey.

Madrid was very vibrant and dynamic. It is also quite warm (as expected) with the heat at noon being close to unbearable. I like the fact that it was still possible, even convenient, to sit on a bench even somewhere in downtown as long as it is still in the shadow. Unfortunately Madrid was defeated by Rio in the race for the 2016 Summer Olympics host. Otherwise it would have been extremely fantastic as we were there after the last round.

We did the usual sightseeing (on foot) - including the compulsory visit to Palacio Real - and other usual rituals: having chocolate con churros for breakfast, drinking horchata to ease from the heat at midday, as well as eating traditional paella (and fidueà) for the (very!) late dinner.

Madrid at night on the other hand is a bit problematic for me. Since I am not a nightlife type, I don't drink, and I can't stand the cigarette smoke, touring the city after sunset is practically a mild torture.

Next to visit (due in few days): Amsterdam and Munich.

Maemo Summit 2009, Amsterdam, 9-11 Oct

2009-09-27T16:18:00.001+02:00

Another exciting event coming up soon: Maemo Summit 2009! This time it will be in Amsterdam. My flight ticket is secured already, I look forward to it. And of course, since this will be also my first visit to Amsterdam.

My talk will be on Friday afternoon, see the schedule for details. Although the title "Cross-platform with Qt" is a bit boring, rest assured you will see showcases of many things (which I can pack in 25 minutes) Qt is capable of doing.

A few other Trolls will be there as well so go there and find us. In all cases, if you are around and want to have a chat, drop me an email (ariya.hidayat AT gmail DOT com).

a moment, a love, a dream, a laugh, a kiss, a cry

2009-09-27T09:28:00.000+02:00

Seems autumn always calls for my service, hence the usual pizza-baking obligation, as evidenced from the photo. Recipe? Check what I have posted last year. A slight variation: slices of pineapples :)

frozen in the headlights (have I made the final sacrifice?)

2009-09-23T10:48:00.000+02:00

This slick stuff is mostly educational (for the lazy, see the 30-second YouTube video courtesy of Alessandro). With all the accelerated graphics (with those alphabet soups) these days, who on earth uses ray casting for real-world apps? Nevertheless, since I still keep the piece of code (read: a function, literally) I wrote ages ago, why not giving it a try again?

Testing it on Nokia E71 (powered by ARM 369 MHz processor), I am content to get a consistent 25 fps at QVGA resolution (and the code is still portable!). I reckon I need to resort to platform-specific, e.g. Anti Tearing API for S60, if I want to push the frame rate further.

For the code and the explanation, head to the S60 ray casting demo. You would need the Qt 4.5 Tower release to build it for your favorite phone. Also, you need a four-way controller as I haven't bothered to let it run on a touch device.

Final (friendly) reminder: use sloccount and check yourself how long this example is. Why? Because usually people think I try to trick them when I reveal the size of the source code :)

Eid Mubarak

2009-09-20T07:43:00.002+02:00

Happy Eid Al-Fitr to all !

SVG: parsing and content optimization

2009-09-11T12:17:00.002+02:00

A few weeks ago, just for a change (between the usual QtWebKit bug-fixing and patches juggling), I did take a look at our QtSvg module. According to some internal reports, QtSvg is not fast enough when parsing a large and complicated SVG. Of course, slow is relative, slow to what. And arguably, parsing time is not as important as rendering time. But if you stash your user-interface elements in some sort of SVG theme, loading time becomes a factor (caching the pixmaps whenever possible also helps). Of course, reduced size served in a web server can decrease the bandwidth as well (think of all the SVGs in Wikipedia).

Still, I decided to have a look, just in case there are low-hanging fruits I can grab. And I was right, far from being an SVG expert, with just two days of work I managed to squeeze its performance a bit, which you'd enjoy already in the recent 4.6 preview.

The chart above - shorter is better - represents the comparison of the time spent in QSvgRenderer::load(), measured using CPU tick counter (in millions of ticks), comparing Qt 4.5 and 4.6. I also tested some other files as well, see the bigger bar charts. In all measurements, the 95% confidence intervals were well below 1%. In-house Theme refers to an internal SVG that unfortunately I can't share. Tiger is the SVG version of the famous head in PostScript (taken from GNU GhostScript), something I have shown before. Imperial Coat of Arms of France is another complex SVG, from Wikipedia Commons. World Map is the public domain blank grayscale world map from Wikipedia. There are a bunch of other test files I used, they mostly show the same improvements.

As you can see, Qt 4.6 would enjoy a bit of speed-up (in some cases up to 1.4x) when loading and parsing SVG.

However, I did not stop there. For the fun of it, I quickly hacked a Qt-based, command line SVG minifier, dubbed SVGMin. More about it can be read in the detailed Quick Start, but basically it tries to eliminate redundant garbages which have no effect whatsoever in the final rendering.

What follows is the chart showing the same type of measurement but I added the result with the minified SVG (see also the full comparison chart). The result should speak for itself:

I plan some more improvements to the SVG minifier, for example collapsing a single grouped element (<g><path ...></g> makes no sense), group a bunch of nodes with similar attributes (no need to duplicate the same fill colors over 100 circles), remove useless attributes (why there is fill-* for fill:none?), and many others. Hold your breath.

the game of escalation

2009-09-08T21:46:00.001+02:00

Often I ask myself how long I would still want to stay in the software industry. Before I started my professional programming career, I never thought that this wonderful world of software craftsmanship is full of complaints, frustration, anger, and hostility. Perhaps that is just the reflection of people wanting to achieve the best things they can do. When you aim for a perfection, anything good enough will not be satisfactory.

I can't say for sure, but somehow I feel that I am still heavily influenced by the positive gratitude mentality, even in the case of calamity. When you have an accident and your right arm is amputated, someone reminds you, "You are lucky, you could have lost your legs!". Losing an arm is considered lucky? This does not mean that we bury our head in the sand and forget the fact that one arm is gone already, it just means that we should not be blind to the fact that things could have been worse. By doing so hopefully we keep things in perspective and move forwards as positive and as best as we can.

One of the lessons I learned so far is the amount of extrapolated verdicts you would get from the users, the developers, and/or the customers. Any bugs, any annoyances, no matter how small it is, are sometimes blown out of proportion. I call this the Universal Rule of Blaming. A customer complains, the company desperately grabs a consultant to help, he finds the bug in the toolkit, the toolkit guy chains it further to the operating systems, and so on. Of course, for each stage, the amount of anger and loudness of the screams increase exponentially. Basically, nobody wants to be the escape goat.

Sadly, everyone in the business of doing software seems to forget that making a software is just like another engineering project. It has its constraints, the resources are limited, the time is the (common) enemy, priorities must be set, and practically it is impossible to achieve 100% perfectness. It is the classic optimization problems. Thus, the responsible people have to make some decisions and these decisions can't please everyone. There will be people alienated with such decisions. Anyone ever done any kind of sensible business knows exactly what it does mean. Every customer feels that he is important (I mean, who does not?), yet a typical company has a lot of customers and such a company is always ready to disappoints 10% of the customers, rather than 90%. As you can guess, it is a matter of minimizing the loss. When a business guy asks his customers, "Hey, I need your feedback" and he really means it, he is not trying to be nice, he is trying to save his business.

However, my concern is not on the technical matters, but rather the non-technical side. When you are angry, you may say some words that you may regret later. Unfortunately, getting mad because of software annoyances can trap you in the same, if not worse, situation. What I often witness is that people start guessing, accusing, throwing blames, up to the a point where it becomes counter-productive and getting personal. You all know what happens when a developer takes it personally: a cycle of violence is about to roll. Once a while I try to stand in the line of fire (a big mistake, I know) in order to bridge both parties. No luck, it is like being trapped in a DMZ and people will just release their steam and waste their bullets to me as if they are happy to find a new bandito to kill. Ever wonder why some developers take the holy vow of silence?

The most common case is the why-my-bug-is-not-fixed drama. For example if I do not fix the problem X on the platform Y, people might start rambling on anything from "you secretly plan to drop support for Y" to "you rather focus only on feature Z instead of fixing X". There are various reasons I still do not manage to provide you the fix, but because of the frustration, people tend to invent and believe in some kind of conspiracy theory. Feel free to write a long Pulitzer-quality editorial on why the lack of the fix destroys your million dollar business, but no need to cross the line and start imagining things.

The drama can continue in a developer conference, where a guy might ask a simple, seemingly innocent question (even in a keynote speech) such as "Why don't you fix (my) bug 123? Why do you work on feature 456 instead?". Believe me, I saw that happened many many time. Those questions will put both the speaker and the audience in a awkward situation. While I fully agree that every bugs must be fixed, throwing such a question which only has the intention of embarrassing the developer in front of everyone is way too dirty for my taste (not to mention that, like often the case, our poor little developer never took any How to Deal with Angry Customers course). In fact, every time I encounter this kind of scene, I make a mental note to stay away from that guy. And I am sure I am not the only one who is doing that. Like I often expressed, we are not in the kindergarten anymore, screaming does not make the solution comes faster. Time to make a ThinkGeek T-shirt for that?

Thus, I reached a conclusion that there are two types of software guys: those who symphatize with the difficulties and problems of delivering a perfect product (because they are trying to do the same, "Welcome to the club!") and those who just like to shift the blames to others (because they get customers banging their doors). Nobody likes to deal with angry customers so the choice is (not) hard: either you take the blame (after all, you are the one who is doing the direct business to your customers) or you pass it along (every one of us is a customer of someone else's product). In the latter case, you just become yet another angry customer.

Noblesse oblige.