We’ve just uploaded a new video showing our latest animated layout example.

You can check it at:
OpenBossa’s Youtube Channel

Or here:

Rather than showing how to animate from one layout to another, this example shows how could a Qt user create his/her own custom layout that uses QGraphicsLayoutProxies internally to animate its items.

From the usage point of view, once the layout is ready, all one has to do is to add or remove widgets to the layout or resize it to see them animating to the right places.

Enjoy!

Layouts

If you are familiar with Qt, chances are you have already used layouts and widgets a couple times. If you haven’t, try to think of a layout as a set of geometry rules, or principles, that are applied to the children widgets when the layout is associated to a parent widget.

In other words, imagine you have a box drawn on the screen, and, inside it, three widgets, say, a button, a checkbox and a label. Now imagine you want these three components to be organized somehow inside the box, horizontally aligned for instance. In Qt all you have to do is to apply an horizontal layout to the box and its widgets (button, checkbox and label) will follow the rules enforced by that layout.

The Goal

While existing layouts work fine for forms  other static UIs but lack something when seek the development of rich, animated, interfaces, as the one in Canola 2. In these scenarios animating from different layouts and/or different layout states is a must, and that’s what we went after. As the starting point, we focused on the Graphics View Framework and therefore started with QGraphicsLayouts rather than QLayouts. After talking with the guys at Qt Software we found a solution that enables:

• animated transitions from one QGraphicsLayout to a completely different one (grid to linear, for instance);
• animated transitions from one QGraphicsLayout state to another (when an item is added for instance, or items are re-arranged);
• works with all third-party QGraphicsLayout subclasses you may have coded to fit your personal needs; and
• works with all third-party widgets.

The result

A video is worth more than a bunch of words. In this demo we show:

• Addition of new items to a visible layout;
• Change between three different layouts (horizontal, vertical and grid); and
• Changes in the parent widget size.

Can’t see the video? Watch it on YouTube:

http://www.youtube.com/watch?v=M3HbmrNvQl4

The Usage

This post is focused on the internals but read MoRpHeUz recent post about this subject for the end-user point of view.

The Solution

We had a strong requirement of providing compatibility with 3rd party layouts and widgets, we also couldn’t break Qt’s API or ABI. To understand the next step it is necessary to know a little bit about how QGraphicsLayouts work in Qt, but, in a nutshell what happens when a layout is applied to a widget is the following:

• When the parent widget (the outer box) undergoes a change (is resized for instance), its associated layout is informed about it.
• The layout recalculates new geometries for each of the child widgets (the label, the button and the checkbox).
• The layout sets the new children geometries.

What we did was to create an Animated Layout Proxy that sits between the Layout and each of the child widgets. Due to the way Qt is organized what is expected then is that our proxies pass along the geometry change information they received from the layout to the item below it. The trick here is that rather than sending the geometry change request immediatelly, the Proxy creates a QAnimation from the former state to the new one. The result after the animation is finished is the same, the child widgets were set to their new geometries, what is different however is that the widget moves in an animated, sleek way, rather than at once, which is the standard.

The high-level diagram below shows how the Animated Layout Proxy is inserted in the existing QGraphicsLayoutItem hierarchy. Other relationships were omitted to keep things simple.

Cheers,
Fleury

Eu, Eduardo Fleury, e Rodrigo Vivi, teremos o prazer de apresentar duas palestras na manhã do Domingo, dia 04 e agradecemos antecipadamente a presença de todos.

As palestras são independentes porém relacionadas, a primeira, Embarcando no Linux para sistemas embarcados (Rodrigo Vivi) ocorrerá as 09.00h de Domingo e cobrirá os conceitos fundamentais das plataformas móveis embarcadas baseadas em Linux, mais especificamente o Mamona e o Maemo.

Na seqüência, às 10.15h apresentarei a palestra Velejando com o Linux para sistemas embarcados na qual discutirei aspectos focados no desenvolvimento de aplicações para estas plataformas, incluindo questões como o ciclo de desenvolvimento e uma comparação entre linguagens de programação, partindo então para uma introdução à linguagem Python e suas principais características.

Links:

• Ensol 2.0 – http://www.ensol.org.br/2008/
• Embarcando no Linux para sistemas embarcados – http://www.ensol.org.br/2008/node/74
• Velejando com o Linux para sistemas embarcados – http://www.ensol.org.br/2008/node/73

A few days ago the Canola2 SDK was released allowing users to run Canola2 on their Linux desktops for plug-ins and themes development. In this post I’ll show how one can add plugins to the SDK.

What you need

When deploying plugins to Canola2 SDK one must observe three main steps:

1. Install plug-in code
2. Install plug-in theme extension (for some themes)
3. Rebuild plug-in database

Note that some plug-ins require extra interface widgets, for those the 2nd step must be completed, for the others it will be skipped.

SDK directory structure

In Canola2 SDK plug-ins code is located at:

canola/plugins/<plugin_name>/*

Note that the <plugin-name> folder may be zipped so you may also see plugins in the form:

canola/plugins/<plugin_name>.zip

The theme extensions for each plug-in however are in a different folder:

canola/THEMES/<theme_name>-<plugin_name>.edj

Example HOWTO – Installing Canola YouTube plug-in

Note that <SDK-base-dir> is the directory where you installed the Canola2 SDK, aka the directory you run Canola2 from.

1. Get Canola YouTube plug-in binaries from maemo repository:

$ mkdir /tmp/canola-youtube

$ cd /tmp/canola-youtube

$ wget http://repository.maemo.org/extras/pool/bora/free/c/canola-youtube-plugin/canola2-youtube-plugin_0.1.1-maemo1_all.deb

2. Extract contents (see notes if you don’t have dpkg-deb installed)

$ dpkg-deb -X canola2-youtube-plugin_0.1.1-maemo1_all.deb .

3. Copy plug-in code to the SDK dir

$ cp usr/share/canola/plugins/canola-tube.zip <SDK-base-dir>/plugins/

4. Copy plug-in theme extension to SDK dir

$ cp usr/share/canola/themes/*.edj <SDK-base-dir>/THEMES

5. Rebuild plug-in database

$ cd <SDK-base-dir>

$ ./run-canola –shell

$ bin/cnl-rescan-collections

$ exit

6. Run Canola2 SDK and test the new plugin

./run-canola -n

Notes:

- You can use “alien -t” and “tar xf” to extract the .deb contents if you don’t have dpkg-deb installed on your system.

- If you download the source code of a plug-in you will have to compile each theme extension using “edje_cc” that comes with your SDK installation. Just run “./run-canola –shell” to set-up the environment and you’ll have the compiler available. For more information regarding making your own plug-ins check the “Plug-ins development” section in the Canola2 SDK Development-README.

Additional Information

Checkout the #canola channel on the Freenode.net IRC servers.

Cheers,

Fleury