Alignement automatique sur une grille ?

Version imprimable

Bonjour à tous,

J’essaie de développer un programme qui dessinerait les boucles d'un chauffage sol automatiquement avec Turtle suivant les coordonnées renvoyée par le programme.

Voici le début du code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 from tkinter import * # Fenêtre root = Tk() Largeur = 800 Hauteur = 600 canvas = Canvas(root, width=Largeur, height=Hauteur, background="white") canvas.pack(side=LEFT, padx=5, pady=5) #Capture des clics de la souris def action_clic_souris(event): canvas.focus_set() x = event.x y = event.y canvas.create_rectangle(x, y, x+10, y+10, fill="red") print("Clic à x =", x, "Clic à y =", y) return # Association clic/action canvas.bind("<Button-1>", action_clic_souris) #Lancement root.mainloop()
Si vous le testez, il affiche un carré rouge de 10 x 10 sur l'écran et renvoi dans la console les coordonnées.
J'aimerai afficher une grille derrière de 10x10 où mon carré s'alignement avec celle ci.

Avez vous une idée ?

Je vous remercie.

Max

24/04/2020, 21h12
wiztricks

Salut,

Citation:

Envoyé par maxstilde

J'aimerai afficher une grille derrière de 10x10 où mon carré s'alignement avec celle ci.

La grille peut se faire avec .create_line.
Après, c'est une boucle (ou deux) a écrire pour tracer une ligne verticale tous les pas de ... et une ligne horizontale tous les pas de...

- W
24/04/2020, 21h38
maxstilde

Bonjour,

La grille y a pas de soucis , je l ai faite. Le soucis est que le carré ne s aligne pas dans les carrés de la grille...

C est à cette étape que je bloque complètement
24/04/2020, 22h15
wiztricks

Citation:

Envoyé par maxstilde

La grille y a pas de soucis , je l ai faite. Le soucis est que le carré ne s aligne pas dans les carrés de la grille...

Ca serait mieux de le montrer.

Sûr que si vous affichez le carré à la position (x, y) où on a cliqué, peu probable que ce soit aligné sur quoi que ce soit.

Avec une grille de 10x10 carrés de 50 de côté, trouver (x_i, y_j) tels que x_i<= x <x_i+1 et y_j<= y < y_j+1, n'est pas si compliqué (et çà n'a rien à voir avec de la programmation Python).

- W
24/04/2020, 23h05
maxstilde

Comment ça ?

Je ne comprends pas , savez m informer sur le sujet ?
Pour que python me place mon carré dans un carré après avoir cliqué , je pensai que c était de la programmation

Salut,

Citation:

Envoyé par maxstilde

Si vous le testez, il affiche un carré rouge de 10 x 10 sur l'écran et renvoi dans la console les coordonnées.
J'aimerai afficher une grille derrière de 10x10 où mon carré s'alignement avec celle ci.

Avez vous une idée ?

J'ai une idée mais je ne suis pas sûr d'avoir bien compris ce que tu veux...

Voici mon idée :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 from tkinter import * # Fenêtre root = Tk() Largeur = 800 Hauteur = 600 canvas = Canvas(root, width=Largeur, height=Hauteur, background="white") canvas.pack(side=LEFT, padx=5, pady=5) # Capture des clics de la souris def action_clic_souris(event): canvas.focus_set() x = event.x y = event.y # canvas.create_rectangle(x, y, x+10, y+10, fill="red") print("Clic à x =", x, "Clic à y =", y) i = x//80 * 80 + 40 j = y//60 * 60 + 30 print("Clic à i =", i, "Clic à j =", j) canvas.create_rectangle(i, j, i+10, j+10, fill="green") return # Association clic/action canvas.bind("<Button-1>", action_clic_souris) # Lancement root.mainloop()
Avec ces dimensions les cases de la grille* sont plus grandes que les carrés (j'ai choisi de placer les carrés verts au centre des cases mais si tu veux autre chose à toi de changer...).

*Je n'ai pas affiché la grille puisque ça tu as dit que tu sais le faire...

25/04/2020, 07h57
maxstilde

Bonjour Beginner,

C'est tout à fait ça mais avec de plus petit carré.

Comment arrive tu a ce résultat ?

Je ne comprends pas le code que tu me propose.

Je te remercie pour ton aide

Salut,

Citation:

Envoyé par maxstilde

Pour que python me place mon carré dans un carré après avoir cliqué , je pensai que c était de la programmation

La programmation c'est partir d'un besoin: afficher une grille de 10x10 carrés de 50 de côté où quand l'utilisateur un carré 10x10 s'affiche "aligné" sur la grille.

Et le reformuler pour arriver à le "programmer" avec (pourquoi pas) le Canvas tkinter).
"reformuler", c'est déjà se poser des questions, ok, l'utilisateur veut voir une grille.

