Pygtk: comment utiliser le widget Drawing Area

Version imprimable

01/06/2009, 15h18
leousch

Pygtk: comment utiliser le widget Drawing Area

Salut à tous,

apres avoir lu, re-lu et rere-lu les tuto expliquant comment utiliser le widget DrawingArea avec pygtk je n'arrive toujours pas à dessiner un point ou tracer un trait.

Est-ce que qu'une ame charitable pourrait me donner un exemple de code simple et complet pour utiliser le widget DrawingArea afin d'afficher une suite de point et tracer des traits.

Merci.

Salut,

J'avais fait un truc avec une DrawingArea il y a quelques temps :

Code:

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
79
80
81
82
83
 
import pygtk
pygtk.require('2.0')
import gtk
import cairo
 
#------------------------------------------------------------------------------
 
class Reservoir(gtk.DrawingArea):
    """Dessine un reservoir partiellement rempli en couleur."""
 
    def __init__(self, color, percent):
        gtk.DrawingArea.__init__(self)
        self.connect('expose-event', self.ev_expose)
        self.c = color
        self.p = percent
        self.txt = str(self.p) + "%"
        if sum(map(lambda x: x**2, color)) < 0.1:
            self.fg = 0.5
        else:
            self.fg = 0.0
        return
 
    def ev_expose(self, widget=None, event=None):
        """Gestion de l'affichage et du redimensionnement."""
        self.context = widget.window.cairo_create()
        self.context.rectangle(event.area.x, event.area.y, event.area.width, event.area.height)
        self.context.clip()
        self.draw()
        return False
 
    def draw(self):
        """Dessine le reservoir."""
        self.context.set_line_width(2.0)
        self.context.set_line_cap(cairo.LINE_CAP_ROUND)
        self.context.set_line_join(cairo.LINE_JOIN_ROUND)
        rect = self.get_allocation()
        r = rect.height - 4
        if r < 0:
            r = 0
        if self.p != None:
            n = 2+(r*(100-self.p))/100
            # Fond
            self.context.set_source_rgb(1.0, 1.0, 1.0)
            self.context.rectangle(rect.width/4, 2, rect.width/2, r)
            self.context.fill()
            # Niveau
            self.context.set_source_rgb(self.c[0], self.c[1], self.c[2])
            self.context.rectangle(rect.width/4, n, rect.width/2, r-n+2)
            self.context.fill()
            # Texte
            xb, yb, w, h =self.context.text_extents(self.txt)[:4]
            self.context.set_source_rgb(self.fg, self.fg, self.fg)
            self.context.move_to((rect.width-w)/2-xb, (rect.height-h)/2-yb)
            self.context.show_text(self.txt)
        # Contour
        self.context.set_source_rgb(0.0, 0.0, 0.0)
        self.context.rectangle(rect.width/4, 2, rect.width/2, r)
        self.context.stroke()
        # Graduations
        self.context.set_source_rgba(0.0, 0.0, 0.0, 0.5)
        self.context.move_to(rect.width/4, rect.height/2)
        self.context.line_to((3*rect.width)/10, rect.height/2)
        self.context.move_to(rect.width/4, 1+r/4)
        self.context.line_to((3*rect.width)/10, 1+r/4)
        self.context.move_to(rect.width/4, 3+3*r/4)
        self.context.line_to((3*rect.width)/10, 3+3*r/4)
        self.context.stroke()
        return
 
 
#------------------------------------------------------------------------------
 
if __name__ == '__main__':
    win = gtk.Window()
    win.connect('destroy', gtk.main_quit)
    win.set_default_size(150, 250)
    r = Reservoir([0.0, 1.0, 1.0], 33)
    win.add(r)
    win.show_all()
    gtk.main()
 
#------------------------------------------------------------------------------

J'utilise Cairo pour faire les dessins.

Quelques liens utiles :
http://www.pygtk.org/articles/cairo-...tk-widgets.htm
http://www.tortall.net/mu/wiki/CairoTutorial
http://cairographics.org/samples/

-

03/06/2009, 23h40
leousch

Merci beaucoup.

Je suis pas encore sorti du tunnel parce que je maitrise pas trop le python mais maintenant j'ai les bases qui me manquaient.

A+
05/06/2009, 13h19
leousch

