regler le positionnement des bouttons au centre des panels!

**loula05** · 01/03/2019, 15h33

Bonjour encore ,

j’essaie de créer une simple appli avec wxPython j'ai 2 panels avec un menu et je viens d'ajouter un bouton dans chaque panels le problème ce que j'aimerai mettre les boutons au centre mais j'arrive plus !

voilà mon 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
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
90
91
92
93
94
95
import wx
 
class MainFrame(wx.Frame):
 
    def __init__(self, *args, **kwargs):
        super(MainFrame, self).__init__(None, *args, **kwargs)
        self.Title = 'premier app (Menu+2windows)'
        self.SetMenuBar(MenuBar(self))
        self.ToolBar = MainToolbar(self)
        self.status_bar = StatusBar(self).status_bar
        self.Bind(wx.EVT_CLOSE, self.on_quit_click)
        panel = MainPanel(self)
        sizer = wx.BoxSizer(wx.HORIZONTAL)
        sizer.Add(panel)
        self.SetSizerAndFit(sizer)
        self.Centre()
        self.Show()
 
    def on_quit_click(self, event):
 
        wx.CallAfter(self.Destroy)
 
 
 
class MainPanel(wx.Panel):
 
    def __init__(self, parent):
        wx.Frame.__init__(self, parent,size = (500,500))
        self.splitter = wx.SplitterWindow(self, -1, size = (500,500))
 
 
 
# 1er panel 
        pan1 = wx.Window(self.splitter, style=wx.BORDER_SUNKEN)
        pan1.SetBackgroundColour("white")
        button1 = wx.Button(pan1,-1,label = "select")
 
 
 
#2em panel
        pan2 = wx.Window(self.splitter, style=wx.BORDER_SUNKEN)
        pan2.SetBackgroundColour("white")
        button2 = wx.Button(pan2,-1,label = "select")
 
        self.splitter.SplitVertically(pan1, pan2, 100)
 
 
class MenuBar(wx.MenuBar):
    """creation de menu."""
    def __init__(self, parent, *args, **kwargs):
        super(MenuBar, self).__init__(*args, **kwargs)
        #  menu
        File_menu = wx.Menu()
        Edit_menu = wx.Menu()
        View_menu = wx.Menu()
        Help_menu = wx.Menu()
 
        self.Append(File_menu, '&File')
        self.Append(Edit_menu, '&Edit')
        self.Append(View_menu, '&View')
        self.Append(Help_menu, '&Help')
 
        quit_menu_item = wx.MenuItem(File_menu, wx.ID_EXIT)
        parent.Bind(wx.EVT_MENU, parent.on_quit_click, id=wx.ID_EXIT)
        open_menu_item = wx.MenuItem(File_menu, wx.ID_OPEN)
        parent.Bind(wx.EVT_MENU,self.on_open_file,id=wx.ID_OPEN)
        new_menu_item = wx.MenuItem(File_menu,wx.ID_NEW)
        File_menu.Append(open_menu_item)
        File_menu.Append(new_menu_item)
        File_menu.Append(quit_menu_item)
 
 
    def on_open_file (self, event):
        dlg = wx.FileDialog(self, message="Choose file", defaultDir = "D:/home/S/", defaultFile = "",\
                        wildcard = "", style=wx.FD_OPEN)
        if dlg.ShowModal() == wx.ID_OK:
            print(dlg.GetDirectory(), dlg.GetFilename())
        dlg.Destroy()
 
class MainToolbar(wx.ToolBar):
     def __init__(self, parent, *args, **kwargs):
        super(MainToolbar, self).__init__(parent, *args, **kwargs)
 
 
 
class StatusBar(object):
    def __init__(self, parent):
        self.status_bar = parent.CreateStatusBar()
 
 
if __name__ == '__main__':
    """Run the application."""
    screen_app = wx.App()
    main_frame = MainFrame()
    screen_app.MainLoop()

