[go: up one dir, main page]

What could we do with Clutter ?

These last months i’ve been working with Clutter project as part our GNOME R&D project. Firstly, for who don’t know what Clutter project exactly is, i would like to briefly introduce you this technology.The Clutter project has created an open source software library for creating fast, visually rich and animated graphical user interfaces. Clutter uses OpenGL (and optionally OpenGL ES for use on Mobile and embedded platforms) for rendering but with an API which hides the underlying GL complexity from the developer. The Clutter API is intended to be easy to use, efficient and flexible.

Basically, Clutter provides a Canvas for drawing complex graphics and effects. This Canvas could be inserted inside a Gtk context, using the Clutter-Gtk library.

The second part of my post will be focused on my work during last R&D project iteration and what were my thoughts about this new and promising technology; there were several discussions in the gtk-devel list about the new GTK 3.0 evolution and what would be the role of Clutter project.

The best way to understand a technology, after read carefully all related documentation, is to implement a proof of concept. For that purpose, i’ve chosen the YouTube  client applications domain to develop new UI concepts, in order to test the powerful of Clutter as toolkit.

The first thing i’ve realized when i read the Clutter project documentation is that Clutter is not actually a toolkit, as it’s mentioned in Clutter project web page. With my understanding of the toolkit concept, it should be a set of tools for implementing user interfaces. However, user interfaces are not only graphical elements, but window management, theming support, advanced graphical components, translation support, applets and icons management, shortcuts, toolbars and menus or similar ways of activating user actions, … In that sense, Clutter lacks of several important features required to be considered as UI toolkit. I think that, at least at this moment, Clutter could be just considered as a graphical engine or scene graph tool. This point was also mentioned by some people inside gtk developers community who are considering the approach of using Clutter as scene graph concept for the next GTK 3.0.

When finally i began to develop my test application i had assumed that it actually wont be a functional YouTube client application, just an user interface proof of concept. Who knows what will happen in future, but for this project i’ ve focused the development in just one use case: querying for videos and show the results.  For implementing the communication with YouTube web services i’ve found a very interesting implementation of YouTube GData API: libgdata and libgdata-google.These libraries, also used inside evolution-data-server as static libraries, are also provided as independent libraries, at least, in Ubuntu hardy. These libraries, implemented using a GLib GObject approach, provide Client access to google POA through SOAP interface.

During the implementation of this YouTube client application i’ve implemented several UI for showing YouTube top_rated query results. The first approach was obviously a GtkTreeView view.

screenshot-youtube-test.png                               screenshot-clutter-ui.png

The first and simpler clutter approach would be to show results in a square grid. I have to say that the square grid its also possible to implement in Gtk, although Clutter provides more fancy effects.

After this first UI proposals, and after understanding better advanced operations with Clutter, i tried to define new ways of showing information, always thinking about how to improve the end user experience.

screenshot-clutter-ui2.png          screenshot-clutter-ui2-1.png          screenshot-clutter-ui3.png

The most interesting questions i’ve made to myself at this point have not been about Clutter technology capabilities, but what new UI concepts we want to achieve. I think there are several graphic technologies today providing new ways of drawing user interfaces, the important point is to define precisely how to present information and services to end users in a more intuitive way.

We are the champions !!!

Nobody had bet for us at the beginning of this season, even though i had a special feeling about this year. This could be my last season in the highest level of Galicia’s hockey league and i was strongly decided to work hard to achieve the best classification. There was several powerful teams (HC Liceo, A.C Ordenes, Domincos HC, …), all of them designed always to win, and sometimes, hring professional players.

Everybody in my team (H.C. Borbolla) was just thinking in enjoy playing hockey. However, we won almost every match during the first round. We only lost against H.C. Liceo, the best team in my opinion, with some very young player from Argentina and Portugal (the son of Jose Querido, the HC. Liceo Vodafone coach). This first position in the general classification makes us to start dreaming was possible.

Only the champion of Galicia’s hockey league would have access to the “Fase de Ascenso” tournament, which gets access to the 1º National division (the first professional hockey league in Spain, just under the highest category). We had an advantage of 5 points at the last two matches of this season. The  20 of April of 2008, H.C. Borbolla won his first Galicia’s hockey championship.

Two weeks after the Galcia’s championship, we attended “Fase de Ascenso” tournament. There was also three teams more: R.S.T. La Magdalena de Santander, FM Oviedo Roller, Siena Oberena Pamplona. The FM Oviedo Roller was the best team, formed with professional players hired from the “Division de Honor” league and of course, they were playing at home.

H.C Borbolla team

My first goal

Second goal

Finally, we lost the three matches 🙂 but we fought like lions.

It was a great experience about personal effort to improve every day, team cooperation and strong competition.

New feature for GtkUIManager class

I’ve been working for several months in the development of the Modest email client. It was a very interesting work, using gtk deeply trying to improve some internal features of the Gtk UI Manager system.

Modest has lots of strict rules about dimming toolbar icons, menu options, action widgets, …. Most applications don’t have a well designed system to manage this kind of events and that behaviour is shared between several files and classes; sometimes these dimming rules are implemented several times, which causes many runtime errors as well as some problems to extend classes and use cases logic.

During my work in Modest I designed a system to manage dimming logic in Gtk applications. This design is based on GtkUIManager system and tries to solve the same problem: centralize and simplify UI events on a GtkWindow. The following UML diagram shows an example of this system:

