Des lignes horizontales et verticales dans des gtk_tables

**eric1708** · 17/09/2013, 16h47

Bonjour à tous,

Je développe actuellement une grosse application avec de nombreux labels à afficher. Pour gérer de manière souple (et efficace) leur disposition, j'utilise des gtk_table. Ca marche bien.

Parmi les widgets que je veux placer, j'utilise des gtk_hseparator et des gtk_vseparator, mais je viens de me rendre compte que - pour les placer dans la table - ceux-ci, bien qu'ils soient des lignes, ont besoin d'une certaine "épaisseur" (de une unité de ligne ou de colonne). Voici un exemple qui devrait être plus clair :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/* travail sur les tables et les lignes */
#include <stdlib.h>
#include <gtk/gtk.h>
 
int main (int argc, char *argv[])
{
  GtkWidget *win;
  GtkWidget *pTable;
  GtkWidget *hline;
  GtkWidget *vline;
  GtkWidget *label[3][2];
  int i,j;
  char tmp[10];
 
  /* Initialize GTK+ */
  gtk_init (&argc, &argv);
 
  /* Creating the main window */
  win = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  gtk_container_set_border_width (GTK_CONTAINER (win), 8);
  gtk_window_set_title (GTK_WINDOW (win), "testing..");
  gtk_window_set_position (GTK_WINDOW (win), GTK_WIN_POS_CENTER);
  g_signal_connect (win, "destroy", G_CALLBACK(gtk_main_quit), NULL);
 
/* creation des labels */
for (i=0;i<3;i++)
    for (j=0;j<2;j++)
{
    (void)sprintf(tmp,"%d:%d",i,j);
    label[i][j]=gtk_label_new(tmp);
}
 
  /* creation d'une ligne horizontale */
  hline=gtk_hseparator_new();
  /* creation d'une ligne verticale */
  vline=gtk_vseparator_new();
 
/*création de la table mise des widgets dedans */
  pTable=gtk_table_new(3,2,FALSE);
for (i=0;i<3;i++)
    for (j=0;j<2;j++)
      gtk_table_attach(GTK_TABLE(pTable), label[i][j], i,i+1,j,j+1,GTK_EXPAND|GTK_FILL,GTK_EXPAND,0,0 );
 
 gtk_table_attach(GTK_TABLE(pTable), hline, 0,3,1,2,GTK_EXPAND|GTK_FILL,GTK_EXPAND,0,0 );
 gtk_table_attach(GTK_TABLE(pTable), vline, 1,2,0,2,GTK_EXPAND,GTK_EXPAND|GTK_FILL,0,0 );
 
/* on ajoute la table dans la fenetre */
 gtk_container_add (GTK_CONTAINER (win), pTable);
 
  /* Enter the main loop */
  gtk_widget_show_all (win);
  gtk_main ();
  return 0;
}

