Stage Widget

The GtkClutterEmbed widget allows you to place a ClutterStage inside an existing GTK+ window. For instance, the window might contain other GTK+ widgets allowing the user to affect the actors in stage. Use gtk_clutter_embed_new() to instantiate the widget and then add it to a container just like any other GTK+ widget. Call gtk_clutter_embed_get_stage to get the ClutterStage from the GtkClutterEmbed widget so you can then use the main Clutter API.

When using the GtkClutterEmbed widget you should use gtk_clutter_init instead of clutter_init() and gtk_init() to initialize Clutter and GTK+. And you should use the regular gtk_main() function to start the mainloop rather than clutter_main().

For simplicity, all other examples in this document will instead use clutter_stage_get_default(), but all the techniques can also be used with a stage inside the GtkClutterEmbed widget.

Reference

GTK+ integration

Clutter contains some useful utility functions to help you integrate your use of GTK+ and the parts you draw with Clutter.

To embed stock or other icons into clutter you can use the gtk_clutter_texture_new_from_*() functions. If you need to draw in the correct theme colors then the gtk_clutter_get_*_color() functions can receive a theme color for a GtkWidget in the current state and convert it to a ClutterColor for use with Clutter.

Example

The following example shows a GtkClutterEmbed GTK+ widget and changes the stage color when a button is clicked.

Note that this example requires the clutter-gtk-0.9 library as well as the standard clutter-0.9 library. You can create an executable from this code like so, being careful to use backticks around the call to pkg-config. See also the Header Files And Linking section.

gcc -Wall -g example.c -o example `pkg-config clutter-0.9 clutter-gtk-0.9 --cflags  --libs`

Figure 4.2. Stage Widget

Stage Widget

Source Code

File: main.c

#include <gtk/gtk.h>
#include <clutter/clutter.h>
#include <clutter-gtk/clutter-gtk.h>
#include <stdlib.h>

ClutterActor *stage = NULL;

static gboolean
on_button_clicked (GtkButton *button, gpointer user_data)
{
  static gboolean already_changed = FALSE;
  if(already_changed)
  {
    ClutterColor stage_color = { 0x00, 0x00, 0x00, 0xff }; /* Black */
    clutter_stage_set_color (CLUTTER_STAGE (stage), &stage_color);
  }
  else
  {
    ClutterColor stage_color = { 0x20, 0x20, 0xA0, 0xff };
    clutter_stage_set_color (CLUTTER_STAGE (stage), &stage_color);
  }

  already_changed = !already_changed;

  return TRUE; /* Stop further handling of this event. */
}

static gboolean
on_stage_button_press (ClutterStage *stage, ClutterEvent *event, gpointer user_data)
{
  gint x = 0;
  gint y = 0;
  clutter_event_get_coords (event, &x, &y);

  g_print ("Stage clicked at (%d, %d)\n", x, y);

  return TRUE; /* Stop further handling of this event. */
}

int main(int argc, char *argv[])
{
  ClutterColor stage_color = { 0x00, 0x00, 0x00, 0xff }; /* Black */

  gtk_clutter_init (&argc, &argv);

  /* Create the window and some child widgets: */
  GtkWidget *window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  GtkWidget *vbox = gtk_vbox_new (FALSE, 6);
  gtk_container_add (GTK_CONTAINER (window), vbox);
  gtk_widget_show (vbox);
  GtkWidget *button = gtk_button_new_with_label ("Change Color");
  gtk_box_pack_end (GTK_BOX (vbox), button, FALSE, FALSE, 0);
  gtk_widget_show (button);
  g_signal_connect (button, "clicked",
    G_CALLBACK (on_button_clicked), NULL);

  /* Stop the application when the window is closed: */
  g_signal_connect (window, "hide",
                    G_CALLBACK (gtk_main_quit), NULL);

  /* Create the clutter widget: */
  GtkWidget *clutter_widget = gtk_clutter_embed_new ();
  gtk_box_pack_start (GTK_BOX (vbox), clutter_widget, TRUE, TRUE, 0);
  gtk_widget_show (clutter_widget);

  /* Set the size of the widget, 
   * because we should not set the size of its stage when using GtkClutterEmbed.
   */ 
  gtk_widget_set_size_request (clutter_widget, 200, 200);

  /* Get the stage and set its size and color: */
  stage = gtk_clutter_embed_get_stage (GTK_CLUTTER_EMBED (clutter_widget));
  clutter_stage_set_color (CLUTTER_STAGE (stage), &stage_color);

  /* Show the stage: */
  clutter_actor_show (stage);

  /* Connect a signal handler to handle mouse clicks and key presses on the stage: */ 
  g_signal_connect (stage, "button-press-event",
    G_CALLBACK (on_stage_button_press), NULL);

  /* Show the window: */
  gtk_widget_show (GTK_WIDGET (window));

  /* Start the main loop, so we can respond to events: */
  gtk_main ();

  return EXIT_SUCCESS;

}