Making Python Pretty!

1. Making Python Pretty!

2. How to Use This Presentation… • Download a copy of this presentation to your ‘Computing’ folder. • Follow the code examples, and put a screen capture of your code into the presentation when you are asked to. When you see a green box with a python, put your own notes & answers in.

3. I’m stuck!!! • 1 – Read the instructions again. • 2 - Check the notes in your folder. • 3 – Ask someone sitting close by • THEN – ask me! 3b4Me

4. Tell Me How it’s Going… • Use the square at the top of each slide to tell me how you are feeling about the task by changing the colour. I’ve tried 3b4Me and I’m stuck! I’m OK! It’s hard, but I’m trying!

5. Is There Any Homework? Yes! The first lesson of every week, you are still handing in a Takeaway Homework Task of your choosing.

6. Tkinter – The Visual Tool So far we have worked with command line. A GUI is an interface that contains images & buttons Graphical User Interface

7. Things to remember about a GUI indows cons enus ointers

8. What are we creating? Our objective over the next few lessons is to create a version of noughts and crosses which will allow you to: • Create buttons • Use labels • Manipulate an array • Create line drawings

9. Creating Your Code • To create a GUI, you will need to import the tkinter library file. A library file is a…

10. Creating Your Code Next, we need to create a window. Give your window a title and a width & height. The frame is the window the program runs in & .pack() places things in the screen. When I ran my code, my screen looked like this:

11. Creating Your Code After our frame.pack(), add in the following two frames to organise the items on the screen. When I call a function with a variable name in it, this is called a …. These allow me to…

12. Creating Your Code Next, we will create out noughts and crosses board. This is a square where we will draw the lines to make Os & Xs. A canvas works by creating a grid of pixels which use coordinates to draw. This works in a similar way to vector graphics. A pixel is…. A vector graphic is useful because….

13. Creating Your Code Our next challenge is to create some labels which will show messages to our user. In this code, I am using labels instead of the ________ function that I used in command line. Labels are better for users because…..

14. Creating Your Code The final line of the program is window.mainloop() This allows your program to run all of its code. As you add new code into your program, this should remain the final line of your code. When I run my code, it looks like this:

15. Creating Your Code The next stage is to create the variables. These are an integer to count turns, and a 2 dimensional array for the board. A noughts and crosses board looks like _______. Therefore, my array must look like ______.

16. Creating Your Code The next stage is to create a procedure which draws a O or a X on the canvas. This code is on the next slide! Your procedure goes in here (between import & turn = 1): Procedures are good practice when coding because:

17. Procedure This procedure expects 8 parameters! Annotate this code to explain what it does. The first one has been done for you…

18. The Alpha Test There are three types of testing: Alpha, Beta & Acceptance Alpha testing happens while the developer is still coding. When I run my code, it looks like this: So far the errors I have found have been… I fixed them by….

19. Getting Cross (or Nought) Draw an algorithm to show the process of clicking a button to run the procedure we have just written: Right now, we have a procedure to write a shape onto the board, but no eventto triggerthe code to run. For this game, our trigger will be our user clicking a button on the screen to tell us which square they want to play. Plan first!

20. Creating Your Code Each of these numbers relates to a parameter in the drawStuff procedure. 1 – x coordinate 1 – y coordinate 60 – left for oval 50 - top for oval 10 – point 1 of cross 10 – point 2 of cross 100 – point 3 of cross 100 – point 4 of cross TLbtn is the name created for ‘Top Left Button’ – you can give this a name that means something to you. Using lambda before the procedure means that it isn’t run until the button is clicked. Why is this important?:

21. Understanding Your Code We have now coded one out of nine squares. Change the screen shot to one of your program & explain what is on the screen so far…

22. Buttons Buttons Everywhere Now we need to create a button for all 9 of the noughts and crosses board. Don’t worry, we’ve already worked out the coordinates for you!

23. Understanding Your Code We have now coded nine out of nine squares. Change the screen shot to one of your program & explain what is on the screen so far…

24. Procedure 2 You may have noticed in our first procedure that we included a procedure call to checkStuff() but hadn’t written it yet. We are now going to write this below the drawStuff() procedure. When testing my game, I’ve found that it isn’t finished yet because….

25. If all three are the same, you win! Procedure 2 Annotate this code to explain what it does. The first two have been done for you… This writes each line of the array out to a label

26. Understanding Your Code We have now coded the part of our code which checks for a winner! Change the screen shot to one of your program & explain what is on the screen so far…

27. Procedure 3 We’re nearly there! Our final part of the program is to clear the board and restart the game. We can do this with a button and one final procedure which resets all of our variables. The variables I may need to reset to start my game again are…. If I didn’t reset these variables, my game would….

28. Procedure 3 This removes all our drawings (lines & ovals) Annotate this code to explain what it does. The first one has been done for you…

29. Click Me! This button code is placed after the game buttons that we have already created. delbtn is the name created for ‘Delete everything Button’ – you can give this a name that means something to you. Now I have finished my code, when I run my program it looks like this:

30. Test It! Once a program has been written, it must be tested. Complete the testing table on the next slide and add in your own tests for standard, erroneous and extreme data. A standard data test means…. An erroneous data test means…. An extreme data test means….

31. Test It!

32. Test It More! Once a program has been written and tested, you are ready to try Beta Testing. Ask a friend to test your game and fill in the box below. I tried to break the game by…. Some errors I found were…. It was good because….

33. Evaluate It! You have reached the end of your development cycle. You have planned, developed and tested, which means it’s time to evaluate. My game met the criteria of noughts and crosses because…. I think I developed my code [well? Ok? Brilliantly?] because…. Some feedback I had was…. It was good / bad because…. In future, I could improve…..