svg-to-png using (Qt)WebKit

Related to the recent discussion on some problems of Qt SVG renderer when drawing the Oxygen icons, I decided to sit down and wrote an example of yet-another SVG renderer by using QtWebKit (available since Qt 4.4.0). Check out the code if you're interested, it is part of the Graphics Dojo examples.

The major difference between this WebKit-based tool compared to QSvgRenderer is that it should handle SVG features which are supported by WebKit. Note that QtSvg limits itself only to SVG Tiny 1.2 without DOM API and scripting (due to various reasons). On the other hand, SVG support in WebKit will be improved over the time. Yes, fancy stuff like filter effects are not fully implemented yet (at least, in QtWebKit), but we are working towards that.

For those who can't wait for the DOM API in QtWebKit, you can see the example of poor man's way of doing it, i.e. by (ab)using evaluateJavaScript() of a web frame. Here it is used to get the SVG width and height attributes. As a hint, if you are unsure about the DOM tree, its elements and/or their attributes, then open the SVG in e.g. Arora or the Demo Browser and use the Web Inspector to check it. The JS console is also helpful to try out various thing right when you view the SVG.

Obligatory screenshot follows:

And while you are there, check out also other fresh dojo examples: zooming text and old-school radial blur.

HTML5 video with reflection

Poor Tor Arne. After his super-secret project is leaked, our HTML5 Media ninja has no other choice but to reveal all his cards. HTML5 video/audio, important for next-gen web content, will be available in Firefox, Opera, and Safari, is finally supported in QtWebKit, thanks to Tor Arne. As he wrote there, basically we use Phonon, the multimedia API available from Qt 4.4 onwards.

Since WebKit (thus also QtWebKit) already supports CSS reflections, I decided to combine both the video and the reflection effect. Of course, it just works (click-to-enlarge):

(As a new WebKit hacker, my skill is only at cranking HTML+CSS like this. Credits should go to Tor Arne and other WebKit chaps for doing the real work).

If you have sharp eyes, you can see that the following HTML snippet is all you need:

<video src="videofile.ogg" controls="true" style="-webkit-box-reflect:below 1px;" />

More info on the video tag is available elsewhere. Bear in mind that this probably does not work in many common browsers like Firefox 2. You need the next-gen web browsers, try Safari 3.1. You can even use Arora, if you build it against WebKit trunk.

Note that all the bleeding-edge features are available only in WebKit trunk. Unless you want to experience the hassle of building QtWebKit yourself (hint: it is not that difficult actually), the best bet is of course to wait for the Qt 4.5. With the recent addition of NSAPI plugin support (yes, you can watch YouTube using QtWebKit) and now HTML5 Media element, I am excited to see the what kind of plasmoids will show up. But likely within the frame of KDE 4.2, if not 4.3. So, yes, it will take time. Once it is there, however, the sky is the limit. Using both Flash and Media element, imagine all the QtWebKit-based plasmoids deliver the best of YouTube videos, the highest rated movie trailers from the theaters in your neighborhood, some webcam views from your upcoming holiday destination, hand-picked favorite Internet radios and podcasts, etc etc to your desktop.

PhotoFlow as a plasmoid

PhotoFlow, which I introduced less than 48 hours ago, can also be realized as a plasmoid. It is the top left applet in the screenshot above. I have never written a plasma applet in my life before, so it took me quite a while to figure out how the mechanism works. And frankly, I am still not sure whether such a kind of widget can be really useful at all.

I guess I will wait until KDE 4.1 before I place this stuff in KDE's playground. By that time, Plasma itself should already stabilize. Probably it is even better to integrate it with the Picture of the Day data engine. Or even with the slideshow plasmoid. Or perhaps do you have any other idea?

KDE 4.0 on OpenSUSE 10.3

KDE 4.0 is doubtlessly the most discussed KDE release at the moment. Some praise it, some don't really favor it. But whether you're going to like it or not, it's worth to, at least, give it a try.

If you use OpenSUSE 10.3, installing KDE 4.0 is very easy, it's just one-click away! Simply click on the following icon:

Wait few minutes (or hours), then you'll get the desktop:

Update: and add some plasmoids to get something like