Différences

Ci-dessous, les différences entre deux révisions de la page.

--- issue86:python [2014/12/30 22:10] – [18] fredphil91
+++ issue86:python [2014/12/31 17:50] (Version actuelle) – d52fr
@@ Ligne 5: / Ligne 5: @@
 You will also need two image files. One is a simple grey rectangle 500x400 pixels. You can use GIMP or some other image manipulating program to create it. Name it default.jpg, and place it into your source code directory along with the database. The other is an image of a folder for the open image button. I got one from open clipart and searched for the word “folder”. I found a reasonable one at https://openclipart.org/detail/177890/file-folder-by-thebyteman-177890. Open it in GIMP, resize it to 30x30 and save it in the same directory as the other two files as “open.gif”.**
-Voici la deuxième partie d'un long tutoriel sur la création d'un générateur de motifs de point de croix. Dans la première partie (FCM 85), nous avons créé une base de données contenant les couleurs de fils DMC™ avec leurs valeurs RVB les plus proches. Dans cette partie, nous allons créer l'interface graphique en utilisant Tkinter. Nous allons également utiliser PIL (Python Imaging Library) et PMW (Python Mega Widgets). Vous aurez besoin de télécharger les bibliothèques et les installer avant d'aller plus loin. Pour PIL, récupérez la dernière version du fork Pillow sur https://github.com/python-imaging/Pillow. Pour PMW, téléchargez-le sur http://pmw.sourceforge.net/.
+Voici la deuxième partie d'un long tutoriel sur la création d'un générateur de motifs de point de croix. Dans la première partie (le FCM n° 85), nous avons créé une base de données contenant les couleurs de fils DMC™ avec leurs valeurs RVB les plus proches. Dans cette partie, nous allons créer l'interface graphique en utilisant Tkinter. Nous allons également utiliser PIL (Python Imaging Library) et PMW (Python Mega Widgets). Vous aurez besoin de télécharger les bibliothèques et les installer avant d'aller plus loin. Pour PIL, récupérez la dernière version du fork Pillow sur https://github.com/python-imaging/Pillow. Pour PMW, téléchargez-le sur http://pmw.sourceforge.net/.
-Vous aurez également besoin de deux fichiers images. L'un est un simple rectangle gris de 500x400 pixels. Vous pouvez utiliser GIMP ou un autre programme de manipulation d'image pour le créer. Nommez-le default.jpg, et placez-le dans votre répertoire de code source avec la base de données. L'autre est une image d'un dossier pour le bouton d'ouverture d'image. J'ai cherché le mot « folder » sur openclipart. J'en ai trouvé un pas mal ici https://openclipart.org/detail/177890/file-folder-by-thebyteman-177890. Ouvrez-le dans GIMP, redimensionnez-le à 30x30 et enregistrez-le dans le même répertoire que les deux autres fichiers en tant que « open.gif».
+Vous aurez également besoin de deux fichiers images. L'un est un simple rectangle gris de 500x400 pixels. Vous pouvez utiliser GIMP ou un autre programme de manipulation d'images pour le créer. Nommez-le default.jpg, et placez-le dans votre répertoire de code source avec la base de données. L'autre est une image d'un dossier pour le bouton d'ouverture d'image. J'ai cherché le mot « folder » sur openclipart. J'en ai trouvé un pas mal ici https://openclipart.org/detail/177890/file-folder-by-thebyteman-177890. Ouvrez-le dans GIMP, redimensionnez-le à 30x30 et enregistrez-le dans le même répertoire que les deux autres fichiers en tant que « open.gif».
 ====== 2 ======
@@ Ligne 15: / Ligne 15: @@
 Now we are ready to start working on the code. Here is our long list of imports...**
