Hi, I'm writing a little learning game for young kids, mostly to help my own girl learn a few things. I've chosen colours first, but hope to adapt it for more complex ideas later. I'll be releasing it GPL3, if I ever get it done, so feel free to reuse the code, if you find it useful.

I do need some help. I've solved a few problems, but I think you guys can help me come up with better ways to solve the same problems.

It works OK as is, but it could be better. Here are problems currently.

1. I want the buttons to be in different positions from instance to instance, so the kids don't know that the "blue" button will always be in the lower right corner. I'm used a random number generator and some preset position variables, but I'm pretty sure this isn't the best way to do it.

2. I'd like to be able to resize the entire frame, and have the buttons resize themselves, so it'll work on monitors of various sizes, but I learned how to write the app with png's of a standard size, in a standard position, and don't yet know how to rewrite it to take advantage of something like gridsizer. I tried to adapt my code defining the buttons to use gridsizer but it wouldn't work.

3. I'd like to change the size of the buttons when they are clicked on, so they take up the whole frame, just for 4 seconds or so, then destroy that button altogether. I haven't tried this yet. If anyone has some idea's, I'd love to hear them.

4. When all the buttons are gone, I'd like to reload either the same lesson, or a new one, rinse, and repeat.

#!/usr/bin/python

# playing with wxPython's
# wx.BitmapButton(parent, id, bitmap, pos, size, style)
# show a different image for selected (depressed) button
# change the button image on button click 

import wx
import pygame
import random
pygame.init()
bubba=random.randrange(1,5)
if bubba==1:
	first=10
	second=390
	third=190
	fourth=550
	fifth=370
	sixth=10
if bubba==2:
	first=390
	second=10
	third=550
	fourth=190
	fifth=10
	sixth=370
if bubba==3:
	first=10
	second=390
	third=190
	fourth=370
	fifth=550
	sixth=10
if bubba==4:
	first=390
	second=10
	third=370
	fourth=190
	fifth=10
	sixth=550