Du coup, évidement, les lignes tombent au beau milieu des "cellules" (ici, dans l'exemple, des labels), et ca ne va donc pas.

L'utilisation de cadres (gtk_frame) ne résoud guère mon problème.

Bref, ma question est donc: Comment faire pour mettre des lignes "entre" les cellules. Comme ceci ne semble pas être possible, quelle autre(s) solution(s) pourrais-je adopter?

D'avance merci pour toute aide sur ce point.

Eric.

**rollbich** · 17/09/2013, 18h44

salut,

Comme dirait LiberForce, ne pas utiliser sprintf mais g_snprintf ou g_strdup_printf pour éviter les risques de buffer overflow et donc de crash de l'application.

gtkTable est déprécié dans GTK3, si tu utilises gtk3 alors il faut utiliser gtkGrid à la place.

En ce qui concerne ton pb, as-tu essayé d'utiliser css provider et une feuille de style externe ?
Pas sûr néanmoins que tu puisses résoudre ton soucis, faire des choses qui ont du look et du style sans redéfinir les widgets est difficile.

En GTK3, tu peux utiliser cairo pour dessiner tes lignes et le texte si tu veux un joli rendu, le tout dans un drawing area. Ca devrait marcher.
Après si tu as besoin des events sur le texte, il te faut un canevas comme goocanvas (qui utilise cairo d'ailleurs).
Jette un oeil sur les tuto de zetcode.com pour cairo et tape 'goocanvas reference' dans google pour goocanvas.

Actuellement, j'utilise goocanvas pour faire de jolies fenêtres. Je place un canvas dans une fenetre top-level et je dessine ce que je veux dedans y compris du texte.
Tu peux tout gérer: les couleurs, les formes, les backgrounds, faire des arrondis pour créer des boutons, les clicks souris, claviers...

**eric1708** · 17/09/2013, 20h19

Envoyé par rollbich

salut,

Comme dirait LiberForce, ne pas utiliser sprintf mais g_snprintf ou g_strdup_printf pour éviter les risques de buffer overflow et donc de crash de l'application.

Oui, je sais, mais ce n'est pas là l'objet de mon post, et puis la chaine de char est définie dès le départ avec son nombre d'éléments (i.e., elle est initialisée), si je dépasse, c'est que mon code est pourri..

Envoyé par rollbich

gtkTable est déprécié dans GTK3, si tu utilises gtk3 alors il faut utiliser gtkGrid à la place.

Oui, je sais aussi, j'ai vu ca dans la doc. Mais je développe avec GTK2. Je suis coincé avec gtkTable.

Envoyé par rollbich

En ce qui concerne ton pb, as-tu essayé d'utiliser css provider et une feuille de style externe ?
Pas sûr néanmoins que tu puisses résoudre ton soucis, faire des choses qui ont du look et du style sans redéfinir les widgets est difficile.

Non, pas essayé. Je ne connais pas ces outils. Aie..

Envoyé par rollbich

En GTK3, tu peux utiliser cairo pour dessiner tes lignes et le texte si tu veux un joli rendu, le tout dans un drawing area. Ca devrait marcher.

Je suis en GTK2, et n'utilise ni ne connais pas cairo. En revanche, je devrais pouvoir utilise un drawing area en GTK2 il me semble. Je devrais donc pouvoir tracer des lignes, et j'imagine que je dois pouvoir y placer des widgets. Jamais testé. Croyez-vous que c'est faisable, vraiment?

Envoyé par rollbich

Après si tu as besoin des events sur le texte, il te faut un canevas comme goocanvas (qui utilise cairo d'ailleurs).
Jette un oeil sur les tuto de zetcode.com pour cairo et tape 'goocanvas reference' dans google pour goocanvas.

Non, je n'ai pas besoin de gérer des events sur le texte.

Envoyé par rollbich

Actuellement, j'utilise goocanvas pour faire de jolies fenêtres. Je place un canvas dans une fenetre top-level et je dessine ce que je veux dedans y compris du texte.
Tu peux tout gérer: les couleurs, les formes, les backgrounds, faire des arrondis pour créer des boutons, les clicks souris, claviers...

Est-ce spécifique de GTK3?

En tout cas, merci pour votre temps. Toute aide sur ce point reste bienvenue..

Eric.

**rollbich** · 17/09/2013, 21h02

Est-ce spécifique de gtk3 ?

Non, tu peux l'installer avec gtk2 aussi.(par contre je ne sais pas s'il installe cairo en même temps)

sous win32 pour gtk2: http://ftp.gnome.org/pub/GNOME/binar....0.0-win32.zip et http://ftp.gnome.org/pub/GNOME/binar....0.0-win32.zip

Si tu souhaites passer à gtk3 (cairo sera déjà installé): http://ftp.gnome.org/pub/GNOME/binar....0.1-win32.zip et http://ftp.gnome.org/pub/GNOME/binar....0.1-win32.zip

sous linux : sudo aptget install libgoocanvas-dev

moi je suis sous windows donc je ne pourrais pas t'aider plus sous linux pour l'installation.

bon courage

**eric1708** · 19/09/2013, 08h51

Bon, je reprends - et j'imagine - je clos ce post :

Je n'ai malheureusement pas le temps d'installer et d'apprendre ces outils (goocanvas, etc.) même si c'est très tentant évidement. J'ai donc contourné la difficulté en définissant une grille bien plus fine, ce qui permet de positionner les lignes entre les widgets. C'est "bourrin", mais ca marche. Voici le même code que dans mon post initial, mais modifié en conséquence, au cas où ca serve à d'autres:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/* travail sur les tables et les lignes */
#include <stdlib.h>
#include <gtk/gtk.h>
 
int main (int argc, char *argv[])
{
  GtkWidget *win;
  GtkWidget *pTable;
  GtkWidget *hline;
  GtkWidget *vline;
  GtkWidget *label[3][2];
  int i,j;
  char tmp[10];
 
  /* Initialize GTK+ */
  gtk_init (&argc, &argv);
 
  /* Creating the main window */
  win = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  gtk_container_set_border_width (GTK_CONTAINER (win), 8);
  gtk_window_set_title (GTK_WINDOW (win), "testing..");
  gtk_window_set_position (GTK_WINDOW (win), GTK_WIN_POS_CENTER);
  g_signal_connect (win, "destroy", G_CALLBACK(gtk_main_quit), NULL);
 
/* creation des labels */
for (i=0;i<3;i++)
    for (j=0;j<2;j++)
{
    (void)sprintf(tmp,"%d:%d",i,j);
    label[i][j]=gtk_label_new(tmp);
}
 
  /* creation d'une ligne horizontale */
  hline=gtk_hseparator_new();
  /* creation d'une ligne vertical */
  vline=gtk_vseparator_new();
 
/*création de la table mise des widgets dedans */
  pTable=gtk_table_new(30,20,TRUE);
for (i=0;i<3;i++)
    for (j=0;j<2;j++)
      gtk_table_attach(GTK_TABLE(pTable), label[i][j], 10*i,10*(i+1),10*j,10*(j+1),GTK_EXPAND|GTK_FILL,GTK_EXPAND,0,0 );
 
 gtk_table_attach(GTK_TABLE(pTable), hline, 0,30,10,11,GTK_EXPAND|GTK_FILL,GTK_EXPAND,0,0 );
 gtk_table_attach(GTK_TABLE(pTable), vline, 10,11,0,20,GTK_EXPAND,GTK_EXPAND|GTK_FILL,0,0 );
 
/* on ajoute la table dans la fenetre */
 gtk_container_add (GTK_CONTAINER (win), pTable);
 
  /* Enter the main loop */
  gtk_widget_show_all (win);
  gtk_main ();
  return 0;
}

Merci en tout cas pour votre retour,

Eric.

**pvincent** · 19/09/2013, 09h32

Bonjour,

Je pense que tu veux obtenir un aspect "tableur" comme celui produit par le tableur qui fait partie de gtk+extra.
Je n'ai pas de réponse toute faite mais une proposition pour une méthode conduisant peut-être au résultat cherché (en dehors d'utiliser gtk+extra).

J'ai jeté un coup d'oeil sur gtksheet.c et plus particulièrement sur la fonction gtk_sheet_cell_draw_border(): il semble qu'ils utilisent des appels à gdk_draw_line() pour tracer les limites de chaque cellule. Pour faire la même chose, il faut être capable de récupérer les coordonnées en pixels des sommets des rectangles: tu peux essayer de regarder le source de gtktable pour voir si ceci est faisable.

**eric1708** · 19/09/2013, 11h24

Envoyé par pvincent

Bonjour,

Je pense que tu veux obtenir un aspect "tableur" comme celui produit par le tableur qui fait partie de gtk+extra.
Je n'ai pas de réponse toute faite mais une proposition pour une méthode conduisant peut-être au résultat cherché (en dehors d'utiliser gtk+extra).