UIDimmingManager class diagram

Implementation details

The next step should be adding this logic to the Gtk core in order to be part of the GtkUIManager system. It will not be very hard to add this behaviour to that class, because UIDimmingManager pattern has the same structure than the Gtk UIManager.

The classes involved in this design and responsibilities are described as follow:

  • UIDimmingManager
    • This class stores and handles UI Dimming Rules Groups . Each rules group has a string name, which will be used inside the manager to execute a specific group. This rules group is stored internally in a hash map; however, a different data structure could be used for that purpose.
    • The API of this class exports two different methods to execute rules:
      • ui_dimming_manager_process_dimming_rules: execute all rules groups.
      • ui_dimming_manager_process_dimming_rules_group: execute a specific rules group.
  • DimmingRulesGroup
    • Stores and handles a dimming rules group.
    • It could also manage two different types of dimming rules:
      • Common dimming rules: This kind of rules are defined for GtkUIManager items, so they have to be defined previously inside the UIManager structure.
      • Widget dimming rules: These rules can be applied to any widget.
    • Each dimming rule could have a notification dialog in order to inform the user why some item is dimmed. This notification system is enabled or disabled for all rules defined in a single group.
  • DimingRule
    • This class actually implements dimming rules behaviour.
    • It should receive three parameters at creation time:
      • Window: a GtkWindow or CustomWindow instance to apply dimming rule.
      • Callback: callback function for checking dimming behaviour.
      • Action path: the path to locate UIAction element, registered in UIManager.
        • This parameter is optional, because for widget dimming rules is not required.
  • UIDimmingRules
    • This element was defined as a plain file, with a list of operations to be used as dimming rules callback.
    • Its similar to the common file used in UIManager stock items implementation for defining actions for each item.

Once you have defined your UIManager structure, with your xml file for defining stock items and UI actions, you only have to define your dimming data structure, very similar to UIManager
structure:

/* Menu Dimming rules entries */
static const DimmingEntry menu_dimming_entries [] = {

/* Email Menu */
{ "/MenuBar/Menu1/Menu1Submenu1/Menu1Submenu1Item1", G_CALLBACK(ui_dimming_rules_on_rule1) },
{ "/MenuBar/Menu1/Menu1Submenu1/Menu1Submenu1Item2", G_CALLBACK(ui_dimming_rules_on_rule1) },
{ "/MenuBar/Menu1/Menu1Item3", G_CALLBACK(ui_dimming_rules_on_rule1) },
{ "/MenuBar/Menu1/Menu1Item4", G_CALLBACK(ui_dimming_rules_on_rule1) },
{ "/MenuBar/Menu1/Menu1Item5", G_CALLBACK(ui_dimming_rules_on_rule1) },
{ "/MenuBar/Menu1/Menu1Item6", G_CALLBACK(ui_dimming_rules_on_rule1) },

{ "/MenuBar/Menu2/Menu2Submenu1/Menu2Submenu1Item1", G_CALLBACK(ui_dimming_rules_on_rule1) },
{ "/MenuBar/Menu2/Menu2Submenu1/Menu2Submenu1Item2", G_CALLBACK(ui_dimming_rules_on_rule1) },
{ "/MenuBar/Menu2/Menu2Item3", G_CALLBACK(ui_dimming_rules_on_rule1) },
{ "/MenuBar/Menu2/Menu2Item4", G_CALLBACK(ui_dimming_rules_on_rule1) },
{ "/MenuBar/Menu2/Menu2Item5", G_CALLBACK(ui_dimming_rules_on_rule1) },
{ "/MenuBar/Menu2/Menu2Item6", G_CALLBACK(ui_dimming_rules_on_rule1) },

{ "/MenuBar/Menu3/Menu3Submenu1/Menu3Submenu1Item1", G_CALLBACK(ui_dimming_rules_on_rule1) },
{ "/MenuBar/Menu3/Menu3Submenu1/Menu3Submenu1Item2", G_CALLBACK(ui_dimming_rules_on_rule1) },
{ "/MenuBar/Menu3/Menu3Item3", G_CALLBACK(ui_dimming_rules_on_rule1) },
{ "/MenuBar/Menu3/Menu3Item4", G_CALLBACK(ui_dimming_rules_on_rule1) },
{ "/MenuBar/Menu3/Menu3Item5", G_CALLBACK(ui_dimming_rules_on_rule1) },
{ "/MenuBar/Menu3/Menu3Item6", G_CALLBACK(ui_dimming_rules_on_rule1) }
};

Not all is work :)

I joined Borbolla hockey club several years ago, mainly to play my last years of semi-professional hockey. Its a very modest club, without money enough to pay for players (like other clubs), or material and sport equipment. I’ve been recruit players, who wants only to enjoy sport and not only competition.

logo-borbolla.jpg

After several years, i think we achieve to form a very good team, very funny and not too serious 🙂 but with a lot of talent. Now, this weekend we played a very important match against the first classified, We won the first match and we arrived separated only for two points, so it seemed a very hard match, and for sure it was. We won 2-3 in Ordenes court (noticia).
After this victory, we are first in general classification with a lot of chances of gain regional competition and get access to promotion tournament in Pamplona. The winner of this tournament will get access to 1ª (national) division.