Je te remercie encore pour ton coup de main, j'arrive maintenant a dessiner ce que je vaux dans une DrawingArea mais je n'arrive pas à dessiner de maniere dynamique dedans.

la fonction expose_event n'accepte pas d'autres arguments que ce de bases.

En gros je voudrais faire avancer un point à travers ma DrawingArea, par exemple 1 pixel/sec.

Merci de votre aide.

La fonction "ev_expose" sert à gérer l'évènement "expose-event", qui est émis lorsque la fenêtre est redimensionnée => pas touche :roll: (si tu veux faire autre chose que détecter un redimensionnement, c'est ailleurs qu'il faut faire des modifs)

Si tu veux simplement faire une petite anim, ce code est largement suffisant :

Code:

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
import pygtk
pygtk.require('2.0')
import gtk
import cairo
import gobject
 
#------------------------------------------------------------------------------
 
class Rebond(gtk.DrawingArea):
    """Dessine une balle qui rebondit."""
 
    def __init__(self):
        gtk.DrawingArea.__init__(self)
        self.balle = [0, 0, 2, 2]     # x, y, vitesse_x, vitesse_y
        gobject.timeout_add(10, self.draw)
 
    def draw(self):
        rect = self.get_allocation()
        self.context = self.window.cairo_create()
        self.context.rectangle(0, 0, rect.width, rect.height)
        self.context.clip()
        self.context.set_line_width(5.0)
        self.context.set_line_cap(cairo.LINE_CAP_ROUND)
        self.context.set_line_join(cairo.LINE_JOIN_ROUND)
        # Fond
        self.context.set_source_rgb(1.0, 1.0, 1.0)
        self.context.rectangle(0, 0, rect.width, rect.height)
        self.context.fill()
        # Balle
        self.balle[0:2] = [self.balle[0]+self.balle[2], self.balle[1]+self.balle[3]]
        if self.balle[0] > rect.width:
            self.balle[0] = 2*rect.width - self.balle[0]
            self.balle[2] = -2
        if self.balle[1] > rect.height:
            self.balle[1] = 2*rect.height - self.balle[1]
            self.balle[3] = -2
        if self.balle[0] < 0:
            self.balle[0] = -self.balle[0]
            self.balle[2] = 2
        if self.balle[1] < 0:
            self.balle[1] = -self.balle[1]
            self.balle[3] = 2
        self.context.set_source_rgb(1.0, 0.0, 0.0)
        self.context.move_to(self.balle[0], self.balle[1])
        self.context.line_to(self.balle[0], self.balle[1])
        self.context.stroke()
        return True
 
#------------------------------------------------------------------------------
 
if __name__ == '__main__':
    win = gtk.Window()
    win.connect('destroy', gtk.main_quit)
    win.set_default_size(150, 250)
    r = Rebond()
    win.add(r)
    win.show_all()
    gtk.main()
 
#------------------------------------------------------------------------------

PS : j'ai vu que tu as fait un double post ; tu peux mettre l'autre en délestage (bouton en bas) pour que les admin sachent qu'il est à supprimer ;)

-

10/06/2009, 23h57
leousch

Je te remercie. J'ai réussi à faire ce que je voulais mais il me reste un soucis.

En gros mon programme dessine un point qui se pdeplace sur un fond à l'image du code que tu m'as passe. Mais il se deplace sur fond que je redessine à chque passage et le rafraichissement se voit.

J'ai pensé à enregistrer la premiere fois que je dessine le fond et de le charger apres ou de charger charger le fond sous forme "d'image.png" mais je n'ai pas réussi à implanter ni l'une ni l'autre

Merci de ton aide.
11/06/2009, 01h16
monnomamoi

