You Got A Question? Ask    GNOME Community!

gtk-theme2
 14318   |  Oct 25
 10565   |  Aug 25
gtk_logo2
 9815   |  Mar 17
arch
 8908   |  Mar 28

Gjs + Clutter Samples | Create some simple Actors

This post was made with an older stylesheet

I am not comfortable with Gjs and GObject Introspection (just started today), but would be trivial to learn. Anyway I will start with the basics, create a Stage, add some Clutter Actors on it and do some Events handling. I won’t use any GTK as I don’t like it or need it, but you can easily use it after you learn how Gjs works.

Create a Stage

First of all we need to create a stage.

#!/usr/bin/gjs

//Import Clutter
const Clutter = imports.gi.Clutter;

//Initialize Clutter
Clutter.init (null, 0);

//Create some colors from Clutter Color pattern
let stage_bg_color = Clutter.Color.get_static(Clutter.StaticColor.CHOCOLATE_DARK);
//OR Create a custom color
//let black = new Clutter.Color( {red:0, blue:0, green:0, alpha:255} );

//Some constants for sizes
const Size_Large = 500;

//Create Stage
let stage = Clutter.Stage.get_default();

//Some Stage Options
stage.set_size(Size_Large, Size_Large);
stage.title = "Stage Example";
stage.set_background_color(stage_bg_color);

//Show the Stage
stage.show();

//Add destroy event on exit
stage.connect("destroy", Clutter.main_quit);

//Start the main Loop
Clutter.main();

And this is the result

There isn’t much to explain as the code is straight forward :)

Add an Actor

Previous was just an empty stage.  So we need to add some objects on it.

#!/usr/bin/gjs

//Import Clutter
const Clutter = imports.gi.Clutter;

//Initialize Clutter
Clutter.init (null, 0);

//Create some colors from Clutter Color pattern
let stage_bg_color = Clutter.Color.get_static(Clutter.StaticColor.CHOCOLATE_DARK);
let actor_bg_color_plum = Clutter.Color.get_static(Clutter.StaticColor.PLUM);

//Some constants for sizes
const Size_Large = 500;
const Size_Small = 200;

//Create a custom color
//let black = new Clutter.Color( {red:0, blue:0, green:0, alpha:255} );

//Create Stage
let stage = Clutter.Stage.get_default();

//Some Stage Options
stage.set_size(Size_Large, Size_Large);
stage.title = "Actor Example";
stage.set_background_color(stage_bg_color);

//Create an actor
let myactor = new Clutter.Actor();

//Actor Options
myactor.set_position(20,20);
myactor.set_size(Size_Small,Size_Small);
myactor.set_background_color(actor_bg_color_plum);

//Add Actor to the Stage
stage.add_child(myactor);

//Show the Stage
stage.show();

//Add destroy event on exit
stage.connect("destroy", Clutter.main_quit);

//Start the main Loop
Clutter.main();

And this is the result

This is a stupid way to add objects, normally we add them inside some containers, but I will explain this in a next tutorial, because we have many layouts, depending our needs.

Add some event handling

The only event we had so far was the stage.connect("destroy", Clutter.main_quit); which kills the application when we press Mutter’s ‘x’ button. Next I will create another event for pressing mouse over our plum actor.

#!/usr/bin/gjs

//Import Clutter
const Clutter = imports.gi.Clutter;

//Initialize Clutter
Clutter.init (null, 0);

//Create some colors from Clutter Color pattern
let stage_bg_color = Clutter.Color.get_static(Clutter.StaticColor.CHOCOLATE_DARK);
let actor_bg_color_plum = Clutter.Color.get_static(Clutter.StaticColor.PLUM);

//Some constants for sizes
const Size_Large = 500;
const Size_Small = 200;

//Create a custom color
//let black = new Clutter.Color( {red:0, blue:0, green:0, alpha:255} );

//Create Stage
let stage = Clutter.Stage.get_default();

//Some Stage Options
stage.set_size(Size_Large, Size_Large);
stage.title = "Event Example";
stage.set_background_color(stage_bg_color);

//Create an actor
let myactor = new Clutter.Actor();

//Actor Options
myactor.set_position(20,20);
myactor.set_size(Size_Small,Size_Small);
myactor.set_background_color(actor_bg_color_plum);

//Set actore re-active on events
myactor.set_reactive(true);

//Make a dummy function that prints a message in terminal 
function print_something(stage, event) {	
	print("Hello World!");
}

//Add the signal to our actor
myactor.connect("button-press-event", print_something);

//Add Actor to the Stage
stage.add_child(myactor);

//Show the Stage
stage.show();

//Add destroy event on exit
stage.connect("destroy", Clutter.main_quit);

//Start the main Loop
Clutter.main();

And this is the result

When we click on Plum box, we get an impressive (ha!) message in our terminal. Notice that we have to set our actors reactive in order to response in events. Many times we forget that and we are wondering why our events don’t work. Also the print something function doesn’t accept parameters so we have to pass there an array if we need some extra variables.

Documentation

Hmm, there isn’t any of it. You can check the C API of Clutter  which is really amazing, and read the G Object Introspection tutorials, which explain how to translate C to JavaScript, not in very comprehensive way thought. You can also Google for PyGtk tutorials which are similar to JavaScript.

Next time I”ll show how to add text, images and make some layouts. Of course this isn’t meant to be a complete guide, but something you can start fast with.

Gjs and Clutter is the bright future of Gnome!


 
  We can't watch comments unless G+ provides an API or if you send a notification, e.g +World Of Gnome
     Sometimes is better to place your questions on GNOME Community
  • Pingback: Learn PyGTK and help Gnome grow bigger! | woGue

  • http://www.facebook.com/semmuhun László Boros

    Wow, it’s very nice to see that GJS works and is actually a very comfortable way to RAD. It is as elegant as Python. The only problem is with the documentation… It these things are working, why aren’t the devs releasing some API docs?…

    • alex285

      They are lacking in resources

      • http://www.facebook.com/semmuhun László Boros

        Wow, that’s sad to hear. But aren’t they able to generate some docs from source code?

        • alex285

          I do not if you can auto-generate API, Gjs is just bindings to Objects. You can translate the C API somehow like that:
          In CClutterActor.set_name(Actor *myActor, “name”);
          In JavaScript
          myActor.set_name(“name”);

          You can also follow Pythons Docs that are similar to JavaScript

  • Pingback: Links 7/8/2012: OpenGL 4.3, Nautilus Forked | Techrights

  • http://twitter.com/pahnin phanindra

    Is gjs faster or native c code? and gjs works on unity?

    • alex285

      Using C for UI Apps, has not one single advantage. In theory C is faster, in practice there is no difference. Gnome Shell interface is written with gjs. Yes, you can use it with Ubuntu (sudo apt-get install gjs gjs-dev).
      If you want native C, try Vala (https://live.gnome.org/Vala/) that it has a C# similar syntax, is OO and it generates C code.

      • http://twitter.com/pahnin phanindra

        ok. thanks

  • Pingback: Get it started with Gnome development! | woGue