Innovative Interfaces with Clutter

Meet one of the most revolutionary toolkits available for Linux: Clutter. Clutter is an OpenGL-based toolkit, described as an “open-source software library for creating fast, visually rich and animated graphical user interfaces”. Clutter provides a simple API for powerful three-dimensional and two-dimensional manipulation. Creating interactive games, 3-D media and animated applications for Linux systems with Clutter is cleaner, easier and quicker than coding an OpenGL application with more conventional methods.

Clutter comes with many built-in tools and effects. Rendering object rotation, scale, texture and opacity are built right in and can be accomplished with a few lines of code. Rendering and controlling the GStreamer multimedia API also is easy with an additional library. There even are Webkit bindings, so manipulating Web pages in a Clutter program is simple.

Clutter has been used in many successful applications and open-source projects. Take, for example, the open-source Elisa media center. Developed by Fluendo, Elisa is a 3-D media center—one of the most sophisticated alternatives to software such as Windows Media Center available for Linux. Elisa makes use of Clutter's animation and 3-D API in its elegant interface.

The Ubuntu Mobile Internet Device Edition, developed by the Ubuntu Mobile community, also uses Clutter for its main user interface. Additionally, the Moblin Project plans to use Clutter in its software platform. Clutter's use is widespread across Linux systems and is becoming more and more popular every day.

Figure 1. Elisa, Fluendo's media center application, utilizes Clutter's advanced library to add 3-D animation to its GUI.

Installing Clutter on Linux systems is extremely easy with the use of binary package managers. Install Clutter, the Cairo add-on, the GStreamer add-on and the Python bindings. Using your distribution's package manager, install the following packages: libClutter, libClutter-cairo, libClutter-gst and python-Clutter.

Different distributions will have different versions available, and it is recommended that you install the latest possible version. However, you need 0.8.0 or 0.8.2 of the libClutter packages to follow the examples and run the code given in this article. If the version number in your package manager is different from either 0.8.0 or 0.8.2, you should install Clutter from source. See Resources for the URL to Clutter's source files.

In this article, I'm using Clutter's Python bindings to work with Clutter. More can be done with Python in just a few lines of code, so using that language makes it easier to explore and understand Clutter. To test your install of Clutter, simply run Python and do the following:

import clutter

If you get a blank prompt back with no errors, the Clutter module was imported successfully, and you've installed python-Clutter correctly.

Now, let's start with a simple “Hello World!” Clutter application with Python. You probably should turn off any desktop effects or compositing window managers, such as Compiz Fusion. Most Linux video drivers will not allow multiple OpenGL or 3-D processes to run simultaneously with a compositing window manager, which includes Clutter, because of its 3-D capabilities.

To start the program, you need to import the Clutter module and define your main Class and an initialization function. Create a stage in the initialization function. The stage is the base of any Clutter interface. On the stage, objects called actors can be seen and manipulated. Clutter uses the term actors to describe any objects that exist on the stage.

The sample program is shown in Listing 1, and the output window is shown in Figure 2.

After creating the stage, set the stage's properties and some properties of the window containing it.

Set color of the stage to black by accessing Clutter's predefined colors using Clutter.color_parse().

Next, set the size of the stage, which will set the size of the window. Also set the title of the window.

To show our “Hello world” message on the stage, you need to create an actor—in this case, a label. Set the font type of the label, the text to display, and the color of the label. Here, let's set the color manually rather than using a predefined color. Once the label is set, add the actor (the label) to the stage.

Labels work similarly to GTK+ widgets, but Clutter is not widget-based in the same way GTK+ is. Although both have similar functions and parts, Clutter contains only a handful of built-in “widgets”, which are called actors. Clutter's actors are limited to rectangles, labels, images, video textures and a few other items.

To finish the example, tell the stage to show all of its contents and call the main Clutter loop, which will display the interface. The last step is to tell Python to create an instance of your class.