-
Notifications
You must be signed in to change notification settings - Fork 0
/
sec-ColorSelection.html
202 lines (178 loc) · 11.2 KB
/
sec-ColorSelection.html
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-15" http-equiv="Content-Type">
<title>9.13. Le sélecteur de couleur</title>
<link rel="stylesheet" href="pygtktutfr.css" type="text/css">
<meta name="keywords" content="python,pygtk,tutoriel,traduction,selection,couleur">
<link rel="start" href="index.html" title="Tutoriel PyGTK 2.0">
<link rel="home" href="index.html" title="Table des matières">
<link rel="up" href="ch-MiscellaneousWidgets.html" title="Chapitre 9. Widgets divers">
<link rel="previous" href="sec-Calendar.html" title="9.12. Le calendrier">
<link rel="next" href="sec-FileSelections.html" title="9.14. Le sélecteur de fichiers">
</head>
<body>
<div class="localisation">
Vous êtes à peu près ici :
<a href="../../index.html">Accueil</a> »
<a href="../pygtktut.php">tutoriel PyGTK</a> »
<a href="index.html">PyGTK : sommaire</a>
</div> <!-- fin localisation -->
<div class="navheader">
<table width="100%" summary="En-tête de navigation">
<tr>
<th colspan="3" align="center">9.13. Le sélecteur de couleur</th>
</tr><tr>
<td width="20%" align="left"><a accesskey="p" href="sec-Calendar.html">Préc.</a></td>
<th width="60%" align="center">Chapitre 9. Widgets divers</th>
<td width="20%" align="right"><a accesskey="n" href="sec-FileSelections.html">Suiv.</a></td>
</tr></table>
<hr>
</div>
<div class="sect1"><div class="titlepage"><div>
<h2 class="title" style="clear: both"><a name="SelecteurCouleur"></a>9.13. Le sélecteur de couleur</h2></div></div>
<p>Le sélecteur de couleur est, on l'aura deviné, un widget permettant une sélection interactive des couleurs. Ce widget composite permet à l'utilisateur de choisir une couleur en manipulant des triplets RVB (Rouge, Vert, Bleu) ou TSV (Teinte, Saturation, Valeur). Chacune des valeurs peut être ajustée à l'aide de gradateurs ou de champs de saisie, ou bien en désignant directement la couleur désirée dans une roue de teinte-saturation/barre de valeur. Il est également possible de définir l'opacité de la couleur.</p>
<p>Le sélecteur de couleur ne dispose actuellement que d'un seul signal, "color_changed". Il est émis à chaque modification de la couleur courante dans le widget, qu'elle vienne de l'utilisateur ou bien d'une définition explicite par la méthode <tt>set_color</tt>().</p>
<p>Observons à présent ce que peut nous offrir ce widget. Il est proposé sous deux formes différentes : <tt>gtk.ColorSelection</tt> et <tt>gtk.ColorSelectionDialog</tt>.</p>
<pre class="programlisting">
selectcouleur = gtk.ColorSelection()
</pre>
<p>Vous n'aurez probablement pas à utiliser ce constructeur directement. Il crée un <tt>gtk.ColorSelection</tt> orphelin auquel vous devrez affecter un parent vous-même. Le widget <tt>gtk.ColorSelection</tt> hérite du widget <tt>gtk.VBox</tt>.</p>
<pre class="programlisting">
dialselectcouleur = gtk.ColorSelectionDialog(<b><tt>title</tt></b>)
</pre>
<p>... où <i><tt>title</tt></i> (titre) est une chaine de caractères à utiliser pour la barre de titre de la boite de dialogue.</p>
<p>Il s'agit là du constructeur le plus courant pour les sélecteurs de couleur. Il crée un <tt>gtk.ColorSelectionDialog</tt>, qui consiste en un cadre (<tt>gtk.Frame</tt>) contenant un <tt>gtk.ColorSelection</tt>, un séparateur horizontal, ainsi qu'une boite horizontale possédant trois boutons : "Ok", "Cancel" and "Help". Ces derniers sont accessibles par les attributs <i><tt>ok_button</tt></i>, <i><tt>cancel_button</tt></i> et <i><tt>help_button</tt></i> du <tt>ColorSelectionDialog</tt> (ex : <i><tt>dialselectcouleur.ok_button</tt></i>). Pour accéder au sélecteur de couleur en lui-même, on utilisera l'attribut <i><tt>colorsel</tt></i> :</p>
<pre class="programlisting">
selectcouleur = dialselectcouleur.colorsel
</pre>
<p>Le widget <tt>gtk.ColorSelection</tt> dispose de plusieurs méthodes qui changent ses caractéristiques ou permettent d'accéder à la sélection de couleur.</p>
<pre class="programlisting">
selectcouleur.set_has_opacity_control(<b><tt>has_opacity</tt></b>)
</pre>
<p>Le sélecteur de couleur permet de régler l'opacité d'une couleur (aussi appelée canal alpha). Cette option est désactivée par défaut. Pour autoriser les réglages d'opacité, il faut appeler la méthode ci-dessus en donnant la valeur TRUE à son argument <i><tt>has_opacity</tt></i>. Inversement, l'appeler avec FALSE interdira cette possibilité.</p>
<pre class="programlisting">
selectcouleur.set_current_color(<b><tt>color</tt></b>)
selectcouleur.set_current_alpha(<b><tt>alpha</tt></b>)
</pre>
<p>On peut définir explicitement la couleur courante en appelant la méthode <tt>set_current_color</tt>() avec une <tt>GdkColor</tt>. Le réglage d'opacité (le canal alpha) s'effectue avec la méthode <tt>set_current_alpha</tt>(). La valeur alpha doit être comprise entre 0 (transparence totale) et 65 636 (opacité totale).</p>
<pre class="programlisting">
couleur = selectcouleur.get_current_color()
alpha = selectcouleur.get_current_alpha()
</pre>
<p>Pour récupérer la couleur courante, généralement lors de la réception d'un signal "color_changed", on utilise ces méthodes.</p>
<p>Le programme <a href="exemples/selectcouleur.py" target="_top"><b>selectcouleur.py</b></a> donne un exemple d'utilisation du <tt>gtk.ColorSelectionDialog</tt>. Le programme affiche une fenêtre contenant une zone de dessin qui, si elle est cliquée, ouvre une boite de dialogue de sélection de couleur. Les modifications de couleur effectuées dans cette boite de dialogue entrainent le changement de la couleur d'arrière-plan de la zone de dessin. La <a href="sec-ColorSelection.html#FigSelectCouleur" title="Figure 9.13. Exemple de sélecteur de couleur">Figure 9.13</a> montre ce programme en exécution :</p>
<div class="figure"><a name="FigSelectCouleur"></a>
<p class="title"><b>Figure 9.13. Exemple de sélecteur de couleur</b></p>
<div class="mediaobject" align="center">
<img src="figures/selectcouleur.png" align="middle" alt="exemple sélecteur de couleur">
</div></div>
<p>Le code source de <a href="exemples/selectcouleur.py" target="_top"><b>selectcouleur.py</b></a> est le suivant :</p>
<pre class="programlisting">
1 #!/usr/bin/env python
2
3 # exemple selectcouleur.py
4
5 import pygtk
6 pygtk.require('2.0')
7 import gtk
8
9 class ExempleSelecteurCouleur:
10 # Gestionnaire du signal "color_changed"
11 def rappel_color_changed(self, widget):
12 # On recupere la table des couleurs de la zone de dessin
13 tablecouleurs = self.zonedessin.get_colormap()
14
15 # On recupere la couleur courante
16 couleur = self.dialselectcouleur.colorsel.get_current_color()
17
18 # On definit la couleur d'arriere plan de la fenetre
19 self.zonedessin.modify_bg(gtk.STATE_NORMAL, couleur)
20
21 # Gestionnaire d'evenement de la zone de dessin
22 def evnmt_zone(self, widget, evnmt):
23 prisencharge = False
24
25 # On verifie si on a recu un evenement "button-press"
26 if evnmt.type == gtk.gdk.BUTTON_PRESS:
27 prisencharge = True
28
29 # Creation de la boite de dialogue du selecteur de couleur
30 if self.dialselectcouleur == None:
31 self.dialselectcouleur = gtk.ColorSelectionDialog(
32 "Selection de la couleur d'arriere-plan")
33
34 # On recupere le selecteur de couleur
35 selectcouleur = self.dialselectcouleur.colorsel
36
37 selectcouleur.set_previous_color(self.couleur)
38 selectcouleur.set_current_color(self.couleur)
39 selectcouleur.set_has_palette(True)
40
41 # Connexion au signal "color_changed"
42 selectcouleur.connect("color_changed", self.rappel_color_changed)
43 # Affichage de la boite de dialogue
44 reponse = self.dialselectcouleur.run()
45
46 if reponse -- gtk.RESPONSE_OK:
47 self.couleur = selectcouleur.get_current_color()
48 else:
49 self.zonedessin.modify_bg(gtk.STATE_NORMAL, self.couleur)
50
51 self.dialselectcouleur.hide()
52
53 return prisencharge
54
55 # Fermeture et sortie du gestionnaire
56 def destruct_fenetre(self, widget, evnmt):
57 gtk.main_quit()
58 return True
59
60 def __init__(self):
61 self.dialselectcouleur = None
62 # Creation d'une fenetre racine + titre + modes
63 fenetre = gtk.Window(gtk.WINDOW_TOPLEVEL)
64 fenetre.set_title("Test de selection de couleur")
65 fenetre.set_resizable(True)
66
67 # Connexion aux evenements "delete" et "destroy" pour pouvoir sortir
68 fenetre.connect("delete_event", self.destruct_fenetre)
69
70 # Creation de la zone de dessin + taille + recup evnmts des boutons
71 self.zonedessin = gtk.DrawingArea()
72
73 self.couleur = self.zonedessin.get_colormap().alloc_color(0, 65535, 0)
74
75 self.zonedessin.set_size_request(200, 200)
76 self.zonedessin.set_events(gtk.gdk.BUTTON_PRESS_MASK)
77 self.zonedessin.connect("event", self.evnmt_zone)
78
79 # Ajout de la zone de dessin a la fenetre, puis affichage des deux
80 fenetre.add(self.zonedessin)
81 self.zonedessin.show()
82 fenetre.show()
83
84 def main():
85 gtk.main()
86 return 0
87
88 if __name__ == "__main__":
89 ExempleSelecteurCouleur()
90 main()
</pre>
</div>
<div class="navfooter">
<hr>
<table width="100%" summary="Bas de page de navigation">
<tr>
<td width="40%" align="left"><a accesskey="p" href="sec-Calendar.html">Préc.</a></td>
<td width="20%" align="center"><a accesskey="u" href="ch-MiscellaneousWidgets.html">Chapitre parent</a></td>
<td width="40%" align="right"><a accesskey="n" href="sec-FileSelections.html">Suiv.</a></td>
</tr><tr>
<td width="40%" align="left" valign="top">9.12. Le calendrier</td>
<td width="20%" align="center"><a accesskey="h" href="index.html">Table des matières</a></td>
<td width="40%" align="right" valign="top">9.14. Le sélecteur de fichier</td>
</tr></table>
</div>
</body>
</html>