class MyFrame(wx.Frame):
    def __init__(self, parent, mytitle, mysize):
        wx.Frame.__init__(self, parent, wx.ID_ANY, mytitle, size=mysize)

        # create a BitmapButton as an input widget
        # pick a button image file you have (.bmp .jpg .gif or .png)
        image_fileBLACK = r"cards-colors/BLACK.png"
        self.imageBLACK = wx.Bitmap(image_fileBLACK)
        image_fileBLUE = r"cards-colors/BLUE.png"
        self.imageBLUE = wx.Bitmap(image_fileBLUE)
        image_fileGREEN = r"cards-colors/GREEN.png"
        self.imageGREEN = wx.Bitmap(image_fileGREEN)
        image_fileORANGE = r"cards-colors/ORANGE.png"
        self.imageORANGE = wx.Bitmap(image_fileORANGE)

        image_filePURPLE = r"cards-colors/PURPLE.png"
        self.imagePURPLE = wx.Bitmap(image_filePURPLE)
        image_fileRED = r"cards-colors/RED.png"
        self.imageRED = wx.Bitmap(image_fileRED)
        image_fileWHITE = r"cards-colors/WHITE.png"
        self.imageWHITE = wx.Bitmap(image_fileWHITE)
        image_fileYELLOW = r"cards-colors/YELLOW.png"
        self.imageYELLOW = wx.Bitmap(image_fileYELLOW)

        image_fileblackc = r"cards-colors/blackc.png"
        self.imageblackc = wx.Bitmap(image_fileblackc)
        image_filebluec = r"cards-colors/bluec.png"
        self.imagebluec = wx.Bitmap(image_filebluec)
        image_filegreenc = r"cards-colors/greenc.png"
        self.imagegreenc = wx.Bitmap(image_filegreenc)
        image_fileorangec = r"cards-colors/orangec.png"
        self.imageorangec = wx.Bitmap(image_fileorangec)


        image_filepurplec = r"cards-colors/purplec.png"
        self.imagepurplec = wx.Bitmap(image_filepurplec)
        image_fileredc = r"cards-colors/redc.png"
        self.imageredc = wx.Bitmap(image_fileredc)
        image_filewhitec = r"cards-colors/whitec.png"
        self.imagewhitec = wx.Bitmap(image_filewhitec)
        image_fileyellowc = r"cards-colors/yellowc.png"
        self.imageyellowc = wx.Bitmap(image_fileyellowc)
	button1x=10
	button1y=10

        self.button1 = wx.BitmapButton(self, 14, bitmap=self.imageBLACK,
            pos=(first, fifth),
            size=(self.imageBLACK.GetWidth()+15, self.imageBLACK.GetHeight()+15))
	self.button2 = wx.BitmapButton(self, 15, bitmap=self.imageBLUE,
            pos=(first, third),
            size=(self.imageBLUE.GetWidth()+15, self.imageBLUE.GetHeight()+15))
        self.button3 = wx.BitmapButton(self, 14, bitmap=self.imageGREEN,
            pos=(first, sixth),
            size=(self.imageGREEN.GetWidth()+15, self.imageGREEN.GetHeight()+15))
	self.button4 = wx.BitmapButton(self, 15, bitmap=self.imageORANGE,
            pos=(first, fourth),
            size=(self.imageORANGE.GetWidth()+15, self.imageORANGE.GetHeight()+15))

        self.button5 = wx.BitmapButton(self, 14, bitmap=self.imagePURPLE,
            pos=(second, fifth),
            size=(self.imagePURPLE.GetWidth()+15, self.imagePURPLE.GetHeight()+15))
	self.button6 = wx.BitmapButton(self, 15, bitmap=self.imageRED,
            pos=(second, third),
            size=(self.imageRED.GetWidth()+15, self.imageRED.GetHeight()+15))
        self.button7 = wx.BitmapButton(self, 14, bitmap=self.imageWHITE,
            pos=(second, sixth),
            size=(self.imageWHITE.GetWidth()+15, self.imageWHITE.GetHeight()+15))
	self.button8 = wx.BitmapButton(self, 15, bitmap=self.imageYELLOW,
            pos=(second, fourth),
            size=(self.imageYELLOW.GetWidth()+15, self.imageYELLOW.GetHeight()+15))
      
        # bind mouse click event to an action
        self.button1.Bind(wx.EVT_BUTTON, self.on_click1)
        self.button2.Bind(wx.EVT_BUTTON, self.on_click2)

        self.button3.Bind(wx.EVT_BUTTON, self.on_click3)
        self.button4.Bind(wx.EVT_BUTTON, self.on_click4)

        self.button5.Bind(wx.EVT_BUTTON, self.on_click5)
        self.button6.Bind(wx.EVT_BUTTON, self.on_click6)

        self.button7.Bind(wx.EVT_BUTTON, self.on_click7)
        self.button8.Bind(wx.EVT_BUTTON, self.on_click8)
        # create an output widget
        self.label = wx.StaticText(self, wx.ID_ANY, "", pos=(10, 100))

    def on_click1(self, event):
        """response to button press/click"""
        # changes the images on button click for 2.5 seconds
        self.button1.SetBitmapLabel(self.imageblackc)
        self.Update()
	pygame.mixer.music.load('sounds/black.ogg')
	pygame.mixer.music.play()
        wx.Sleep(2)
        self.button1.SetBitmapLabel(self.imageBLACK)


    def on_click2(self, event):
        """response to button press/click"""
        # changes the images on button click for 2.5 seconds
        self.button2.SetBitmapLabel(self.imagebluec)
        self.Update()
	pygame.mixer.music.load('sounds/blue.ogg')
	pygame.mixer.music.play()
        wx.Sleep(2)
        self.button2.SetBitmapLabel(self.imageBLUE)

    def on_click3(self, event):
        """response to button press/click"""
        # changes the images on button click for 2.5 seconds
        self.button3.SetBitmapLabel(self.imagegreenc)
        self.Update()
	pygame.mixer.music.load('sounds/green.ogg')
	pygame.mixer.music.play()
        wx.Sleep(2)
        self.button3.SetBitmapLabel(self.imageGREEN)


    def on_click4(self, event):
        """response to button press/click"""
        # changes the images on button click for 2.5 seconds
        self.button4.SetBitmapLabel(self.imageorangec)
        self.Update()
	pygame.mixer.music.load('sounds/orange.ogg')
	pygame.mixer.music.play()
        wx.Sleep(2)
        self.button4.SetBitmapLabel(self.imageORANGE)

    def on_click5(self, event):
        """response to button press/click"""
        # changes the images on button click for 2.5 seconds
        self.button5.SetBitmapLabel(self.imagepurplec)
        self.Update()
	pygame.mixer.music.load('sounds/purple.ogg')
	pygame.mixer.music.play()
        wx.Sleep(2)
        self.button5.SetBitmapLabel(self.imagePURPLE)


    def on_click6(self, event):
        """response to button press/click"""
        # changes the images on button click for 2.5 seconds
        self.button6.SetBitmapLabel(self.imageredc)
        self.Update()
	pygame.mixer.music.load('sounds/red.ogg')
	pygame.mixer.music.play()
        wx.Sleep(2)
        self.button6.SetBitmapLabel(self.imageRED)

    def on_click7(self, event):
        """response to button press/click"""
        # changes the images on button click for 2.5 seconds
        self.button7.SetBitmapLabel(self.imagewhitec)
        self.Update()
	pygame.mixer.music.load('sounds/white.ogg')
	pygame.mixer.music.play()
        wx.Sleep(2)
        self.button7.SetBitmapLabel(self.imageWHITE)


    def on_click8(self, event):
        """response to button press/click"""
        # changes the images on button click for 2.5 seconds
        self.button8.SetBitmapLabel(self.imageyellowc)
        self.Update()
	pygame.mixer.music.load('sounds/yellow.ogg')
	pygame.mixer.music.play()
        wx.Sleep(2)
        self.button8.SetBitmapLabel(self.imageYELLOW)

  