résultats :
Nom : Capture du 2019-03-01 15-33-13.png
Affichages : 475
Taille : 6,9 Ko

merci d'avance

**bistouille** · 01/03/2019, 21h35

Salut.

Les positionnements de widgets se font avec les gestionnaires de positonnements

Tu en as utilisé un dans ton script : wx.BoxSizer
Et c'est quelque chose qui demande du temps à appréhender et une des choses les plus compliquées des interfaces graphiques, car il faut en comprendre les réactions selon les réglages effectués, options utilisées, et cela se fait avec des tas de tests, parfois des arrachages de cheveux.

En utilisant un simple BoxSizer, il est assez facile de centrer un bouton, pour le 1er bouton, la classe MainPanel pourrait commencer à ê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
class MainPanel(wx.Panel):
    def __init__(self, parent):
        super().__init__(parent)
        self.splitter = wx.SplitterWindow(self, -1, size = (500,500))
 
        pan1 = wx.Panel(self.splitter, style=wx.BORDER_SUNKEN)
        pan1.SetBackgroundColour("white")
 
        button1 = wx.Button(pan1,-1,label = "select")
        sizer = wx.BoxSizer(wx.HORIZONTAL)
        sizer.Add(button1, 1, wx.ALL | wx.ALIGN_CENTER_HORIZONTAL, 10)
        pan1.SetSizer(sizer)
 
        pan2 = wx.Window(self.splitter, style=wx.BORDER_SUNKEN)
        pan2.SetBackgroundColour("white")
        button2 = wx.Button(pan2,-1,label = "select")
 
        self.splitter.SplitVertically(pan1, pan2, 100)

Mais le BoxSizer n'est sans doute pas le mieux pour placer des widgets avec wx.

Un petit récapitulatif des postionnements avec des exemples peut être trouvé ici

Bon courage dans tes expérimentations avec wx.

**loula05** · 02/03/2019, 22h14

Bonjour,

je m'excuse pour le retard
en faite j'ai trouvé le meme jours une petite solution c'est d'ajouter la position des boutton dans meme line

voilà code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
# 1er panel 
        pan1 = wx.Window(self.splitter, style=wx.BORDER_SUNKEN)
        pan1.SetBackgroundColour("white")
        ##boutton
        button1 = wx.Button(pan1,-1,label = "select",pos=(50,50))
 
 
 
#2em panel
        pan2 = wx.Window(self.splitter, style=wx.BORDER_SUNKEN)
        pan2.SetBackgroundColour("white")
        button2 = wx.Button(pan2,-1,label = "select",pos=(50,50))

cela permet que les bouton seront poser au milieux en tête

le problème que j'ai ce que j'aimerai fixer les panels que ça bouge pas que la dimension soi fixer parce que quand j lance le code j'obtiens mon petit interface mais une des panels je devrai la dimensionner moi même voilà comme ça :

je sais pas comment je peux fixer ?! si vous avez une idée

je pense que vous avez l'expérience pour les interfaces graphique et merci pour le site c'est très outil

**bistouille** · 03/03/2019, 10h45

Salut.

Si tu souhaites que les 2 panels soient de dimensions fixes, bah l'intérêt du splitter devient nul, Autant définir les dimensions des panels.
Mais si c'est simplement une histoire de position de la barre de séparation du splitter, tu l'as défini à 100.

Code :

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

self.splitter.SplitVertically(pan1, pan2, 100)

Ta solution de placer les boutons en dur dans les panels n'est pas idéal, mais bon si ça te convient alors tant mieux.

**loula05** · 03/03/2019, 11h40

Envoyé par bistouille

Salut.

Si tu souhaites que les 2 panels soient de dimensions fixes, bah l'intérêt du splitter devient nul, Autant définir les dimensions des panels.
Mais si c'est simplement une histoire de position de la barre de séparation du splitter, tu l'as défini à 100.

Code :

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

self.splitter.SplitVertically(pan1, pan2, 100)

