Bouton en dessous d'une Grid

Version imprimable

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:

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

01/06/2018, 07h41
VinsS

Salut,

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

Pourquoi mets-tu alors le bouton dans la colonne 6 ?
01/06/2018, 12h33
Arsene12

Si je mets

Code:

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.
01/06/2018, 13h27
wiztricks

Salut,

Citation:

Envoyé par Arsene12

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

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

Code:

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:

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()

01/06/2018, 18h50
wiztricks

Citation:

Envoyé par Arsene12

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
01/06/2018, 19h13
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:

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.
01/06/2018, 19h34
wiztricks

Citation:

Envoyé par Arsene12

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

Vous avez raison, effectivement ça marche bien.

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
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:

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()

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:

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()

02/06/2018, 13h01
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

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

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:

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.

03/06/2018, 16h33
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.
04/06/2018, 07h26
Arsene12

Bonjour,

Citation:

Envoyé par bistouille

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.

Citation:

Envoyé par bistouille

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.

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:

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.

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:

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')