Ella : projet de logiciel d'animation Flash & SVG pour Linux

Tony95 · Le 08/06/2009, à 17:29

Salut à tous je savais pas trop où poster donc je le fais ici. J'ai un petit soucis en GTK, j'aimerais créer une interface permettant de charger et sauvegarder des fichiers mais j'arrive vraiment pas à m'en sortir pour le code. En gros j'ai une fenetre qui me sert de menu avec 4 boutons dont deux servant respectivement à charger et à sauvegarder des fichiers.

J'ai du mal à connecter chaque bouton à la fonction qui va avec (c'est mon premier soucis). Ce que je veux dire c'est qu'après avoir cliqué sur le bouton "sauvegarder" j'aimerais avoir l'affichage de la fenêtre de chargement des fichiers. Et la même chose pour sauvegarder aussi. J'ai juste trouvé une fonction pour renvoyer le chemin du fichier sélectionné mais elle est un peu inutile.

Je tien sà préciser que je suis nul en GTK et que j'ai juste des notions de base. Merci d'avance pour votre aide.

philarmonie · Le 08/06/2009, à 19:02

@ kevlar: c'est surtout les abscisses dont tu as besoin pour la position des events, non? et la police a un impact dessus?
Pour ce qui est de la technique de surcharge, là ça rentre dans du C donc je ne comprends pas tout, mais on doit pouvoir faire sans.
Normalement quelque soient les containers dans lesquels se trouve ton widget, ça n'a pas d'impact sur la façon de gérer les events.
Pour le motion-notify-event en python je peux le capter sans problème

#!/usr/bin/pyhton

import gtk

class Win:
    def __init__(self):
        self.win = gtk.Window()
        self.ruler = gtk.HRuler()
        self.ruler.set_size_request(200, 20)
        self.ruler.set_range(0, 200, 10, 200)
        # rajoute la gestion du clic pour le ruler
        self.ruler.add_events(gtk.gdk.BUTTON_PRESS_MASK)
        self.win.connect("delete-event", gtk.main_quit)
        self.win.add(self.ruler)
        self.ruler.connect('button-press-event', self.press)
        self.ruler.connect('motion-notify-event', self.move)
        self.win.show_all()

    def press(self, widget, event):
        print 'pressed on', event.get_coords()

    def move(self, widget, event):
        print 'move on', event.get_coords()

if __name__ == '__main__':
    win = Win()
    gtk.main()

Edit: ce n'est pas la peine de rajouter cet event, il est déjà capté par le ruler (et a déjà un callback dessus) il faut juste rajouter un callback dessus.
@ Tony95: ouvre ton propre sujet et précise dans quel langage tu codes.

Dernière modification par philarmonie (Le 08/06/2009, à 19:12)

kevlar · Le 08/06/2009, à 21:03

merci Philarmonie. En fait, je me débrouille en utilisant la dernière version(message #25), et maintenant, le déplacement de la règle est coordonné avec celui de la timeline, de l'indicateur de position dans l'animation, et cela sans utiliser les GTkRulers. Reste à terminer de répondre au défi en trouvant un moyen d'installer un "balayage" de la position courante, comme sur Macromedia Flash Pro, mais à mon avis ça peut se résoudre avec une gestion "habile" des icônes ...

kevlar · Le 15/06/2009, à 14:17

eh bien, la solution aux limites de Gtk est un projet complémentaire, goocanvas ; il permet enfin une gestion "moderne" des éléments graphiques, permettant entre autres de faire répondre des morceaux de dessins à des clics souris, etc .. .

philarmonie · Le 15/06/2009, à 15:36

kevlar a écrit :

eh bien, la solution aux limites de Gtk est un projet complémentaire, goocanvas ; il permet enfin une gestion "moderne" des éléments graphiques, permettant entre autres de faire répondre des morceaux de dessins à des clics souris, etc .. .

Bah on peut le faire en gtk sans goocanvas.
J'ai fait une logiciel de création de thème usplash, j'ai une DrawingArea dans laquelle je dessine le thème avec son arrière plan, sa barre et sa zone de texte, et elle réagit très bien aux actions de la souris. Il me manque juste le redimensionnement des objets avec la souris mais c'est pas un problème de gestion des événements, mais plutôt d'apprendre à dessiner des rectangles transparents avec cairo.

kevlar · Le 15/06/2009, à 16:28

intéressant, tu peux mettre une copie d'écran ? (moi je ne peux pas, ImageShack ne répond pas en ce moment ...)

Dernière modification par kevlar (Le 15/06/2009, à 16:31)

kevlar · Le 15/06/2009, à 16:36

Voici une copie :

la règle ne provient pas de Gtk : elle est gérée par goocanvas. Elle est composée d'éléments graphiques standards (lignes, texte) qui peuvent chacun émettre des événements. Ainsi, un clic sur une des graduations, ou sur le numéro de l'image, renvoit à un traitement à callback.

A titre de comparaison, la dernière version "pure Gtk" est ci-dessous :

Il est facile de voir qu'il me fallait TROIS lignes de widgets pour faire la même règle (capable, bien entendu, de réagir aux clics, il ne s'agissait déjà plus d'un GtkRuler).
De plus, avec goocanvas, l'espace est mieux géré, je peux contrôler le rendu de la règle (car goocanvas s'appuie sur cairo )

