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

Webcast
More Resources
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.

Learn More

Sponsored by AMD

White Paper
More Resources
Private PaaS for the Agile Enterprise

If you already use virtualized infrastructure, you are well on your way to leveraging the power of the cloud. Virtualization offers the promise of limitless resources, but how do you manage that scalability when your DevOps team doesn’t scale? In today’s hypercompetitive markets, fast results can make a difference between leading the pack vs. obsolescence. Organizations need more benefits from cloud computing than just raw resources. They need agility, flexibility, convenience, ROI, and control.

Stackato private Platform-as-a-Service technology from ActiveState extends your private cloud infrastructure by creating a private PaaS to provide on-demand availability, flexibility, control, and ultimately, faster time-to-market for your enterprise.

Learn More

Sponsored by ActiveState