J'ai jeté un coup d'oeil sur gtksheet.c et plus particulièrement sur la fonction gtk_sheet_cell_draw_border(): il semble qu'ils utilisent des appels à gdk_draw_line() pour tracer les limites de chaque cellule. Pour faire la même chose, il faut être capable de récupérer les coordonnées en pixels des sommets des rectangles: tu peux essayer de regarder le source de gtktable pour voir si ceci est faisable.

Merci pour cette réponse.

Non, je ne suis pas dans l'idée d'un aspect tableur. Le code que je donne ci-dessus n'est qu'un exemple bidon. J'ai bien la nécessité de placer pas mal de widgets variés ca et là sur une fenêtre. Donc, pas gtksheet.

L'idée de partir sur des gdk_draw_line(), par exemple, voudrait dire que je pars plus sur une option gdk_drawable, mais il s'agit - je pense - de directives trop primitives. Par exemple, je ne vais pas pouvoir placer là-dedans des buttons, etc. Où alors je n'ai pas compris.

Je reste donc - faute de mieux - sur la solution "bourrin" dont je parle dans mon précédent post.

Merci en tout cas,

Eric.

**pvincent** · 19/09/2013, 11h41

Effectivement ma proposition précédente me semble difficile à mettre en oeuvre.
Sans obtenir vraiment l'effet souhaité, on peut quand même rendre les zones visibles avec des GtkFrame.
J'ai fait un petit essai avec ton exemple:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
 