-Ci-dessus une capture d'écran de ce à quoi ressemblera l'interface graphique terminée. Il y a quatre fenêtres principales : trois sur le côté gauche et une à droite. Lorsque nous suivrons le processus de construction des widgets, je les nommerai fenêtre du haut, fenêtre du milieu, fenêtre du bas et fenêtre de côté. La fenêtre du haut contient l'image originale. La fenêtre du milieu sert au traitement de l'image. La fenêtre du bas montre l'image originale sur la gauche et l'image traitée sur la droite, et la fenêtre de côte affiche les couleurs et fils nécessaires. Il semble au premier abord qu'il y a beaucoup d'espace perdu ici, mais quand vous verrez le programme fonctionner, il n'aura pas tant d'espace vide que ça, une fois qu'on arrive à la partie de traitement.
+Ci-dessous une capture d'écran de ce à quoi ressemblera l'interface graphique terminée. Il y a quatre fenêtres principales : trois sur le côté gauche et une à droite. Lorsque nous suivrons le processus de construction des widgets, je les nommerai fenêtre du haut, fenêtre du milieu, fenêtre du bas et fenêtre de côté. La fenêtre du haut contient l'image originale. La fenêtre du milieu sert au traitement de l'image. La fenêtre du bas montre l'image originale sur la gauche et l'image traitée sur la droite, et la fenêtre de côté affiche les couleurs et fils nécessaires. Il semble au premier abord qu'il y ait beaucoup d'espace perdu, mais quand vous verrez le programme fonctionner, il n'y aura pas tant d'espace vide que ça, une fois qu'on arrive à la partie de traitement.
-Maintenant, nous sommes prêts à commencer à travailler sur le code. Voici notre longue liste des importations...
+Maintenant, nous pouvons commencer à travailler sur le code. Voici notre longue liste des importations...
 ====== 3 ======
@@ Ligne 73: / Ligne 73: @@
 Nous allons créer une classe pour contenir tout le code de l'interface utilisateur (page suivante, en haut à droite).
-Nous avons d'abord la définition de la classe et à côté nous avons la fonction __init__ à laquelle nous passons la fenêtre « racine ». Nous créons la fenêtre racine dans les quatre dernières lignes du programme. Dans la fonction __init__ nous définissons toutes les variables globales et faisons quelques affectations initiales avant de commencer les autres fonctions. La première chose que nous faisons est de créer une liste de tuples qui contiennent les formats de fichiers images dont nous avons besoin lorsque nous appelons le dialogue OpenFile. Les deux lignes suivantes ci-dessous définissent et préparent les deux fichiers images que nous venons de créer (le fichier GIF de dossier ouvert, et le rectangle gris - qui seront utilisés comme des espaces réservés pour nos images utilisées pour créer le motif).
+Nous avons d'abord la définition de la classe et à côté nous avons la fonction __init__ à laquelle nous passons la fenêtre « racine ». Nous créons la fenêtre racine dans les quatre dernières lignes du programme. Dans la fonction __init__ nous définissons toutes les variables globales et faisons quelques affectations initiales avant de commencer les autres fonctions. La première chose que nous faisons est de créer une liste de tuples qui contiennent les formats de fichiers images dont nous avons besoin lorsque nous appelons le dialogue OpenFile. Les deux lignes suivantes ci-dessous définissent et préparent les deux fichiers images que nous venons de créer (le fichier GIF de dossier ouvert et le rectangle gris, qui seront utilisés comme des espaces réservés pour nos images utilisées pour créer le motif).
 ====== 5 ======
@@ Ligne 87: / Ligne 87: @@
 self.DefaultImage =ImageTk.PhotoImage(self.Apercu("default.jpg",450,450))
-Maintenant nous entrons dans les définitions globales (au milieu à droite). Vous souvenez peut-être que lorsque vous utilisez Tkinter, si vous avez un widget comme une boîte de saisie de texte ou une liste déroulante et que vous souhaitez récupérer les informations sélectionnées ou saisies, vous définissez une variable globale, puis l'assignez à une classe de variables (BooleanVar, DoubleVar, IntVar ou StringVar). Elle « pistera » alors les modifications dans les valeurs du widget afin que vous puissiez y accéder avec les méthodes .get() ou .set(). Dans les prochaines lignes de code, nous créons le nom de la variable globale, puis l'affectons à la classe correspondante. J'ai mis quelques commentaires dans le code pour essayer de vous aider à suivre ce que nous faisons.
+Maintenant nous entrons dans les définitions globales (au milieu à droite). Vous vous souvenez peut-être que lorsque vous utilisez Tkinter, si vous avez un widget comme une boîte de saisie de texte ou une liste déroulante et que vous souhaitez récupérer les informations sélectionnées ou saisies, vous définissez une variable globale, puis l'assignez à une classe de variables (BooleanVar, DoubleVar, IntVar ou StringVar). Elle « pistera » alors les modifications dans les valeurs du widget afin que vous puissiez y accéder avec les méthodes .get() ou .set(). Dans les prochaines lignes de code, nous créons le nom de la variable globale, puis l'affectons à la classe correspondante. J'ai mis quelques commentaires dans le code pour essayer de vous aider à suivre ce que nous faisons.
 ====== 6 ======
