Discussion :

[ardoisebleue]

Bonjour à toutes et tous,

Je vous propose un tutoriel basé sur le langage C/C++ qui met en œuvre gtkmm, cairomm et pangomm de façon à capturer les signaux de la souris pour bouger des objets dessinés dans une zone graphique 2D.
Nous utiliserons le logiciel Cmake pour construire l'application, avec lequel nous apprendrons à intégrer des fichiers images, textes et binaires à l’exécutable, pour ensuite les extraire dans l'application.
Rendez-vous à cette page : Le widget Gtk::drawingArea de la bibliothèque Gtkmm

Servez-vous de cette discussion pour me faire part de vos remarques, commentaires ou d'éventuelles informations.

Je vous souhaite une bonne lecture et que tous ces efforts déployés vous soient profitables !

Daniel Génon

[gerald3d]

Bonjour.

Content de voir que certains s'intéressent toujours à cette bibliothèque .

J'ai commencé à lire ton article. Je ne parlerai pas du fond ici mais de la forme. Il y a des petits problèmes de conversion (désolé c'est un peu long).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
II-A-4. Make_managed
▲

La classe Gtk::make_managed a été créée pour gérer la mémoire de façon « propre » lors de la sortie d’une application utilisant Gtk.

Gtk::Button *ptrbouton = Gtk::make_managed<Gtk::Button>(GUILLEMET-KITOOODVPboutonGUILLEMET-KITOOODVP);

Le pointeur initialisé avec cette méthode sera effacé sans que le programmeur n’ait à utiliser delete pour libérer son occupation mémoire ni new pour sa création. Cette méthode, à l’intérieur d’une fonction, ne permet pas d’utiliser ptrbouton hors de celle-ci. Il est alors plus judicieux de créer dans le fichier d’entête l’instance du bouton Gtk::Button *ptrbouton; et de préférence en private. Puis dans le constructeur du fichier source qui en dépend, nous initialisons le pointeur à nullptr. ptrbouton = nullptr;. Dans la description de l’interface, l’instanciation sera alors ptrbouton = Gtk::make_managed<Gtk::Button>(GUILLEMET-KITOOODVPboutonGUILLEMET-KITOOODVP);accessible dans toutes les méthodes de la classe, et bénéficiant de la libération sécurisée due à make_managed.

La même ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
II-B. Signaux
▲

Un bouton est, en général, connecté à une fonction, dans le cas suivant la fonction se situe dans la méthode d’appel d’où le membre *this.

ptrbouton->signal_clicked().connect(sigc::bind(sigc::mem_fun(*this, &Fenetre::Fonction)));

Mais nous pouvons aussi connecter le signal à la fonction d’une autre classe :

bcarre->signal_clicked().connect(sigc::bind(sigc::mem_fun(*zonegraphique, &AireDeDessin::SymboleCarre)));

… sous réserve que la méthode SymboleCarre se trouve en zone publique. Nous n’utiliserons pas le cas qui suit, mais nous devons savoir qu’il est possible de transmettre des paramètres avec une connexion :

Ptrbouton->signal_clicked().connect(sigc::bind(sigc::mem_fun( *this, &Fenetre::Fonction ), GUILLEMET-KITOOODVPchaineGUILLEMET-KITOOODVP, 2 ));

sur la méthode :

void Fenetre::Fonction( std::string valstr, int valint ){...}.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
II-C. Style des objets de l’interface
▲

Pour définir le style des widgets, nous utiliserons la classe Gtk::StyleContext en joignant un fichier CSS. Pour affecter à un objet des propriétés de style, nous devons au préalable lui attribuer un nom de repérage :
 
Sélectionnez

zonegraphique = Gtk::make_managed<AireDeDessin>();
//...
    zonegraphique->set_name(GUILLEMET-KITOOODVPzonegrapheGUILLEMET-KITOOODVP);
//...

où le libellé zonegraphe définit le repère dans le fichier objetactif01.css qui décrit le style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
III-A-1. Classe Fenetre
▲

Comme cette application n’est utilisée que comme support pour un apprentissage, la fenêtre de l’application sera réduite au plus simple et nous éviterons les menus déroulants standards. Le visuel montre :

    sur le dessus, une zone de boutons pour les commandes générales ;
    en dessous, une zone destinée à recevoir les dessins graphiques.

La classe Fenetre contient les objets :

    Gtk::DrawingArea, zone graphique où se dessineront les objets graphiques ;

    des boutons :
        les boutons GUILLEMET-KITOOODVPcarréGUILLEMET-KITOOODVP, GUILLEMET-KITOOODVPrectangleGUILLEMET-KITOOODVP et GUILLEMET-KITOOODVProndGUILLEMET-KITOOODVP, destinés à créer les objets graphiques,
        le bouton GUILLEMET-KITOOODVPgrouperGUILLEMET-KITOOODVP qui rassemble tous les objets au centre de la zone graphique,
        le bouton GUILLEMET-KITOOODVPsupprimerGUILLEMET-KITOOODVP pour effacer un des éléments de la zone.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