/* travail sur les tables et les lignes */
#include <stdlib.h>
#include <gtk/gtk.h>
 
int main (int argc, char *argv[])
{
  GtkWidget *win;
  GtkWidget *pTable;
  GtkWidget *label[3][2];
  int i,j;
  char tmp[10];
 
  GtkWidget *fr;
 
  /* Initialize GTK+ */
  gtk_init (&argc, &argv);
 
  /* Creating the main window */
  win = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  gtk_container_set_border_width (GTK_CONTAINER (win), 8);
  gtk_window_set_title (GTK_WINDOW (win), "testing..");
  gtk_window_set_position (GTK_WINDOW (win), GTK_WIN_POS_CENTER);
  g_signal_connect (win, "destroy", G_CALLBACK(gtk_main_quit), NULL);
 
 /*création de la table */
  pTable = gtk_table_new (3,2,FALSE);
 
  /* creation des labels */
  for (i=0;i<3;i++)
    for (j=0;j<2;j++)
      {
	fr = gtk_frame_new (NULL);
	(void)sprintf(tmp,"%d:%d",i,j);
	label[i][j]=gtk_label_new(tmp);
	gtk_container_add (GTK_CONTAINER (fr) ,label[i][j]);
	gtk_table_attach_defaults (GTK_TABLE (pTable) ,fr ,i,i+1,j,j+1);
      }
 
  /* on ajoute la table dans la fenetre */
  gtk_container_add (GTK_CONTAINER (win), pTable);
 
  /* Enter the main loop */
  gtk_widget_show_all (win);
  gtk_main ();
  return 0;
}

**eric1708** · 19/09/2013, 11h52

Envoyé par pvincent

Effectivement ma proposition précédente me semble difficile à mettre en oeuvre.
Sans obtenir vraiment l'effet souhaité, on peut quand même rendre les zones visibles avec des GtkFrame.
J'ai fait un petit essai avec ton exemple:

Ouaip, j'avais aussi pensé à ca. Le problème est que je n'ai besoin parfois que de lignes horizontales ou verticales. Pas de cadres.

Je vais tout de même faire quelques essais dans ce sens pour voir si ca pourrait résoudre mon problème.

Merci pour votre temps, Eric.

**eric1708** · 19/09/2013, 14h15

Ok, donc, je viens de faire des essais avec des gtk_frame.

C'est effectivement une solution plus efficaces et qui fonctionne bien.

