Jolie interface ?

**Caxton** · 04/04/2015, 18h36

Bonjour,

Pour commencer, laissez moi vous dire combien je débute et combien j'aimerais y aller pas à pas. Cela vaudra mieux que de long discours que je risque de ne pas comprendre. Je débute un peu dans Python. Et oui, il faut bien commencer par un bout.

À l'aide d'exemple, j'a attaqué une GUI. Jusque là, rien d'anormal. J'ai même déjà la suite du code vue que j'ai eu sous la main un prototype qui fonctionne. Mais j'en suis rendu au moment où, d'une part j'ai le code qui tourne (bien) mais qui n'est pas beau à voir et de l'autre une interface à faire IHM qui doit ressembler à quelque-chose.

Comme mon but est expérimental avant tout, j'ai pas besoin d'un truc totalement fini mais qui soit facile à maintenir.

Voila donc où j'en suis. Je me suis lancé dans l'idée de faire une fenêtre de contrôle de robot. A ceci prêt que le robot fonctionne par liaison série (le code fonctionne hein, donc on développera pas plus et je ne l'ai pas pour le moment implémenté pour gagner du temps). J'ai donc commencer à aligner quelques boutons et, hélas, je ne voie pas comment remplir la partie à gauche de mes premiers boutons. D'ailleurs dans le code, j'ai laisser un petit commentaire pour dire que c'était ici que je cherchais à implémenté mes autres boutons.

Voyons niveau code:

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
 
#!/usr/bin/python
# -*- coding: iso-8859-1 -*-
 
import Tkinter
 
class test_tk(Tkinter.Tk):
	def __init__(self, parent):
		Tkinter.Tk.__init__(self, parent)
		self.parent = parent
		self.initialize()
 
	def initialize(self):
		self.grid()
 
		self.entry = Tkinter.Entry(self)				#Widget
		self.entry.grid(column=0, row=0, sticky='EW')	#Ici je cherche à ajouter de nouveaux contrôles de directions
 
		#goupe de bouton (avancer, reculer, mettre les roues au centre à gauche et à droite)
		button = Tkinter.Button(self, text="Avancer")
		button.grid(column=2, row=0)
 
		button = Tkinter.Button(self, text="Gauche")
		button.grid(column=1, row=1)
 
		button = Tkinter.Button(self, text="Centre")
		button.grid(column=2, row=1)
 
		button = Tkinter.Button(self, text="Droite")
		button.grid(column=3, row=1)
 
		button = Tkinter.Button(self, text="Reculer")
		button.grid(column=2, row=2)
 
		self.grid_columnconfigure(0, weight=1)
 
 
if __name__ == "__main__":
	app = test_tk(None)
	app.title('test tk')
	app.mainloop()

Et maintenant, reprenons. J'ai deux systèmes de direction. L'un est figée c'est celui de droite. L'autre est un peu plus subtil. Il y a un premier bouton pour dire qu'on va mettre les roues dans un sens particulier et deux boutons pour tourner sur place à droite ou à gauche. Enfin, il me faudra un dernier pour remettre les roues au centre.

Si je voulais corsé le tout, j'aurais mis un bouton radio qui grise les boutons qui doivent être désactivé quand on est dans le mode normal ou le mode sur place.

Voila, si quelqu'un peu m'aider un peu à ajouter mes boutons à gauche dans la zone vide, je serais content.

Merci.

**Clodion** · 04/04/2015, 23h13

Envoyé par Caxton

Et maintenant, reprenons. J'ai deux systèmes de direction. L'un est figée c'est celui de droite. L'autre est un peu plus subtil. Il y a un premier bouton pour dire qu'on va mettre les roues dans un sens particulier et deux boutons pour tourner sur place à droite ou à gauche. Enfin, il me faudra un dernier pour remettre les roues au centre.

Si je voulais corsé le tout, j'aurais mis un bouton radio qui grise les boutons qui doivent être désactivé quand on est dans le mode normal ou le mode sur place.

Voila, si quelqu'un peu m'aider un peu à ajouter mes boutons à gauche dans la zone vide, je serais content.

Merci.

Bonsoir,
Le système tkinter est simple: chaque widget peut contenir un système de positionnement.
Il suffit donc de créer une frame dans cet espace (sous l'entrée) puis d'utiliser un nouveau système de grille (ou même un autre, tel que pack ou place!!!).
Ainsi, vous pouvez ajouter (par exemple ligne 18) le code:

Code :

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

1
2
3
4
		self.frame = Tkinter.Frame(self)
		self.frame.grid(column=0, row=1, rowspan=3)
		bt1 = Tkinter.Button(self.frame, text="coucou")
		bt1.grid(column=1, row=1)

Et ainsi avoir une nouvelle grille… et donc positionner autant de boutons que désiré, aux emplacements désirés.
Non?

Clodion
PS: à ce niveau là, il peut être utile de scinder le code de manière à ce que l'ensemble soit plus lisible.

**Caxton** · 05/04/2015, 12h28

Bonjour,

Déjà merci pour ce bout d'infos.

Bien décidé d'en découdre, avec quelques explications données ci-dessus, voila ce que j'ai pu réalisé

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
60
 
#!/usr/bin/python
# -*- coding: iso-8859-1 -*-
 
# -- INCLUDE --
import Tkinter as tk
 
# -- CLASSE --
class test_tk(tk.Tk):
 
	# -- CONSTRUCTEUR --
	def __init__(self, parent):
		tk.Tk.__init__(self, parent)
		self.parent = parent
		self.initialize()
 
	# -- INITIALISATION DE LA FENETRE --	
	def initialize(self):
		self.grid()	#Grille
 
		# Les boutons de gauche
		self.entryLeft = tk.Entry(self)				#Widget gauche
		self.entryLeft.grid(column=0, row=0, sticky='EW')
 
		buttonG1 = tk.Button(self.entryLeft, text="Roues : Gauche")
		buttonG1.grid(column=0, row=0)
 
		buttonSP = tk.Button(self.entryLeft, text="Roues : Sur Place")
		buttonSP.grid(column=1, row=0)
 
		buttonD1 = tk.Button(self.entryLeft, text="Roues : Droite")
		buttonD1.grid(column=2, row=0)
 
		buttonC1 = tk.Button(self.entryLeft, text="Roues : Centre")
		buttonC1.grid(column=1, row=1)
 
		# Les boutons de droite
		self.entryRight = tk.Entry(self)				#Widget droite
		self.entryRight.grid(column=1, row=0, sticky='EW')
 
		buttonG2 = tk.Button(self.entryRight, text="Roues : Gauche")
		buttonG2.grid(column=0, row=1)
 
		buttonA1 = tk.Button(self.entryRight, text="Avancer")
		buttonA1.grid(column=1, row=0)
 
		buttonC2 = tk.Button(self.entryRight, text="Roues : Centre")
		buttonC2.grid(column=1, row=1)
 
		buttonR1 = tk.Button(self.entryRight, text="Reculer")
		buttonR1.grid(column=1, row=2)
 
		buttonD2 = tk.Button(self.entryRight, text="Roues : Droite")
		buttonD2.grid(column=2, row=1)
 
# -- ICI J'AI PAS TROP COMPRIS COMMENT CA FONCTIONNE
if __name__ == "__main__":
	app = test_tk(None)
	app.title('test tk')
	app.mainloop()			#Boucler

Je ne dis pas que c'est parfait mais je comprends mieux ce qui se passe. On peut dire :

Code :

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

1
2
3
4
5
6
7
8
9
 
# Fenêtre
#	+ Grid
#		+ Widget Gauche
#			+ Grid
#				+ Boutons à gauche
#		+ Widget Droite
#			+ Grid
#				+ Boutons à Droite

On voie très bien que j'ai utilisé Grid à plusieurs reprise, si je ne me trompe pas.

Et maintenant, deux choses :
- La portion de code en bas que j'aimerais mieux appréhender
- Ajouter un système qui grise en fonction de l'appuie sur certains boutons. Voir la suite plus bas...

Suite !
Alors, mettons que je démarre mon appli. Au départ les boutons de gauches sont désactivés. Normal la séquence sur le robot place les roues au centre. A l'exception du bouton "Roues : Sur Place" qui sert de sélecteur, les autres boutons sont grisés. En revanche, si je clique sur ce même boutons, je grise ceux de droite à l'exception de "Roues : Centre" de droite qui fera alors office de sélecteur.

On va y aller pas à pas mais déjà on aura avancé d'un chouilla.

Merci.

**Clodion** · 05/04/2015, 13h58

Envoyé par Caxton

Déjà merci pour ce bout d'infos.
Bien décidé d'en découdre, avec quelques explications données ci-dessus, voila ce que j'ai pu réalisé

Bonjour,
Les bouts d'info sont peut-être trop denses: sauf cas particulier, placer des boutons dans une entrée est inadapté.

Envoyé par Caxton

- Ajouter un système qui grise en fonction de l'appuie sur certains boutons. Voir la suite plus bas...

Là, il pourrait commencer à être efficace de lire (ou au moins parcourir) le manuel de tkinter…
- ce serait bien de regrouper les boutons de chacun des cotés dans une classe de manière à pouvoir les manipuler ensemble.
- l'option state des boutons permet de les rendre actifs ou non (option: state; valeurs: tk.DISABLED, tk.ACTIVE et tk.NORMAL).

Envoyé par Caxton

- La portion de code en bas que j'aimerais mieux appréhender

Cette condition n'est donc pas de vous?
En bref: le nom du script lancé est "__main__". Tester cela permet de n'exécuter un code que s'il est exécuté comme script principal. Au contraire, si ce script est appelé par un inport, cette condition sera fausse et les instructions suivantes ne seront pas exécutées. Cela permet de tester des scripts de manière individuelle.

Vous avez absolument tous les éléments pour atteindre votre objectif.

Clodion

**Caxton** · 05/04/2015, 15h00

Ah oui, en effet, j'ai maintenant pas mal de choses et plusieurs pistes.

Envoyé par Clodion

Cette condition n'est donc pas de vous?

En effet, cela proviens d'un exercice très succinct.

Donc, je vais commencé par résoudre le bout de code en bas. Remplacer le commentaire pour m'y retrouver. Si j'ai bon, je garde, sinon, je reformulerais le commentaire.

Code :

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

1
2
3
4
5
6
 
# -- SI LE SCRIPT EST __main__
if __name__ == "__main__":
	app = test_tk(None)
	app.title('test tk')	#Titre de l'application
	app.mainloop()			#Boucler

Envoyé par Clodion

Bonjour,
Les bouts d'info sont peut-être trop denses: sauf cas particulier, placer des boutons dans une entrée est inadapté.

Là, il pourrait commencer à être efficace de lire (ou au moins parcourir) le manuel de tkinter…
- ce serait bien de regrouper les boutons de chacun des cotés dans une classe de manière à pouvoir les manipuler ensemble.
- l'option state des boutons permet de les rendre actifs ou non (option: state; valeurs: tk.DISABLED, tk.ACTIVE et tk.NORMAL).

Oh ! Inadapté ? Comment ça ?
En revanche, je pense avoir une petite idée mais avant j'aimerais être sûr que je ne parte pas dans la mauvaise direction. Ok pour parcourir le manuel de tkinter. (D'ailleurs quelle est le lien le plus efficace ? Je dis ça car mes recherches n'ont pas donné de bons résultats pour le moment.)

Faut-il donc que je fasse une classe btnGauche et btnDroite ? Si oui, un petit constructeur. Sauf que du coup, comment ensuite les ajoutés dans la fenêtre ? Je sait pas trop ! Voyons déjà à quoi devrais ressembler la classe gauche (sachant que c'est idem pour l'autre côté).

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
 
# -- CLASSE --
class btnGauche():
 
	# -- CONSTRUCTEUR --
	def __init__():
		self.grid()	#Grille
 
		# Les boutons de gauche
		self.entryLeft = tk.Entry(self)				#Widget gauche
		self.entryLeft.grid(column=0, row=0, sticky='EW')
 
		buttonG1 = tk.Button(self.entryLeft, text="Roues : Gauche")
		buttonG1.grid(column=0, row=0)
 
		buttonSP = tk.Button(self.entryLeft, text="Roues : Sur Place")
		buttonSP.grid(column=1, row=0)
 
		buttonD1 = tk.Button(self.entryLeft, text="Roues : Droite")
		buttonD1.grid(column=2, row=0)
 
		buttonC1 = tk.Button(self.entryLeft, text="Roues : Centre")
		buttonC1.grid(column=1, row=1)

Est-ce que je suis sur la bonne piste ?

**Clodion** · 05/04/2015, 16h10

Envoyé par Caxton

Oh ! Inadapté ? Comment ça ?

Bonjour,
Frame, parce que c'est son rôle de contenir d'autres widgets. L'entrée est pour entrer du texte (même si elle peut aussi contenir d'autres widgets)…

Envoyé par Caxton

D'ailleurs quelle est le lien le plus efficace ? Je dis ça car mes recherches n'ont pas donné de bons résultats pour le moment.

Sur le site officiel de Python, rubrique tkinter (https://docs.python.org/3.4/library/tkinter.html), on trouve, entre autre: http://infohost.nmt.edu/tcc/help/pub...web/index.html
Ainsi que bien d'autres liens.

Envoyé par Caxton

Sauf que du coup, comment ensuite les ajoutés dans la fenêtre ?

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
import tkinter as tk
 
class Pan1(tk.Frame):
    def __init__(self, parent):
        self.parent = parent
        tk.Frame.__init__(self, self.parent)
        self.bt = tk.Button(self, text="bt1")
        self.bt.pack()
 
class Pan2(tk.Frame):
    def __init__(self, parent):
        self.parent = parent
        tk.Frame.__init__(self, self.parent)
        self.bt = tk.Button(self, text="bt2")
        self.bt.pack()
 
mon_app = tk.Tk()
pan1=Pan1(mon_app)
pan1.grid(column = 0, row = 0)
pan2=Pan2(mon_app)
pan2.grid(column = 1, row = 0)
 
mon_app.mainloop()

Il faudra sans doutes remplacer l'import de tkinter par l'import de Tkinter (je suis en version Python 3).

Bien sûr, dans chaque classe, il est possible de dresser une liste des boutons et de définir des fonctions.

Envoyé par Caxton

Est-ce que je suis sur la bonne piste ?

Sinon, il suffit de réaliser quelques essais et de voir ce que cela produit.

Clodion

Jolie interface ?

Tkinter Python

Vue hybride

Discussions similaires

Partager

Partager