Ta solution de placer les boutons en dur dans les panels n'est pas idéal, mais bon si ça te convient alors tant mieux.

Bonjour,

oui la place des boutons c'etai juste essai mais c'est pas la solution final

oui pour que je fixe la barre de séparation je vais l"essayer et je vais tester votre code pour la position des boutons

merci beaucoup

**loula05** · 04/03/2019, 12h00

Envoyé par bistouille

Salut.

Si tu souhaites que les 2 panels soient de dimensions fixes, bah l'intérêt du splitter devient nul, Autant définir les dimensions des panels.
Mais si c'est simplement une histoire de position de la barre de séparation du splitter, tu l'as défini à 100.

Code :

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

self.splitter.SplitVertically(pan1, pan2, 100)

Ta solution de placer les boutons en dur dans les panels n'est pas idéal, mais bon si ça te convient alors tant mieux.

BOnjour,

j'arrete pas de lire des choses sur wxpython ...

je viens de lire sur les combobox en faite c 'est ce que j'aimerai faire c'est pas des boutons

je m'excuse car j'ai pas lu beaucoup des choses qui devient clair maintenant ( je m'excuse aussi ma français )

voilà ce que j'ai fais :

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
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import wx
 
class MainFrame(wx.Frame):
 
    def __init__(self, *args, **kwargs):
        super(MainFrame, self).__init__(None, *args, **kwargs)
        self.Title = ("Menu+2windows")
        self.SetMenuBar(MenuBar(self))
        self.ToolBar = MainToolbar(self)
        self.status_bar = StatusBar(self).status_bar
        self.Bind(wx.EVT_CLOSE, self.on_quit_click)
        panel = MainPanel(self)
        sizer = wx.BoxSizer(wx.HORIZONTAL)
        sizer.Add(panel)
        self.SetSizerAndFit(sizer)
        self.Centre()
        self.Show()
        self.SetBackgroundColour(wx.Colour(255, 170, 5))
 
 
    def on_quit_click(self, event):
 
        wx.CallAfter(self.Destroy)
 
 
 
class MainPanel(wx.Panel):
 
    def __init__(self, parent):
        super().__init__(parent)
        #wx.Frame.__init__(self, parent,size = (500,500))
        self.splitter = wx.SplitterWindow(self, -1, size = (500,500))
 
 
 
# 1er panel 
        pan1 = wx.Window(self.splitter, style=wx.BORDER_SUNKEN)
        pan1.SetBackgroundColour("white")
 
 
        combobox = wx.ComboBox(parent=pan1, id=wx.ID_ANY, style=wx.CB_READONLY)
        combobox.Set(['canal 1', 'canal 2', 'canal 3'])
        combobox.SetValue('canal 1')
 
 
#2em panel
        pan2 = wx.Window(self.splitter, style=wx.BORDER_SUNKEN)
        pan2.SetBackgroundColour("white")
#choix
        combobox = wx.ComboBox(parent=pan2, id=wx.ID_ANY, style=wx.CB_READONLY)
        combobox.Set(['canal 1', 'canal 2', 'canal 3'])
        combobox.SetValue('canal 1')
 
 
        self.splitter.SplitVertically(pan1, pan2, 100)
 
 
 
 
class MenuBar(wx.MenuBar):
    """creation de menu."""
    def __init__(self, parent, *args, **kwargs):
        super(MenuBar, self).__init__(*args, **kwargs)
        #  menu
        File_menu = wx.Menu()
        Edit_menu = wx.Menu()
        View_menu = wx.Menu()
        Help_menu = wx.Menu()
 
        self.Append(File_menu, '&File')
        self.Append(Edit_menu, '&Edit')
        self.Append(View_menu, '&View')
        self.Append(Help_menu, '&Help')
 
        quit_menu_item = wx.MenuItem(File_menu, wx.ID_EXIT)
        parent.Bind(wx.EVT_MENU, parent.on_quit_click, id=wx.ID_EXIT)
        open_menu_item = wx.MenuItem(File_menu, wx.ID_OPEN)
        parent.Bind(wx.EVT_MENU,self.on_open_file,id=wx.ID_OPEN)
        new_menu_item = wx.MenuItem(File_menu,wx.ID_NEW)
        File_menu.Append(open_menu_item)
        File_menu.Append(new_menu_item)
        File_menu.Append(quit_menu_item)
 
 
    def on_open_file (self, event):
        dlg = wx.FileDialog(self, message="Choose file", defaultDir = "D:/home/sarah/", defaultFile = "",\
                        wildcard = "", style=wx.FD_OPEN)
        if dlg.ShowModal() == wx.ID_OK:
            print(dlg.GetDirectory(), dlg.GetFilename())
        dlg.Destroy()
 
 
class MainToolbar(wx.ToolBar):
     def __init__(self, parent, *args, **kwargs):
        super(MainToolbar, self).__init__(parent, *args, **kwargs)
 
 
 
class StatusBar(object):
    def __init__(self, parent):
        self.status_bar = parent.CreateStatusBar()
 
 
if __name__ == '__main__':
    """Run the application."""
    screen_app = wx.App()
    main_frame = MainFrame()
    screen_app.MainLoop()

par contre j'ai une question si j'aimerai ajouter des boutons ou combobox sur la partie jaune ou orange et créer des boutons comment faire exactement ?

Nom : Capture du 2019-03-04 11-36-38.png
Affichages : 435
Taille : 7,1 Ko

Nom : Capture du 2019-03-04 11-36-38.png
Affichages : 435
Taille : 7,1 Ko

un exemple ou tuto sera utile

merci d'avance

**bistouille** · 04/03/2019, 18h43

Salut.

Si tu désires avoir plusieurs zones distinctes dans ta fenêtre alors il faut compartimenter chaque zone.

Pour l'exemple, admettons donc une zone à droite et une zone en bas, ajoutons donc 2 panels.

Code :

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

1
2
3
4
5
6
7
8
9
class RightPanel(wx.Panel):
    def __init__(self, parent):
        super().__init__(parent, size=(100, 500))
        self.SetBackgroundColour("red")
 
class BottomPanel(wx.Panel):
    def __init__(self, parent):
        super().__init__(parent, size=(0, 50))
        self.SetBackgroundColour("blue")

Cela fait, il faut revoir comment est agencé la frame principale, puisqu'il y a maintenant d'autres zones à intégrer, on ajoute donc d'abord un sizer vertical, et on y intègre les 2 sizers horizontaux créés à la suite, grosso modo, ça pourrait donner.

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
class MainFrame(wx.Frame):
 
    def __init__(self, *args, **kwargs):
        super(MainFrame, self).__init__(None, *args, **kwargs)
        self.Title = ("Menu+2windows")
        self.SetMenuBar(MenuBar(self))
        self.ToolBar = MainToolbar(self)
        self.status_bar = StatusBar(self).status_bar
        self.Bind(wx.EVT_CLOSE, self.on_quit_click)
 
        verticalSizer = wx.BoxSizer(wx.VERTICAL)
 
        panel = MainPanel(self)
        topSizer = wx.BoxSizer(wx.HORIZONTAL)
        topSizer.Add(panel)
 
        rightPanel = RightPanel(self)
        topSizer.Add(rightPanel)
 
        verticalSizer.Add(topSizer)
 
        bottomSizer = wx.BoxSizer(wx.HORIZONTAL)
        bottomPanel = BottomPanel(self)
        bottomSizer.Add(bottomPanel, 1, wx.ALL)
 
        verticalSizer.Add(bottomSizer)
 
        self.SetSizerAndFit(verticalSizer)
        self.Centre()
        self.Show()
        self.SetBackgroundColour(wx.Colour(255, 170, 5))

Voilà, ce n'est pas compliqué au final.

**loula05** · 05/03/2019, 10h06

j'arrive pas a comprendre trop le positionnement des nouvelles panels est ce que ca depend des size que vous avez defini ?pouvez vous m'expliquer le 2ème code svp ce que vous avez ajouter et changer dans les sizes

merci d'avance et merci pour les exemples

**bistouille** · 05/03/2019, 15h31

Salut.

Non, le posiitionnement ne dépend pas des dimensions des panels, pour comprendre il faut s'exercer avec des choses simples et au strict minimum. Je ne suis pas vraiment un utilisateur de wx, voici un exemple de comment ordonner 4 panels dans une simple Frame de dimensions fixées avec GrdiBagSizer, aucune dimension de panel n'est fixée, les dimensions sont faites en fonction des colonnes notament le span et les EXPAND et AddGrowable* pour les étirements.

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
import wx
 
class MasterFrame(wx.Frame) :
    def __init__(self) :
        super().__init__(None, title='test agencement', size=wx.Size(600, 450))
 
        header = Header(self)
        body = Body(self)
        footer = Footer(self)
        menu = Menu(self)
 
        grid = wx.GridBagSizer(0, 0)
        # 70% pour colonne gauche, 30% pour la droite
        grid.Add(header, pos=(0, 0), span=(1, 7), flag=wx.EXPAND)
        grid.Add(body, pos=(1, 0), span=(1, 7), flag=wx.EXPAND)
        grid.Add(footer, pos=(2, 0), span=(1, 7), flag=wx.EXPAND)
        grid.Add(menu, pos=(0, 7), span=(3, 3), flag=wx.EXPAND)
 
        for i in range(3) :
            grid.AddGrowableRow(i)
 
        for i in range(10) :
            grid.AddGrowableCol(i)
 
        self.SetSizer(grid)
        self.Show()
 
class Header(wx.Panel) :
    def __init__(self, parent) :
        super().__init__(parent)
        self.SetBackgroundColour('blue')
 
class Body(wx.Panel) :
    def __init__(self, parent) :
        super().__init__(parent)
        self.SetBackgroundColour('white')
 
class Footer(wx.Panel) :
    def __init__(self, parent) :
        super().__init__(parent)
        self.SetBackgroundColour('red')
 
class Menu(wx.Panel) :
    def __init__(self, parent) :
        super().__init__(parent)
        self.SetBackgroundColour('orange')
 
if __name__ == '__main__' :
    app = wx.App()
    mf = MasterFrame()
    app.MainLoop()

Pour bien comprendre, il faut s'exercer sur des choses très basiques, quelques lignes colonnes suffisent, puis tester le GridSizer, BoxSizer, GridBagSizer, comprendre le fonctionnement de chacun, jusqu'à voir quels sont les avantages des uns par rapport aux autres, quand il sera plus judicieux d'opter pour untel selon ce que l'on désire obtenir dans une fenêtre. Tout cela demande du temps, beaucoup de temps d'apprentissage, c'est plus facile si l'on a déjà une expérience avec une autre bibliothèque graphique, mais vu qu'il semble que tu débutes totalement, cela va te demander plus de temps, et ce temps n'est pas à compter en heures ni jours, mais plus en semaines, voire mois.

**loula05** · 05/03/2019, 21h20

Salut ,

oui j'ai essayé de comprendre mieux , oui ça prend du temps mais j'arrive à comprendre et faire des choses simple , je sais que ça prendre plus des semaines mais c'est pas grave

j'ai aucun expérience avec les interfac graphique mais j ai un niveau en python. j'essai de lire de comprendre etape par etape

merci d'avance

**loula05** · 06/03/2019, 08h20

Bonjour,

j'ai une question un peu compliqué j'aimerai bien avoir une réponse

est ce que wxPython permet de créer des sites web ou non ? ou il y a t il un module dans wxpython qui permet ça ?

merci

regler le positionnement des bouttons au centre des panels! [Python 3.X]

wxPython

Discussions similaires

Partager

Partager