Encore merci pour toutes les aides sur ce point. Je mets ce post en "résolu".

Eric.

**pvincent** · 25/09/2013, 09h39

Comme le sujet m'intéresse et que la proposition de gerald3d

Comment avoir un GtkGrid ressemblant à un tableur ?

m'a inspiré, j'ai écrit un exemple pour GTK+-2 utilisant gdk_draw_line():

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
/* -*- Mode: C; indent-tabs-mode: nil; -*-
 *
 * Pour GTK+-2 : exemple d'utilisation de gdk_draw_line() 
 * pour tracer des lignes dans une GtkTable
 */
 
#include <gtk/gtk.h>
#include <gdk/gdk.h>
 
#define NB_ROWS 4
#define NB_COLS 5
 
/* Le niveau de gris des lignes entre 0(noir) et 65535 (blanc) */
#define FG 35000
static GdkColor fg = {0 ,FG ,FG ,FG};
 
/* Pour choisir le ou les cotés à tracer */
enum { HAUT = 1 ,BAS = 2 ,GAUCHE = 4 ,DROIT  = 8 } Cote;
 
/* Le réflexe  (callback) qui sert pour tracer les lignes 
 */
gboolean  event_CB (GtkWidget *w_label ,GdkEvent  *event ,gpointer user_data)
{
  gint x ,y ,width ,height ,depth;
  GdkWindow *win = w_label->window;
  GdkGC     *gc  = gdk_gc_new (win);
  int      cotes = GPOINTER_TO_INT (user_data);
 
  gdk_window_get_geometry    (win ,&x ,&y ,&width ,&height ,&depth);
  gdk_gc_set_line_attributes (gc ,/* epaisseur= */ 3 
                              ,GDK_LINE_SOLID ,GDK_CAP_BUTT ,GDK_JOIN_MITER);
  gdk_gc_set_rgb_fg_color    (gc ,&fg);
  gdk_gc_set_function        (gc ,GDK_COPY);
 
  if (cotes & BAS )    gdk_draw_line (win ,gc ,0     ,height ,width ,height);
  if (cotes & HAUT)    gdk_draw_line (win ,gc ,0     ,0      ,width ,0);
  if (cotes & GAUCHE)  gdk_draw_line (win ,gc ,0     ,0      ,0     ,height);
  if (cotes & DROIT)   gdk_draw_line (win ,gc ,width ,0      ,width ,height);
 
  g_object_unref (gc);
  return FALSE;
}
 
 
int main (int argc ,char *argv[])
{
  GtkWidget *w_main ,*w_table ,*w_event ,*w_label;
  gchar     *numero;
  int i ,j;
 
  int cotes = GAUCHE  | DROIT;  /* on ne trace que les verticales */
 
  gtk_init (&argc ,&argv);
  w_main = gtk_window_new (GTK_WINDOW_TOPLEVEL);
 
  w_table = gtk_table_new (NB_ROWS ,NB_COLS ,TRUE);
  gtk_container_add (GTK_CONTAINER (w_main) ,w_table);
 
  for (i = 0; i < NB_ROWS; i++) {
    for (j = 0; j < NB_COLS; j++) {
      numero  = g_strdup_printf (" (%d , %d) " ,i ,j);
      w_label = gtk_label_new (numero);
      g_free (numero);
      /* comme un GtkLabel est un GTK_NO_WINDOW widget, 
       * il faut l'insérer dans une GtkEventBox */
      w_event = gtk_event_box_new ();   
      gtk_container_add (GTK_CONTAINER (w_event) ,w_label );
      gtk_table_attach_defaults (GTK_TABLE(w_table) ,w_event  ,j ,j+1 ,i ,i+1); 
      g_signal_connect (w_label ,"event" ,G_CALLBACK (event_CB) ,GINT_TO_POINTER (cotes));
    }
  }
  g_signal_connect (G_OBJECT (w_main) ,"destroy"      ,(GCallback)gtk_main_quit ,NULL);
  g_signal_connect (G_OBJECT (w_main) ,"delete-event" ,(GCallback)gtk_main_quit ,NULL);
  gtk_widget_show_all (w_main);
  gtk_main ();
  return 0;
}