app = wx.App()
# create a MyFrame instance and show the frame
MyFrame(None, 'Mzz Bunns Learning Game()', (770, 730)).Show()

app.MainLoop()

I need to find some place to host the png's and .ogg's quick....

Ok, here is a link to the png's and oggs, the code above is in the tar.gz, just unpack, and run the python script. Easiest way I could think to do it. Thanks much.....

http://www.filedropper.com/game_1

Edited 7 Years Ago by aegis042404: n/a

Okay, sounds fun.

1. What i would do is not change where the buttons are, but what colour they are. This means that in your code you can have a sizer easily but the buttons can still change colour meaning blue will not always be down the bottom left of the screen.

2. Use a sizer, find a tutorial and run through it until they make sense. Remember there several types of sizers so take a look at them all.
As well, i wouldnt use PNG's to colour my buttons i would use a regular wx.Button with no text and just use this call to change the colour button.SetBackgroundColour("Green") A great sizer tutorial is here http://zetcode.com/wxpython/layout/

3. That one may be a bit harder seeing you are going to use sizers. An idea you could play around with is making the other buttons dissapear completely and then perhaps you could use the wx.EXPAND flag in your sizer and that would make it expand as soon as anything else wasnt there.

4. Oh gosh, i hate this kind of problem. When i am lazy i just use a simple exec("path/to/script.py") and that just restarts the program. But hopefully someone else will show you a better way to do that :)

Hope that helps :P

Edited 7 Years Ago by Paul Thompson: n/a

This article has been dead for over six months. Start a new discussion instead.