{"id":23,"date":"2008-06-22T15:59:52","date_gmt":"2008-06-22T14:59:52","guid":{"rendered":"http:\/\/blogs.igalia.com\/jfernandez\/2008\/06\/22\/what-could-we-do-with-clutter\/"},"modified":"2008-06-22T15:59:52","modified_gmt":"2008-06-22T14:59:52","slug":"what-could-we-do-with-clutter","status":"publish","type":"post","link":"https:\/\/blogs.igalia.com\/jfernandez\/2008\/06\/22\/what-could-we-do-with-clutter\/","title":{"rendered":"What could we do with Clutter ?"},"content":{"rendered":"
These last months i’ve been working with Clutter<\/a> project as part our GNOME R&D<\/em> project. Firstly, for who don’t know what Clutter<\/em> project exactly is, i would like to briefly introduce you this technology.The Clutter<\/em> project has created an open source software library for creating fast, visually rich and animated graphical user interfaces. Clutter uses OpenGL<\/a> (and optionally OpenGL ES<\/a> for use on Mobile<\/em> and embedded<\/em> platforms) for rendering but with an API<\/em> which hides the underlying GL <\/em>complexity from the developer. The Clutter<\/em> API<\/em> is intended to be easy to use, efficient and flexible.<\/div>\n

Basically, Clutter<\/em> provides a Canvas<\/em> for drawing complex graphics and effects. This Canvas<\/em> could be inserted inside a Gtk<\/em> context, using the Clutter-Gtk<\/em> library.<\/p>\n

The second part of my post will be focused on my work during last R&D<\/em> 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 <\/em>evolution and what would be the role of Clutter<\/em> project.<\/p>\n

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<\/em>\u00a0 client applications domain to develop new UI<\/em> concepts, in order to test the powerful of Clutter<\/em> as toolkit.<\/p>\n

The first thing i’ve realized when i read the Clutter<\/em> project documentation is that Clutter<\/em> is not actually a toolkit, as it’s mentioned in Clutter<\/em> 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<\/em> lacks of several important features required to be considered as UI toolkit. I think that, at least at this moment, Clutter<\/em> could be just considered as a graphical engine or scene graph<\/strong> tool. This point was also mentioned by some people inside gtk<\/em> developers community who are considering the approach of using Clutter<\/em> as scene graph concept for the next GTK 3.0.<\/em><\/p>\n

When finally i began to develop my test application i had assumed that it actually wont be a functional YouTube<\/em> 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.\u00a0 For implementing the communication with YouTube<\/em> web services i’ve found a very interesting implementation of YouTube GData API:<\/strong> libgdata<\/em> and libgdata-google<\/em>.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<\/strong> approach, provide Client access to google POA<\/em> through SOAP<\/em> interface.<\/p>\n

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

\"screenshot-youtube-test.png\"<\/a>\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\"screenshot-clutter-ui.png\"<\/a><\/p>\n

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<\/em>, although Clutter<\/em> provides more fancy effects.<\/p>\n

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

\"screenshot-clutter-ui2.png\"<\/a>\u00a0\u00a0 \u00a0\u00a0 \u00a0 \u00a0\u00a0\"screenshot-clutter-ui2-1.png\"<\/a> \u00a0 \u00a0 \u00a0\u00a0 \u00a0\u00a0\"screenshot-clutter-ui3.png\"<\/a><\/p>\n

\n

The most interesting questions i’ve made to myself at this point have not been about Clutter<\/em> technology capabilities, but what new UI<\/em> 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.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 … Continue reading What could we do with Clutter ?<\/span><\/a><\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,8],"tags":[],"class_list":["post-23","post","type-post","status-publish","format-standard","hentry","category-gnome","category-mobile"],"_links":{"self":[{"href":"https:\/\/blogs.igalia.com\/jfernandez\/wp-json\/wp\/v2\/posts\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.igalia.com\/jfernandez\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.igalia.com\/jfernandez\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.igalia.com\/jfernandez\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.igalia.com\/jfernandez\/wp-json\/wp\/v2\/comments?post=23"}],"version-history":[{"count":0,"href":"https:\/\/blogs.igalia.com\/jfernandez\/wp-json\/wp\/v2\/posts\/23\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.igalia.com\/jfernandez\/wp-json\/wp\/v2\/media?parent=23"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.igalia.com\/jfernandez\/wp-json\/wp\/v2\/categories?post=23"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.igalia.com\/jfernandez\/wp-json\/wp\/v2\/tags?post=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}