Home ›

Innovative Interfaces with Clutter

Issue 186

From Issue #186
October 2009

Oct 01, 2009  By Alex Crits-Christoph
 in
Use Clutter to develop OpenGL applications with rich 2-D and 3-D interfaces that include object rotation, scaling, texturing and more.

Listing 3. Clutter Rotating a Video


import clutter 
import gst 
from clutter import cluttergst 

class HelloWorld: 
    def __init__ (self): 
        self.stage = clutter.Stage() 
        self.stage.set_color(clutter.color_parse('Black')) 
        self.stage.set_size(500, 400)
        self.stage.set_title('Clutter 3-D Video Player') 

        # Setup video.
        video_tex = cluttergst.VideoTexture()
        self.pipeline = gst.Pipeline("mypipe") 
        playbin = video_tex.get_playbin()
        movfile = "file:///home/user/Videos/Video.mov"
        playbin.set_property('uri', movfile)
        self.pipeline.add(playbin) 
        video_tex.set_position(90,80)
        self.stage.add(video_tex)
        self.pipeline.set_state(gst.STATE_PLAYING)

        # Create timeline that lasts for 100 frames
        # at ten frames per second.
        timeline = clutter.Timeline(100, 10)

        # Set timeline to loop forever.
        timeline.set_loop(True)

        # Create an alpha.
        alpha = clutter.Alpha(timeline, clutter.smoothstep_dec_func)
        
        # Set up rotation. 
        Rotation = clutter.BehaviourRotate(
                               axis=clutter.Y_AXIS, 
                               direction=clutter.ROTATE_CW, 
                               angle_start=0,
                               angle_end=360, 
                               alpha=alpha) 
        Rotation.set_center(160, 160, 0) 
        Rotation.apply(video_tex) 

        # Start it all up.
        timeline.start()  
        self.stage.show_all() 
        clutter.main()
        
         
# Run program.
main = HelloWorld()

Figure 4. The 3-D Clutter Video Player, Partway through Rotating the Video

The Alpha Functions

At first, especially to those who've forgotten their Calculus and Algebra, the alpha functions may seem unpredictable or confusing. There is a large list of the number of available functions: exp_dec_func, exp_inc_func, ramp_dec_func, ramp_func, ramp_inc_func, sine_dec_func, sine_func, sine_half_func, sine_inc_func, smoothstep_dec_func, smoothstep_inc_func and square_func. Here's a brief explanation of each type:

  • Exponential functions: depending on whether you're using a decaying function or an increasing function, exponential functions make the animation speed up or slow down at an exponential rate.

  • Ramp functions: ramp functions animate at a constant speed. However, the full ramp function animates at both a negative and a positive constant speed by switching directions.

  • Sine functions: sine functions make the animation reverse. Like the graph of a sine function, the animation would speed up, slow down, change directions, speed up in the reverse direction, and then slow down again.

  • Smooth step functions: the smooth step function works logistically. It starts slowly, then quickly increases and finally slows down toward the end of the animation.

  • Square functions: square functions follow a step pattern, which results in quick changes between two constant animation speeds.

Hopefully, you've learned a good deal about how Clutter works, and you can start developing and programming using the Clutter API. Using just the features you've seen here, you'll be able to create any interface that uses text, buttons, images and video with Clutter. Of course, after learning the basics, the more advanced UI elements will become easier to understand and work with.

In the future, the Clutter developers will continue to improve and update the API, and many new improvements are expected in the Clutter 1.0 release. You can learn more about the Clutter development process from the Web site (see Resources). Clutter is going to power many innovative open-source applications in the future.

Resources

Clutter Home Page: clutter-project.org

Elisa Project Page: elisa.fluendo.com

Clutter Source Files: www.clutter-project.org/sources

Alex Crits-Christoph has been working with Linux for some time now. He enjoys developing and designing open-source graphical user interfaces.

______________________

Comments

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
Submitted by Matt Layman (not verified) on Sat, 12/19/2009 - 09:58.

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

White Paper
More Resources
Fabric-Based Computing Enables Optimized Hyperscale Data Centers

Today’s modular x86 servers are compute-centric, designed as a least common denominator to support a wide range of IT workloads. Those generic, virtualized IT workloads have much different resource optimization requirements than hyperscale and cloud applications. They have resulted in a “one size fits all” enterprise IT architecture that is not optimized for a specific set of IT workloads, and especially not emerging hyperscale workloads, such as web applications, big data, and object storage. In this report, you will learn how shifting the focus from traditional compute-centric IT architectures to an innovative disaggregated fabric-based architecture can optimize and scale your data center.

Learn More

Sponsored by AMD

White Paper
More Resources
Red Hat White Paper: Using an Open Source Framework to Catch the Bad Guy

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.

Learn More

Sponsored by DLT Solutions