@@ Ligne 95: / Ligne 95: @@
 The ComboStitch variable is set by a combobox, and handles the stitch size of the aida that you wish to use for your project. The ComboSize variable is also set by a combo box and holds the size of the aida fabric. FabricHeight and FabricWidth are the breakdowns from the aida size. MaxColors is a value from an entry box to set the number of colors, and BorderSize is a floating point value that specifies the amount of unused aida for framing.**
-Comme vous pouvez le voir, nous créons des variables NomFichierOriginal, qui contient l'image dont nous voulons créer le motif, NombreCouleursOriginal qui détient le nombre de couleurs de l'original, et TailleOriginal qui détient la taille en pixels de l'original. Comme ils disent à la télé... « Mais attendez, il y en a encore plus ! » (en bas à droite) :
+Comme vous pouvez le voir, nous créons des variables : NomFichierOriginal, qui contient l'image à partir de laquelle nous voulons créer le motif, NombreCouleursOriginal qui détient le nombre de couleurs de l'original et TailleOriginal qui détient la taille en pixels de l'original. Comme ils disent à la télé... « Mais attendez, il y en a encore plus ! » (en bas à droite) :
-La variable ComboTaillePoints est réglée par une liste déroulante, et gère la taille des points de la toile aida que vous souhaitez utiliser pour votre projet. La variable ComboTaille est également définie par une zone de liste déroulante et contient la taille de la toile aida. LargeurTissu et HauteurTissu sont les dimensions de la toile aida. MaxCouleurs est réglée à partir d'une zone de saisie pour définir le nombre de couleurs, et TailleBordure est une valeur en virgule flottante qui indique la quantité d'aida utilisé pour le cadre.
+La variable ComboTaillePoints est réglée par une liste déroulante et gère la taille des points de la toile aïda que vous souhaitez utiliser pour votre projet. La variable ComboTaille est également définie par une zone de liste déroulante et contient la taille de la toile aïda. LargeurTissu et HauteurTissu sont les dimensions de la toile aïda. MaxCouleurs est réglée à partir d'une zone de saisie pour définir le nombre de couleurs et TailleBordure est une valeur en virgule flottante qui indique la quantité d'aïda utilisé pour le cadre.
 ====== 7 ======
@@ Ligne 137: / Ligne 137: @@
 La prochaine série de variables globales (en haut à droite) est utilisée pour faciliter l'accès tout au long du programme. Pour la plupart, leur nom est explicite, ou le deviendra une fois que nous les utiliserons. Il y a trois variables pas si évidentes. couleurFond1 et couleurFond2 sont des tuples utilisés dans le processus de maillage, et la variable PretPourTraitement est utilisée pour indiquer que l'image d'origine est chargée et que tout est prêt pour commencer - juste au cas où l'utilisateur appuie sur le bouton Traitement trop tôt.
-Voilà, nous avons créé toutes nos variables globales, et arrivons au code qui crée réellement l'interface graphique. Nous ouvrons la base de données, créons le menu, mettons en place les widgets, et enfin plaçons les widgets aux endroits appropriés. Juste pour vous donner un aperçu, nous utiliserons le gestionnaire de placement en grille. Nous verrons cela plus tard.
+Voilà, nous avons créé toutes nos variables globales et arrivons au code qui crée réellement l'interface graphique. Nous ouvrons la base de données, créons le menu, mettons en place les widgets et enfin plaçons les widgets aux endroits appropriés. Juste pour vous donner un aperçu, nous utiliserons le gestionnaire de placement en grille. Nous verrons cela plus tard.
 ====== 9 ======
@@ Ligne 166: / Ligne 166: @@
 self.PlacerWidgets(frm)
