Discussion :

[Arsene12]

Bonjour,

pourriez-vous me dire comment faire pour que mon bouton se positionne juste en dessous de la grid. Dans le code ci-dessus il se positionne bien en dessous mais avec un décalage vers la droite. Ce décalage est égal à la largeur de la grid.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import tkinter as tk
from tkinter import *
 
# on crée la fenêtre principale
fenetre = Tk()
 
j = 1
while j < 5:
    i=1
    while i < 5:
        canvas = "canvas" + str(i) + str(j)
        canvas = Canvas(fenetre, width=100,  height=100, bg="pale goldenrod")
        canvas.grid(row=j, column=i, sticky=NW+SE)     
        i=i+1
    j=j+1
 
# on ajoute un bouton quitter
button1 = Button(fenetre, text='Bouton', width=64)
button1.grid(row=6, column=6, sticky=S)
 
# on lance la boucle principale
fenetre.mainloop()

Merci d'avance,
cordialement,
Arsène

[VinsS]

Salut,

Si je vois bien, tu as tes canvas dans quatre colonnes.

Pourquoi mets-tu alors le bouton dans la colonne 6 ?

[Arsene12]

Si je mets

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

button1.grid(row=6, column=0, sticky=S)

c'est la grid qui est décalée à droite.

Je pense qu'il faut mettre colum=1. Si l'on fait ça, la taille de la première colonne de la grid devient celle du bouton. Mais le bouton est bien positionner en dessous sur la gauche.
Il doit falloir surement rajouter quelque chose pour éviter que la taille de la première colonne se modifie.

[wiztricks]

Salut,

Il doit falloir surement rajouter quelque chose pour éviter que la taille de la première colonne se modifie.

Eviter que la première colonne se modifie ou faire en sorte que le Button occupe plusieurs colonnes? Relisez la documentation de .grid pour voir comment mettre en œuvre les différentes options.
Vous pouvez aussi créer la grille de Canvas dans une Frame, puis afficher la Frame avec le Button "en dessous" en utilisant .pack ou .grid...

- W

[Arsene12]

Merci beaucoup,
j'ai trouvé la bonne formule :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
button1.grid(row=5, column=1,  rowspan=4, columnspan=4, sticky='ew')

Mais pour une grille de 20 cases de côtés au lieu de 4, ça marche pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import tkinter as tk
from tkinter import *
 
# on crée la fenêtre principale
fenetre = Tk()
 
j = 1
while j < 21:
    i=1
    while i < 21:
        canvas = "canvas" + str(i) + str(j)
        canvas = Canvas(fenetre, width=100,  height=100, bg="pale goldenrod")
        canvas.grid(row=j, column=i, sticky=NW+SE)     
        i=i+1
    j=j+1
 
# on ajoute un bouton quitter
button1 = Button(fenetre, text='Bouton', width=4)
button1.grid(row=21, column=1,  rowspan=20, columnspan=20, sticky='ew')
 
# on lance la boucle principale
fenetre.mainloop()

[wiztricks]

Mais pour une grille de 20 cases de côtés au lieu de 4, ça marche pas

çà ne marche pas ne dit rien sur ce que vous constatez: un message d'erreur ou çà fait pas ce que vous voulez?
Dans ce dernier cas, commencer par dire ce qu'on veut puis expliquer pourquoi les quelques lignes de code postées devraient le faire...

- W

[Arsene12]

Je m'excuse, j'ai un autre code qui affiche une grid semblable. Et lorsque j'y rajoute ces 2 lignes de codes,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
button1 = Button(fenetre, text='Bouton', width=64)
button1.grid(row=21, column=1,  rowspan=20, columnspan=20, sticky='ew')

les cases s'agrandissent et il n'est plus possible de voir le bouton qui est beaucoup plus trop bas par rapport à la limite de l'écran.

[wiztricks]

les cases s'agrandissent et il n'est plus possible de voir le bouton qui est beaucoup plus trop bas par rapport à la limite de l'écran.