Est que que je la construis avec des lignes du Canvas et je fabrique un carré que j'aligne ou est que c'est 10x10 carrés qui changent de couleur lorsqu'on clique dessus.
La moins mauvaise solution dépendra de ce qu'on veut en faire (le programme ne se réduit pas à çà).

Puis si on ne sait pas faire, on réalise une petite maquette pour voir ce que çà donne.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 from tkinter import Canvas, mainloop canvas = Canvas(width=550, height=550) canvas.pack() for x in range(25, 525, 50): for y in range(25, 525, 50): canvas.create_rectangle(x, y, x+50, y+50, width=2, outline='grey', fill='white', tag='square') def on_click(e): iid = canvas.find_withtag('current')[-1] canvas.itemconfigure(iid, fill='grey') canvas.tag_bind('square', '<1>', on_click) mainloop()
Avec une grille de carrés, pas besoin d'aligner...

Citation:

Envoyé par maxstilde

Comment arrive tu a ce résultat ?
Je ne comprends pas le code que tu me propose.

Vous voyez que ce n'est pas qu'un problème de programmation puisque si vous ne comprenez pas une des solutions, pas facile de la réutiliser.

- W

25/04/2020, 08h29
Beginner.

Salut,

Citation:

Envoyé par maxstilde

C'est tout à fait ça mais avec de plus petit carré.

Je n'ai pas compris, les carrés qui s'affichent sont trop petits ?
Les carrés verts font 10 x 10 ce n'est pas ce que tu veux ?

Ou bien tu veux que les cases/cellules de la grille soient aussi grandes que les carrés ?

Citation:

Envoyé par Beginner.

Ou bien tu veux que les cases/cellules de la grille soient aussi grandes que les carrés ?

Au cas où ce serait ça que tu veux voilà :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
from tkinter import *
 
# Fenêtre
root = Tk()
Largeur = 800
Hauteur = 600
canvas = Canvas(root, width=Largeur, height=Hauteur, background="white")
canvas.pack(side=LEFT, padx=5, pady=5)
 
# Capture des clics de la souris
 
 
def action_clic_souris(event):
    canvas.focus_set()
    x = event.x
    y = event.y
    # canvas.create_rectangle(x, y, x+10, y+10, fill="red")
    print("Clic à x =", x, "Clic à y =", y)
    i = x//80 * 80 
    j = y//60 * 60 
    print("Clic à i =", i, "Clic à j =", j)
    canvas.create_rectangle(i, j, i+80, j+60, fill="green")
    return
 
 
# Association clic/action
canvas.bind("<Button-1>", action_clic_souris)
 
# Lancement
root.mainloop()

Beginner,

Merci pour le code qui va me faire avancé ainsi que celui de de Wiz.

