Re: Best way to learn building gui?
Re: Best way to learn building gui?
To a degree yes, using Sizers specifically, which auto-space buttons, though that doesn't always give the desired results, and troubleshooting the buttons can be a bit troublesome when it happens. Placing them manually is more taking into account the size of each button when placing them so they don't overlap, if you have a button thats 75 by 22 and you place it at 0,0, then the next button below it should be placed at 0,22 or more to account for the first buttons height. Or if your putting a button to the right of the first, it should be at 75,0 at a minimum, to account for the first buttons width.Either approach is fine though, here's an example using sizers:import wx
class MyForm(wx.Frame):
def __init__(self):
wx.Frame.__init__(self, None, wx.ID_ANY, title="Key Press Tutorial", size=(640,480))
#Add a panel so it looks correct on all platforms
panel = wx.Panel(self, wx.ID_ANY)
#create a visual button and label it ok
btn = wx.Button(panel, label="OK")
#bind button to button press event
btn.Bind(wx.EVT_BUTTON, self.onBtnPress)
#create a second button
btn2 = wx.Button(panel, label="DOKEY")
#bind the second button to button press event
btn2.Bind(wx.EVT_BUTTON, self.onBtnPress)
#create a sizer for auto-positioning buttons vertically
sizer = wx.BoxSizer(wx.VERTICAL)
#add button 1 to the sizer, default size, no styles, 10 pixel spacing
sizer.Add(btn,0,wx.ALL,10)
#add button 2 to sizer
sizer.Add(btn2,0,wx.ALL,10)
#set sizer to panel
panel.SetSizer(sizer)
#refresh the layout
panel.Layout()
def onBtnPress(self, event):
print("button pressed!")
# Run the program
if __name__ == "__main__":
app = wx.PySimpleApp()
#load the frame class
frame = MyForm()
#show it so its visible and active
frame.Show()
app.MainLoop()In this example, the second button is below the first, there is also a 10 pixel border of empty space around each button, so the top button is 10 pixels from the top and left of the window, and the bottom button is 10 pixels from the left of the window, and 20 from the first button, adding together both of their respective borders. The Sizer used aligns items vertically, the other type of sizer you can use is wx.HORIZONTAL, which aligns items horizontally, naturally. You can also add sizers to other sizers, so if I create 2 vertical sizers, add two buttons to each, then add both the vertical sizers to a horizontal sizer, they would appear as a square of buttons, one in the upper left, upper right, lower left, and lower right in relation to each other. Here's another example demonstrating this:import wx
class MyForm(wx.Frame):
def __init__(self):
wx.Frame.__init__(self, None, wx.ID_ANY, title="Key Press Tutorial", size=(640,480))
#Add a panel so it looks correct on all platforms
panel = wx.Panel(self, wx.ID_ANY)
#create a visual button and label it ok
btn = wx.Button(panel, label="One")
#create a second button
btn2 = wx.Button(panel, label="Two")
#create a second button
btn3 = wx.Button(panel, label="Three")
#create a second button
btn4 = wx.Button(panel, label="Four")
#create a sizer for auto-positioning buttons vertically
sizer1 = wx.BoxSizer(wx.VERTICAL)
#add button 1 to the sizer, default size, no styles, 10 pixel spacing
sizer1.Add(btn,0,wx.ALL,10)
#add button 2 to sizer
sizer1.Add(btn2,0,wx.ALL,10)
#create a sizer for auto-positioning buttons vertically
sizer2 = wx.BoxSizer(wx.VERTICAL)
#add button 1 to the sizer, default size, no styles, 10 pixel spacing
sizer2.Add(btn3,0,wx.ALL,10)
#add button 2 to sizer
sizer2.Add(btn4,0,wx.ALL,10)
#create a horizontal sizer to hold the two vertical sizers next to each other
hor = wx.BoxSizer(wx.HORIZONTAL)
hor.Add(sizer1,0,wx.ALL)
hor.Add(sizer2,0,wx.ALL)
#set horitontal sizer to panel
panel.SetSizer(hor)
#refresh the layout
panel.Layout()
# Run the program
if __name__ == "__main__":
app = wx.PySimpleApp()
#load the frame class
frame = MyForm()
#show it so its visible and active
frame.Show()
app.MainLoop()You can also check out the documentation on sizers [here] which has other examples.
URL: https://forum.audiogames.net/post/487225/#p487225
--
Audiogames-reflector mailing list
Audiogames-reflector@sabahattin-gucukoglu.com
https://sabahattin-gucukoglu.com/cgi-bin/mailman/listinfo/audiogames-reflector
Re: Best way to learn building gui?
Re: Best way to learn building gui?
i read all your advices carefully. but, is there an easier way to avoid from overlapping buttons with eachother? magurp244 wrote:I'm aware the button doesn't work in the given example, it being a keyboard example after all, heh.Images are generally represented as squares of varying dimensions in width and height, so its more using geometry to position things in a 2D area with an x and y, rather than using geometric shapes, at least until you get into things like vertexes and polygons. Even seemingly non-square sprites or shapes are generally square and use filtering and transparency to give the illusion that they are not. For example enemies in the classic game Doom are all actually rectangles with images using transparency to remove their borders and appear non-square.The Geometric approach is rather straight forward really, lets say you create a window thats 640 by 480. The upper left of that window is 0,0, and the same applies when positioning images with regards to their upper left corner. If you place an image at 10,0 it will be positioned to the right of the very left side of the window. If you place the image at -10,0, depending on the images width, it will be placed to the left of the left border of the window, and part of it will be partially missing because its out of the windows bounds. The same applies to height, where if you were to put an image at 0,10, the image would move down from the top of the window, and if you put it at 0,-10 the image would move up out of view beyond the border of the window.Knowing this, you can use geometry to place images within the bounds of a window fairly easily. Lets say you have a button thats 32 pixels wide and 24 pixels high, and you want to place that button in the middle of the screen. You would take the width of the window, 640, and the height of the window, 480, and divide them by two. So, 320 by 240. But if you position the button at that point, it doesn't account for the buttons size, and make look off center because it will position it based on the buttons upper left corner, so you also need to subtract half the width and height of the button from the total to perfectly center the button in the middle of the screen. So (screen_width/2) - (button_width/2) = x, and (screen_height/2) - (button_height/2) = y, then you have a perfectly centered button.To illustrate this, and show how to bind a working button, here is another example:import wx
class MyForm(wx.Frame):
def __init__(self):
wx.Frame.__init__(self, None, wx.ID_ANY, title="Key Press Tutorial", size=(640,480))
#Add a panel so it looks correct on all platforms
panel = wx.Panel(self, wx.ID_ANY)
#create a visual button and label it ok
btn = wx.Button(panel, label="OK",pos=(0,0))
#set buttons position to center of frame
btn.SetPosition(((self.GetClientSize()[0]/2)-(btn.GetSize()[0]/2),(self.GetClientSize()[1]/2)-(btn.GetSize()[1]/2)))
#bind button to button press event
btn.Bind(wx.EVT_BUTTON, self.onBtnPress)
def onBtnPress(self, event):
print("button pressed!")
# Run the program
if __name__ == "__main__":
app = wx.PySimpleApp()
#load the frame class
frame = MyForm()
#show it so its visible and active
frame.Show()
app.MainLoop()Note that in this example, if you resize the window the button won't reposition itself in the new equivalent of center, using things like Sizers are best for things like that, or updating the buttons position when a resize event occurs, or just not letting the window be resizable.
URL: https://forum.audiogames.net/post/487121/#p487121
--
Audiogames-reflector mailing list
Audiogames-reflector@sabahattin-gucukoglu.com
https://sabahattin-gucukoglu.com/cgi-bin/mailman/listinfo/audiogames-reflector
Re: Best way to learn building gui?
Re: Best way to learn building gui?
I'm aware the button doesn't work in the given example, it being a keyboard example after all, heh.Images are generally represented as squares of varying dimensions in width and height, so its more using geometry to position things in a 2D area with an x and y, rather than using geometric shapes, at least until you get into things like vertexes and polygons. Even seemingly non-square sprites or shapes are generally square and use filtering and transparency to give the illusion that they are not. For example enemies in the classic game Doom are all actually rectangles with images using transparency to remove their borders and appear non-square.The Geometric approach is rather straight forward really, lets say you create a window thats 640 by 480. The upper left of that window is 0,0, and the same applies when positioning images with regards to their upper left corner. If you place an image at 10,0 it will be positioned to the right of the very left side of the window. If you place the image at -10,0, depending on the images width, it will be placed to the left of the left border of the window, and part of it will be partially missing because its out of the windows bounds. The same applies to height, where if you were to put an image at 0,10, the image would move down from the top of the window, and if you put it at 0,-10 the image would move up out of view beyond the border of the window.Knowing this, you can use geometry to place images within the bounds of a window fairly easily. Lets say you have a button thats 32 pixels wide and 24 pixels high, and you want to place that button in the middle of the screen. You would take the width of the window, 640, and the height of the window, 480, and divide them by two. So, 320 by 240. But if you position the button at that point, it doesn't account for the buttons size, and make look off center because it will position it based on the buttons upper left corner, so you also need to subtract half the width and height of the button from the total to perfectly center the button in the middle of the screen. So (screen_width/2) - (button_width/2) = x, and (screen_height/2) - (button_height/2) = y, then you have a perfectly centered button.To illustrate this, and show how to bind a working button, here is another example:import wx
class MyForm(wx.Frame):
def __init__(self):
wx.Frame.__init__(self, None, wx.ID_ANY, title="Key Press Tutorial", size=(640,480))
#Add a panel so it looks correct on all platforms
panel = wx.Panel(self, wx.ID_ANY)
#create a visual button and label it ok
btn = wx.Button(panel, label="OK",pos=(0,0))
#set buttons position to center of frame
btn.SetPosition(((self.GetClientSize()[0]/2)-(btn.GetSize()[0]/2),(self.GetClientSize()[1]/2)-(btn.GetSize()[1]/2)))
#bind button to button press event
btn.Bind(wx.EVT_BUTTON, self.onBtnPress)
def onBtnPress(self, event):
print("button pressed!")
# Run the program
if __name__ == "__main__":
app = wx.PySimpleApp()
#load the frame class
frame = MyForm()
#show it so its visible and active
frame.Show()
app.MainLoop()Note that in this example, if you resize the window the button won't reposition itself in the new equivalent of center, using things like Sizers are best for things like that, or updating the buttons position when a resize event occurs, or just not letting the window be resizable.
URL: https://forum.audiogames.net/post/486950/#p486950
--
Audiogames-reflector mailing list
Audiogames-reflector@sabahattin-gucukoglu.com
https://sabahattin-gucukoglu.com/cgi-bin/mailman/listinfo/audiogames-reflector
Re: Best way to learn building gui?
Re: Best way to learn building gui?
I'm aware the button doesn't work in the given example, it being a keyboard example after all, heh.Images are generally represented as squares of varying dimensions in width and height, so its more using geometry to position things in a 2D area with an x and y, rather than using geometric shapes, at least until you get into things like vertexes and polygons. Even seemingly non-square sprites or shapes are generally square and use filtering and transparency to give the illusion that they are not. For example enemies in the classic game Doom are all actually rectangles with images using transparency to remove their borders and appear non-square.The Geometric approach is rather straight forward really, lets say you create a window thats 640 by 480. The upper left of that window is 0,0, and the same applies when positioning images with regards to their upper left corner. If you place an image at 10,0 it will be positioned to the right of the very left side of the window. If you place the image at -10,0, depending on the images width, it will be placed to the left of the left border of the window, and part of it will be partially missing because its out of the windows bounds. The same applies to height, where if you were to put an image at 0,10, the image would move down from the top of the window, and if you put it at 0,-10 the image would move up out of view beyond the border of the window.Knowing this, you can use geometry to place images within the bounds of a window fairly easily. Lets say you have a button thats 32 pixels wide and 24 pixels high, and you want to place that button in the middle of the screen. You would take the width of the window, 640, and the height of the window, 480, and divide them by two. So, 320 by 240. But if you position the button at that point, it doesn't account for the buttons size, and make look off center because it will position it based on the buttons upper left corner, so you also need to subtract half the width and height of the button from the total to perfectly center the button in the middle of the screen. So (screen_width/2) - (button_width/2) = x, and (screen_height/2) - (button_height/2) = y, then you have a perfectly centered button.To illustrate this, and show how to bind a working button, here is another example:import wx
class MyForm(wx.Frame):
def __init__(self):
wx.Frame.__init__(self, None, wx.ID_ANY, title="Key Press Tutorial", size=(640,480))
#Add a panel so it looks correct on all platforms
panel = wx.Panel(self, wx.ID_ANY)
#create a visual button and label it ok
btn = wx.Button(panel, label="OK",pos=(0,0))
#set buttons position to center of frame
btn.SetPosition(((self.GetClientSize()[0]/2)-(btn.GetSize()[0]/2),(self.GetClientSize()[1]/2)-(btn.GetSize()[1]/2)))
#bind button to button press event
btn.Bind(wx.EVT_BUTTON, self.onBtnPress)
def onBtnPress(self, event):
print("button pressed!")
# Run the program
if __name__ == "__main__":
app = wx.PySimpleApp()
#load the frame class
frame = MyForm()
#show it so its visible and active
frame.Show()
app.MainLoop()Note that in this example, if you resize the window the button won't reposition itself in the new equivalent of center, using things like Sizers are best for things like that, or updating the buttons position when a resize event occurs.
URL: https://forum.audiogames.net/post/486950/#p486950
--
Audiogames-reflector mailing list
Audiogames-reflector@sabahattin-gucukoglu.com
https://sabahattin-gucukoglu.com/cgi-bin/mailman/listinfo/audiogames-reflector
Re: Best way to learn building gui?
Re: Best way to learn building gui?
I'm aware the button doesn't work in the given example, it being a keyboard example after all, heh.Images are generally represented as squares of varying dimensions in width and height, so its more using geometry to position things in a 2D area with an x and y, rather than using geometric shapes, at least until you get into things like vertexes and polygons. Even seemingly non-square sprites or shapes are generally square and use filtering and transparency to give the illusion that they are not. For example enemies in the classic game Doom are all actually rectangles with images using transparency to remove their borders and appear non-square.The Geometric approach is rather straight forward really, lets say you create a window thats 640 by 480. The upper left of that window is 0,0, and the same applies when positioning images with regards to their upper left corner. If you place an image at 10,0 it will be positioned to the right of the very left side of the window. If you place the image at -10,0, depending on the images width, it will be placed to the left of the left border of the window, and part of it will be partially missing because its out of the windows bounds. The same applies to height, where if you were to put an image at 0,10, the image would move down from the top of the window, and if you put it at 0,-10 the image would move up out of view beyond the border of the window.Knowing this, you can use geometry to place images within the bounds of a window fairly easily. Lets say you have a button thats 32 pixels wide and 24 pixels high, and you want to place that button in the middle of the screen. You would take the width of the window, 640, and the height of the window, 480, and divide them by two. So, 320 by 240. But if you position the button at that point, it doesn't account for the buttons size, and make look off center because it will position it based on the buttons upper left corner, so you also need to subtract half the width and height of the button from the total to perfectly center the button in the middle of the screen. So (screen_width/2) - (button_width/2) = x, and (screen_height/2) - (button_height/2) = y, then you have a perfectly centered button.To illustrate this, and show how to bind a working button, here is another example:import wx
class MyForm(wx.Frame):
def __init__(self):
wx.Frame.__init__(self, None, wx.ID_ANY, title="Key Press Tutorial", size=(640,480))
#Add a panel so it looks correct on all platforms
panel = wx.Panel(self, wx.ID_ANY)
#create a visual button and label it ok
btn = wx.Button(panel, label="OK",pos=(0,0))
#set buttons position to center of frame
btn.SetPosition(((self.GetClientSize()[0]/2)-(btn.GetSize()[0]/2),(self.GetClientSize()[1]/2)-(btn.GetSize()[1]/2)))
#bind button to button press event
btn.Bind(wx.EVT_BUTTON, self.onBtnPress)
def onBtnPress(self, event):
print("button pressed!")
# Run the program
if __name__ == "__main__":
app = wx.PySimpleApp()
#load the frame class
frame = MyForm()
#show it so its visible and active
frame.Show()
app.MainLoop()
URL: https://forum.audiogames.net/post/486950/#p486950
--
Audiogames-reflector mailing list
Audiogames-reflector@sabahattin-gucukoglu.com
https://sabahattin-gucukoglu.com/cgi-bin/mailman/listinfo/audiogames-reflector
Re: Best way to learn building gui?
Re: Best way to learn building gui? What geometric shapes do you use or do you only imagine the screen while placing?that ok button doesn't work btw.magurp244 wrote:Sort of. I'll often work on small examples of things and learn how they function in terms of syntax and implementation, and then refer to those examples later if needed for convience, a quick copy paste or refresher for example. In the case of the example I posted, I pulled it from a folder of reference scripts for various things I use, or may use in the future. For placing buttons, it really depends on the use case and libraries involved. For example in Pyglet or Pygame I'll typically manually place everything, mostly because they don't much use things like auto-positioning elements. With wxPython some buttons i'll manually place geometrically, though for a lot of them I tend to rely on auto placement so they scale properly when resizing windows in relation to other things, or a combination thereof. URL: https://forum.audiogames.net/post/486855/#p486855 -- Audiogames-reflector mailing list Audiogames-reflector@sabahattin-gucukoglu.com https://sabahattin-gucukoglu.com/cgi-bin/mailman/listinfo/audiogames-reflector
Re: Best way to learn building gui?
Re: Best way to learn building gui? Sort of. I'll often work on small examples of things and learn how they function in terms of syntax and implementation, and then refer to those examples later if needed for convience, a quick copy paste or refresher for example. In the case of the example I posted, I pulled it from a folder of reference scripts for various things I use, or may use in the future. For placing buttons, it really depends on the use case and libraries involved. For example in Pyglet or Pygame I'll typically manually place everything, mostly because they don't much use things like auto-positioning elements. With wxPython some buttons i'll manually place geometrically, though for a lot of them I tend to rely on auto placement so they scale properly when resizing windows in relation to other things, or a combination thereof. URL: https://forum.audiogames.net/post/486444/#p486444 -- Audiogames-reflector mailing list Audiogames-reflector@sabahattin-gucukoglu.com https://sabahattin-gucukoglu.com/cgi-bin/mailman/listinfo/audiogames-reflector
Re: Best way to learn building gui?
Re: Best way to learn building gui? @2Did you memorise all these methods and params? and also what method do you use for placing buttons, auto positioning or geometric way?i always find your posts helpful, thank you. URL: https://forum.audiogames.net/post/486283/#p486283 -- Audiogames-reflector mailing list Audiogames-reflector@sabahattin-gucukoglu.com https://sabahattin-gucukoglu.com/cgi-bin/mailman/listinfo/audiogames-reflector
Re: Best way to learn building gui?
Re: Best way to learn building gui?
A good way to learn is to pick a feature you plan on using, and play around with a small example of it, then move on to the next feature when you figure it out. One step at a time. Graphical GUI's also rely a bit on geometry for placement within a given frame or window, but can also handle auto placement a bit with dividers. For now though, here's an example for capturing key presses:import wx
class MyForm(wx.Frame):
def __init__(self):
wx.Frame.__init__(self, None, wx.ID_ANY, "Key Press Tutorial")
#Add a panel so it looks correct on all platforms
panel = wx.Panel(self, wx.ID_ANY)
#create a button and label it ok
btn = wx.Button(panel, label="OK")
#bind button to key press event, which calls onKeyPress when triggered
btn.Bind(wx.EVT_KEY_DOWN, self.onKeyPress)
#handle key press
def onKeyPress(self, event):
#get key value
keycode = event.GetKeyCode()
print(keycode)
if keycode == wx.WXK_SPACE:
print("you pressed the spacebar!")
#skip event so it isn't blocking
event.Skip()
# Run the program
if __name__ == "__main__":
app = wx.PySimpleApp()
#load the frame class
frame = MyForm()
#show it so its visible and active
frame.Show()
app.MainLoop()The button appears in the upper left corner in the given example, because its position is not defined.
URL: https://forum.audiogames.net/post/485797/#p485797
--
Audiogames-reflector mailing list
Audiogames-reflector@sabahattin-gucukoglu.com
https://sabahattin-gucukoglu.com/cgi-bin/mailman/listinfo/audiogames-reflector
Best way to learn building gui?
Best way to learn building gui? Novadays trying to learn Wx python but, lots of things to learn, many button types etc. what would you suggest? URL: https://forum.audiogames.net/post/485749/#p485749 -- Audiogames-reflector mailing list Audiogames-reflector@sabahattin-gucukoglu.com https://sabahattin-gucukoglu.com/cgi-bin/mailman/listinfo/audiogames-reflector