Si çà dépasse les limites physiques de l'écran, il faut fabriquer des widgets plus petits ou ajouter des Scrollbar...
En tous cas, çà fait ce que vous lui avez demandé et même si çà ne vous plaît pas, "çà marche".

- W

[Arsene12]

Vous avez raison, effectivement ça marche bien.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
import tkinter as tk
from tkinter import *
 
myLenght=20
DIM_GRILLE = (myLenght, myLenght)
DIM_CASEL = 30
DIM_CASEH = 15
DIM_LIGNE = 1
 
DIM_CANEVAS = (
    DIM_GRILLE[0]*DIM_CASEL + (DIM_GRILLE[0]+1)*DIM_LIGNE,
    DIM_GRILLE[1]*DIM_CASEH + (DIM_GRILLE[1]+1)*DIM_LIGNE
)
 
 
fenetre = tk.Tk()
 
can = tk.Canvas(
    fenetre,
    width=DIM_CANEVAS[0],
    height=DIM_CANEVAS[1],
    bg='black',
    highlightthickness=0,
)
can.grid()
 
colors = ['white', 'yellow']
y = DIM_LIGNE
 
DIM_CASE =10
 
for ligne in range(DIM_GRILLE[1]) :
    x = DIM_LIGNE
    colors.reverse()
    for col in range(DIM_GRILLE[0]) :
            i = can.create_rectangle(
                x, y, x+DIM_CASEL, y+DIM_CASEH,
                fill=colors[col%2],
                width=0,
                tags='l{} c{}'.format(ligne, col),
            )
 
            x += DIM_CASEL + DIM_LIGNE
    y += DIM_CASEH + DIM_LIGNE
 
button1 = Button(fenetre, text='Bouton')
 
button1.grid(row=21, column=0, rowspan=20, columnspan=20, sticky='ew')
 
fenetre.mainloop()

Mais pour mon autre code un peu plus complexe où j'ajuste la taille de la grid, j'ai dû opter pour une autre solution. J'ai créer une deuxième grid :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
fenetre = tk.Tk() 
can = tk.Canvas(
    fenetre,
    width=DIM_CANEVAS[0],
    height=DIM_CANEVAS[1],
    bg='black',
    highlightthickness=0,
)
can.grid()
can2 = tk.Canvas(
    fenetre,
    bg='black',
    highlightthickness=0,
)
can2.grid()

[Arsene12]

J'ai une problème quand je rajoute un deuxième canvas. J'ai bien lu le gestionnaire de positionnement mais j'arrive pas à étirer le bouton sur toute la largeur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
import tkinter as tk
from tkinter import *
 
myLenght=20
DIM_GRILLE = (myLenght, myLenght)
DIM_CASEL = 30
DIM_CASEH = 15
DIM_LIGNE = 1
 
DIM_CANEVAS = (
    DIM_GRILLE[0]*DIM_CASEL + (DIM_GRILLE[0]+1)*DIM_LIGNE,
    DIM_GRILLE[1]*DIM_CASEH + (DIM_GRILLE[1]+1)*DIM_LIGNE
)
 
 
fenetre = tk.Tk()
 
can = tk.Canvas(
    fenetre,
    width=DIM_CANEVAS[0],
    height=DIM_CANEVAS[1],
    bg='black',
    highlightthickness=0,
)
can.grid()
 
can2 = tk.Canvas(
    fenetre,
    width=DIM_CANEVAS[0],
    height=DIM_CANEVAS[1],
    bg='black',
    highlightthickness=0,
)
can2.grid()
 
colors = ['white', 'yellow']
y = DIM_LIGNE
 
DIM_CASE =10
 
for ligne in range(DIM_GRILLE[1]) :
    x = DIM_LIGNE
    colors.reverse()
    for col in range(DIM_GRILLE[0]) :
            i = can.create_rectangle(
                x, y, x+DIM_CASEL, y+DIM_CASEH,
                fill=colors[col%2],
                width=0,
                tags='l{} c{}'.format(ligne, col),
            )
 
            x += DIM_CASEL + DIM_LIGNE
    y += DIM_CASEH + DIM_LIGNE
 
