seance4_4h/figures/Fenetre_ZoneAffichage_2.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="544px" height="183px" viewBox="-0.5 -0.5 544 183" content="&lt;mxfile host=&quot;app.diagrams.net&quot; modified=&quot;2020-10-01T12:24:19.841Z&quot; agent=&quot;5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36&quot; etag=&quot;7_P7bSVEtSraPxa-TKuH&quot; version=&quot;13.7.7&quot; type=&quot;device&quot;&gt;&lt;diagram name=&quot;Page-1&quot; id=&quot;c4acf3e9-155e-7222-9cf6-157b1a14988f&quot;&gt;7VpZc6M4EP41fpkqu7iPRx9JJluZmWQzu4nnDYM4NoC8Qr7y61cYySCD8Ykdb+bFhT5BC77+utXqckvuR/M7ZI39b9ABYUsSnHlLHrQkSTc08psCiwxQdCUDPBQ4GSTkwHPwDjJQZOgkcEBCsQzCEIY4GPOgDeMY2JjDLITgjL/NhaHDAWPLAyXg2bbCMvoSONjPUEPSc/wrCDyfrSxqZjYzsuw3D8FJTNeLYQyymchiZug3Jr7lwFkBkm9ach9BiLOraN4HYcoqz9jthtnVKyMQ410e+NGb3w0Hg650P/36OuyG6PswbEvUTwleMC6AQ6ihQxCO4OwmB3rLTwWpRYGMIMI+9GBshQ8QjgkoEvAfgPGCutiaYEigpRkynAKEA8I6gXwchfQBMA/wa2qxo6t0OKQLpNeDeXGwYIPY6aaOJ0MnsCKYOiAFb4OQ2U0wgm8rfyoEKVNGWUy/uQBQAu8AjABGC3IDAqGFgykvF4uqzlvdt3r0EQZkCUmgASLLakfNHqIRIskCbySBE2QD+lzRjfubwhbyAC6ZIheFb8qhpU720Yz6gTTzPxWMpGqnkctWQ6cTi3774vm/XmzJ/4bUySP+u60nbdGsFUuuhuMVU5RHTN76tThYCqSjsmGukeWIiSQhbGBqVZIPUY2UvtskGlMjxiatdtRatW4UXub3DJr3bIDcR/wQdCXzqTt6+vcZtkXq78yvdTfqF5Iyqw32lbLItEQNyWwTPpOUU5PpclMrnPBkrIn7wRqBtXxlhYEXk2ub+BMgArC01qUTUeA4mfZBErxbo6W9VAnj9HOWH6j2WuqgUhu1kZeuBObc+9Iyiq7C1SOc5+lTZGOWNd6J1NCh0qBWdP4B6LoJaMZ18id1XVvoGIquH+ctZkviJGA24LzKRFUOu7Lr8jQ9CqH9liVpmoNNLmULG3aKwuYwLM5t2CnyonX3mvWIpK7vmtTVHZP6LD/miJpwEn1I0lqO0NTDEr1sbDF0ukRfSaLyW3C7VxHG5QQnC3xBcHCRrBrK2pnq3JJjcctpTgsJ870RufDSi59vDCJLrNCSNAtac4kC+zCEaDkju4YNbHtVshZmRoaqqLWKKW1FG7ccnQ9elQqk4H9Wt/mFloqkbvY+R/bezGrbmf0FY9B13cD20z7RkSS7rlRNsqONNFILn4RkQuu6YlW9RLQoCOdkWt/O9C2IH1EQ28E47b1dA9OatJVmUz8ny8Z2lvtWPCULX0O2WJ0Gz58uHpDxM/r+4/3ent0/mX+9A+uPXrv6WNBwu6KZtsOBPZDG2hWVfCu71hnajnXGkTWFosh8vBtrJnYuYjV9zVBjjbdKYj9ss6Iu7D5Zr6KSinKrQuh0vnwG311Zs6Iun9XWQBBF11H7KGw3vkSNWUlvVTHfxNFc4s7mwq5bJnc2FxvaMit6QXVSvMTJXGUncSoclpH3PpibpYO53tjBvI7sunj+M01xsXcl5xlFFDlCL11wmxUENxHR+geOaPY3mA8d0gof0vqBIa2YawW2tlZZNRzQjOu6iL4Jw2CcXEc8q/K5+m1kmP9bKXNH/mcw+eY/&lt;/diagram&gt;&lt;/mxfile&gt;"><defs/><g><path d="M 273.5 172 L 273.5 172 L 273.5 172" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 273.5 172 L 273.5 172 L 273.5 172 L 273.5 172 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/><path d="M 194 172 L 194 172 L 194 172" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 194 172 L 194 172 L 194 172 L 194 172 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/><path d="M 196.5 111.5 L 106.41 111.5" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 98.41 111.5 L 102.41 107.5 L 106.41 111.5 L 102.41 115.5 Z" fill="#000000" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 120px; margin-left: 111px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">1</div></div></div></foreignObject><text x="111" y="123" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">1</text></switch></g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 121px; margin-left: 187px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">1</div></div></div></foreignObject><text x="187" y="124" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">1</text></switch></g><path d="M 48.5 99 L 48.5 36.12" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 48.5 26.12 L 53.5 36.12 L 43.5 36.12 Z" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><path d="M 246.5 99 L 246.5 36.12" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 246.5 26.12 L 251.5 36.12 L 241.5 36.12 Z" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="14" y="0" width="69" height="25" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 13px; margin-left: 49px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: nowrap; "><b>Tk</b></div></div></div></foreignObject><text x="49" y="16" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Tk</text></switch></g><rect x="196.5" y="99" width="100" height="25" fill="#fff2cc" stroke="#d6b656" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 112px; margin-left: 247px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: nowrap; "><b>ZoneAffichage</b></div></div></div></foreignObject><text x="247" y="115" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">ZoneAffichage</text></switch></g><rect x="0" y="99" width="97" height="25" fill="#fff2cc" stroke="#d6b656" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 112px; margin-left: 49px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: nowrap; "><b>FenPrincipale</b></div></div></div></foreignObject><text x="49" y="115" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">FenPrincipale</text></switch></g><rect x="212" y="0" width="69" height="25" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 13px; margin-left: 247px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: nowrap; "><b>Canvas</b></div></div></div></foreignObject><text x="247" y="16" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Canvas</text></switch></g><path d="M 396 111.5 L 305.91 111.5" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 297.91 111.5 L 301.91 107.5 L 305.91 111.5 L 301.91 115.5 Z" fill="#000000" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 120px; margin-left: 311px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">1</div></div></div></foreignObject><text x="311" y="123" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">1</text></switch></g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 121px; margin-left: 387px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">0..*</div></div></div></foreignObject><text x="387" y="124" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">0..*</text></switch></g><rect x="396" y="99" width="100" height="25" fill="#fff2cc" stroke="#d6b656" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 112px; margin-left: 446px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: nowrap; "><b>Forme</b></div></div></div></foreignObject><text x="446" y="115" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Forme</text></switch></g><path d="M 383.5 25 L 415.97 89.08" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 420.49 98 L 411.51 91.34 L 420.43 86.82 Z" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="349" y="0" width="69" height="25" fill="#fff2cc" stroke="#d6b656" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 13px; margin-left: 384px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: nowrap; "><b>Rectangle</b></div></div></div></foreignObject><text x="384" y="16" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Rectangle</text></switch></g><path d="M 508.5 25 L 476.03 89.08" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 471.51 98 L 471.57 86.82 L 480.49 91.34 Z" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><rect x="474" y="0" width="69" height="25" fill="#fff2cc" stroke="#d6b656" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 13px; margin-left: 509px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: nowrap; "><b>Ellipse</b></div></div></div></foreignObject><text x="509" y="16" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Ellipse</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://desk.draw.io/support/solutions/articles/16000042487" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
\ No newline at end of file

seance4_4h/formes.py

