Introduction

Ce petit tutoriel va vous faire découvrir quelques spécificités du binding Javascript et comment utiliser Ecore_Evas pour créer une fenêtre graphique, Evas pour manipuler des objets, gérer les événements clavier et Ecore pour la gestion du temps et d'une animation.

Elixir

Lorsque votre script démarre, Elixir n'a qu'un seul objet de disponible, l'objet elx. Il faut lui demander de charger les différents modules dont votre application va avoir besoin. Dans le cadre de cet exemple, nous aurons besoin de Ecore_Evas, Ecore et Evas. Créez donc un fichier " Simple.js " et commençons par initialiser ces modules :

var test = true;

test &= elx.load("evas");
test &= elx.load("ecore");
test &= elx.load("ecore-evas");

Comme les modules sont tous optionnels, et que Elixir ne les fournit pas forcément, il faut tester leur disponibilité. Ici, si la variable test vaut true, votre initialisation se sera bien passée.

Initialisation de l'écran

Nous allons maintenant créer une fenêtre graphique. Pour cela nous allons d'abord initialiser Ecore (Capture des évènements) et Ecore_Evas (Instantiations graphique).

function main()
{
   var bg;
   var obj;

   ecore_init();
   ecore_evas_init();

   ecore_animator_frametime_set(1 / 20);

Ce bout de code initialise donc les deux modules et indique à Ecore que ses animator devront fonctionner à la fréquence de 20 tick par seconde. Les animator sont des timers qui ont la propriété d'être exécutés à un intervalle régulier, ici tous les vingtième de seconde, et surtout tous les animator sont exécutes au même moment. L'idée, c'est que l'on veut que toutes nos animations arrivent en même temps et pour cela il faut que tous les timers s'exécutent de manière synchronisée. Ce que font les animator.

Maintenant créons notre fenêtre :

   ee = ecore_evas_new(null, 0, 0, 720, 576, "name=Test;");

Nous demandons donc une fenêtre de 720 pixels par 576 avec comme titre " Test " au moteur graphique le plus adapté sur la machine qu'on utilise (premier paramètre à null).

Maintenant que nous avons cette fenêtre, nous pouvons commencer à définir quelques paramètres du canvas Evas.

   var evas = ecore_evas_get(ee);

   evas_image_cache_set(evas, 10 * 1024 * 1024);
   evas_font_path_prepend(evas, FN);
   evas_font_cache_set(evas, 512 * 1024);

On limite ainsi le cache d'image inutilisées à 10 Mo, le cache de polices 0 512 Ko et on indique que les fonts se trouveront dans le répertoire FN.

Création d'objet graphique

Par défaut un canvas Evas n'a pas de fond et donc une fenêtre peut être complètement transparente. Or pour notre exemple, cela ne nous arrange pas vraiment. Nous allons ajouter un rectangle opaque noir pour faire le fond.

   obj = evas_object_rectangle_add(evas);
   evas_object_resize(obj, 720, 576);
   evas_object_color_set(obj, 0, 0, 0, 255);
   evas_object_show(obj);
   bg = obj;

Comme Evas est un canvas stateful, il suffit de créer un objet rectangle et de changer ses propriétés. Les objets étant empilés au fur et à mesure sur le canvas, le premier créé se trouve forcément au fond. Nous avons donc bien créé une fenêtre avec un fond noir opaque. evas_object_color_set qui prend en paramètre un Evas_Object et une couleur au format RGBA, c'est-à-dire Rouge, Vert, Bleu et Alpha avec des valeurs sur 8 bits (entre 0 et 255). Donc le noir opaque, c'est bien " 0, 0, 0, 255 ".

Comme par défaut, un objet n'est pas visible, il ne faut pas oublier de dire au canvas de l'afficher.

Maintenant que nous avons notre fond d'écran, rajoutons un autre rectangle qui lui sera animé.

   obj = evas_object_rectangle_add(evas);
   evas_object_resize(obj, 250, 200);
   evas_object_color_set(obj, 128, 64, 0, 180);
   evas_object_move(obj, 50, 50);
   evas_object_show(obj);

Ce rectangle est légèrement transparent, comme ça à titre d'exercice si vous en ajoutez plusieurs vous pourrez les voir se superposer.

C'est le moment de créer l'animator qui sera chargé de faire bouger ce rectangle. Pour cela nous allons juste faire :

   ecore_animator_add(anim_cb, obj);

anim_cb est la fonction qui sera appelée tous les 1/20 s par Ecore. C'est plutot simple et nous verrons après ce que nous mettrons comme code dans cette fonction. Pour l'instant nous allons finir de créer notre fenêtre par :

   ecore_evas_show(ee);

Boucle principale et fin du programme

Maintenant que notre fenêtre est créée, nous pouvons démarrer la boucle principale d'Ecore. C'est elle qui va déclencher l'appel des bonnes fonctions au fur et à mesure que le temps passe. Cela veut aussi dire que lorsque cette fonction finit de s'exécuter, votre programme a fini.

   ecore_main_loop_begin();

Donc maintenant que notre programme a fini, nous pouvons faire le ménage avant de partir. Détruisons d'abord les objets créés.

   evas_object_del(obj);
   evas_object_del(bg);

Puis la fenêtre.

   ecore_evas_free(ee);

Et maintenant, on peut éteindre la lumière.

   ecore_evas_shutdown();
   ecore_shutdown();
}

