Atelier_clics.md

@@ -3,7 +3,7 @@
 **Autres notions manipulées au passage** :
 
 * Python : **comprehension list** : création d'une nouvelle liste par une syntaxe plus performante qu'une boucle for classique (exemple de syntaxe : \[x\*x for x in liste_x\] va créer une liste des carrés des éléments de liste_x) ; **zip** pour parcourir deux ou plusieurs conteneurs (liste, array...) simultanément, càd en prenant à l'itération i l'élément i de chaque conteneur, comme une fermeture éclair parcourt les dents situées de part et d'autre de la fermeture.
-* spécifique mpl : modifier certaines caractéristiques d'une courbe existante avec **set_data()** ou **set_xdata() et set_ydata()** ; optionnel : le widget **"Textbox"**.
+* spécifique mpl : modifier certaines caractéristiques d'une courbe existante avec **set_data()** ou **set_xdata() et set_ydata()** ; optionnel : annoter une figure avec **annotate** et le widget **"Textbox"**.
 
 **Application** : sélectionner sur une courbe le point le plus proche d'un clic de souris
 
@@ -52,7 +52,7 @@ Prenons un code \[proposé pour expliquer le principe\]([https://stackoverflow.c
 
 Pour manipuler, on va changer la fonction onclick, elle va maintenant ajouter (event.xdata, event.ydata) à la liste des points de la courbe, initialement dix points alignés.
 
-Pour cela, il faut donner un nom à la courbe, ici donnees, et on récupère les valeurs en x avec donnees. get_xdata( ). Comme c'est un numpy.array, il faut utiliser numpy.append pour concaténer le vecteur existant avec le nouveau point., et on le passe comme nouveau vecteur avec donnees.set_xdata(). On rafraîchit la courbe avec draw_idle.
+Pour cela, il faut donner un nom à la courbe, ici donnees, et on récupère les valeurs en x avec donnees. get_xdata( ). Comme c'est un numpy.array, il faut utiliser numpy.append pour concaténer le vecteur existant avec le nouveau point, et on le passe comme nouveau vecteur avec donnees.set_xdata(). On rafraîchit la courbe avec draw_idle.
 
 ```python
 import matplotlib.pyplot as plt
@@ -73,7 +73,7 @@ plt.show()
 
 ### le "clic" sélectionne le point le plus proche
 
-Cette fois, on va calculer la distance du point à chacun des points de la courbe, et on va retenir l'indice de la distance minimale, qui nous servira à aller chercher les bonnes coordonnées dans x et y. Attention, il s'agit ici de la distance "en unités de la courbe", on verra dans l'exemple du picker qu'il vaut mieux travailler en distances "écran", en pixels, pour que le point sélectionné corresponde à l'impression visuelle. Il restera à déplacer la courbe "sélection",réduite à un point, aux coordonnées de ce point.
+Cette fois, on va calculer la distance du point à chacun des points de la courbe, et on va retenir l'indice de la distance minimale, qui nous servira à aller chercher les bonnes coordonnées dans x et y. Attention, il s'agit ici de la distance "en unités de la courbe", on verra dans l'exemple du picker qu'il vaut mieux travailler en distances "écran", en pixels, pour que le point sélectionné corresponde à l'impression visuelle. Il restera à déplacer la courbe "selection",réduite à un point matérialisé par une grande étoile rouge, aux coordonnées de ce point.
 
 ```python
 def onclick_proche(event):
@@ -96,9 +96,16 @@ selection, = ax.plot([0],[0], marker='*', c='red', markersize=20)
                  
 fig.canvas.mpl_connect('button_press_event', onclick_proche)
 plt.show()
+
+### Le tableau ci-dessous montre le résultat de l'identification du point le plus proche à partir des coordonnées de la souris ou de Picker, pour ce deuxième cas  en montrant la différence de calculs distance "unités courbes" et distances "écran"
 ```
+|  code ci-dessus, basé sur mouseclick | code avec 2 calculs de distance et annotations, utilisant Picker (voir ci-dessous)|
+|-----------------|------------------------------|
+| ![Figure initiale, 10points alignés](uploads/467300d845b9a2e75b1b8ecca19328d8/selection_point_mouseclick.png) | ![selection_picker2](uploads/36f24ebb707baac8a9af0c29c562d76c/selection_picker2.png) |
+|<i> une étoile rouge matérialise le point identifié comme le plus proche du clic de souris </i>|résultats en distance "unités courbes" et distances "écran"|
+
+
 
-![](uploads/d108c419b577d18f8c8296a4c6c7f6a7/Figure_selection_point_proche.png) _Figure avec sélection du point le plus proche\]_
 
 ## Avec un "PickEvent" :
 
@@ -150,7 +157,7 @@ largeur_en_pixels, hauteur_en_pixels = bbox.width* fig.dpi , bbox.height * fig.d
 
 Dans ce code, on commence par tracer une courbe, en la nommant, et des objets supplémentaire comme des courbes réduites à un point et des annotations, toujours en les nommant, mais sans les afficher dans un premier temps grâce à set_visible(False). On rappelle que dans une fonction, on ne pourrait pas redéfinir ces objets (courbe = plt.plot(nouveaux_x, nouveaux_y)) mais par contre on peut parfaitement appliquer des méthodes sur des objets définis dans le programme principal, ou en changer des attributs : courbe = set_data(nouveaux_x, nouveaux_y). Ainsi, dans la fonction on_pick_cp on va pouvoir modifier certains arguments de ces objets. On peut donc déplacer la croix bleue vers les coordonnées de la souris, et déplacer également les annotations en mettant à jour leur texte, et bien sûr changer leur statut avec set_visible(True). On pourrait également modifier le titre de la figure, avec ax.set_text()
 
-![selection_picker2](uploads/36f24ebb707baac8a9af0c29c562d76c/selection_picker2.png)
+
 
 ## Exemple 2: comprendre l'argument pickradius
 
@@ -216,5 +223,3 @@ def submit_radius(val):
 nuage, = ax.plot(x, y, '*', c='blue', label="nuage", picker=init_radius, ls='None')
 textbox_radius.on_submit(submit_radius)   
 ```
-
-![selection_point_mouseclick](uploads/467300d845b9a2e75b1b8ecca19328d8/selection_point_mouseclick.png)
\ No newline at end of file