tHeBloG

After the QUItIndicator trilogy which introduced idea, design and performance of a specific Qt5 QML component there's room for more, right?! Something like this: This time we have a dynamic QML component for showing the remaining power of your mobile device battery. As a recap, with "Dynamic QML component" I mean someting which utilizes not only basic QML animation properties (position, opacity, scale etc.) but also new Qt5 features (shaders, particles, scenegraph powa!) to appear "more dynamic". Maybe it's just me, but I would love to see UIs really utilizing modern GPUs... and accelerating this progress is one of the reasons why I code these examples and blog about them. Another reason being to rule-the-world, obviously ;-P Instead of explaining design & features of QUItBattery component I'll let this video to do that: If you want to use this liquid battery component in your UI: Download the sources from here , copy QUItBatteryCompone...

(This is part II of the normal mapping journey, check the part I first for details.) So you have all now played with Qt5 NMapper tool, right? Goody, that means we have gained experience of normal mapping and created some perfectly tuned normal mapped textures. Now it's time to use these in a separate application. Let's assume that you are working on a 2D QML application, but would want 3D-looking effect into some part(s) of the UI. To visualize, here's an example NMapCarousel demo application: (Qt5 NMap Carousel, running on PC and on Raspberry Pi) Here normal mapping is used to make the carousel icons more dynamic by applying lighting. To increase the 3D impression, there are also extra shadows reflected behind the icons. To implement something similar, here's how to proceed: If not already, setup Qt5 to your PC/Mac/RPi or equivalent platform. Create normal maps of your graphic assets using Gimp, Blender, Photoshop etc. tool of your choice. Name the n...

This one has been on my "blog at some point" back burner for some time now... ' Normal mapping ' is a graphics rendering technique used for faking the lighting conditions. In 3D software it is often used for bringing small bumps and dents of textures visible to achieve more realistic graphical appearance without using huge amount of polygons. Normal mapping is kinda advanced version of preceding ' Bump mapping '  technique. Where bump mapping uses just one channel for 'bumps', normal mapping uses 3-channel (RGB) bitmaps and can therefore contain more detailed normal vector information. Normal mapping technique can also be used in 2D applications to get 3D'ish looking UI elements, which means it can be used also in normal non-Qt3D QML applications. Combining image textures with specifically made normal map textures using a suitable shader is all you need. And normal maps can be automatically created with Gimp, Blender, Photoshop etc. drawing too...

During the past ~20 months I've made several blog posts about Qt5, QML Scene Graph, shaders and whatnot. As Qt5 beta is getting reeeeally close, I thought this would be a good time for a fresh Qt5 technology demo. This one is called 'Cinematic Experience' and looks a bit like this: (best viewed in HD ) Cinematic Experience collects many of the new Qt5 QtQuick 2.0 features into the same UX demo application. It uses particles, sprites, path animation, custom shaders etc. features which Qt5 introduces for QML UIs. As usual, source codes are available from here . Performance note: The GPU in N9 (SGX530, released Jul 2005) is showing its age. Especially fragment shaders need to be very conservative as the GPU just isn't powerful enough for the N9 screen resolution. To get the application perform in N9, some optimizations were required like disabling the normal-mapping lighting and reducing the amount of fog particles. As seen in the video, after these tw...

Howdy! Do you remember the time before HD, amoled etc. super sharp screens? When pixels were so big that you could easily count them and any colors were luxury? This is your ticket back to these good ol' times: LedScreen Qt5 & QtQuick 2.0 component! Here is a video presenting it with example applications: This component allows you to use any QML content as the source for the ledscreen, define led size and color or use colors from the source item. So it doesn't contain kitchen sink yet, but there's only so much you can fit into 60 lines of QML + GLSL with API documentation.. ;-) Feel free to grab sources from here & modify & use as you want! PS: Hoping to be able to develop & demo Qt5 soon on Raspberry Pi!

Smoke the Bugs is now available to download from Nokia Store for Harmattan N9 and for Anna/Belle . No bugs (except software bugs!) were harmed while developing the game, but to know whether this virtual bug smoking is suitable for you, check this video of game play on N9: As explained here earlier , this was partly an expedition on making a game with pure QML + JavaScript + shader effects. Plan was to make it totally without C++ (excluding the launcher which Qt SDK generates automatically) and to see what the outcome would be. So summing up some random development notes here: Harmattan version of the game utilizes Qt-components for portrait main window and for disabling swipe while playing. Symbian version does not use Qt-components as pure QML was enough. It's good to use Loader for separating rest of the UI from initial "splash screen" for faster startup. Another option on Harmattan would be to show static splash screen image with invoker . In this game, loaders are...

Catchy title right? Don't worry, content partly matches to that description... ;) It seems that I quite often include videos in my blog posts. There is no reason to stray away from that habit now, so here's a video showing a beta version of "Smoke the Bugs!" game on N950 & N8: By looking at the graphics, effects, dynamic lights etc. what you saw was a pretty average OpenGL (ES 2.0) game, right? Well yes and no... Yes, GLSL shaders have been used for the effects. But no, there is zero lines of OpenGL and in fact also zero lines of C/C++ in the game. It's all QML + GLSL + JavaScript. To work on current Harmattan & Symbian devices, game uses Qt 4.7 with the shaders plugin. This is an okay-ish platform, as you see from the video: N8@680MHz runs at smooth ~60fps. But I have also smelled, tasted and floated in the sweet velvet of Qt5 and can tell you as a fact that it will be much better. With Qt5 & QtQuick 2.0, applications will get a healthy boost of perfo...