Dernière modification par kevlar (Le 15/06/2009, à 16:42)

philarmonie · Le 15/06/2009, à 16:46

L'image est composée de 3 éléments chacun dans un pixbuf: le fond, la barre et la zone de texte.
Je peux déplacer la barre et la zone de texte avec la souris, comme on peut le faire avec n'importe quel icône sur le bureau par exemple. Si je fais un clic-droit sur la barre elle fait une rotation, Shif+clic gauche c'est un centrage verticale, shif+clic gauche c'est un centrage horizontale.

Dernière modification par philarmonie (Le 15/06/2009, à 16:46)

kevlar · Le 15/06/2009, à 16:59

philarmonie a écrit :

http://img6.hostingpics.net/thumbs/mini_65430UTM.png
L'image est composée de 3 éléments chacun dans un pixbuf: le fond, la barre et la zone de texte.
Je peux déplacer la barre et la zone de texte avec la souris, comme on peut le faire avec n'importe quel icône sur le bureau par exemple. Si je fais un clic-droit sur la barre elle fait une rotation, Shif+clic gauche c'est un centrage verticale, shif+clic gauche c'est un centrage horizontale.

D'abord, une remarque : superbe !

Ensuite : pour déplacer les éléments visuels, tu dois faire un drag'n' drop ? Sache que sous goocanvas, il est très facile de faire des "poignées" autour d'un objet ; pour peu que ces "poignées" soient le dernier élément ajouté, il se comporte comme un sprite, et n'efface pas le contexte en arrière-plan. Cela devrait donc répondre à ta préoccupation.
Voici comment je procède pour afficher/ effacer la position sur la timeline (petit triangle gris sur la règle) :
afficher à la position image "position" en tenant compte de la taille des graduations :

/************************************/
/* afficher le curseur de la règle */
/**********************************/
void affiche_curseur_regle(GooCanvasItem *root, gint position)
{	
  pRulerCursorItem = goo_canvas_image_new(root,
                                    GDK_PIXBUF(pIcoRulerCursor),
                                    position*RULER_WIDTH+(RULER_WIDTH/2)-6,
                                    RULER_HEIGHT-12,NULL);    
}

effacer le curseur sans abîmer l'arrière-plan (une seule ligne de code ...) :

/**********************************/
/* effacer le curseur de la règle */
/**********************************/
void efface_curseur_regle(void)
{
   goo_canvas_item_remove(pRulerCursorItem);   
}

philarmonie · Le 15/06/2009, à 17:10

kevlar a écrit :

D'abord, une remarque : superbe !

Merci, c'est le thème que j'ai au démarrage de mon pc

kevlar a écrit :

Ensuite : pour déplacer les éléments visuels, tu dois faire un drag'n' drop ? Sache que sous goocanvas, il est très facile de faire des "poignées" autour d'un objet ; pour peu que ces "poignées" soient le dernier élément ajouté, il se comporte comme un sprite, et n'efface pas le contexte en arrière-plan. Cela devrait donc répondre à ta préoccupation.