-La prochaine partie de notre code (au milieu à droite) met en place la barre de menu. J'ai essayé de rester logique pour que ça soit facile à comprendre.
+La prochaine partie de notre code (au milieu à droite) met en place la barre de menu. J'ai essayé de rester logique pour qu'il soit facile à comprendre.
-Nous définissons une fonction appelée FabriquerMenu, avec pour argument la fenêtre racine. Nous définissons ensuite les trois jeux de menus que nous allons créer. Un menu Fichier, un pour le traitement, et le dernier pour l'aide.
+Nous définissons une fonction appelée FabriquerMenu, avec pour argument la fenêtre racine. Nous définissons ensuite les trois jeux de menus que nous allons créer. Un menu Fichier, un pour le traitement et le dernier pour l'aide.
             menu.add_cascade(label="Fichier", menu=menuFichier)
             menu.add_cascade(label="Traitement",menu=Traitement)
@@ Ligne 214: / Ligne 214: @@
 Nous commençons par la définition de la fonction (en bas à droite), qui prend en argument la fenêtre racine (principale) et crée un cadre qui contient tous nos autres widgets. J'ai ajouté des commentaires pour aider à comprendre quelle partie du code traite de quelle fenêtre. Nous allons commencer avec la fenêtre supérieure.
-En supposant que vous vous souvenez ou avez rafraîchi votre mémoire sur Tkinter, cela devrait être assez simple. Regardons la première étiquette pour l'expliquer.
+En supposant que vous vous en souvenez ou avez rafraîchi votre mémoire sur Tkinter, cela devrait être assez simple. Regardons la première étiquette pour l'expliquer :
 self.label1 = Label(self.frm1,text = "Fichier original : ")
