Innovative Interfaces with Clutter

Use Clutter to develop OpenGL applications with rich 2-D and 3-D interfaces that include object rotation, scaling, texturing and more.

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.



Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Incorrect statements about Elisa

Matt Layman's picture


Thanks for posting an article about clutter. It is a great toolkit and worth talking about. However, your introduction makes statements that are simply incorrect.

You reference the Elisa project. First, it's interesting because your article was written in October yet Elisa changed its name to Moovida back in June of 2009.

Second, and more importantly, Elisa/Moovida has never used the clutter toolkit. They use the Pigment toolkit which is developed by Fluendo, the same company that develops Moovida (so the Moovida project is pretty invested into using their own toolkit). I'm sure that they work hard to make their toolkit useful for their purposes and wouldn't want to have their work mis-credited to some other toolkit.

I'm keenly aware that Moovida uses Pigment because I develop code for the Entertainer Media Center, another media center application that *does* use clutter. I probably wouldn't be working on this other project if there was already a larger media center application that used clutter.

I realize that your article is mostly tailored to be a HOWTO for using clutter, but I would expect that as a journalist for Linux Journal, you would research and verify your statements. I hope that my journalistic critique is not received negatively. I just want to give people credit where credit is due. The Fluendo developers deserve that much.