+class Forme:
+    def __init__(self, canevas, x, y):
+        self.__canevas = canevas
+        self._item = None
+        self.x = x
+        self.y = y
+    
+    def effacer(self):
+        self.__canevas.delete(self._item)
+    
+    def deplacement(self, dx, dy):
+        self.__canevas.move(self._item, dx, dy)
+        self.x += dx
+        self.y += dy
+
+class Rectangle(Forme):
+    def __init__(self, canevas, x, y, l, h, couleur):
+        Forme.__init__(self, canevas, x, y)
+        self._item = canevas.create_rectangle(x, y, x+l, y+h, fill=couleur)
+        self.__l = l
+        self.__h = h
+    
+    def __str__(self):
+        return f"Rectangle d'origine {self.x},{self.y} et de dimensions {self.__l}x{self.__h}"
+
+    def get_dim(self):
+        return self.__l, self.__h
+
+    def set_dim(self, l, h):
+        self.__l = l
+        self.__h = h
+
+    def contient_point(self, x, y):
+        return self.x <= x <= self.x + self.__l and \
+               self.y <= y <= self.y + self.__h
+
+    def redimension_par_points(self, x0, y0, x1, y1):
+        self.x = min(x0, x1)
+        self.y = min(y0, y1)
+        self.__l = abs(x0 - x1)
+        self.__h = abs(y0 - y1)
+
+class Ellipse(Forme):
+    def __init__(self, canevas, x, y, rx, ry, couleur):
+        Forme.__init__(self, canevas, x, y)
+        self._item = canevas.create_oval(x-rx, y-ry, x+rx, y+ry, fill=couleur)
+        self.__rx = rx
+        self.__ry = ry
+
+    def __str__(self):
+        return f"Ellipse de centre {self.x},{self.y} et de rayons {self.__rx}x{self.__ry}"
+
+    def get_dim(self):
+        return self.__rx, self.__ry
+
+    def set_dim(self, rx, ry):
+        self.__rx = rx
+        self.__ry = ry
+
+    def contient_point(self, x, y):
+        return ((x - self.x) / self.__rx) ** 2 + ((y - self.y) / self.__ry) ** 2 <= 1
+
+    def redimension_par_points(self, x0, y0, x1, y1):
+        self.x = (x0 + x1) // 2
+        self.y = (y0 + y1) // 2
+        self.__rx = abs(x0 - x1) / 2
+        self.__ry = abs(y0 - y1) / 2

seance4_4h/seance4_4h.md