Oui c'est du drag'n drop. Qu'entends tu par sprite et n'efface pas le contexte en arrière plan? Tu veux dire que si je déplace la barre par exemple, la partie du background qui occupe l'ancienne position redevient visible? Ce comportement j'ai effectivement du en écrire le code.

kevlar a écrit :

Voici comment je procède pour afficher/ effacer la position sur la timeline (petit triangle gris sur la règle) :
afficher à la position image "position" en tenant compte de la taille des graduations :
/************************************/
/* afficher le curseur de la règle */
/**********************************/
void affiche_curseur_regle(GooCanvasItem *root, gint position)
{	
  pRulerCursorItem = goo_canvas_image_new(root,
                                    GDK_PIXBUF(pIcoRulerCursor),
                                    position*RULER_WIDTH+(RULER_WIDTH/2)-6,
                                    RULER_HEIGHT-12,NULL);    
}
effacer le curseur sans abîmer l'arrière-plan (une seule ligne de code ...) :
/**********************************/
/* effacer le curseur de la règle */
/**********************************/
void efface_curseur_regle(void)
{
   goo_canvas_item_remove(pRulerCursorItem);   
}

Effectivement ça demande pas beaucoup de ligne de code, c'est pratique.
Comme je code en python, faut que je regarde si goocanvas a été porté en python.

Dernière modification par philarmonie (Le 15/06/2009, à 17:11)

kevlar · Le 15/06/2009, à 19:08

> oui, un sprite est un objet, initialement destiné aux jeux videos, dont le comportement s'apparente à ton pointeur de souris : déplacement propre, se met en superposition en respectant le fond pour peu que le GdkPixbuf source ait des parties transparentes.
> tu as de la chance : porté en Python, et en plus, Google te renverra une foultitude d'exemples en python, et quasiment rien en C
> en fait, goocanvas contient l'essentiel pour faire un éditeur vectoriel, un peu ce que fais ton programme ...

kevlar · Le 18/06/2009, à 16:24

voici la nouvelle version : au menu, utilisation, comme dit précédemment, de la bibliothèque goocanvas, et, nouveauté, du modèle GtkListStore, GtkTreeView :

- la partie "calques" à gauche est une GtkTreeView, parfaitement fonctionnelle (édition, duplication ...)
- la partie de droite(règle, time line) est construite à partir de goocanvas.

Dernière modification par kevlar (Le 18/06/2009, à 16:27)

kevlar · Le 20/06/2009, à 16:26

La nouveauté principale du jour : l'ajout d'un menu contextuel suite à un clic-droit dans la time line

le code est très simple :
1- créer une fonction génératrice pour le menu déroulant :

void timeline_popup_menu_(GdkEventButton *event)
{
    GtkWidget *menu, *item;
 
	menu = gtk_menu_new (); 
	// this opens the downloader window, or brings it to the foreground if already open
	item = gtk_menu_item_new_with_mnemonic (("_Créer une image-clé"));
	g_signal_connect_swapped (item, "activate",G_CALLBACK (cb_new_keyframe), NULL);
	gtk_menu_shell_append (GTK_MENU_SHELL (menu), item);
	item = gtk_menu_item_new_with_mnemonic (("_Supprimer l'image-clé"));
	g_signal_connect_swapped (item, "activate",G_CALLBACK (cb_remove_keyframe), NULL);
	gtk_menu_shell_append (GTK_MENU_SHELL (menu), item);
	gtk_widget_show_all (menu); 
	gtk_menu_popup (GTK_MENU (menu), NULL, NULL, NULL, 
	               NULL,/* pointeur datas */
	               event->button, /* bouton de la souris, automatique */
	               event->time); /* moment du clic, automatique */
}

2- brancher cette fonction dans la callback répondant aux clics-souris :

/****************************
 * réponse aux clics-souris
 * sur la timeline
 * *************************/