Voici mon code final avec une partie du programme de Beginner:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 from tkinter import * # Fenêtre root = Tk() Largeur = 800 Hauteur = 600 canvas = Canvas(root, width=Largeur, height=Hauteur, background="white") canvas.pack(side=LEFT, padx=5, pady=5) # Capture des clics de la souris def action_clic_souris(event): canvas.focus_set() x = event.x y = event.y i = x // 20 * 20 + 5 j = y // 20 * 20 + 5 print("Clic à x =", i, "Clic à y =", j) canvas.create_rectangle(i, j, i + 10, j + 10, fill="red") return # Ajout d'une grille 10x10 grid_size = 10 while True: line_1 = canvas.create_line(Largeur, grid_size, 0, grid_size, fill="grey") grid_size += 10 if grid_size == Hauteur: break grid_size = 10 while True: line_2 = canvas.create_line(grid_size, Hauteur, grid_size, 0, fill="grey") grid_size += 10 if grid_size == Largeur: break # Association clic/action canvas.bind("<Button-1>", action_clic_souris) # Lancement root.mainloop()
PS: Comment faite vous pour afficher le code python ??

Pour le code proposé par Wiz, en effet, je comprends pas grand chose. ( je débute ), je me suis juste donné un projet concret pour avoir un but et ne pas abandonné. Il faudrait que ça renvoit la valeur de x et de y. Le code que tu propose est très compacte, c'est super.

Le problème est que quand je modifie ma variable grid_size par exemple à 15, le programme n'affiche plus rien. Savez vous pourquoi ?

Merci pour ces échanges.

25/04/2020, 09h16
Beginner.
Citation:

Envoyé par maxstilde

PS: Comment faite vous pour afficher le code python ??

La balise [CODE=python]

Citation:

Envoyé par maxstilde

Le problème est que quand je modifie ma variable grid_size par exemple à 15, le programme n'affiche plus rien. Savez vous pourquoi ?

Oui c'est parce que dans ce cas ta condition : if grid_size == Hauteur: n'est jamais vraie donc la boucle while ne se termine jamais... Il y a beaucoup de choses à revoir mais déjà ce serait mieux de mettre une condition comme ça : if grid_size >= Hauteur:...

Mais tu peux mettre cette condition directement dans le while et plus besoin de break... Comme ça :
Code:

1 2 3 while grid_size <= Hauteur: line_1 = canvas.create_line(Largeur, grid_size, 0, grid_size, fill="grey") grid_size += 10
Et la hauteur/largeur ce serait mieux que ce soit un multiple du pas de la grille sinon certaines cases ne seront pas complètes...
25/04/2020, 09h38
wiztricks

Salut,

Citation:

Envoyé par maxstilde

Pour le code proposé par Wiz, en effet, je comprends pas grand chose. ( je débute ), je me suis juste donné un projet concret pour avoir un but et ne pas abandonné. Il faudrait que ça renvoit la valeur de x et de y. Le code que tu propose est très compacte, c'est super.

Pour faire ce genre de boucle, il est plus pratique d'utiliser for...in range(...) çà évite de se prendre les pieds lorsqu'on teste les conditions de sortie d'un while.
Et quand on a ce genre de soucis, on ajoute des "print" dans son code pour arriver à savoir jusqu'où il avance et une fois trouvé où çà bloque on relit attentivement ce que çà fait pour essayer de comprendre pourquoi (en ajoutant de nouveaux "print" si nécessaire).

Maîtriser ces bases est nécessaire surtout lorsqu'on part à utiliser une bibliothèque comme tkinter, car faire des choses "simples" devient rapidement compliqué et sans ces bases on est perdu!

Le seul projet que vous devriez avoir est de passer du temps à les apprendre en ouvrant un tuto.: les exercices proposés sont autant de petits challenges qui vous permettraient de pratiquer les notions/concepts présentés, de vous entraîner à la mise au point de petits programmes et vous familiariser avec les messages d'erreurs que Python vous affiche.

En plus nombre d'exercices sont corrigés et vous montrent comment utiliser les notions présentées.
Ici, on peut essayer de se mettre à votre niveau pour comprendre les notions qui vous manquent pour réaliser un exercice.

Si vous vous lancez dans un projet, on proposera des codes qui utilisent des constructions que vous n'avez pas encore vu.
Ce qui pourra être intéressant si vous avez les bases pour comprendre mais contre productif (côté apprentissage) sinon.

- W

Wiz, c'est vrai, vous avez entièrement raison.

Voici l'avancement du code de ce matin:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
from tkinter import *
import tkinter.messagebox
import tkinter.filedialog
 