Et voila, notre fonction principale est maintenant correctement écrite. Il faut juste l'appeler si tous les modules nécessaire sont disponibles. Le petit bout de code suivant y suffira :

if (test)
  main();

Animator

Occupons nous d'ajouter un peu de mouvement. Tout d'abord, il va nous falloir deux propriétés supplémentaires au rectangle que l'on veut animer pour indiquer son vecteur de déplacement. Pour cela nous allons rajouter deux lignes dans le main pour le définir :

   evas_object_data_set(obj, "dx", +20);
   evas_object_data_set(obj, "dy", +10);

Ces deux lignes doivent se trouver entre la création du rectangle à animer et le démarrage de la boucle d'Ecore pour qu'elle soit prise en compte correctement.

Maintenant nous pouvons coder notre fonction d'animation.

function anim_cb(obj)
{

Le prototype d'une callback d'un animator a juste comme paramètre l'objet passé en paramètre lorsqu'on a instancié l'animator.

   var geom = evas_object_geometry_get(obj);
   var dx, x;
   var dy, y;

   dx = evas_object_data_get(obj, "dx");
   dy = evas_object_data_get(obj, "dy");

Tout d'abord nous récupérons les coordonnées de l'objet et les propriétés de son vecteur vitesse. Notez que le prototype de evas_object_geometry_get est légèrement différent de la version en C puisqu'il retourne un objet geometry qui contient la position en pixel dans les champs x et y et la taille dans w (width) et h (height).

Nous pouvons donc maintenant calculer sa nouvelle position :

   x = geom.x + dx;
   y = geom.y + dy;

   if (x + 250 > 720 || x < 0)
     {
        dx = -dx;
        x += 2 * dx;

        evas_object_data_set(obj, "dx", dx);
     }

   if (y + 200 > 576 || y < 0)
     {
        dy = -dy;
        y += 2 * dy;

        evas_object_data_set(obj, "dy", dy);
     }

Notez qu'on ne met a jour le vecteur vitesse que si c'est nécessaire.

Enfin nous pouvons déplacer l'objet :

   evas_object_move(obj, x, y);

Et comme tout s'est bien passé, nous pouvons quitter l'animator et indiquer que celui-ci doit continuer de fonctionner (il suffit de retourner 0 pour qu'il soit détruit).

   return 1;
}

Et voila, nous avons maintenant un rectangle animé. Mais nous ne pouvons pas quitter notre application.

Evénements

Pour cela, il faut capturer les événements claviers et détecter l'appui sur une touche. De manière générale, on ne quittera une application que lorsqu'une touche sera relâchée et non lorsqu'elle sera appuyée.

Nous allons tout d'abord ajouter une callback qui prendra en compte le relâchement d'une touche sur le background et lui donner le focus clavier. Dans le main, avant le démarrage de la boucle principale, il faut ajouter :

   evas_object_event_callback_add(bg, EVAS_CALLBACK_KEY_UP, key_up_cb, null);
   evas_object_focus_set(bg, 1);

Maintenant nous devons ajouter cette fonction keyupcb qui sera appelée à chaque fois qu'une touche du clavier sera relâchée.

function key_up_cb(data, e, obj, event)
{

Le prototype est un peu plus complexe que pour un animateur. Tout d'abord, on reçoit dans data la valeur passée lors de l'instanciation de la callback, ici null. Ensuite on reçoit dans e le canvas Evas sur lequel se trouve l'objet obj. Et enfin dans event le contenu de l'événement. Ici celui lié au relâchement d'une touche clavier. Dont seule la propriété keyname nous intéresse.

   switch (event.keyname)
     {
      case "b":
      case "Red":
      case "equal":
      case "Stop":
      case "Home":
      case "Escape":
      case "Start":
         ecore_main_loop_quit();
         break;
     }
}

On teste quelques touches qui, si elles sont relâchées, vont déclencher la fin de la boucle principale d'Ecore.

Et voila notre premier programme Elixir terminé. Vous pouvez vous amuser à ajouter plus de rectangles qui bougent, à changer la vitesse de rafraichissement, à animer la couleur des rectangles aussi...

Vous trouverez toute la source de cet exemple ici. Et il suffira d'executer la ligne de commande suivante: elixir Simple.js pour pouvoir voir le résultat final.

Have fun !