You want to be able to tell when the pointer (e.g. associated with a mouse or touches on a screen) enters, leaves, or moves over an actor.
Example use cases include:
Adding a tooltip or hover effect to an actor when a pointer moves onto it.
Tracing the path of the pointer over an actor (e.g. in a drawing application).
Connect to the pointer motion signals emitted by the actor.
To detect the pointer crossing the boundary of an actor
(entering or leaving), connect to the enter-event
and/or leave-event signals. For example:
ClutterActor *actor = clutter_texture_new (); /* ...set size, color, image etc., depending on the actor... */ /* make the actor reactive: see Discussion for more details */ clutter_actor_set_reactive (actor, TRUE); /* connect to the signals */ g_signal_connect (actor, "enter-event", G_CALLBACK (_pointer_enter_cb), NULL); g_signal_connect (actor, "leave-event", G_CALLBACK (_pointer_leave_cb), NULL);
The signature for callbacks connected to each of these signals is:
gboolean
_on_crossing (ClutterActor *actor,
ClutterEvent *event,
gpointer user_data)In the callback, you can examine the event to get the
coordinates where the pointer entered or left the actor. For
example, _pointer_enter_cb() could
follow this template:
/* the event passed to the callback is of type ClutterCrossingEvent */
static gboolean
_pointer_enter_cb (ClutterActor *actor,
ClutterEvent *event,
gpointer user_data)
{
/* get the coordinates where the pointer crossed into the actor */
gfloat stage_x, stage_y;
clutter_event_get_coords (event, &stage_x, &stage_y);
/*
* as the coordinates are relative to the stage, rather than
* the actor which emitted the signal, it can be useful to
* transform them to actor-relative coordinates
*/
gfloat actor_x, actor_y;
clutter_actor_transform_stage_point (actor,
stage_x, stage_y,
&actor_x, &actor_y);
g_debug ("pointer at stage x %.0f, y %.0f; actor x %.0f, y %.0f",
stage_x, stage_y,
actor_x, actor_y);
return CLUTTER_EVENT_STOP;
}See the code example in the appendix for an example of how you can implement a hover effect on a "button" (rectangle with text overlay) using this approach.
Motion events occur when a pointer moves over an actor;
the actor emits a motion-event signal when this
happens. To respond to motion events, connect to this signal:
/* set up the actor, make reactive etc., as above */
/* connect to motion-event signal */
g_signal_connect (actor,
"motion-event",
G_CALLBACK (_pointer_motion_cb),
transitions);The signature of the callback is the same as for
the enter-event/leave-event signals, so you can use
code
similar to the above to handle it. However, the
type of the event is a ClutterMotionEvent
(rather than a ClutterCrossingEvent).
A few more useful things to know about pointer motion events:
Each crossing event is accompanied by a motion event at the same coordinates.
Before an actor will emit signals for pointer events, it needs to be made reactive with:
clutter_actor_set_reactive (actor, TRUE);
A pointer event structure includes other data. Some examples:
/* keys and mouse buttons pressed down when the pointer moved */ ClutterModifierType modifiers = clutter_event_get_state (event); /* time (since the epoch) when the event occurred */ guint32 event_time = clutter_event_get_time (event); /* actor where the event originated */ ClutterActor *actor = clutter_event_get_actor (event); /* stage where the event originated */ ClutterStage *stage = clutter_event_get_stage (event);
There's no need to cast the event to use these functions: they will work on any ClutterEvent.
The coordinates of an event (as returned by
clutter_event_get_coords()) are relative to the stage where they originated, rather than the actor. Unless the actor is the same size as the stage, you'll typically want the actor-relative coordinates instead. To get those, useclutter_actor_transform_stage_point().
The simple scribble application gives a more thorough example of how to integrate pointer events into a Clutter application (in this case, for drawing on a ClutterTexture).
The effect of actor depth on pointer motion events is worth slightly deeper discussion, and is covered next.
If you have actors stacked on top of each other, the
reactive actor nearest the "top" is the one
which emits the signal (when the pointer crosses into or moves
over it). "Top" here means either at the top of
the depth ordering (if all actors are at the same depth)
or the closest to the view point (if actors have different
depths in the z axis).
Here's an example of three rectangles overlapping each other:
The rectangles are all at the same point on the
z axis but stacked (different positions in the depth
order). They have the following properties:
The red rectangle is lowest down the depth ordering and reactive. Pointer motion signals are emitted by this actor when the pointer crosses or moves on the area of the rectangle not overlapped by the green rectangle.
The green rectangle is in the middle of the depth ordering and reactive. This actor emits events over its whole surface, even though it is overlapped by the blue rectangle (as the blue rectangle is not reactive).
Even if the blue rectangle were fully opaque, a pointer crossing into or moving on the green rectangle's area (even if obscured by the blue rectangle) would still cause a signal to be emitted.
The blue rectangle is at the top of the depth ordering and not reactive. This actor doesn't emit any pointer motion signals and doesn't block events from occurring on any other actor.
See the sample code in the appendix for more details.
Example 3.2. Simple button with a hover animation (change in opacity as the pointer enters and leaves it)
#include <clutter/clutter.h>
static const ClutterColor stage_color = { 0x33, 0x33, 0x55, 0xff };
static const ClutterColor yellow = { 0xaa, 0x99, 0x00, 0xff };
static const ClutterColor white = { 0xff, 0xff, 0xff, 0xff };
static gboolean
_pointer_enter_cb (ClutterActor *actor,
ClutterEvent *event,
gpointer user_data)
{
ClutterState *transitions = CLUTTER_STATE (user_data);
clutter_state_set_state (transitions, "fade-in");
return TRUE;
}
static gboolean
_pointer_leave_cb (ClutterActor *actor,
ClutterEvent *event,
gpointer user_data)
{
ClutterState *transitions = CLUTTER_STATE (user_data);
clutter_state_set_state (transitions, "fade-out");
return TRUE;
}
int
main (int argc, char *argv[])
{
ClutterActor *stage;
ClutterLayoutManager *layout;
ClutterActor *box;
ClutterActor *rect;
ClutterActor *text;
ClutterState *transitions;
if (clutter_init (&argc, &argv) != CLUTTER_INIT_SUCCESS)
return 1;
stage = clutter_stage_new ();
clutter_stage_set_title (CLUTTER_STAGE (stage), "btn");
clutter_actor_set_background_color (stage, &stage_color);
g_signal_connect (stage, "destroy", G_CALLBACK (clutter_main_quit), NULL);
layout = clutter_bin_layout_new (CLUTTER_BIN_ALIGNMENT_FILL,
CLUTTER_BIN_ALIGNMENT_FILL);
box = clutter_actor_new ();
clutter_actor_set_layout_manager (box, layout);
clutter_actor_set_position (box, 25, 25);
clutter_actor_set_reactive (box, TRUE);
clutter_actor_set_size (box, 100, 30);
/* background for the button */
rect = clutter_rectangle_new_with_color (&yellow);
clutter_actor_add_child (box, rect);
/* text for the button */
text = clutter_text_new_full ("Sans 10pt", "Hover me", &white);
/*
* NB don't set the height, so the actor assumes the height of the text;
* then when added to the bin layout, it gets centred on it;
* also if you don't set the width, the layout goes gets really wide;
* the 10pt text fits inside the 30px height of the rectangle
*/
clutter_actor_set_width (text, 100);
clutter_bin_layout_add (CLUTTER_BIN_LAYOUT (layout),
text,
CLUTTER_BIN_ALIGNMENT_CENTER,
CLUTTER_BIN_ALIGNMENT_CENTER);
/* animations */
transitions = clutter_state_new ();
clutter_state_set (transitions, NULL, "fade-out",
box, "opacity", CLUTTER_LINEAR, 180,
NULL);
/*
* NB you can't use an easing mode where alpha > 1.0 if you're
* animating to a value of 255, as the value you're animating
* to will possibly go > 255
*/
clutter_state_set (transitions, NULL, "fade-in",
box, "opacity", CLUTTER_LINEAR, 255,
NULL);
clutter_state_set_duration (transitions, NULL, NULL, 50);
clutter_state_warp_to_state (transitions, "fade-out");
g_signal_connect (box,
"enter-event",
G_CALLBACK (_pointer_enter_cb),
transitions);
g_signal_connect (box,
"leave-event",
G_CALLBACK (_pointer_leave_cb),
transitions);
/* bind the stage size to the box size + 50px in each axis */
clutter_actor_add_constraint (stage, clutter_bind_constraint_new (box, CLUTTER_BIND_HEIGHT, 50.0));
clutter_actor_add_constraint (stage, clutter_bind_constraint_new (box, CLUTTER_BIND_WIDTH, 50.0));
clutter_actor_add_child (stage, box);
clutter_actor_show (stage);
clutter_main ();
g_object_unref (transitions);
return 0;
}
Example 3.3. Detecting pointer motion on a ClutterRectangle
#include <clutter/clutter.h>
static const ClutterColor stage_color = { 0x33, 0x33, 0x55, 0xff };
static const ClutterColor rectangle_color = { 0xaa, 0x99, 0x00, 0xff };
static gboolean
_pointer_motion_cb (ClutterActor *actor,
ClutterEvent *event,
gpointer user_data)
{
gfloat stage_x, stage_y;
gfloat actor_x, actor_y;
clutter_event_get_coords (event, &stage_x, &stage_y);
clutter_actor_transform_stage_point (actor,
stage_x, stage_y,
&actor_x, &actor_y);
g_debug ("pointer @ stage x %.0f, y %.0f; actor x %.0f, y %.0f",
stage_x, stage_y,
actor_x, actor_y);
return TRUE;
}
int
main (int argc, char *argv[])
{
ClutterActor *stage;
ClutterActor *rectangle;
if (clutter_init (&argc, &argv) != CLUTTER_INIT_SUCCESS)
return 1;
stage = clutter_stage_new ();
clutter_actor_set_size (stage, 400, 400);
clutter_stage_set_color (CLUTTER_STAGE (stage), &stage_color);
g_signal_connect (stage, "destroy", G_CALLBACK (clutter_main_quit), NULL);
rectangle = clutter_rectangle_new_with_color (&rectangle_color);
clutter_actor_set_size (rectangle, 300, 300);
clutter_actor_set_position (rectangle, 50, 50);
clutter_actor_set_reactive (rectangle, TRUE);
clutter_container_add_actor (CLUTTER_CONTAINER (stage), rectangle);
g_signal_connect (rectangle,
"motion-event",
G_CALLBACK (_pointer_motion_cb),
NULL);
clutter_actor_show (stage);
clutter_main ();
return 0;
}
Example 3.4. How actors influence pointer events on each other
/*
* Testing what happens with a stack of actors and pointer events
* red and green are reactive; blue is not
*
* when the pointer is over green (even if green is obscured by blue)
* signals are emitted by green (not by blue);
*
* but when the pointer is over the overlap between red and green,
* signals are emitted by green
*
* gcc -g -O0 -o stacked-actors-and-events stacked-actors-and-events.c `pkg-config --libs --cflags clutter-1.0 glib-2.0` -lm
*/
#include <clutter/clutter.h>
static const ClutterColor stage_color = { 0x33, 0x33, 0x55, 0xff };
static const ClutterColor red = { 0xff, 0x00, 0x00, 0xff };
static const ClutterColor green = { 0x00, 0xff, 0x00, 0xff };
static const ClutterColor blue = { 0x00, 0x00, 0xff, 0xff };
static gboolean
_pointer_motion_cb (ClutterActor *actor,
ClutterEvent *event,
gpointer user_data)
{
gfloat stage_x, stage_y;
gfloat actor_x, actor_y;
/* get the coordinates where the pointer crossed into the actor */
clutter_event_get_coords (event, &stage_x, &stage_y);
/*
* as the coordinates are relative to the stage, rather than
* the actor which emitted the signal, it can be useful to
* transform them to actor-relative coordinates
*/
clutter_actor_transform_stage_point (actor,
stage_x, stage_y,
&actor_x, &actor_y);
g_debug ("pointer on actor %s @ x %.0f, y %.0f",
clutter_actor_get_name (actor),
actor_x, actor_y);
return TRUE;
}
int
main (int argc, char *argv[])
{
ClutterActor *stage;
ClutterActor *r1, *r2, *r3;
if (clutter_init (&argc, &argv) != CLUTTER_INIT_SUCCESS)
return 1;
stage = clutter_stage_new ();
clutter_actor_set_size (stage, 300, 300);
clutter_stage_set_color (CLUTTER_STAGE (stage), &stage_color);
g_signal_connect (stage, "destroy", G_CALLBACK (clutter_main_quit), NULL);
r1 = clutter_rectangle_new_with_color (&red);
clutter_actor_set_size (r1, 150, 150);
clutter_actor_add_constraint (r1, clutter_align_constraint_new (stage, CLUTTER_ALIGN_X_AXIS, 0.25));
clutter_actor_add_constraint (r1, clutter_align_constraint_new (stage, CLUTTER_ALIGN_Y_AXIS, 0.25));
clutter_actor_set_reactive (r1, TRUE);
clutter_actor_set_name (r1, "red");
r2 = clutter_rectangle_new_with_color (&green);
clutter_actor_set_size (r2, 150, 150);
clutter_actor_add_constraint (r2, clutter_align_constraint_new (stage, CLUTTER_ALIGN_X_AXIS, 0.5));
clutter_actor_add_constraint (r2, clutter_align_constraint_new (stage, CLUTTER_ALIGN_Y_AXIS, 0.5));
clutter_actor_set_reactive (r2, TRUE);
clutter_actor_set_depth (r2, -100);
clutter_actor_set_name (r2, "green");
r3 = clutter_rectangle_new_with_color (&blue);
clutter_actor_set_size (r3, 150, 150);
clutter_actor_add_constraint (r3, clutter_align_constraint_new (stage, CLUTTER_ALIGN_X_AXIS, 0.75));
clutter_actor_add_constraint (r3, clutter_align_constraint_new (stage, CLUTTER_ALIGN_Y_AXIS, 0.75));
clutter_actor_set_opacity (r3, 125);
clutter_actor_set_name (r3, "blue");
clutter_container_add (CLUTTER_CONTAINER (stage), r1, r2, r3, NULL);
g_signal_connect (r1, "motion-event", G_CALLBACK (_pointer_motion_cb), NULL);
g_signal_connect (r2, "motion-event", G_CALLBACK (_pointer_motion_cb), NULL);
clutter_actor_show (stage);
clutter_main ();
return 0;
}
Example 3.5. Scribbling on a ClutterTexture in response to pointer events
/*
* Simple scribble application: move mouse over the dark yellow
* rectangle to draw brighter yellow lines
*/
#include <clutter/clutter.h>
static const ClutterColor stage_color = { 0x33, 0x33, 0x55, 0xff };
static const ClutterColor actor_color = { 0xaa, 0x99, 0x00, 0xff };
typedef struct {
ClutterPath *path;
CoglPath *cogl_path;
} Context;
static void
_convert_clutter_path_node_to_cogl_path (const ClutterPathNode *node,
gpointer data)
{
ClutterKnot knot;
g_return_if_fail (node != NULL);
switch (node->type)
{
case CLUTTER_PATH_MOVE_TO:
knot = node->points[0];
cogl_path_move_to (knot.x, knot.y);
g_debug ("move to %d, %d", knot.x, knot.y);
break;
case CLUTTER_PATH_LINE_TO:
knot = node->points[0];
cogl_path_line_to (knot.x, knot.y);
g_debug ("line to %d, %d", knot.x, knot.y);
break;
default:
break;
}
}
static void
_canvas_paint_cb (ClutterActor *actor,
gpointer user_data)
{
Context *context = (Context *)user_data;
cogl_set_source_color4ub (255, 255, 0, 255);
cogl_set_path (context->cogl_path);
clutter_path_foreach (context->path, _convert_clutter_path_node_to_cogl_path, NULL);
cogl_path_stroke_preserve ();
clutter_path_clear (context->path);
context->cogl_path = cogl_get_path ();
g_signal_stop_emission_by_name (actor, "paint");
}
static gboolean
_pointer_motion_cb (ClutterActor *actor,
ClutterEvent *event,
gpointer user_data)
{
ClutterMotionEvent *motion_event = (ClutterMotionEvent *)event;
Context *context = (Context *)user_data;
gfloat x, y;
clutter_actor_transform_stage_point (actor, motion_event->x, motion_event->y, &x, &y);
g_debug ("motion; x %f, y %f", x, y);
clutter_path_add_line_to (context->path, x, y);
clutter_actor_queue_redraw (actor);
return TRUE;
}
static gboolean
_pointer_enter_cb (ClutterActor *actor,
ClutterEvent *event,
gpointer user_data)
{
ClutterCrossingEvent *cross_event = (ClutterCrossingEvent *)event;
Context *context = (Context *)user_data;
gfloat x, y;
clutter_actor_transform_stage_point (actor, cross_event->x, cross_event->y, &x, &y);
g_debug ("enter; x %f, y %f", x, y);
clutter_path_add_move_to (context->path, x, y);
clutter_actor_queue_redraw (actor);
return TRUE;
}
int
main (int argc, char *argv[])
{
Context *context = g_new0 (Context, 1);
ClutterActor *stage;
ClutterActor *rect;
ClutterActor *canvas;
if (clutter_init (&argc, &argv) != CLUTTER_INIT_SUCCESS)
return 1;
context->path = clutter_path_new ();
cogl_path_new ();
context->cogl_path = cogl_get_path ();
stage = clutter_stage_new ();
clutter_actor_set_size (stage, 400, 400);
clutter_stage_set_color (CLUTTER_STAGE (stage), &stage_color);
g_signal_connect (stage, "destroy", G_CALLBACK (clutter_main_quit), NULL);
rect = clutter_rectangle_new_with_color (&actor_color);
clutter_actor_set_size (rect, 300, 300);
clutter_actor_add_constraint (rect, clutter_align_constraint_new (stage, CLUTTER_ALIGN_X_AXIS, 0.5));
clutter_actor_add_constraint (rect, clutter_align_constraint_new (stage, CLUTTER_ALIGN_Y_AXIS, 0.5));
clutter_container_add_actor (CLUTTER_CONTAINER (stage), rect);
canvas = clutter_texture_new ();
clutter_actor_set_size (canvas, 300, 300);
clutter_actor_add_constraint (canvas, clutter_align_constraint_new (rect, CLUTTER_ALIGN_X_AXIS, 0.0));
clutter_actor_add_constraint (canvas, clutter_align_constraint_new (rect, CLUTTER_ALIGN_Y_AXIS, 0.0));
clutter_actor_set_reactive (canvas, TRUE);
clutter_container_add_actor (CLUTTER_CONTAINER (stage), canvas);
clutter_actor_raise_top (canvas);
g_signal_connect (canvas,
"motion-event",
G_CALLBACK (_pointer_motion_cb),
context);
g_signal_connect (canvas,
"enter-event",
G_CALLBACK (_pointer_enter_cb),
context);
g_signal_connect (canvas,
"paint",
G_CALLBACK (_canvas_paint_cb),
context);
clutter_actor_show (stage);
clutter_main ();
g_object_unref (context->path);
g_free (context);
return 0;
}