III-A-2. Description du fichier source : fenetre
...
styledecor = Gtk::CssProvider::create();
Gtk::StyleContext::add_provider_for_display(
     get_display(),
     styledecor,
     GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
m_styledecor->load_from_path(GUILLEMET-KITOOODVPobjetactif01.cssGUILLEMET-KITOOODVP);

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
IV-A. Le fichier de ressources
▲

Dans le dossier objetactif02/ressource nous trouverons les fichiers :

    edit48.png, ftrav48.png et rect48.png qui définissent les icônes à afficher ;
    donnees.bin et donnees.txt qui contiennent les valeurs de configuration des dessins ;
    objetactif02.css destiné à la configuration de la fenêtre Gtk ;
    resobjetactif.xml qui sera traité pour réaliser le fichier source à inclure dans notre exécutable.

Mis à part le fichier donnees.bin, les autres sont éditables soit avec un logiciel de dessin en ce qui concerne les *.png, soit avec un éditeur de texte pour le reste.

Le fichier resobjetactif.xml répertorie les fichiers et la structure de la ressource créée pour être reconnue dans notre logiciel test :
 
Sélectionnez

<?xml version=GUILLEMET-KITOOODVP1.0GUILLEMET-KITOOODVP encoding=GUILLEMET-KITOOODVPUTF-8GUILLEMET-KITOOODVP?>
<gresources>
  <gresource prefix=GUILLEMET-KITOOODVP/iconeGUILLEMET-KITOOODVP>
    <file>ftrav48.png</file>
    <file>edit48.png</file>
    <file>rect48.png</file>
  </gresource>
  <gresource prefix=GUILLEMET-KITOOODVP/fichierGUILLEMET-KITOOODVP>
    <file>donnees.txt</file>
    <file>objetactif02.css</file>
  </gresource>
  <gresource prefix=GUILLEMET-KITOOODVP/fichbinGUILLEMET-KITOOODVP>
    <file>donnees.bin</file>
  </gresource>
</gresources>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
IV-B. Classe Fenetre
▲

Elle est identique à l’étape 1 pour les commandes générales. Quant aux deux boutons Gtk::Button *blogiciel et Gtk::Button *bfichierjoint, leurs connexions suivent le même schéma que pour les anciens boutons de création de formes.

En fin de constructeur, nous appellerons le fichier CSS présent dans notre application en utilisant l’instruction load_from_resource :
 
Sélectionnez

   styledecor = Gtk::CssProvider::create();
   Gtk::StyleContext::add_provider_for_display(
           get_display(),
           styledecor,
           GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
   styledecor->load_from_resource(GUILLEMET-KITOOODVP/fichier/objetactif02.cssGUILLEMET-KITOOODVP);

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
IV-C-1. Classe AireDeDessin
▲

Dans l’entête, nous créons la table où seront stockées les données extraites des ressources et deux méthodes, ce sont les seules modifications significatives en comparaison de objetactif01.
 
Sélectionnez

private:
….
    std::vector<donneesymbole> lstdonnee;
….    
    void FormateCouleur( tabcoul &tabcouleur,
                           const std::string &phrasecouleur );
    void ChargerDonneeSymbole();

Dans le source, le constructeur ne subit qu’un ajout, une instruction appelant la fonction ChargerDonneeSymbole() afin d’extraire les valeurs des ressources pour initialiser la table lstdonnee. Pour lire les fichiers texte ou binaire la technique est identique :

    créer un flux d’entrée :

 
Sélectionnez

Glib::RefPtr<Gio::InputStream> fichierdonnees =
                  Gio::Resource::open_stream_global(GUILLEMET-KITOOODVP/fichier/donnees.txtGUILLEMET-KITOOODVP);

...
Après cette phase la table et partiellement remplie, et pour la finir nous devons lire le fichier binaire :
 
Sélectionnez

Glib::RefPtr<Gio::InputStream> fichbindonnees =
                   Gio::Resource::open_stream_global(GUILLEMET-KITOOODVP/fichbin/donnees.binGUILLEMET-KITOOODVP);
Glib::RefPtr<Gio::DataInputStream> enrgdonnee =
                   Gio::DataInputStream::create(fichbindonnees);

[gerald3d]

Dans la section "III-C-2-d. Classe Rond" tu précises que M_PI n'est pas standard. Cependant, puisque tu utilises Gtk, la bibliothèque définit son propre PI avec G_PI . (Lien doc. officielle). Il y a d'ailleurs bien d'autres constantes définies. À fouiller...