Innovative Interfaces with Clutter
Listing 1. “Hello World” Using Clutter
import clutter
class HelloWorld:
def __init__ (self):
# Create stage and set its properties.
self.stage = clutter.Stage()
self.stage.set_color(clutter.color_parse('Black'))
self.stage.set_size(500, 400)
self.stage.set_title('Clutter Hello World')
# Create label and set its properties.
color = clutter.Color(0xff, 0xcc, 0xcc, 0xdd)
hello = clutter.Label()
hello.set_font_name('Mono 32')
hello.set_text("Hello There!")
hello.set_color(color)
hello.set_position(100, 200)
# Add label to stage.
self.stage.add(hello)
# Start main clutter loop.
self.stage.show_all()
clutter.main()
# Run program.
main = HelloWorld()
Now, let's take a look at a more useful Clutter program. Our program will use the Clutter GStreamer library to display and control a video file on the stage. Connect GStreamer's video output to a video texture, which is then displayed on the stage and can be manipulated as an actor.
There are three main actors on the stage: the play button, the pause button and the GStreamer video. When the pause button is pressed, the video pauses, and it will continue playing when the play button is pressed. The program is shown in Listing 2, and the window is shown in Figure 3.
After the initial setup, define a signal for responding to mouse clicks. Clutter uses signals to respond to events in the same way GTK+ does. The signal dictates that when any button on the mouse is clicked, the specified function is called.
Next, create the buttons by creating rectangle actors for the button shape and text actors for the button text. Remember that Clutter is not widget-based, and there are no default button widgets as part of the API.
To create the video, you need a video texture. A video texture is a physical plane on which GStreamer can display the video. The video texture can be manipulated on the stage like an ordinary actor.
You also need two other GStreamer elements to play the video: a playbin and a pipeline. Clutter-Gstreamer will play any file type that GStreamer can play. After creating the playbin, set the location of the video to play and add the playbin to the pipeline.
Then, set the position of the video texture, add it to the stage and tell GStreamer to start playing the video.
Finally, create the mouseClick function. This function is called when the mouse is clicked anywhere on the stage. Check to see if the left mouse button was clicked inside one of the buttons and if it was, change the size and color of the buttons to give visual feedback of the click. Tell GStreamer to start or stop the video depending on which button was pressed.
Listing 2. Clutter-Based Video Player
import clutter
import gst
from clutter import cluttergst
class HelloWorld:
def __init__ (self):
# Create stage and set its properties.
self.stage = clutter.Stage()
self.stage.set_color(clutter.color_parse('Black'))
self.stage.set_size(500, 400)
self.stage.set_title('Clutter Basic Video Player')
# Create signal for handling mouse clicks.
self.stage.connect('button-press-event', self.mouseClick)
# Create play button shape.
self.playBtn = clutter.Rectangle()
self.playBtn.set_color(clutter.Color(66, 99, 150, 0x99))
self.playBtn.set_size(50, 30)
self.playBtn.set_position(118, 34)
self.stage.add(self.playBtn)
# Create play button text
# and overlay the rectangle.
playTxt = clutter.Label()
playTxt.set_text("Play")
playTxt.set_color(clutter.color_parse('Black'))
playTxt.set_position(130, 40)
self.stage.add(playTxt)
# Same for stop button.
self.stopBtn = clutter.Rectangle()
self.stopBtn.set_color(clutter.Color(66, 99, 150, 0x99))
self.stopBtn.set_size(50, 30)
self.stopBtn.set_position(218, 34)
self.stage.add(self.stopBtn)
StopTxt = clutter.Label()
StopTxt.set_text("Pause")
StopTxt.set_color(clutter.color_parse('Black'))
StopTxt.set_position(225, 40)
self.stage.add(StopTxt)
# Create video texture.
video_tex = cluttergst.VideoTexture()
self.pipeline = gst.Pipeline("mypipe")
playbin = video_tex.get_playbin()
# Specify video file to play.
movfile = "file:///home/user/Videos/Video.mov"
playbin.set_property('uri', movfile)
# Add to playbin to the pipeline.
self.pipeline.add(playbin)
# Set position and start playing the video.
video_tex.set_position(90,100)
self.stage.add(video_tex)
self.pipeline.set_state(gst.STATE_PLAYING)
self.stage.show_all()
clutter.main()
def mouseClick (self, stage, event):
# Mouse click function, called when the moused
# is clicked *anywhere* on the stage, we check
# the mouse coordinates manually to see if the
# click occurred inside a button.
# Check for left mouse button.
if event.button == 1:
# Check to see if stop button was pressed.
if event.x > 218 and event.x < 268 and \
event.y > 34 and event.y < 64:
self.stopBtn.set_color(clutter.Color(33,50,150,0x89))
self.playBtn.set_color(clutter.Color(66,99,150,0x99))
self.stopBtn.set_size(49, 29)
self.playBtn.set_size(50, 30)
self.pipeline.set_state(gst.STATE_PAUSED)
# Check to see if the play button was pressed.
if event.x > 118 and event.x < 168 and \
event.y > 34 and event.y < 64:
self.playBtn.set_color(clutter.Color(33,50,150,0x89))
self.stopBtn.set_color(clutter.Color(66,99,150,0x99))
self.playBtn.set_size(49, 29)
self.stopBtn.set_size(50, 30)
self.pipeline.set_state(gst.STATE_PLAYING)
# Run program.
main = HelloWorld()
An important feature of Clutter is its animation API. Animating any actors on the stage is easy with Clutter. Using the animation API, you can add smooth animations and effects to your Clutter application.
In the next example, let's take the GStreamer video texture and manipulate it in three dimensions. The GStreamer texture is rotating on the y-axis constantly.
The program is shown in Listing 3, and the window is shown in Figure 4.
After the initial setup, create a timeline. Timelines are used in Clutter to control animation and time events. The example timeline lasts for 100 frames at ten frames per second, and the timeline is set to loop forever.
Next create an alpha (see The Alpha Functions sidebar) for the animation, assign it to your timeline and give it a smooth step decreasing function. In simplest terms, the alpha is used to control the speed of the animation. The smooth step function causes the animation to speed up, then slow down, come to a halt, and then start up again. Clutter has several functions built in that you can use with the alpha, including sine, exponential and ramp functions.
Next, define the Rotation behavior the animation uses. Clutter uses behavior effects to describe animations. The Opacity behavior, for example, can change the visual alpha of an actor, making it transparent or opaque. Other behaviors include Scale, Path, Depth, B-Spline and Ellipse.
In this example, we tell our Rotation behavior to rotate over the x-axis, rotate clockwise, start rotating at an angle of zero, end at 360, and finally, tell it to use the alpha created earlier, respectively. After that, the rotational center, or the point the actor rotates around, is set to the approximate center of the GStreamer texture and the Rotation behaviour is applied to the video texture.
In addition to the normal startup steps, the timeline must be started.
Realizing the promise of Apache® Hadoop® requires the effective deployment of compute, memory, storage and networking to achieve optimal results. With its flexibility and multitude of options, it is easy to over or under provision the server infrastructure, resulting in poor performance and high TCO. Join us for an in depth, technical discussion with industry experts from leading Hadoop and server companies who will provide insights into the key considerations for designing and deploying an optimal Hadoop cluster.
Sponsored by AMD
Built-in forensics, incident response, and security with Red Hat Enterprise Linux 6
Every security policy provides guidance and requirements for ensuring adequate protection of information and data, as well as high-level technical and administrative security requirements for a system in a given environment. Traditionally, providing security for a system focuses on the confidentiality of the information on it. However, protecting the data integrity and system and data availability is just as important. For example, when processing United States intelligence information, there are three attributes that require protection: confidentiality, integrity, and availability.
Learn more about catching the bad guy in this free white paper.
Sponsored by DLT Solutions
| Designing Electronics with Linux | May 22, 2013 |
| Dynamic DNS—an Object Lesson in Problem Solving | May 21, 2013 |
| Using Salt Stack and Vagrant for Drupal Development | May 20, 2013 |
| Making Linux and Android Get Along (It's Not as Hard as It Sounds) | May 16, 2013 |
| Drupal Is a Framework: Why Everyone Needs to Understand This | May 15, 2013 |
| Home, My Backup Data Center | May 13, 2013 |
- RSS Feeds
- Dynamic DNS—an Object Lesson in Problem Solving
- Making Linux and Android Get Along (It's Not as Hard as It Sounds)
- Using Salt Stack and Vagrant for Drupal Development
- New Products
- A Topic for Discussion - Open Source Feature-Richness?
- Drupal Is a Framework: Why Everyone Needs to Understand This
- Validate an E-Mail Address with PHP, the Right Way
- What's the tweeting protocol?
- Tech Tip: Really Simple HTTP Server with Python
- Kernel Problem
1 hour 26 min ago - BASH script to log IPs on public web server
5 hours 53 min ago - DynDNS
9 hours 29 min ago - Reply to comment | Linux Journal
10 hours 1 min ago - All the articles you talked
12 hours 25 min ago - All the articles you talked
12 hours 28 min ago - All the articles you talked
12 hours 29 min ago - myip
16 hours 54 min ago - Keeping track of IP address
18 hours 45 min ago - Roll your own dynamic dns
23 hours 58 min ago
Enter to Win an Adafruit Pi Cobbler Breakout Kit for Raspberry Pi

It's Raspberry Pi month at Linux Journal. Each week in May, Adafruit will be giving away a Pi-related prize to a lucky, randomly drawn LJ reader. Winners will be announced weekly.
Fill out the fields below to enter to win this week's prize-- a Pi Cobbler Breakout Kit for Raspberry Pi.
Congratulations to our winners so far:
- 5-8-13, Pi Starter Pack: Jack Davis
- 5-15-13, Pi Model B 512MB RAM: Patrick Dunn
- 5-21-13, Prototyping Pi Plate Kit: Philip Kirby
- Next winner announced on 5-27-13!
Free Webinar: Hadoop
How to Build an Optimal Hadoop Cluster to Store and Maintain Unlimited Amounts of Data Using Microservers
Realizing the promise of Apache® Hadoop® requires the effective deployment of compute, memory, storage and networking to achieve optimal results. With its flexibility and multitude of options, it is easy to over or under provision the server infrastructure, resulting in poor performance and high TCO. Join us for an in depth, technical discussion with industry experts from leading Hadoop and server companies who will provide insights into the key considerations for designing and deploying an optimal Hadoop cluster.
Some of key questions to be discussed are:
- What is the “typical” Hadoop cluster and what should be installed on the different machine types?
- Why should you consider the typical workload patterns when making your hardware decisions?
- Are all microservers created equal for Hadoop deployments?
- How do I plan for expansion if I require more compute, memory, storage or networking?






Comments
Incorrect statements about Elisa
Alex,
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.
Thanks,
Matt