+**Sommaire**
+
+[[_TOC_]]
+
+# BE #4 : Application de dessin vectoriel
+
+L'objectif de ce BE est d'apprendre à manipuler quelques composants du module _Python_ _Tkinter_ permettant de créer des interfaces graphiques. Vous allez créer une application simple de dessin vectoriel, qui permettra de tracer à la souris les formes définies dans le BE #2.
+
+---
+## Quelques éléments sur _Tkinter_ (45 min.)
+
+Le module _Tkinter_ (_"Tk interface"_) permet de créer des interfaces graphiques. Il contient de nombreux composants graphiques (ou _widgets_), tels que les boutons (classe __Button__), les cases à cocher (classe __CheckButton__), les étiquettes (classe __Label__), les zones d'entrée de texte (classe __Entry__), les menus (classe __Menu__), ou les zones de dessin (classe __Canvas__).
+
+Durant ce BE, nous vous recommandons de conserver le lien vers une [documentation sur _Tkinter_]( https://python.doctor/page-tkinter-interface-graphique-python-tutoriel) ouverte dans un onglet de votre navigateur. Elle contient des exemples de code qui vous seront utiles pour utiliser chacun des _widgets_.
+
+Voici un premier exemple de code _Tkinter_ :
+
+```python
+from tkinter import *
+from random import randint
+
+class FenPrincipale(Tk):
+    def __init__(self):
+        Tk.__init__(self)
+        
+        # paramètres de la fenêtre
+        self.title('Tirage aléatoire')
+        self.geometry('300x100+400+400')
+        
+        # constitution de l'arbre de scène
+        boutonLancer = Button(self, text='Tirage')
+        boutonLancer.pack(side=LEFT, padx=5, pady=5)
+        self.__texteResultat = StringVar()
+        labelResultat = Label(self, textvariable=self.__texteResultat)
+        labelResultat.pack(side=LEFT, padx=5, pady=5)
+        boutonQuitter = Button(self, text='Quitter')
+        boutonQuitter.pack(side=LEFT, padx=5, pady=5)
+        
+        # association des widgets aux fonctions
+        boutonLancer.config(command=self.tirage) # appel "callback" (pas de parenthèses !)
+        boutonQuitter.config(command=self.quit)  # idem
+    
+    # tire un entier au hasard et l'affiche dans self.__texteResultat
+    def tirage(self):
+        nb = randint(1, 100)
+        self.__texteResultat.set('Nombre : ' + str(nb))
+
+
+if __name__ == '__main__':
+    app = FenPrincipale()
+    app.mainloop()
+```
+
+*Remarque :* La méthode `pack(...)` est utilisée pour organiser les différents éléments dans la fenêtre.
+
+__Exercice 1 -__ Copiez le code suivant dans un fichier appelé *Exo1.py* et exécutez-le pour observer le résultat. 
+
+__Attention, utilisateurs de Mac__ : l'association _Spyder_+_Tkinter_ ne fonctionne pas bien sous Mac ! Lorsque vous quitterez l'interface (par le biais du bouton _Quitter_), la fenêtre va se bloquer (_freeze_). Deux solutions: 
+
+- soit vous forcez l'application à s'arrêter à chaque fois (utilisez le menu contextuel sur l'icône de l'application concernée dans la barre d'outils);     
+- soit vous exécutez votre programme en ligne de commande. Pour cela, ouvrez un `Terminal` dans le répertoire de travail (clic-droit sur le répertoire → Nouveau terminal au dossier). Puis lancez le programme exécutant la commande : `python3 Exo1.py`. Vous devriez pouvoir quitter l'application sans difficulté. N'oubliez pas de sauvegarder votre fichier sous _Spyder_ avant toute exécution de cette manière !
+
+Prenez le temps d'étudier cet exemple, et répondez aux questions suivantes :
+
+* Combien d'éléments contient l'arbre de scène ?
+* Que se passe-t-il lorsqu'on clique sur le bouton `Tirage` ?
+* Comment peut-on inverser les positions des deux boutons ?
+* Comment peut-on augmenter l'espace à gauche et à droite du label ?
+* Comment peut-on colorier le texte du label en rouge ?
+
+
+---
+## Squelette de l'application de dessin (60 min.)
+
+On souhaite obtenir l'interface ci-dessous, dans laquelle les utilisateurs sélectionneront le type de forme à dessiner avec les boutons, et créeront une forme en cliquant dans la zone située sous la barre d'outils (_widget_ __Canvas__ de _Tkinter_). On a donné une couleur grise au fond de la fenêtre pour vous aider à déterminer les différents _widgets_ présents.
+
+<center><img src="figures/interface.png" style="width:60%"/></center>
+
+Une pratique courante dans les interfaces graphiques est d'intégrer le code de l'application dans l'arbre de scène, en créant des classes qui s'y intégreront comme des nœuds. Ces classes héritent des classes de _Tkinter_ (pour être autorisées à les remplacer dans l'arbre), et nous leur ajouterons des attributs et méthodes spécifiques à leurs responsabilités dans l'application de dessin. Nous allons ainsi introduire deux classes :
+
+* la classe __ZoneAffichage__, qui hérite de __Canvas__ et gère toutes les opérations de dessin spécifiques à votre application.
+* la classe __FenPrincipale__, qui hérite de __Tk__ et gère l'initialisation de l'arbre de scène et des _callbacks_ des _widgets_.
+
+Voici le diagramme UML correspondant :
+
+<center><img src="figures/Fenetre_ZoneAffichage_1.svg" style="width:50%"/></center>
+
+En rouge figure les classes de la librairie _Tkinter_, et en jaune vos propres classes.
+
+__Exercice 2 -__ Dessinez l'arbre de scène correspondant à la capture d'écran. Pour chaque nœud vous indiquerez la classe et, s'il y a lieu, sa classe parente également.
+
+
+__Exercice 3 -__ Complétez le code ci-dessous avec l'initialisation de votre arbre de scène. Vous utiliserez une instance de __ZoneAffichage__ pour implémenter le canevas. À ce stade, on ne vous demande pas de programmer les actions associées aux boutons, mais uniquement de mettre en place le design de l'interface. Vous trouverez des exemples d'utilisation de chacun des _widgets_ dans la documentation référencée plus haut.
+
+```python
+from tkinter import *
+
+class ZoneAffichage(Canvas):
+    def __init__(self, parent, largeur, hauteur):
+        Canvas.__init__(self, parent, width=largeur, height=hauteur)
+
+class FenPrincipale(Tk):
+    def __init__(self):
+        Tk.__init__(self)
+        self.configure(bg="grey")
+        # L'initialisation de l'arbre de scène se fait ici
+
+if __name__ == "__main__":
+    fen = FenPrincipale()
+    fen.mainloop()
+```
+
+
+---
+## Dessin de formes dans le canevas (75 min.)
+
+Vous trouverez dans le dossier de ce BE le fichier [formes.py](formes.py) développé durant le BE #2. Nous avons agrémenté les classes __Rectangle__ et __Ellipse__ pour qu'elles reçoivent un canevas en argument et se dessinent dessus lors de leur initialisation. La classe __Forme__ est maintenant dotée d'une méthode `effacer()` qui supprimera la forme du canevas.
+
+Copiez ce fichier dans votre répertoire de travail.
+
+Ces classes seront intégrées selon le diagramme UML suivant :
+
+<center><img src="figures/Fenetre_ZoneAffichage_2.svg" style="width:90%"/></center>
+
+__Exercice 4 -__ À l'aide de la méthode `bind` vue en cours, reliez les clics de la souris dans le canevas (événements `<ButtonRelease-1>`) à une nouvelle méthode de __ZoneAffichage__ qui imprime les coordonnées de chaque clic avec `print`.
+
+__Exercice 5 -__ Modifiez cette méthode pour créer un nouveau __Rectangle__ centré sur la souris chaque fois que la méthode est exécutée (à ce stade choisissez des dimensions arbitraires). N'oubliez pas de stocker ce rectangle dans __ZoneAffichage__ !
+
+__Exercice 6 -__ Lorsqu'on clique sur le bouton `Ellipse`, l'outil "Ellipse" est sélectionné et tous les futurs clics dans le canevas doivent créer une nouvelle __Ellipse__ (de dimension fixe quelconque). Lorsqu'on clique ensuite sur le bouton `Rectangle`, les clics suivants créeront un __Rectangle__. L'outil sélectionné par défaut est "Rectangle". Modifiez votre code pour implémenter ce comportement.
+
+
+---
+## Opérations de dessin supplémentaires (60 min.)
+
+Nous allons à présent intégrer deux commandes simples dans l'application de dessin :
+
+* Lorsqu'on clique sur une forme en maintenant la touche CTRL enfoncée, elle doit s'effacer du canevas.
+* Lorsqu'on clique sur le bouton _Couleur_, un sélecteur de couleurs apparaît pour choisir la couleur de l'outil de dessin.
+
+__Exercice 7 -__ Implémentez l'effacement des formes avec CTRL-clic (événement `<Control-ButtonRelease-1>`). Vous pourrez faire appel aux méthodes `contient_point(...)` des classes __Rectangle__ et __Ellipse__ pour déterminer si la position de la souris au moment de l'événement est dans le périmètre d'une forme donnée, ainsi qu'à la méthode `effacer(...)` de la classe __Forme__.
+
+__Exercice 8 -__ À l'aide du module _colorchooser_ de _Tkinter_ (```from tkinter import colorchooser```), liez les clics sur le bouton _Couleur_ à l'affichage d'un sélecteur de couleur, et utilisez la couleur renvoyée pour tous les ajouts de formes suivants.
+
+
+---
+## Exercices bonus
+
+Il n'y a pas d'ordre prédéfini pour ces trois exercices supplémentaires, choisissez celui dont la fonctionnalité vous semble la plus intéressante.
+
+__Bonus 1 -__ Dans tout programme de dessin respectable, on doit pouvoir dessiner des formes de tailles arbitraires (pas prédéfinies comme précédemment). À l'aide des types d'événements `<Button-1>`, `<B1-Motion>` et `<ButtonRelease-1>`, faites qu'un mouvement de souris avec le bouton enfoncé dessine une forme en tirant ses coins (lorsqu'il ne déplace pas une forme existante). Vous pourrez utiliser les méthodes `redimension_par_points(...)` des classes __Rectangle__ et __Ellipse__.
+  
+__Bonus 2 -__ Il serait aussi pratique de pouvoir déplacer les formes présentes sur le canevas. À l'aide des types d'événements `<Button-1>`, `<B1-Motion>` et `<ButtonRelease-1>`, implémentez la translation des formes lors des actions d'appui-déplacement de la souris. Comment faire pour qu'elles n'interfèrent pas avec la création de nouvelles formes ?
+
+__Bonus 3 -__ Maintenant que votre programme de dessin vectoriel est fonctionnel, on doit pouvoir exporter chaque image produite dans un fichier. On utilise pour cela le format SVG, qui est un fichier texte contenant des instructions de dessin. Il suffit d'écrire `<svg viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">` au début du fichier, `</svg>` à la fin, et d'insérer des balises [`rect`](https://developer.mozilla.org/fr/docs/Web/SVG/Element/rect) et [`ellipse`](https://developer.mozilla.org/fr/docs/Web/SVG/Element/ellipse) entre les deux. Pour obtenir un dessin coloré, vous pouvez insérer à l'intérieur des 2 balises, la chaîne `style="fill: brown"` et remplacer `brown` par la couleur de votre forme. C'est maintenant à vous de jouer !

seance5_6h/consignes_BE#5.md

+### Consignes pour le rendu (BE #5 - INF-TC2)
+
+Ce BE est le second devoir à rendre concernant INF-TC2. Le compte-rendu (CR) de votre travail devra être déposé sur `Pedagogie1`, sur l'espace de dépôt spécifique à votre groupe. Et cela dans un **délai d'une (1) semaines après la dernière séance consacrée** (délai de rigueur, aucun travail accepté au delà de cette date). Cette semaine ne tient pas compte d'éventuelles vacances. Si vous avez un doute, le plus simple est de contrôler la date pour votre groupe sur `Pedagogie1`.
+
+**Consignes:**
+
+  - Le travail peut être individuel ou en binôme. Si vous travaillez en binôme, **un seul dépôt suffit !**.    
+  - Le dépôt consistera en une unique archive (zip, rar) contenant l'ensemble des fichiers suivants :     
+     - Le fichier _Python_, appelé *Pendu.py*, contenant toutes les classes (**FenPrincipale**, **ZoneAffichage** et **MonBoutonLettre**), et un programme principal permettant de lancer l'application.
+     - Le fichier *mots.txt* et la classe *formes.py* (même s'ils n'ont pas été modifiés). 
+     - un rapport (format _word_, _pdf_, ou mieux encore _markdown_ !) contenant     
+         - Une en-tête où devront figurer le nom des élèves, leur numéro de groupe, le nom de l'encadrant ainsi que le titre du BE.   
+         - Un diagramme de classes UML complet de votre application (pensez à utiliser [diagrams](https://app.diagrams.net) !), avec les liens entre les classes, les cardinalités, les attributs (privés ou publics), et les méthodes (elles-mêmes publiques ou privées).  
+         - Une présentation du code de la DERNIÈRE PARTIE UNIQUEMENT de votre travail (partie intitulée _Améliorations du jeu_). Vous pouvez utilisez des explications textuelles, des diagrammes, des copies d'écran...
+
+  - L'archive devra nécessairement porter le nom suivant : *nom1-BE5.zip* ou *nom1-nom2-BE5.zip* (pour les étourdis, pensez à remplacer *nom1* et *nom2* par vos propres noms :-) )
+
+**Critères d'évaluation du travail**
+
+Voici une liste (non exhaustive) de critères qui permettront à vos encadrants d'évaluer vos requêtes :
+
+  - **Qualité du rapport** : apparence visuelle globale, orthographe, structure du rapport claire et cohérente. Présence et complétude du diagramme de classes. Qualité des représentations graphiques.       
+  - **Qualité du code** : est-ce qu'il fonctionne sans erreur, le code est-il suffisamment commenté et aéré ? Tests multiples avec des paramètres inattendus ou erronés. Interception des erreurs par des exceptions.   
+  - **Qualité de l'interface** : aspect visuel de l'interface graphique.
+ 
\ No newline at end of file

seance5_6h/figures/Arbre_scene_pendu.drawio

+<mxfile host="Electron" modified="2020-10-07T05:23:43.840Z" agent="5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/13.7.3 Chrome/85.0.4183.98 Electron/10.1.2 Safari/537.36" etag="rDyIsUkNxe0FlCVNYQt9" version="13.7.3" type="device"><diagram id="uKeeR9P6dBSU_i-VrJ_J" name="Page-1">7Zpbl5owEIB/jY/dQxKuj9W9dNttz7b2nO72LUIEukhsDF766xskgIArispq65PJZHKbfCQziR3UG83vGB57n6lDgg5UnHkHXXcgBEDRxU8sWSQS0wSJwGW+I5VyQd//Q6RQkdLId8ikoMgpDbg/LgptGobE5gUZZozOimpDGhR7HWOXVAR9GwdV6Q/f4Z6cBTRy+Qfiu17aM9CtpGSEU2U5k4mHHTpbEaGbDuoxSnmSGs17JIiNl9olqXf7Smk2MEZCvk2F+08fo6l6P3W+uebjg92fLVz3nWxlwhfphBmNQofEdZQO6lLGPerSEAcPlI6FEAjhL8L5Qi4VjjgVIo+PAllK5j5/ktXj9POK/Hq+UnC9SDMhZ4unVC3OPK+W5JWWubTWhDP6ki2KMGe3apF0ejRiNtlgBijJwswlfIMeSvSIU4BG2vuO0BERIxQKjASY+9MiQ1ii6GZ6+WqJhFywHRZPjnqKg0j21IF6IMbfHYiEGycYtv2QZGKWylPJkApTxV9PQNmyCf13RBMFpCjGcDhcFSV1v7+ktcWokwaKjVa7EYqDXLaRuJnnc9If4+V6zcSmUqQLB74birQt1piwtRgM/SDoZRNCYg7QtjPNlRJHH+iavgmcKWGczDcutSxFSH7m6T4ns7N80zCkyFvZL1TlSGygejbElslJSCJ2WDxuGR6RMyOE6K8QYlgDRTkMIQAUCcmOuLdCRK1H5AuNpqIlksyd+wfeSboR5zQ8K1YcjZiOuo4VEw6QfqjdpIgKglVUgNImK1o9K18jn8dGPCwh9ILIK9uJUc9Iq9uJXrFz7Cb1ZTakwg0R/si+3mXV+pm/eQW13V1O5Urbxels7mJaW7qY6alwOB9TVn2k/vL7k/yosMSPUgIjGamsVWIjG0ZzXIw3c1B6OJyKSZ7TltKOhwL1E/NQzHpGRpQflo4HPIivMM4IjnbOG007MTisS4RzYvsHsk4MkbT/TYy8v4Q07YQ0oN5fNVuFA9TD8fMCRytwqPqpwbHubrUc3oTO+/iFIY9uHDzxlksBNgUtqtR8xHG8HC51oLLxArs2GFixk7bGTqls35hBMYrLVLZ/EgVVYoZqQ2pNQ0cOPgCq+Y72efdoIw59i8cPY0sW94QMlrwIoDWEDBjwSis6JLBlzNRjYmb8m5hZ7WCW3XekmOlNMTMrmKGWMdOOhxlowNipE2a2RFjJ481ubHcmzKoQ1vZ5Wb3c/X/PS7QlZmpLmJUucoHZEDPhg5YxKx+9x8bMuJyXO2OmtYRZ6U0SWE0xAxXMykfvsTEzL5jt/i61bSh6YPcflt+l9nD/ywdwY85ENv/jXqKe//0R3fwF</diagram></mxfile>
\ No newline at end of file

seance5_6h/figures/Arbre_scene_pendu.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="592px" height="282px" viewBox="-0.5 -0.5 592 282" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2020-10-23T14:24:20.314Z&quot; agent=&quot;5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/13.7.9 Chrome/85.0.4183.121 Electron/10.1.3 Safari/537.36&quot; etag=&quot;j2wcMG27qSD1AfmOCcUu&quot; version=&quot;13.7.9&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;uKeeR9P6dBSU_i-VrJ_J&quot; name=&quot;Page-1&quot;&gt;7Zpbl5owEIB/jY/dQxKuj9W9dNttz7b2nO72LUIEukhsDF766xskgIArispq65PJZHKbfCQziR3UG83vGB57n6lDgg5UnHkHXXcgBEDRxU8sWSQSU7ESgct8Ryrlgr7/h0ihIqWR75BJQZFTGnB/XBTaNAyJzQsyzBidFdWGNCj2OsYuqQj6Ng6q0h++wz05C2jk8g/Ed720Z6DL+Y1wqixnMvGwQ2crInTTQT1GKU9So3mPBLHxUrsk9W5fKc0GxkjIt6lw/+ljNFXvp84313x8sPuzheu+k61M+CKdMKNR6JC4jtJBXcq4R10a4uCB0rEQAiH8RThfyKXCEadC5PFRIEvJ3OdPsnqcfl6RX89XCq4XaSbkbPGUqsWZ59WSvNIyl9aacEZfskUR5uxWLZJOj0bMJhvMACVZmLmEb9BDiR5xCtBIe98ROiJihEKBkQBzf1pkCEsU3UwvXy2RkAu2w+LJUU9xEMmeOlAPxPi7A5Fw4wTDth+STMxSeSoZUmGq+OsJKFs2of+OaKKAFMUYDoeroqTu95e0thh10kCx0Wo3QnGQyzYSN/N8TvpjvFyvmdhUinThwHdDkbbFGhO2FoOhHwS9bEJIzAHadqa5UuLoA13TN4EzJYyT+callqUIyc882+eS7CzfNAwp8lb2C1U5Ehuong2xZXISkogdFo9bhkfkzAgh+iuEGNZAUQ5DCABFQrIj7q0QUesR+UKjqWiJJHPn/oF3km7EOQ3PihVHI6ajrmPFhAOkH2o3KaKCYBUVoLTJilbPytfI57ERD0sIvSDyynZi1DPS6naiV+wcu0l9mQ2pcEOEP7Kvd1m1fuZvXkFtd5dTudJ2cTqbu5jWli5meioczseUVR+pv/z+JD8qLPGjlMBIRiprldjIhtEcF+PNHJQeDqdikue0pbTjoUD9xDwUs56REeWHpeMBD+IrjDOCo53zRtNODA7rEuGc2P6BrBNDJO1/EyPvLyFNOyENqPdXzVbhAPVw/LzA0Qocqn5qcKy7Wy2HN6HzPn5hyKMbB0+85VKATUGLKjUfcRwvh0sdqGy8wK4NBlbspK2xUyrbN2ZQjOIyle2fREGVmKHakFrT0JGDD4BqvqN93j3aiEPf4vHD2JLFPSGDJS8CaA0hAwa80ooOCWwZM/WYmBn/JmZWO5hl9x0pZnpTzMwKZqhlzLTjYQYaMHbqhJktEVbyeLMb250JsyqEtX1eVi93/9/zEm2JmdoSZqWLXGA2xEz4oGXMykfvsTEzLuflzphpLWFWepMEVlPMQAWz8tF7bMzMC2a7v0ttG4oe2P2H5XepPdz/8gHcmDORzf+4l6jnf39EN38B&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><path d="M 301 41 L 158.06 126.76" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 152.92 129.85 L 157.72 122.3 L 158.06 126.76 L 161.84 129.16 Z" fill="#000000" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><rect x="301" y="1" width="70" height="40" fill="#fff2cc" stroke="#d6b656" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 68px; height: 1px; padding-top: 21px; margin-left: 302px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><b>racine<br /><font color="#007fff">Tk</font><br /></b></div></div></div></foreignObject><text x="336" y="25" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">racine...</text></switch></g><rect x="81" y="131" width="70" height="40" fill="#ffe6cc" stroke="#d79b00" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 68px; height: 1px; padding-top: 151px; margin-left: 82px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><b>conteneur<br /><font color="#007fff">Frame</font><br /></b></div></div></div></foreignObject><text x="116" y="155" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">conteneur...</text></switch></g><rect x="1" y="241" width="100" height="40" fill="#d5e8d4" stroke="#82b366" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 261px; margin-left: 2px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><b>Nouvelle partie<br /><font color="#007fff">Button</font><br /></b></div></div></div></foreignObject><text x="51" y="265" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Nouvelle partie...</text></switch></g><rect x="141" y="241" width="70" height="40" fill="#d5e8d4" stroke="#82b366" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 68px; height: 1px; padding-top: 261px; margin-left: 142px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><b>Quitter<br /><font color="#007fff">Boutton</font><br /></b></div></div></div></foreignObject><text x="176" y="265" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Quitter...</text></switch></g><path d="M 378.5 171 L 326.23 234.64" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 322.42 239.27 L 324.41 230.55 L 326.23 234.64 L 330.59 235.63 Z" fill="#000000" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><rect x="231" y="131" width="70" height="40" fill="#ffe6cc" stroke="#d79b00" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 68px; height: 1px; padding-top: 151px; margin-left: 232px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><b>conteneur<br /><font color="#007fff">Canvas</font><br /></b></div></div></div></foreignObject><text x="266" y="155" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">conteneur...</text></switch></g><rect x="521" y="131" width="70" height="40" fill="#d5e8d4" stroke="#82b366" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 68px; height: 1px; padding-top: 151px; margin-left: 522px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><b>mot<br /><font color="#007fff">Label</font><br /></b></div></div></div></foreignObject><text x="556" y="155" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">mot...</text></switch></g><rect x="361" y="131" width="70" height="40" fill="#ffe6cc" stroke="#d79b00" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 68px; height: 1px; padding-top: 151px; margin-left: 362px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><b>conteneur<br /><font color="#007fff">Frame</font><br /></b></div></div></div></foreignObject><text x="396" y="155" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">conteneur...</text></switch></g><rect x="281" y="241" width="80" height="40" fill="#d5e8d4" stroke="#82b366" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 261px; margin-left: 282px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><b>A<br /><font color="#007fff">Button</font><br /></b></div></div></div></foreignObject><text x="321" y="265" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">A...</text></switch></g><rect x="431" y="241" width="80" height="40" fill="#d5e8d4" stroke="#82b366" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 261px; margin-left: 432px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><b>Z<br /><font color="#007fff">Button</font><br /></b></div></div></div></foreignObject><text x="471" y="265" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Z...</text></switch></g><path d="M 378 261 L 418 261" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" stroke-dasharray="4 8" pointer-events="stroke"/><path d="M 318.5 41 L 270.15 123.89" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 267.13 129.07 L 267.7 120.14 L 270.15 123.89 L 274.61 124.17 Z" fill="#000000" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><path d="M 353.5 41 L 392.48 123.55" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 395.05 128.98 L 388.01 123.45 L 392.48 123.55 L 395.25 120.04 Z" fill="#000000" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><path d="M 371 41 L 513.94 126.76" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 519.08 129.85 L 510.16 129.16 L 513.94 126.76 L 514.28 122.3 Z" fill="#000000" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><path d="M 98.5 171 L 55.62 234.18" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 52.26 239.15 L 53.44 230.28 L 55.62 234.18 L 60.06 234.78 Z" fill="#000000" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><path d="M 133.5 171 L 171.73 233.96" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 174.84 239.09 L 167.27 234.33 L 171.73 233.96 L 174.11 230.17 Z" fill="#000000" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><path d="M 413.5 171 L 465.77 234.64" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 469.58 239.27 L 461.41 235.63 L 465.77 234.64 L 467.59 230.55 Z" fill="#000000" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://desk.draw.io/support/solutions/articles/16000042487" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
\ No newline at end of file

seance5_6h/formes.py

+class Forme:
+    def __init__(self, canevas, x, y):
+        self.__canevas = canevas
+        self._item = None
+        self.x = x
+        self.y = y
+    
+    def effacer(self):
+        self.__canevas.delete(self._item)
+    
+    def deplacement(self, dx, dy):
+        self.__canevas.move(self._item, dx, dy)
+        self.x += dx
+        self.y += dy
+
+class Rectangle(Forme):
+    def __init__(self, canevas, x, y, l, h, couleur):
+        Forme.__init__(self, canevas, x, y)
+        self._item = canevas.create_rectangle(x, y, x+l, y+h, fill=couleur)
+        self.__l = l
+        self.__h = h
+    
+    def __str__(self):
+        return f"Rectangle d'origine {self.x},{self.y} et de dimensions {self.__l}x{self.__h}"
+
+    def get_dim(self):
+        return self.__l, self.__h
+
+    def set_dim(self, l, h):
+        self.__l = l
+        self.__h = h
+
+    def contient_point(self, x, y):
+        return self.x <= x <= self.x + self.__l and \
+               self.y <= y <= self.y + self.__h
+
+    def redimension_par_points(self, x0, y0, x1, y1):
+        self.x = min(x0, x1)
+        self.y = min(y0, y1)
+        self.__l = abs(x0 - x1)
+        self.__h = abs(y0 - y1)
+
+class Ellipse(Forme):
+    def __init__(self, canevas, x, y, rx, ry, couleur):
+        Forme.__init__(self, canevas, x, y)
+        self._item = canevas.create_oval(x-rx, y-ry, x+rx, y+ry, fill=couleur)
+        self.__rx = rx
+        self.__ry = ry
+
+    def __str__(self):
+        return f"Ellipse de centre {self.x},{self.y} et de rayons {self.__rx}x{self.__ry}"
+
+    def get_dim(self):
+        return self.__rx, self.__ry
+
+    def set_dim(self, rx, ry):
+        self.__rx = rx
+        self.__ry = ry
+
+    def contient_point(self, x, y):
+        return ((x - self.x) / self.__rx) ** 2 + ((y - self.y) / self.__ry) ** 2 <= 1
+
+    def redimension_par_points(self, x0, y0, x1, y1):
+        self.x = (x0 + x1) // 2
+        self.y = (y0 + y1) // 2
+        self.__rx = abs(x0 - x1) / 2
+        self.__ry = abs(y0 - y1) / 2

seance5_6h/mots.txt

+ABIME
+ABSENT
+ACCIDENT
+ACCROCHER
+ACROBATE
+ADROIT
+AEROPORT
+AFFAIRE
+AFFICHE
+AGITER
+AIDER
+AIGUILLE
+ALBUM
+ALLER
+ALPHABET
+AMENER
+AMI
+AMPOULE
+AMUSANT
+AMUSER
+ANCIEN
+ANGLE
+ANORAK
+APPAREIL
+APPEL
+APPORTER
+APPUYER
+APPUYER
+APRES
+ARC
+ARMOIRE
+ARRACHER
+ARRET
+ARRETER
+ARRIERE
+ARRIVER
+ARROSER
+ARROSOIR
+ASSIETTE
+ASSIS
+ATTACHER
+ATTENDRE
+ATTENTION
+ATTERRIR
+ATTRAPER
+AUTANT
+AUTOUR
+AVANCER
+AVANT
+AVION
+BAGAGE
+BAGARRE
+BAGARRER
+BAGUETTE
+BAIGNER
+BAILLER
+BAISSER
+BALANCER
+BALANCOIRE
+BALLE
+BALLON
+BANC
+BANDE
+BARBE
+BARBOTER
+BARRE
+BARREAU
+BAS
+BATEAU
+BATTRE
+BEAUCOUP
+BIBLIOTHEQUE
+BICYCLETTE
+BIEN
+BILLE
+BLANC
+BLEU
+BLOND
+BOIS
+BOITE
+BOITE
+BONDIR
+BONNET
+BORD
+BOTTE
+BOUCHER
+BOUCHON
+BOUDER
+BOUGER
+BOUSCULER
+BOUT
+BOUTEILLE
+BOUTON
+BRAS
+BRETELLE
+BRICOLAGE
+BRUIT
+BRUN
+BULLES
+BUREAU
+CABANE
+CABINET
+CACHER
+CAGE
+CAGOULE
+CAHIER
+CAISSE
+CALME
+CAMARADE
+CAMESCOPE
+CAMION
+CANARD
+CARNET
+CARRE
+CARREAU
+CARTABLE
+CARTE
+CARTON
+CARTON
+CASIER
+CASQUE
+CASQUETTE
+CASSE
+CASSER
+CASSEROLE
+CASSETTE
+CATALOGUE
+CEINTURE
+CERCEAU
+CERF
+CHAINE
+CHAISE
+CHAISE
+CHANGER
+CHANSON
+CHANTER
+CHAPEAU
+CHARGER
+CHATEAU
+CHAUD
+CHAUSSER
+CHAUSSETTE
+CHAUSSON
+CHAUSSURE
+CHEMISE
+CHERCHER
+CHEVILLE
+CHIFFRE
+CHOISIR
+CHOSE
+CHUCHOTER
+CHUTE
+CIGARETTE
+CINQ
+CISEAUX
+CLAIR
+CLASSE
+CLEF
+CLOU
+COEUR
+COGNER
+COIN
+COL
+COLERE
+COLLANT
+COLLE
+COLLE
+COLLER
+COLORIAGE
+COLORIER
+COMMENCER
+COMPARER
+COMPTER
+CONDUIRE
+CONSTRUIRE
+CONTE
+CONTINUER
+CONTRAIRE
+CONTRE
+COPAIN
+COPIER
+COQUIN
+CORDE
+CORPS
+COTE
+COU
+COUCHER
+COUDE
+COUDRE
+COULER
+COULEUR
+COULOIR
+COUP
+COUPER
+COUR
+COURIR
+COURONNE
+COURSE
+COURT
+COUVRIR
+CRACHER
+CRAIE
+CRAVATE
+CRAYON
+CREUSER
+CRIER
+CROCHET
+CROCODILE
+CUBE
+CUILLERE
+CUISSE
+CULOTTE
+CURIEUX
+CUVETTE
+DAME
+DANGER
+DANGEUREUX
+DANS
+DANSER
+DE
+DEBORDER
+DEBOUT
+DEBOUT
+DECHIRER
+DECOLLER
+DECORER
+DECOUPAGE
+DECOUPER
+DEDANS
+DEFENDRE
+DEGONFLER
+DEGUISER
+DEHORS
+DEMARRER
+DEMOLIR
+DEPASSER
+DERNIER
+DERRIERE
+DESCENDRE
+DESHABILLER
+DESOBEIR
+DESSIN
+DESSINER
+DESSUS
+DETRUIRE
+DEUX
+DEUXIEME
+DEVANT
+DICTIONNAIRE
+DIFFERENCE
+DIFFERENT
+DIFFICILE
+DIRE
+DIRECTEUR
+DIRECTRICE
+DISCUTER
+DISPARAITRE
+DISPUTE
+DISTRIBUER
+DIX
+DOIGT
+DOIGTS
+DOMINO
+DONNER
+DORMIR
+DOS
+DOSSIER
+DOUCHE
+DOUCHER
+DOUX
+DROIT
+DROITE
+DU
+DUR
+EAU
+EAU
+ECARTER
+ECHANGER
+ECHARPE
+ECHASSE
+ECHASSES
+ECHELLE
+ECLABOUSSER
+ECLAIRER
+ECOLE
+ECORCHER
+ECOUTER
+ECRAN
+ECRASER
+ECRIRE
+ECRITURE
+ECUREUIL
+EFFACER
+EFFORT
+ELASTIQUE
+ELEVE
+EMMENER
+EMPECHER
+EMPORTER
+ENCORE
+ENERVER
+ENFANT
+ENFILER
+ENFONCER
+ENGIN
+ENLEVER
+ENSEMBLE
+ENTENDRE
+ENTONNOIR
+ENTOURER
+ENTRER
+ENTRER
+ENVELOPPE
+ENVOLER
+ENVOYER
+ENVOYER
+EPAIS
+EPAULE
+EPEE
+EQUILIBRE
+EQUIPE
+ESCABEAU
+ESCALADE
+ESCALADER
+ESCALIER
+ESSUYER
+ETAGERE
+ETIQUETTE
+ETROIT
+EXPLIQUER
+EXPLIQUER
+EXTERIEUR
+FABRIQUER
+FACE
+FACILE
+FAIRE
+FATIGUE
+FAUTE
+FEE
+FENETRE
+FERMER
+FESSE
+FEU
+FEUILLE
+FEUTRE
+FICELLE
+FIL
+FILE
+FILET
+FILLE
+FILM
+FINIR
+FLAQUE
+FLECHE
+FLOTTER
+FOI
+FOIS
+FONCE
+FOND
+FORME
+FORT
+FOU
+FOUILLER
+FRAPPER
+FREIN
+FROID
+FUSEE
+FUSIL
+GAGNER
+GALOPER
+GANT
+GARAGE
+GARCON
+GARDER
+GARDIEN
+GARE
+GARER
+GAUCHE
+GENER
+GENOU
+GENTIL
+GLISSER
+GOMME
+GONFLER
+GOUTER
+GOUTTES
+GRAND
+GRIMPER
+GRIS
+GRONDER
+GROS
+GROUPE
+GRUE
+GYMNASTIQUE
+HABILLER
+HABIT
+HANCHE
+HANDICAPE
+HAUT
+HELICOPTERE
+HISTOIRE
+HUIT
+HUMIDE
+HURLER
+ICI
+IDEE
+IMAGE
+IMITER
+IMMOBILE
+INONDER
+INSEPARABLE
+INSTALLER
+INSTRUMENT
+INTERESSANT
+INTERIEUR
+INTRUS
+JALOUX
+JAMAIS
+JAMBE
+JAUNE
+JEAN
+JEU
+JEU
+JOLI
+JONGLER
+JOUER
+JOUET
+JOUEUR
+JUPE
+LACER
+LACET
+LAINE
+LAISSER
+LANCER
+LARGE
+LAVABO
+LAVER
+LETTRE
+LEVER
+LIGNE
+LINGE
+LIRE
+LISSE
+LISTE
+LIT
+LITRE
+LIVRE
+LOIN
+LONG
+LUNETTES
+MADAME
+MAGAZINE
+MAGICIEN
+MAGIE
+MAGNETOSCOPE
+MAILLOT
+MAIN
+MAINS
+MAITRE
+MAITRESSE
+MAL
+MALADROIT
+MANCHE
+MANQUER
+MANTEAU
+MARCHE
+MARCHER
+MARIONNETTE
+MARTEAU
+MATELAS
+MATERNELLE
+MECHANT
+MELANGER
+MEME
+MENSONGE
+MESURER
+METAL
+METRE
+METTRE
+MEUBLE
+MICRO
+MIEUX
+MILIEU
+MINE
+MODELE
+MODELER
+MOINS
+MOITIE
+MONTAGNE
+MONTER
+MONTRER
+MONTRER
+MORCEAU
+MOT
+MOTEUR
+MOTO
+MOUCHOIR
+MOUFLE
+MOUILLE
+MOUILLER
+MOULIN
+MOUSSE
+MOYEN
+MUET
+MULTICOLORE
+MUR
+MUR
+MUSCLE
+MUSIQUE
+NAGER
+NEUF
+NOEUD
+NOIR
+NOM
+NOMBRE
+NOUVEAU
+NU
+NUMERO
+OBEIR
+OBJET
+OBLIGER
+ONGLE
+ORCHESTRE
+ORDINATEUR
+ORDRE
+OUTIL
+OUVRIR
+OUVRIR
+PAGE
+PAIRE
+PAIX
+PANNE
+PANTALON
+PAPIER
+PARCOURS
+PARDON
+PAREIL
+PARKING
+PARLER
+PARTAGER
+PARTIE
+PARTIR
+PARTIR
+PAS
+PASSERELLE
+PATE
+PATTES
+PEDALE
+PEDALER
+PEINDRE
+PEINTURE
+PEINTURE
+PELLE
+PELUCHE
+PENCHER
+PENTE
+PERCER
+PERCHER
+PERDRE
+PERLE
+PERSONNE
+PETIT
+PEU
+PEUR
+PHOTO
+PIED
+PIED
+PILOTE
+PINCEAU
+PINCEAU
+PINCER
+PION
+PIROUETTE
+PLACARD
+PLAFOND
+PLAINDRE
+PLANCHE
+PLASTIQUE
+PLATRE
+PLEURER
+PLEUVOIR
+PLI
+PLIAGE
+PLIER
+PLONGEOIR
+PLONGER
+PLUIE
+PLUS
+PNEU
+POCHE
+POIGNET
+POING
+POINT
+POINTU
+POISSON
+POLI
+POMPE
+PONT
+PONT
+PORTE
+PORTER
+POSER
+POSER
+POSTER
+POT
+POUBELLE
+POUCE
+POURSUIVRE
+POUSSER
+POUTRE
+POUVOIR
+PREAU
+PREMIER
+PRENDRE
+PRENOM
+PREPARER
+PRES
+PRESENT
+PRESQUE
+PRESSER
+PRESSER
+PRETER
+PRINCE
+PRISE
+PRIVER
+PROGRES
+PROGRESSER
+PROMETTRE
+PROPRE
+PROTEGER
+PUNIR
+PUZZLE
+PYJAMA
+QUAI
+QUATRE
+QUESTION
+QUITTER
+RACONTER
+RADIATEUR
+RADIO
+RAMPE
+RAMPER
+RANG
+RANGER
+RAQUETTE
+RATER
+RAYON
+RAYURE
+RECEVOIR
+RECHAUFFER
+RECITER
+RECOMMENCER
+RECREATION
+RECULER
+REFUSER
+REGARDER
+REINE
+REMETTRE
+REMPLACER
+REMPLIR
+RENVERSER
+REPARER
+REPETER
+REPONDRE
+RESPIRER
+RESSEMBLER
+RESTER
+RETARD
+RETOURNER
+REUSSIR
+REVENIR
+RIDEAU
+RIVIERE
+ROBE
+ROBINET
+ROI
+ROND
+ROND
+ROUE
+ROUGE
+ROULADE
+ROULER
+ROUX
+RUBAN
+SABLE
+SAC
+SAGE
+SAIGNER
+SALADIER
+SALE
+SALIR
+SALLE
+SALON
+SAUT
+SAUTER
+SCIE
+SEAU
+SEC
+SECHER
+SEMELLE
+SENS
+SENTIR
+SEPARER
+SEPT
+SERIEUX
+SERPENT
+SERRE
+SERRER
+SERRURE
+SERVIETTE
+SERVIR
+SEUL
+SIEGE
+SIESTE
+SIFFLER
+SIFFLET
+SIGNE
+SIGNE
+SILENCE
+SINGE
+SIX
+SOCIERE
+SOL
+SOLDAT
+SOLIDE
+SOMMEIL
+SONNER
+SONNETTE
+SORTIE
+SORTIR
+SOUFFLER
+SOULEVER
+SOULIGNER
+SOUPLE
+SOURD
+SOURIRE
+SOUS
+SOUVENT
+SPORT
+STYLO
+SUIVANT
+SUIVRE
+SUR
+SURVEILLER
+TABLE
+TABLEAU
+TABLIER
+TABOURET
+TACHE
+TAILLE
+TAILLER
+TALON
+TAMBOUR
+TAMPON
+TAPER
+TAPIS
+TARD
+TAS
+TASSE
+TELECOMMANDE
+TELEPHONE
+TELEVISION
+TENDRE
+TENIR
+TERMINER
+TETE
+TIRER
+TIROIR
+TISSU
+TITRE
+TOBOGGAN
+TOILETTE
+TOMBER
+TORDU
+TOT
+TOUCHER
+TOUJOURS
+TOUR
+TOURNER
+TOURNEVIS
+TRAIN
+TRAINER
+TRAIT
+TRAMPOLINE
+TRANQUILLE
+TRANSPARENT
+TRANSPIRER
+TRANSPORTER
+TRAVAIL
+TRAVAILLER
+TRAVERSER
+TREMPER
+TRICOT
+TRICYCLE
+TRIER
+TROIS
+TROISIEME
+TROMPETTE
+TROP
+TROUER
+TROUS
+TROUSSE
+TROUVER
+TROUVER
+TUNNEL
+TUYAU
+UN
+UNIFORME
+USE
+VALISE
+VELO
+VENIR
+VENTRE
+VERRE
+VERS
+VERSER
+VERT
+VESTE
+VETEMENT
+VIDER
+VIRAGE
+VIS
+VITE
+VITESSE
+VITRE
+VOITURE
+VOIX
+VOLANT
+VOLER
+VOULOIR
+VOYAGE
+WAGON
+XYLOPHONE
+ZERO
+ZIGZAG

seance5_6h/seance5_6h.md

+**Sommaire**
+
+[[_TOC_]]
+
+# BE #5 : Le jeu du Pendu
+
+L'objectif de ce BE est de réaliser le `jeu du Pendu`. Pour rappel, ce jeu consiste à essayer de découvrir un mot qui est affiché de manière masquée (chacune de ses lettres est remplacée par le caractère _'*'_). Pour cela, le joueur sélectionne une lettre sur le clavier virtuel. Si elle fait partie du mot, alors le mot à découvrir est ré-affiché en laissant apparaître cette lettre en clair. Si par contre le mot ne contient pas la lettre sélectionnée, alors le compteur de coups ratés augmente d'un et l'élément suivant du pendu est ajouté au dessin. Le joueur gagne s'il a pu découvrir le mot avant que le pendu ne soit complètement affiché (au delà de 10 coups manqués). La figure ci-dessous présente l'interface que nous allons construire ; oui, les couleurs piquent un peu aux yeux, mais ça vous aidera à répondre à la première question !
+
+<center><img src="figures/pendu0.png" style="width:60%"/></center>
+
+Nous allons vous accompagner dans le développement de ce programme. La première partie (90 minutes) porte sur la mise en place de l'interface graphique. La seconde (75 minutes) porte sur la logique du jeu, à partir des commandes associées au bouton _Nouvelle Partie_ et aux Boutons-lettres. La troisième partie met en place le dessin du pendu (75 minutes). La dernière partie propose de développer des fonctionnalités supplémentaires à notre application durant l'autonomie (avec une question _Bonus_ pour les plus téméraires !).
+
+Ce BE fera l'objet d'un compte-rendu (CR), seul ou en binôme. L'énoncé correspond à 4h de TD encadrées et 2h d'autonomie. Avant de commencer, veuillez prendre connaissance des consignes concernant le rendu du travail (à respecter scrupuleusement) qui se trouvent dans le fichier [consignes_BE#5.md](./consignes_BE#5.md), dans le même répertoire que cet énoncé.
+
+---    
+## Partie 1 - Mise en place de l'interface statique (90 min.)
+
+__Exercice 1 -__ Dessinez l'arbre de scène correspondant à la capture d'écran ci-dessus.    
+
+__Exercice 2 -__ En vous inspirant de l'organisation des classes du BE #4, programmez l'interface statique (_i.e._ sans programmer les commandes associées aux boutons) en distinguant la classe __FenPrincipale__ et la classe __ZoneAffichage__. À ce stade, à la place des 26 boutons du clavier (correspondant aux 26 lettres en majuscule), placez un simple bouton _"A"_  car le dessin du clavier est traité dans l'exercice suivant.
+
+Testez votre interface et faites les ajustements nécessaires pour obtenir une apparence proche de celle donnée en exemple (mais sans le clavier, et avec les couleurs qui vous conviennent !). Le programme principal se réduira à ces quelques lignes :
+```python
+if __name__ == '__main__':
+	fen = FenPrincipale()
+	fen.mainloop()
+```
+
+_Remarque_ : Vous pouvez à ce stade ajouter la commande _self.destroy_ sur le bouton _Quitter_.
+
+
+__Exercice 3 -__ Nous allons maintenant dessiner le clavier tel qu'il apparaîtra dans la version finale.
+
+  1. __Liste des boutons__ Les 26 boutons seront créés et stockés dans une liste de boutons. Pour transformer les nombres de 0 à 25 en lettres  _A_, ..., _Z_, vous pourrez utiliser l'instruction suivante ```t = chr(ord('A')+i)``` qui transforme l'entier _i=0_ en une chaîne d'un seul caractère _t="A"_, l'entier _i=1_ en une chaîne d'un seul caractère _t="B"_, ...    
+  1. __Placement des boutons__ La disposition des boutons en grille sera réalisée grâce à la commande _grid_, selon l'exemple suivant : ```unBouton.grid(row=1, column=2)``` positionne _unBouton_ sur la première ligne, seconde colonne de la grille (dont la taille s'adapte automatiquement).
+
+Pensez à exécuter votre programme pour vérifier le placement du clavier virtuel.
+
+
+---    
+## Partie 2 - Logique de jeu, commandes (75 min.)
+
+ Cette partie est destinée à implémenter la logique de jeu, à travers les commandes de l'interface :
+
+  - _Bouton "Quitter"_ (vous l'avez peut être déjà fait, _cf_ remarque ci-dessus).
+  - _Bouton "Nouvelle partie"_.
+  - _Boutons-lettres "A", ..., "Z"_.
+
+On fait ici abstraction de la représentation graphique du pendu qui sera traitée dans la partie suivante. Allons-y pas-à-pas...
+
+### Bouton "Nouvelle Partie" (30 min.)
+
+Une partie ne pourra commencer que si le joueur appuie sur le bouton "Nouvelle partie".
+
+__Exercice 4 -__ L'appuie sur ce bouton doit provoquer une ré-initialisation de toute l'interface : 
+
+  - Tirer un nouveau mot au hasard dans le fichier [mots.txt](./mots.txt) (à votre disposition à côté de cet énoncé) et réinitialiser le mot à découvrir;   
+  - Dégriser les boutons-lettres (par la commande suivante ```unBouton.config(state=NORMAL)```);    
+  - Effacer le dessin du pendu (question traitée dans la partie suivante de cet énoncé).
+
+_Quelques conseils pour l'implémentation_
+
+  - Au lancement de l'application, pensez à griser toutes les lettres du clavier (l'utilisateur comprend alors qu'il doit appuyer sur le bouton "Nouvelle partie"). 
+  - Utilisez la méthode suivante pour charger les mots du fichier _mots.txt_ dans une liste privée appelée _self.\_\_mots_. Cette liste sera chargée une fois pour toute au lancement de l'application, et utilisée à chaque nouvelle partie.   
+```python
+def chargeMots(self):
+	f = open('mots.txt', 'r')
+	s = f.read()
+	self.__mots = s.split('\n')
+	f.close()
+```   
+  - Pour tirer un nouveau mot au hasard, utilisez la fonction _randint(...)_ (```from random import randint```).
+
+Pensez à vérifier que votre application est bien fonctionnelle à ce stade.
+
+
+### Boutons-lettres "A", ..., "Z" (45 min.)
+
+Le fait d'appuyer sur une lettre du clavier virtuel doit provoquer un certain nombre d'actions :
+ 
+   - griser le bouton-lettre qui vient d'être cliqué (```state=DISABLED```);    
+   - faire apparaître autant de fois que nécessaire la lettre cliquée dans le mot à découvrir;  
+   - vérifier si la partie est perdue, gagnée, ou si elle se poursuit;      
+   - éventuellement, compléter le dessin du pendu si la lettre n'est pas présente dans le mot (action traitée dans la partie suivante de cet énoncé).
+
+Chaque bouton doit pouvoir être identifié par la fonction de _callback_ appelée ici _cliquer_. Or il n'est pas possible de passer le numéro du bouton-lettre au _callback_ (aucun argument n'est permis). Nous allons procéder en créant notre propre classe de boutons, héritant de la classe __Button__.
+
+__Exercice 5 -__ Suivez les étapes proposées
+
+  1. Créer la classe __MonBoutonLettre__, qui hérite de la classe __Button__, et qui sauvegarde, en tant qu'attribut privé, la lettre correspondant au bouton (ou le numéro du bouton).  Modifier en conséquence le constructeur de la classe __FenPrincipale__ pour que le clavier virtuel soit composé de 26 instances de la classe __MonBoutonLettre__. 
+  1. Créer la fonction de callback _cliquer(self)_ dans la classe __MonBoutonLettre__, qui fera notamment appel à une méthode _traitement(...)_ de la classe __FenPrincipale__.    
+  1. Programmer cette méthode _traitement(...)_ dont l'objectif est de mettre à jour l'affichage du mot.    
+    - Si la partie est gagnée, bloquez l'utilisation du clavier, et affichez un texte qui indique au joueur que c'est gagné !  
+    - La partie est perdue quand le nombre de coups dépasse 10 (c'est le nombre d'éléments nécessaires pour dessiner entièrement le pendu). Bloquez alors l'utilisation du clavier, et affichez un texte qui indique au joueur que c'est perdu !  
+
+À ce stade, l'application doit être entièrement fonctionnelle, seul le dessin du pendu est manquant, ce que nous allons compléter dès à présent...
+
+
+---  
+## Partie 3 - Le dessin du pendu (75 min.)
+
+Cette partie est consacrée au dessin progressif du pendu, au fur et à mesure des échecs du joueur. Ce dessin s'appuie sur les connaissances acquises lors du BE #4 et les classes du fichier [formes.py](./formes.py), disponible à côté de cet énoncé pour ceux qui le souhaitent. L'idée est de créer le pendu comme une liste de rectangles et d'ellipses (10 pièces doivent suffire).
+
+Le parti pris ici est de créer et de dessiner les 10 pièces du pendu dans le constructeur de la classe __ZoneAffichage__, mais en leur affectant la propriété `state="hidden"`, de telle sorte qu'elles ne soient pas visibles. Ce n'est qu'au fur et à mesure de l'avancement d'une partie que les pièces apparaissent sur le canevas, en passant du statut `"hidden"` au statut `"normal"`. La réinitialisation liée à une nouvelle partie consistera alors à cacher l'ensemble des pièces. 
+
+*Remarque* : Notez qu'il aurait aussi été possible d'adopter un autre point de vue qui consisterait à créer et dessiner chaque pièce lors de chaque partie.
+
+__Préliminaires sur le fichier [formes.py](./formes.py)__ 
+
+  - Modifier le fichier [formes.py](./formes.py) de telle manière que les rectangles et les ellipses soient cachés lors de leur création.    
+  - Il est nécessaire de prévoir une méthode _setState(s)_ qui permette de changer ce statut. La méthode étant identique pour les rectangles et pour les ellipses, il convient de la factoriser dans la classe __Forme__ :
+```python
+def setState(self, s):
+    self.__canevas.itemconfig(self._item, state=s)
+```
+
+__Exercice 6 -__ Mettez en place la stratégie décrite ci-dessus pour terminer l'application.
+
+Pour gagner un peu de temps, voici un exemple de jeu de pièces (avec leur position et leurs dimensions) qui permettent de dessiner le pendu de la première figure.
+
+```python
+# Base, Poteau, Traverse, Corde
+Rectangle(self, 50,  270, 200,  26, "brown")
+Rectangle(self, 87,   83,  26, 200, "brown")
+Rectangle(self, 87,   70, 150,  26, "brown")
+Rectangle(self, 183,  67,  10,  40, "brown")
+# Tete, Tronc
+Rectangle(self, 188, 120,  20,  20, "black")
+Rectangle(self, 175, 143,  26,  60, "black")
+# Bras gauche et droit
+Rectangle(self, 133, 150,  40,  10, "black")
+Rectangle(self, 203, 150,  40,  10, "black")
+# Jambes gauche et droite
+Rectangle(self, 175, 205,  10,  40, "black")
+Rectangle(self, 191, 205,  10,  40, "black")
+```
+Rien ne vous empêche de customiser votre pendu !
+
+
+---
+## Partie 4 - Améliorations du jeu (autonomie)
+
+Voici quelques améliorations pour le jeu, à rendre compte dans votre CR. Seule la dernière amélioration est considérée comme un bonus.
+
+__Exercice 7 - Apparence__ Développez le code qui permet au joueur de choisir les couleurs principales de l'application (par un  menus, par des boutons...).
+
+__Exercice 8 - Triche !__ Implémentez une technique "_Undo_" qui permet de revenir de un ou plusieurs coups en arrière, au cours d'une partie.
+
+__Bonus - Score joueur__ Implémentez un système de sauvegarde des échecs et des succès d'un joueur (identifié par un pseudo demandé au joueur en début de partie). Techniquement, on pourra créer une base de données _SQL_ (_cf_ BE #3), appelée _pendu.db_, qui stockera une table avec les joueurs et une table avec les parties jouées par ces joueurs, selon le schéma suivant :
+
+<center><img src="figures/TableSQLJeuPendu.png" style="width:30%"/></center>
+
+Le score pour chaque mot pourra être défini comme le taux de caractères trouvés (ainsi un score de 1.0 désigne un succès).
+
+Dans un premier temps, pour vérifier que votre programme fonctionne, vous pouvez consulter la base _pendu.db_ à l'aide de ```DB Browser for SQLite```. Si vous le souhaitez, vous pouvez alors intégrer à votre application un affichage de l'historique des parties du joueur et/ou de ses performances.