Tu peux sauvegarder ton fond dans un pixbuf pour le réafficher après ; jette un œil à ce sujet (message #2) pour la partie sauvegarde (pas besoin de faire le pixbuf.save(), mais trace directement avec un .draw_pixbuf() sur ta DrawingArea).

J'ai trouvé entre temps quelques liens utiles :
http://faq.pygtk.org/index.py?req=sh...=faq18.008.htp (dessiner sans Cairo)
http://wiki.laptop.org/go/PyGTK/Smoo...ion_with_PyGTK (astuces pour animations fluides)

-

Merci pour vos réponses,

J'ai plus ou moins essayer d'utiliser les technique que vous m'avez proposer. Mais comme je ne maîtrise pas le python comme un virtuose et que j'ai un peu de mal à comprendre la doc pygtk. J'avais abandonner le pygtk au profit de la sdl pour avancer un plus.
Malheureusement, la SDL ne permet de creer des formulaires (bouton, menu deroulant etc...) et apres une tentative infructueuse de les developper moi-même, j'ai decider qu'il était plus sage de revenir au pygtk.

Cependant mon problème reste entier, et comme les lignes de code valent mieux qu'un long discours, je vous post les lignes que j'ai ecrit. Vous pourrez voir qu'il y a un probleme au niveau du rafraichissement du fond de l'image que je n'arrive pas à regler.

Merci de votre aide.

Fichier glade qui doit s'apperler "acc1.glade"

Code:

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE glade-interface SYSTEM "glade-2.0.dtd">
<!--Generated with glade3 3.4.5 on Sun Jun  7 22:23:32 2009 -->
<glade-interface>
  <widget class="GtkWindow" id="window1">
    <property name="resizable">False</property>
    <child>
      <widget class="GtkVBox" id="vbox1">
        <property name="visible">True</property>
        <child>
          <widget class="GtkMenuBar" id="menubar1">
            <property name="visible">True</property>
            <child>
              <widget class="GtkMenuItem" id="menuitem1">
                <property name="visible">True</property>
                <property name="label" translatable="yes">_Fichier</property>
                <property name="use_underline">True</property>
                <child>
                  <widget class="GtkMenu" id="menu1">
                    <property name="visible">True</property>
                    <child>
                      <widget class="GtkImageMenuItem" id="imagemenuitem1">
                        <property name="visible">True</property>
                        <property name="label" translatable="yes">gtk-new</property>
                        <property name="use_underline">True</property>
                        <property name="use_stock">True</property>
                      </widget>
                    </child>
                    <child>
                      <widget class="GtkImageMenuItem" id="imagemenuitem2">
                        <property name="visible">True</property>
                        <property name="label" translatable="yes">gtk-open</property>
                        <property name="use_underline">True</property>
                        <property name="use_stock">True</property>
                      </widget>
                    </child>
                    <child>
                      <widget class="GtkImageMenuItem" id="imagemenuitem3">
                        <property name="visible">True</property>
                        <property name="label" translatable="yes">gtk-save</property>
                        <property name="use_underline">True</property>
                        <property name="use_stock">True</property>
                      </widget>
                    </child>
                    <child>
                      <widget class="GtkImageMenuItem" id="imagemenuitem4">
                        <property name="visible">True</property>
                        <property name="label" translatable="yes">gtk-save-as</property>
                        <property name="use_underline">True</property>
                        <property name="use_stock">True</property>
                      </widget>
                    </child>
                    <child>
                      <widget class="GtkSeparatorMenuItem" id="separatormenuitem1">
                        <property name="visible">True</property>
                      </widget>
                    </child>
                    <child>
                      <widget class="GtkImageMenuItem" id="quitter">
                        <property name="visible">True</property>
                        <property name="label" translatable="yes">gtk-quit</property>
                        <property name="use_underline">True</property>
                        <property name="use_stock">True</property>
                      </widget>
                    </child>
                  </widget>
                </child>
              </widget>
            </child>
            <child>
              <widget class="GtkMenuItem" id="menuitem2">
                <property name="visible">True</property>
                <property name="label" translatable="yes">É_dition</property>
                <property name="use_underline">True</property>
                <child>
                  <widget class="GtkMenu" id="menu2">
                    <property name="visible">True</property>
                    <child>
                      <widget class="GtkImageMenuItem" id="imagemenuitem6">
                        <property name="visible">True</property>
                        <property name="label" translatable="yes">gtk-cut</property>
                        <property name="use_underline">True</property>
                        <property name="use_stock">True</property>
                      </widget>
                    </child>
                    <child>
                      <widget class="GtkImageMenuItem" id="imagemenuitem7">
                        <property name="visible">True</property>
                        <property name="label" translatable="yes">gtk-copy</property>
                        <property name="use_underline">True</property>
                        <property name="use_stock">True</property>
                      </widget>
                    </child>
                    <child>
                      <widget class="GtkImageMenuItem" id="imagemenuitem8">
                        <property name="visible">True</property>
                        <property name="label" translatable="yes">gtk-paste</property>
                        <property name="use_underline">True</property>
                        <property name="use_stock">True</property>
                      </widget>
                    </child>
                    <child>
                      <widget class="GtkImageMenuItem" id="imagemenuitem9">
                        <property name="visible">True</property>
                        <property name="label" translatable="yes">gtk-delete</property>
                        <property name="use_underline">True</property>
                        <property name="use_stock">True</property>
                      </widget>
                    </child>
                  </widget>
                </child>
              </widget>
            </child>
            <child>
              <widget class="GtkMenuItem" id="menuitem3">
                <property name="visible">True</property>
                <property name="label" translatable="yes">_Affichage</property>
                <property name="use_underline">True</property>
              </widget>
            </child>
            <child>
              <widget class="GtkMenuItem" id="menuitem4">
                <property name="visible">True</property>
                <property name="label" translatable="yes">Aid_e</property>
                <property name="use_underline">True</property>
                <child>
                  <widget class="GtkMenu" id="menu3">
                    <property name="visible">True</property>
                    <child>
                      <widget class="GtkImageMenuItem" id="imagemenuitem10">
                        <property name="visible">True</property>
                        <property name="label" translatable="yes">gtk-about</property>
                        <property name="use_underline">True</property>
                        <property name="use_stock">True</property>
                      </widget>
                    </child>
                  </widget>
                </child>
              </widget>
            </child>
          </widget>
          <packing>
            <property name="expand">False</property>
          </packing>
        </child>
        <child>
          <widget class="GtkHBox" id="hbox1">
            <property name="visible">True</property>
            <child>
              <widget class="GtkVBox" id="vbox2">
                <property name="width_request">450</property>
                <property name="visible">True</property>
                <child>
                  <widget class="GtkVBox" id="STRIP">
                    <property name="visible">True</property>
                    <child>
                      <placeholder/>
                    </child>
                  </widget>
                </child>
                <child>
                  <widget class="GtkFrame" id="frame1">
                    <property name="height_request">100</property>
                    <property name="visible">True</property>
                    <property name="label_xalign">0</property>
                    <property name="shadow_type">GTK_SHADOW_NONE</property>
                    <child>
                      <widget class="GtkAlignment" id="alignment1">
                        <property name="visible">True</property>
                        <property name="left_padding">12</property>
                        <child>
                          <widget class="GtkTextView" id="text">
                            <property name="width_request">450</property>
                            <property name="height_request">100</property>
                            <property name="visible">True</property>
                            <property name="can_focus">True</property>
                            <property name="editable">False</property>
                            <property name="cursor_visible">False</property>
                          </widget>
                        </child>
                      </widget>
                    </child>
                    <child>
                      <widget class="GtkLabel" id="label1">
                        <property name="visible">True</property>
                        <property name="label" translatable="yes">&lt;b&gt;Consigne&lt;/b&gt;</property>
                        <property name="use_markup">True</property>
                      </widget>
                      <packing>
                        <property name="type">label_item</property>
                      </packing>
                    </child>
                  </widget>
                  <packing>
                    <property name="expand">False</property>
                    <property name="fill">False</property>
                    <property name="position">1</property>
                  </packing>
                </child>
              </widget>
            </child>
            <child>
              <widget class="GtkDrawingArea" id="surf">
                <property name="width_request">823</property>
                <property name="height_request">700</property>
                <property name="visible">True</property>
              </widget>
              <packing>
                <property name="position">1</property>
              </packing>
            </child>
          </widget>
          <packing>
            <property name="position">1</property>
          </packing>
        </child>
      </widget>
    </child>
  </widget>
</glade-interface>

Le fichier python :

Code:

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
# *****************************************************************************
# *
# *  This program is free software: you can redistribute it and/or modify
# *   it under the terms of the GNU General Public License as published by
# *   the Free Software Foundation, either version 3 of the License, or
# *   (at your option) any later version.
# *
# *   This program is distributed in the hope that it will be useful,
# *   but WITHOUT ANY WARRANTY; without even the implied warranty of
# *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# *   GNU General Public License for more details.
# *
# *   You should have received a copy of the GNU General Public License
# *   along with this program.  If not, see <http://www.gnu.org/licenses/>.
# *
# ****************************************************************************
 
 
import pygtk
pygtk.require('2.0')
import gtk
import cairo
import gobject
import gtk.glade
 
 
 
class fenetre:
	def __init__(self):
		global vor
		vor = [ ["LFOC",522,73], ["LACAN",497,150], ["ANG",150,203], ["TUR",425,198], ["AMB",474,228], ["LFEF",458,270], ["NEV",788,286], ["LFOD",276,276], ["LFLX",600,352], ["NTS",23,298], ["ABSIS",253,427], ["PI",356,422], ["POI",346,440], ["BALON",475,458], ["RESON",736,492], ["CGC",242,666], ["LMG",474,627], ["LFOT",417,230] ]
 
		self.height = 700
		self.width = 823
 
		self.xml = gtk.glade.XML("acc1.glade")
		self.window1 = self.xml.get_widget("window1")
		self.darea = self.xml.get_widget("surf")
 
		self.darea.set_size_request(self.width, self.height)
		self.darea.realize()
 
		self.context = self.darea.window.cairo_create()
		self.context.rectangle(0, 0, self.width, self.height)
		self.context.clip()
 
#		w, h = self.darea.window.get_size()
#		self.fond = gtk.gdk.Pixbuf(gtk.gdk.COLORSPACE_RGB, False, 8, w, h)
#		pixbuf.get_from_drawable(self.darea.window,
#								 self.darea.window.get_colormap(),
#								  0, 0, 0, 0, w, h)
 
 
		self.window1.connect('destroy',gtk.main_quit)
 
		self.x = vor[4][1]
		self.y = vor[4][2]
 
 
		gobject.timeout_add(1000, self.make_pt)
		self.window1.show_all()
		self.darea.queue_draw()
 
	def make_pt(self):
 
		self.make_fond()
 
		self.context.set_source_rgb(1.0, 0.0, 0.0)
		self.context.rectangle(self.x-1,self.y-1,3,3)
		self.context.fill()
		self.y+=1
 
		return True
 
	def make_fond(self):
		self.context = self.darea.window.cairo_create()
		self.context.set_line_width(0.5)
		self.context.set_line_cap(cairo.LINE_CAP_ROUND)
		self.context.set_line_join(cairo.LINE_JOIN_ROUND)
 
		self.context.set_source_rgb(0.0, 0.0, 0.0)
		self.context.rectangle(0, 0, self.width, self.height)
		self.context.fill()
 
		self.context.set_source_rgb(1.0, 1.0, 1.0)
		for pt in vor:
			self.context.rectangle(pt[1]-1, pt[2]-1, 3, 3)
		self.context.fill()
 
 
		self.context.move_to(822,504)
		self.context.line_to(vor[12][1],vor[12][2])
		self.context.line_to(226,699)
		self.context.move_to(vor[12][1],vor[12][2])
		self.context.line_to(vor[4][1],vor[4][2])
		self.context.move_to(vor[12][1],vor[12][2])
		self.context.line_to(vor[10][1],vor[10][2])
		self.context.line_to(vor[9][1],vor[9][2])
		self.context.move_to(0,316)
		self.context.line_to(421,0)
		self.context.move_to(475,700)
		self.context.line_to(vor[4][1],vor[4][2])
		self.context.line_to(vor[0][1],vor[0][2])
		self.context.move_to(479,0)
		self.context.line_to(vor[0][1],vor[0][2])
		self.context.line_to(vor[6][1],vor[6][2])
		self.context.line_to(823,322)
		self.context.move_to(vor[6][1],vor[6][2])
		self.context.line_to(823,296)
		self.context.move_to(vor[16][1],vor[16][2])				
		self.context.line_to(823,447)	
 
		#Limite de secteur
		self.context.move_to(254,152)
		self.context.line_to(254,540)
		self.context.line_to(524,540)
		self.context.line_to(744,378)
		self.context.line_to(644,200)
		self.context.line_to(582,152)
		self.context.line_to(254,152)
 
 
		self.context.stroke()
 
if __name__ == "__main__":
	aff = fenetre()
 
 
	gtk.main()

14/08/2009, 09h35
leousch

Petit up, personne n'a d'idée concernant mon probleme :(
23/08/2009, 12h44
monnomamoi

Sais-tu que tu peux intégrer SDL (pygame) dans pygtk ?
http://faq.pygtk.org/index.py?file=f...2.htp&req=show

Je vais jeter un œil à ton code pour voir si ça peut s'améliorer

-