Hey! Qt Developer Days '11 are over and I want to thank all organizers & attendees, what a great event again!! For fresh owners of N9 (congratulations!), I'll say that 5inarow game is now available through Nokia Store. Here's how to get beaten by medium level: Symbian version may follow later, but for now game is only available on N9/N950. It's free and contains no ads so if you feel like it, go grab it from here . PS. If this tickles your "How to implement a Qt game like that?" or "I could do much better than that!" -nerves, source codes and Qt Quick Game Programming tutorial are still available from here . These are for the older N900 version, without e.g. sounds and computer AI. But an idea of updating the document for Qt5 & shader effects is floating in my mind, we'll see, we'll see...

Yoann Lopes blogged recently about Text Rendering in the QML Scene Graph using distance field alpha testing. This technique brings smoothly scalable fonts with fast OpenGL rendering to Qt5. Distance field is of course not limited for just fonts (although they are the most usual use-case), same technique can be used also with suitable images. Here is a video of an example application running on PC and N950 which demonstrates the effect: As you can see, the original image becomes quite pixelated when zooming in, which is expected as image is only 256x160 pixels (smiley 64x64 pixels). But enabling smoothing with distance field shader makes it very scalable with nice anti-aliasing, outline and transparency. As the pixmap required for this is so small, GPU / fragment shader has less to process leading to better performance. Like with fonts, adding effects such as outline, smoothing, glow and shadow can be implemented very effectively. This application is under 300 lines of QM...

I will be mostly interested in discussions about Qt5 graphics stack, qml-box2d, QtQuick 2.0 and of course QML Scene Graph. So whenever something related to these is going on, please grab me in!

Kimi, the man with excellent genes, blogged few days ago in here about QML extension plugin that provides shader effects for QGraphicsView based Qt Quick 1.x. What makes this magnificent, is the fact that API matches to what QML Scene Graph (at least currently) has, making it a perfect solution to start experimenting with the future. Also, as it is a separate plugin sitting on top of standard Qt 4.7.x, it turns "Qt everywhere" to "shaders everywhere" right now while waiting for the full Scene Graph glory. All you need is 1) Qt 4.7 installed in suitable environment (Linux, Windows, Symbian etc.) 2) the qml1-shadersplugin and 3) imagination for writing QML & GLSL. What I came up with using the plugin is something they call metaballs : Source codes are available in here , go wild! And kudos to Nokia/Qt team for providing this plugin!

I decided not to blog anything right after Nokia & Microsoft deal was published. And I'm glad about that, because I have now reached the state where I'm actually excited again! Volker Hilsheimer made a very good summary about the situation from Qt perspective . Instead of going deep into politics and sales speeches, I decided to approach this from a technical perspective. Keeping things simple and concrete, here's one example UI implemented in few hours with Qt Quick & QML Scene Graph: Please spend a bit time looking at what is really happening in there: wave, colorize, fading, water, text highlight... This is ~300 lines of QML + GLSL, performing smoothly on good ol' N900 hardware. Same can not be done using WP7 Silverlight & XAML, period. Qt is still the best platform for "mobile phones" and we have also here good ingredients for the "future disruption" like Nokia management has outlined. But technology is nothing without a community (a....

Here is a small demo of QML animations combined with OpenGL shader effects, running on QML Scene Graph : At first, everything is gray and plain. But once you enable QUIt mode, the whole world feels a lot more colorful and dynamic. Some call this feeling velvet , I call it.. exciting 2011!

I'm personally not attending to MeeGo Conference this year. Past two Maemo Summits have been great, so I'm sure this time things will be even Harder, Better, Faster, Stronger! But in a way part of me is attending, as one thing I have been working with recently is a UX prototype called "SteelRat". It will be shown in Nomovok booth, running on top of MeeGo in different ARM development boards. This is what SteelRat looked like in Freescale i.MX51 during Qt Developer Days: But anyway, wishing good times for all you attending!

Are you interested about Qt Quick? Want to get jiggy with it and develop mad skillz? Wanna become first Qt Quick OVI Store millionaire? Good news, we have a (partial) solution! We've been working with Qt Quick / QML for quite some time now and decided to write ~30 pages short tutorial which goes through step-by-step the implementation of 5-in-a-row game . My recommendation would be to read the tutorial while browsing game sources and reaching towards Qt Quick API documentation whenever interested in more details. Download the "Qt Quick Game Programming" tutorial from here !

We released today a game called 5-in-a-row. It's implemented with Qt Quick / QML and designed for 2 players playing next to each other: Want it? Package for N900 as well as source codes are available from here !

Today postman brought to me a package from Norway, containing this: Thanks! My contributions to ambassador program have been distracted by work... Which is of course filled with Qt, but mostly behind closed doors and not directly visible to anywhere. But I want to improve this and right here, right now * promise to release both source code and documentation soonish available. I will also attend to Qt Developer Days in Munich and hang around Nomovok booth, demoing and praising Qt & QML. Mention the keyword "fidelio", and I'll tell just for you how current Qt Quick is only the beginning and what will happen during 2011 to rule the world... Hoping to see You there! * ) This reminded me a Fatboy Slim classic

Writing desktop widgets for N900 using Qt is now possible, as Harald Fernengel explained yesterday in Qt Labs. What I wanted to test based on this is that can desktop widgets be made also using QML? So I hacked together a Clock widget and with the similar technique also slightly modified Samegame widget: Source code for the simple clock is available in my Gitorious branch so everyone can test and start to build cool Qt QML widgets in no time!