-Premièrement, nous définissons le nom du widget (self.label1 =). Ensuite, nous réglons cette variable au type de widget que nous voulons utiliser ; dans ce cas Label (étiquette). Enfin, nous définissons les paramètres que nous voulons appliquer à ce widget, à commencer par le widget parent (self.frm1), et dans ce cas, le texte qui apparaîtra sur l'étiquette. Maintenant, nous allons prendre un moment pour regarder le bouton self.btnNomFic.
+Premièrement, nous définissons le nom du widget (self.label1 =). Ensuite, nous réglons cette variable au type de widget que nous voulons utiliser ; dans ce cas Label (étiquette). Enfin, nous définissons les paramètres que nous voulons appliquer à ce widget, à commencer par le widget parent (self.frm1) et, dans ce cas, le texte qui apparaîtra sur l'étiquette. Maintenant, nous allons prendre un moment pour regarder le bouton self.btnNomFic.
  self.btnNomFic = Button(self.frm1, width=28, image=self.openimage,
@@ Ligne 229: / Ligne 229: @@
 One more thing to look at is the textvariable parameter. This tells us what variable will hold the information that will be displayed in the widget. We set these in the __init__ function earlier. One other thing to mention is that the frame itself has two parameters you might not remember. The Relief parameter sets the border type of the frame, which in this case is GROOVE, and the bd parameter sets the border width. Border width defaults at 0 so if you want to see the effect, you have to set the border width (bd is a shortcut).**
-La première chose à remarquer est que c'est scindé en deux lignes. Vous pouvez placer le tout sur une seule ligne sans problème... mais c'est tout simplement trop long pour tenir sur une ligne de 72 caractères. Nous allons vraiment faire attention aux paramètres que nous utilisons ici. D'abord, le parent (frm1), puis la largeur qui est fixée à 28. Lorsque nous utilisons un widget qui a l'option de contenir un texte ou une image, il faut faire attention avec le réglage de la largeur. S'il contient du texte, le paramètre de largeur représente le nombre de caractères qu'il contiendra. Si c'est pour afficher une image, il correspond  au nombre de pixels. Enfin, nous réglons le paramètre de commande, qui indique au système quelle fonction appeler lorsque le bouton est cliqué.
+La première chose à remarquer est que c'est scindé en deux lignes. Vous pouvez placer le tout sur une seule ligne sans problème... mais c'est tout simplement trop long pour tenir sur une ligne de 72 caractères. Nous allons vraiment faire attention aux paramètres que nous utilisons ici. D'abord, le parent (frm1), puis la largeur qui est fixée à 28. Lorsque nous utilisons un widget qui a l'option de contenir un texte ou une image, il faut faire attention au réglage de la largeur. S'il contient du texte, le paramètre de largeur représente le nombre de caractères qu'il contiendra. Si c'est pour afficher une image, il correspond au nombre de pixels. Enfin, nous réglons le paramètre de commande, qui indique au système quelle fonction appeler lorsque le bouton est cliqué.
-Une autre chose à regarder est le paramètre textvariable. Il indique la variable qui contiendra l'information qui affichée dans le widget. Nous avons réglé ces variables dans la fonction __init__ plus tôt. Une autre chose à mentionner est que le cadre lui-même a deux paramètres que vous pourriez oublier. Le paramètre Relief définit le type de bordure, qui dans ce cas est GROOVE, et le paramètre bd définit la largeur de la bordure. La largeur de la bordure vaut 0 par défaut, donc si vous voulez voir l'effet, vous devez définir la largeur de bordure (bd est un raccourci).
+Une autre chose à regarder est le paramètre textvariable. Il indique la variable qui contiendra l'information qui sera affichée dans le widget. Nous avons réglé ces variables dans la fonction __init__ plus tôt. Une autre chose à mentionner est que le cadre lui-même a deux paramètres que vous pourriez oublier. Le paramètre Relief définit le type de bordure, qui dans ce cas est GROOVE, et le paramètre bd définit la largeur de la bordure. La largeur de la bordure vaut 0 par défaut, donc si vous voulez voir l'effet, vous devez définir la largeur de bordure (bd est un raccourci).
 ====== 13 ======
@@ Ligne 243: / Ligne 243: @@
 Maintenant, nous allons nous occuper des widgets de la fenêtre du milieu.
-Les six dernières lignes de cette section (page précédente, au milieu à droite) gère les deux listes déroulantes de l'interface utilisateur. Chaque liste déroulante est sur trois lignes (je les ai écrites ainsi pour les rendre facile à comprendre). La première ligne contient les paramètres de base. Sur la ligne suivante, nous relions l'événement de « changement de choix » à la fonction ChoixTaillePoints, et la dernière ligne contient la liste des valeurs disponibles dans le menu déroulant.
+Les six dernières lignes de cette section (page précédente, au milieu à droite) gère les deux listes déroulantes de l'interface utilisateur. Chaque liste déroulante est sur trois lignes (je les ai écrites ainsi pour les rendre faciles à comprendre). La première ligne contient les paramètres de base. Sur la ligne suivante, nous relions l'événement de « changement de choix » à la fonction ChoixTaillePoints, et la dernière ligne contient la liste des valeurs disponibles dans le menu déroulant.
 Tout le reste ci-dessus est assez « classique ». Maintenant, nous réglons nos valeurs par défaut pour les widgets qui en ont besoin. Encore une fois, nous utilisons les variables globales mises en place dans la fonction __init__ et associées aux classes de variables de widgets.
@@ Ligne 287: / Ligne 287: @@
 First we place the frame.**
-Enfin, nous traitons avec la fenêtre latérale, qui contiendra une ScrolledFrame (fenêtre à ascenseurs) de la bibliothèque PMW. C'est vraiment facile à utiliser et fournit une interface agréable pour l'information sur les fils qui devront être utilisés. Vous pouvez vous documenter vous-mêmes sur la ScrolledFrame, car nous avons encore beaucoup à faire ici.
+Enfin, nous traitons la fenêtre latérale, qui contiendra une ScrolledFrame (fenêtre à ascenseurs) de la bibliothèque PMW. C'est vraiment facile à utiliser et fournit une interface agréable pour l'information sur les fils qui devront être utilisés. Vous pouvez vous documenter vous-mêmes sur la ScrolledFrame, car nous avons encore beaucoup à faire ici.
 C'est tout pour les widgets. Maintenant, nous devons les placer. Comme je l'ai dit plus tôt, nous utiliserons le gestionnaire en « grille », plutôt que les gestionnaires « absolu » ou « paquet ».
@@ Ligne 304: / Ligne 304: @@
 The bottom frame is simple since we have only the frame and the two labels to hold the images.**
-Vous pouvez voir que nous plaçons le widget en utilisant la commande {nomwidget}.grid, puis la position de ligne et de colonne. Notez que nous indiquons au widget de saisie de couvrir 5 colonnes. Les valeurs padx et pady mettrons un espace supplémentaire à la fois sur les côtés droit et gauche (padx) et haut et bas (pady). Le paramètre sticky est similaire à une commande « justifier » pour le texte.
+Vous pouvez voir que nous plaçons le widget en utilisant la commande {nomwidget}.grid, puis la position de ligne et de colonne. Notez que nous indiquons au widget de saisie de couvrir 5 colonnes. Les valeurs padx et pady mettront un espace supplémentaire à la fois sur les côtés droit et gauche (padx) et haut et bas (pady). Le paramètre sticky est similaire à une commande « justifier » pour le texte.
 La fenêtre du milieu est un peu plus compliquée, mais similaire à celle du haut. Vous remarquerez peut-être un cadre supplémentaire au milieu du code (self.frmLine). Cela nous donne un beau séparateur entre la section des options et la section d'affichage. Comme il n'y a pas de widget ligne horizontale ou verticale, j'ai triché et utilisé un cadre d'une largeur de 6 pixels et une largeur de bordure de 3, ce qui le fait ressembler à une ligne épaisse.
@@ Ligne 321: / Ligne 321: @@
         sys.exit()**
-La fenêtre de côté est à peu près identique, sauf que la ScrolledFrame permet qu'un cadre soit défini à l'intérieur du widget. Nous créons ensuite trois widgets ici et les plaçons dans la grille comme des en-têtes de colonnes. Nous faisons cela car nous avons réglé le cadre intérieur de la ScrolledFrame et nous devons assigner le parent (self.sfFrame) après que nous l'avons créé.
+La fenêtre de côté est à peu près identique, sauf que la ScrolledFrame permet qu'un cadre soit défini à l'intérieur du widget. Nous créons ensuite trois widgets et les plaçons dans la grille comme des en-têtes de colonnes. Nous faisons cela, car nous avons réglé le cadre intérieur de la ScrolledFrame et nous devons assigner le parent (self.sfFrame) après sa création.
-Le travail difficile est fini pour le moment. Maintenant nous allons créer toutes les fonctions dont nous aurons besoin pour obtenir une interface graphique qui fonctionne, la plupart seront vides jusqu'au mois prochain. Nous en écrirons certaines, mais elles sont assez courtes.
+Le travail difficile est fini pour le moment. Maintenant nous allons créer toutes les fonctions dont nous aurons besoin pour obtenir une interface graphique qui fonctionne ; la plupart seront vides jusqu'au mois prochain. Nous en écrirons certaines, mais elles sont assez courtes.
 La première fonction sera l'option Quitter de la barre de menu, dans le menu Fichier.
@@ Ligne 363: / Ligne 363: @@
 The first line sets up the root TopLevel window. The next line sets the title on the top line. The third line instantiates our XStitch class, and the last line starts the main loop that shows the UI and gives control over to it.**
+Comme vous pouvez le voir, nous avons pas mal de travail à faire le mois prochain. Nous avons encore quatre lignes à écrire pour finir pour ce mois, en dehors de notre code de classe :
+racine = Tk()
+racine.title("Generateur de motifs de point de croix")
+test = XStitch(racine)
+racine.mainloop()
+La première ligne met en place la fenêtre racine. La ligne suivante définit le titre sur la ligne supérieure. La troisième ligne instancie notre classe XStitch, et la dernière ligne démarre la boucle principale qui montre l'interface utilisateur et lui donne le contrôle.
 ====== 20 ======
@@ Ligne 372: / Ligne 384: @@
 Next month we will flesh out the code. See you then.**
+Eh bien, ça fait beaucoup pour ce mois-ci, mais nous sommes arrivés au bout. Vous pouvez effectivement exécuter le programme pour voir l'interface graphique.
+Comme toujours, le code est disponible sur Pastebin : http://pastebin.com/RM7CgtbT (http://pastebin.com/XtBawJps pour l'original).
+Rendez-vous le mois prochain pour étoffer le code.
-VF : http://pastebin.com/RM7CgtbT
 ====== MORCEAUX DE CODE PAGE 11 ======