# Fenêtre
root = Tk()
Largeur = 1200
Hauteur = 800
canvas = Canvas(root, width=Largeur, height=Hauteur, background="white")
canvas.pack(side=LEFT, padx=5, pady=5)
root.resizable(width=False, height=False)
root.title('Heating Draw')
 
# Définition des menus Tkinter
def Ouvrir():
    filename = tkinter.filedialog.askopenfilename(title="Ouvrir une image",filetypes=[('gif files', '.gif'), ('all files','.*')])
    print(filename)
 
    photo = PhotoImage(file=filename)
    gifdict[filename] = photo  # référence
    print(gifdict)
 
    canvas.create_image(0, 0, anchor=NW, image=photo)
    canvas.config(height=photo.height(),width=photo.width())
 
    root.title("Image "+str(photo.width())+" x "+str(photo.height()))
 
def Fermer():
    canvas.delete(ALL)
    root.title("Image")
 
def Apropos():
    tkinter.messagebox.showinfo("Info")
 
# Capture des clics de la souris
def action_clic_souris(event):
    canvas.focus_set()
    x = event.x
    y = event.y
    i = x // 20 * 20 + 5
    j = y // 20 * 20 + 5
    print("Clic à x =", i, "Clic à y =", j)
    canvas.create_rectangle(i, j, i + 10, j + 10, fill="red")
    # Création d'un fichier qui stock la valeur de x et y
    with open("valeur_x_y.txt", "a+") as file:
        file.write(str(i))
        file.write(" ")
        file.write(str(j))
        file.write("\n")
        file.close()
    return
 
# Module d'ouverture
 
menubar = Menu(root)
 
menufichier = Menu(menubar,tearoff=0)
menufichier.add_command(label="Ouvrir une image",command=Ouvrir)
menufichier.add_command(label="Fermer l'image",command=Fermer)
menufichier.add_command(label="Quitter",command=root.destroy)
menubar.add_cascade(label="Fichier", menu=menufichier)
 
menuaide = Menu(menubar,tearoff=0)
menuaide.add_command(label="A propos",command=Apropos)
menubar.add_cascade(label="Aide", menu=menuaide)
 
# Affichage du menu
root.config(menu=menubar)
 
# Utilisation d'un dictionnaire pour conserver une référence
gifdict={}
 
# Ajout d'une grille 10x10
grid_size = 10
 
while grid_size <= Hauteur:
    line_1 = canvas.create_line(Largeur, grid_size, 0, grid_size, fill="grey")
    grid_size += 10
 
grid_size = 10
while grid_size <= Largeur:
    line_2 = canvas.create_line(grid_size, Hauteur, grid_size, 0, fill="grey")
    grid_size += 10
 
# Association clic/action
canvas.bind("<Button-1>", action_clic_souris)
 
# Lancement
root.mainloop()

J'ai créer les menus et fait un fichier qui récupère a chaque fois la valeur de x et y pour chaque clic.

Quand je charge mon image, j'aimerai qu'elle se mette à l'échelle de ma fenêtre ( sans que la fenêtre ne s’agrandisse )et surtout, qu'elle se mette en dessous de la grille.

Avez vous une idée ?

Le suite étant de récupérer les valeurs dans mon fichier, de passer les instructions à Turltle afin qu'il dessine automatique.

25/04/2020, 13h38
wiztricks

Salut,

Citation:

Envoyé par maxstilde

Avez vous une idée ?

Le 0, 0 dans le .create_image à la ligne 23 est la position à laquelle vous voulez afficher l'image dans le Canvas.
Si vous voulez la mettre ailleurs, il suffit de calculer la position correspondante.

Et il si vous ne savez pas le calculer, il n'est pas interdit de prendre une feuille de papier, un crayon, une règle,....

Citation:

Envoyé par maxstilde

Wiz, c'est vrai, vous avez entièrement raison.

Certes mais comme je n'ai pas l'impression que vous ayez compris, il va falloir vous expliquer çà plus formellement.

- W