Il faudrait sans doute raffiner en décalant d'une demi-largeur de trait le tracé.

**liberforce** · 25/09/2013, 11h04

Je vous vois utiliser gdk_draw_line mais vous vous limitez à GTK 2. En utilisant cairo, votre code pourrait fonctionner sur GTK 2 et GTK 3... Je ne comprends pas pourquoi les gens s'obstinent à utiliser GDK, ça fait des lustres que cairo est préconisé, même pour GTK 2.

**pvincent** · 25/09/2013, 13h46

Sans doute d'abord parce que j'ai été influencé par gtksheet et que j'ai utilisé la Xlib dans le passé, ce qui fait que je suis moins à l'aise avec cairo.
C'est aussi parce que je n'ai pas tout de suite réalisé que gtk_widget_get_allocated_width() et gtk_widget_get_allocated_height() qui n'existent pas dans GTK2 peuvent être remplacés par gdk_window_get_geometry(); (qui n'a pas le même nombre d'arguments dans GTK2 et GTK3, ce dont il faut tenir compte si on change de version).

Voici donc la version cairo du callback pour GTK2

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
 
gboolean  event_CB (GtkWidget *w_label ,GdkEvent  *event ,gpointer user_data)
{
  gint x ,y ,width ,height ,depth;
  GdkWindow *win = w_label->window;
  int      cotes = GPOINTER_TO_INT (user_data);
  gdk_window_get_geometry    (win ,&x ,&y ,&width ,&height ,&depth);
  cairo_t    *cr = gdk_cairo_create (win);
  cairo_set_line_width (cr, 3); // Epaisseur du trait
  cairo_set_source_rgb (cr ,0.5 ,0.5 ,0.5);
 
  if (cotes & BAS )    { cairo_move_to (cr ,0     ,height); cairo_line_to (cr ,width ,height); }
  if (cotes & HAUT)    { cairo_move_to (cr ,0     ,0     ); cairo_line_to (cr ,width ,0); }
  if (cotes & GAUCHE)  { cairo_move_to (cr ,0     ,0     ); cairo_line_to (cr ,0     ,height); }
  if (cotes & DROIT)   { cairo_move_to (cr ,width ,0     ); cairo_line_to (cr ,width ,height); }
  cairo_stroke (cr);
  return FALSE;
}

**liberforce** · 03/10/2013, 03h15

Envoyé par pvincent

C'est aussi parce que je n'ai pas tout de suite réalisé que gtk_widget_get_allocated_width() et gtk_widget_get_allocated_height() qui n'existent pas dans GTK2 peuvent être remplacés par gdk_window_get_geometry(); (qui n'a pas le même nombre d'arguments dans GTK2 et GTK3, ce dont il faut tenir compte si on change de version).

À ma connaissance, pas besoin de passer par GDK là non plus, gdk_window_get_geometry peut être remplacé par gtk_widget_get_allocation.

**liberforce** · 03/10/2013, 03h26

Je viens de voir aussi sur l'exemple:

Envoyé par pvincent

Code :

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

1
2
3
 
  g_signal_connect (G_OBJECT (w_main) ,"destroy"      ,(GCallback)gtk_main_quit ,NULL);
  g_signal_connect (G_OBJECT (w_main) ,"delete-event" ,(GCallback)gtk_main_quit ,NULL);

Ça ne sert à rien de connecter le delete-event à gtk_main_quit. Quitter GTK c'est ce qu'on fait en réponse à destroy. Le delete-event est appelé avant destroy pour par exemple afficher une boite de dialogue du genre "voulez vous sauvegarder avant de quitter ?" et donner une chance à l'utilisateur de ne pas quitter l'application.