button1 = Button(can2, text='Générateur')
 
button1.grid(row=0, column=0, rowspan=1, sticky='ew')
 
fenetre.mainloop()

[wiztricks]

Salut,

Quand ça marchait et que ça ne marche plus, relire son code et essayer de comprendre pourquoi...
D'autant que vous postez une nouvelle question sur un sujet déjà résolu...

- W

[Arsene12]

Oui ça marche quand je précise la largeur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
button1 = Button(can0, text='Bouton', width=60, command=generator)
button1.grid(row=21, column=1,  rowspan=20, columnspan=20, sticky='ew')

Je voudrai que le bouton fasse toute la largeur de la grid. J'essaye :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
myWidth = fenetre.winfo_width()
#ou myWidth = canvas.winfo_width()
 
button1 = Button(can0, text='Bouton', width=myWidth, command=generator)
button1.grid(row=21, column=1,  rowspan=20, columnspan=20, sticky='ew')

mais ça marche pas. C'est pas trop grave pour le moment. J'ai quand même résolu l'essentiel de mon problème.

[bistouille]

Salut.

Le truc sur lequel s'interroger est pourquoi définir comme parent du bouton un canevas.
Et pourquoi un rowspan ?

Ensuite, si tu lis bien la documentation, tu t'apercevras que la largeur d'un bouton se définit en nombre de caractères et non en pixels, donc ça ne peut pas fonctionner comme tu t'y prends.

[Arsene12]

Bonjour,

Le truc sur lequel s'interroger est pourquoi définir comme parent du bouton un canevas.

j'ai créé un premier canvas et je place le bouton dans un deuxième. C'est pour simplifier le positionnement. Sinon je n'arrivais pas à mettre mon bouton en dessous du premier canvas.

Ensuite, si tu lis bien la documentation, tu t'apercevras que la largeur d'un bouton se définit en nombre de caractères et non en pixels, donc ça ne peut pas fonctionner comme tu t'y prends.

Dans ce cas, j'aimerai bien savoir comment connaitre le nombre de caractères que contient la largeur du canvas.

[bistouille]

Si tu n'arrives pas à placer ton bouton correctement, c'est que tu dois faire quelque chose d'incorrect.
Et ce n'est pas une solution de vouloir obtenir combien de caractères il y a dans telle dimension en pixels, car cela variera évidemment selon la police utilisée, et à moins d'utiliser une police à chasse fixe, c'est quasi mission impossible à faire.

Quand on arrive pas à faire quelque chose, on réduit ça au plus simple, et on teste jusqu'à comprendre comment ça fonctionne.

Exemple très simple avec 3 canevas et un bouton.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import tkinter as tk
 
root = tk.Tk()
 
can1 = tk.Canvas(root, width=200, height=400, bg='blue', highlightthickness=0)
can1.grid(row=0, column=0, rowspan=2)
 
can2 = tk.Canvas(root, width=100, height=200, bg='red', highlightthickness=0)
can2.grid(row=0, column=1)
 
can3 = tk.Canvas(root, width=100, height=200, bg='green', highlightthickness=0)
can3.grid(row=1, column=1)
 
bout = tk.Button(root, text='Un Grand Bouton')
bout.grid(row=2, column=0, columnspan=2, sticky=tk.EW)
 
root.mainloop()

Le bouton est bien étiré sur toute la largeur de la fenêtre.

[Arsene12]

Merci beaucoup. J'ai compris mon erreur. Je sais maintenant comment procéder et j'ai plus besoin d'un deuxième canvas. Pour afficher le premier canvas et le bouton, je faisais .grid(). Il faut rajouter des infos dans la parenthèse :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
fenetre = tk.Tk()
 
can = tk.Canvas(
    fenetre,
    width=x,
    height=y,
    bg='black',
    highlightthickness=0,
)
can.grid(row=1, column=0, sticky='ew')
 
button1 = Button(fenetre, text='Bouton')
button1.grid(row=2, column=0, sticky='ew')