static gboolean 
   on_timeline_button_press(GooCanvasItem  *item,
		      GooCanvasItem  *target,
		      GdkEventButton *event,
		      GtkWidget        *win)
{
 /* clic-gauche ou clic-droit ? */
 if (event->button==3)
   /* clic droit */
   {
   	timeline_popup_menu_(event);
   }

Dernière modification par kevlar (Le 20/06/2009, à 16:30)

kevlar · Le 21/06/2009, à 11:17

aujourd'hui : amélioration du menu PopUp, et possibilité d'ajouter des images au projet :

kevlar · Le 22/06/2009, à 13:52

aujourd'hui : gestion des sélections à la souris sur la time line (partie en vert de cette copie = zone sélectionnée). Les contrôles sont faits : impossible de sélectionner une zone ne contenant pas d'images, par exemple.

en fait, gérer une sélection est très simple, après branchement des événements "motion_notify", et "button-release" sur les éléments du goocanvas.

Reste une limite (si quelqu'un passe avec une idée ... ) : comment, lors de la sélection d'une zone, assurer en même temps le scrolling de la fenêtre dans laquelle se déplace la souris ? Faut-il réutiliser l'événement "motion_notify", et, lorsque le pointeur est à l'une des limites, provoquer le scrolling ? A voir !

Dernière modification par kevlar (Le 22/06/2009, à 13:56)

kevlar · Le 02/07/2009, à 19:42

après une période de sommeil, voici le travail du jour : la mise en place d'une barre d'outils, destinée à l'hypothétique éditeur vectoriel qui sera (peut-être) un jour associé au programme ...

Cette barre est construite avec les méthodes postérieures à Gtk 2.4 (voire même 2.12) ; elle est remplie d'icônes qui sont des gtk_radio_tool_button ; les fonctions de "markup" sont mises à profit pour enrichir le texte du titre de la barre d'outils, et les tooltips sont actifs, comme vous le voyez sur la copie.
Le choix de boutons radio permet de n'avoir, automatiquement, qu'un seul outil activé à la fois, géré avec une callback réagissant à à l'événement toggled

Dernière modification par kevlar (Le 02/07/2009, à 19:43)

kevlar · Le 03/07/2009, à 07:54

la barre d'outil améliorée : elle mixe des GtkToolRadioBuuton (outils sélection & tracé) et deux GtkToolButton normaux permettant d'accéder aux couleurs de tracé et de remplissage.

kevlar · Le 03/07/2009, à 13:29

Et maintenant, la dernière étape facile ! Intégrer la barre d'outils dans une fenêtre contenant elle-même un GtkNotebook, qui portera, lui, , d'une part, l'éditeur vectoriel (le gros, gros morceau ), et, d'autre part, le lecteur flash, servant à la prévisualisation (beaucoup plus facile, grâce aux bibliothèques swfdec :

L'éditeur vectoriel va utiliser au maximum la bibliothèque goocanvas, parfaitement adaptée à cet usage

Dernière modification par kevlar (Le 03/07/2009, à 13:32)

haile_selassie · Le 03/07/2009, à 14:16

Hop, sujet en marque-pages, ça m'intéresse
Beau boulot, continue à donner des nouvelles!

kevlar · Le 03/07/2009, à 15:34

oui, tu devines l'objectif final, mais c'est encore loin, loin ...

haile_selassie · Le 03/07/2009, à 18:24

kevlar a écrit :

oui, tu devines l'objectif final, mais c'est encore loin, loin ...

Certainement. Mais perso, quand je programme, ce que j'aime, c'est apprendre de nouveaux trucs. Après, finir les objectifs que tu t'es fixés, c'est sur que c'est super plaisant aussi ^^
Tu es tout seul à le programmer ? non pas que je veuille t'aider, je ne connais pas GTK, mais ça parait quand meme ambitieux pour le réaliser seul, non?

kevlar · Le 03/07/2009, à 18:31

oui, tout seul, c'est effectivement fait sur le mode "loisirs", donc pas de contraintes ...:lol:

kevlar · Le 04/07/2009, à 07:59

ce matin, début de mise en place réelle de l'éditeur vectoriel : tracé de lignes simples :

les autres figures ne posent pas plus de problèmes ; ce qu'il faut, maintenant, c'est gérer en interne une base de données référençant tous les goocanvasitem (s) utilisés par l'éditeur vectoriel, et, d'autre part, associer les groupes de dessins au bon calque ...

kevlar · Le 05/07/2009, à 07:26

aujourd'hui :
- éditeur vectoriel complété avec les fonctions de tracés de boîtes (box) et de cercles (ellipses)
- amélioration de la barre d'outils : j'ai ajouté la possibilité de choisir le style de ligne (icône en forme d'engrenage) et le style de texte (icône avec deux "A") ; les icônes de réglage sont regroupées dans la palette dans une rubrique "styles"
- pour le projet lui-même, je pense que je vais associer à chacun des calques de la timeline( voir post #40) un élément très pratique de la bibliothèque goocanvas : les "groupes d'objets" ; l'astuce est de n'avoir qu'un seul canvas, dans lequel chaque calque forme un groupe, et chaque calque pourra pointer sur d'autres groupes d'objets ; ainsi, effacer un calque effacera tous les objets qu'il contient, sans toucher au reste du canvas.

kevlar · Le 07/07/2009, à 15:28

bon, aujourd'hui, grosse rigolade (:(:(:() : tenter de modifier le style de trait en utilisant goocanvas ; pas le moindre exemple sur le net, documentation ultra limitée ; enfin, en croisant avec la documentation de cairo, et quelques erreurs de segmentation après, voici un code tout simple qui permet de préparer la mise en place de la sélection des objets par l'éditeur vectoriel ; voici le code du rectangle de sélection utilisant goocanvas:

/**********************************
 * rectangle de sélection en cours
 * *******************************/
void selection_box(GooCanvasItem *ancetre, gdouble x1t,gdouble y1t,gdouble x2t,gdouble y2t)
{
    gdouble t;
    static const double dashed1[] = {4.0, 4.0};
    static int len1  = sizeof(dashed1) / sizeof(dashed1[0]);
    GooCanvasLineDash *style_trait;  
    
    style_trait=goo_canvas_line_dash_newv(len1,(gdouble *)dashed1);
    SelectedArea=TRUE;
    /* vérifier les valeurs des coins */
    if (x2t<x1t)
       {
       	t=x1t;
       	x1t=x2t;
       	x2t=t;
	   }
	if (y2t<y1t)
	   {
	   	t=y1t;
	   	y1t=y2t;
	   	y2t=t;
	   } 
	   
	  
    pDrawings=goo_canvas_rect_new(ancetre,
    x1t+10,y1t+10,
	 x2t-x1t,y2t-y1t,
	 "line-width", 2.0,
				   "radius-x", 1.0,
				   "radius-y", 1.0,
	  "stroke-color", "blue",
	  "line-dash", style_trait,
	  NULL);		
}

et le résultat (la zone de sélection est un rectangle bleu avec des traits alternés ...) :

PS : je n'utilise pas de fonctions directes vers gdk, de manière à bien "penser vectoriel" via goocanvas.

Dernière modification par kevlar (Le 07/07/2009, à 15:30)

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#26 Le 08/06/2009, à 17:29

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#27 Le 08/06/2009, à 19:02

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#28 Le 08/06/2009, à 21:03

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#29 Le 15/06/2009, à 14:17

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#30 Le 15/06/2009, à 15:36

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#31 Le 15/06/2009, à 16:28

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#32 Le 15/06/2009, à 16:36

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#33 Le 15/06/2009, à 16:46

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#34 Le 15/06/2009, à 16:59

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#35 Le 15/06/2009, à 17:10

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#36 Le 15/06/2009, à 19:08

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#37 Le 18/06/2009, à 16:24

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#38 Le 20/06/2009, à 16:26

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#39 Le 21/06/2009, à 11:17

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#40 Le 22/06/2009, à 13:52

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#41 Le 02/07/2009, à 19:42

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#42 Le 03/07/2009, à 07:54

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#43 Le 03/07/2009, à 13:29

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#44 Le 03/07/2009, à 14:16

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#45 Le 03/07/2009, à 15:34

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#46 Le 03/07/2009, à 18:24

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#47 Le 03/07/2009, à 18:31

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#48 Le 04/07/2009, à 07:59

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#49 Le 05/07/2009, à 07:26

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#50 Le 07/07/2009, à 15:28

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

Pied de page des forums