Introduction to Computer Programming                        

Complete the following investigations:

Graphical User Interfaces-Investigation

Canvases

Frames, Buttons and Input Boxes

Graphical User Interfaces-Investigation

Canvases

A graphical user interface, or GUI, allows code to be visualized and shown to the user.  Further, input can be received from the user in the form of input boxes, mouse clicks or keystrokes.

Copy this document and answer all questions.  Embed your final document into your website.

Type in the following code and answer the questions about what each piece of code does.

• Describe what this program does?  How is it different than previous programs?

• It creates a black box with three letters in different styles.

• What happens if you change the numbers in line 8 to 200 and 200?  What about 200, 300?  Describe what these numbers stand for in regards to the GUI.

• The box gets larger according to the dimensions.

•  Where do you think the origin is?

• Top left corner.

• Change the numbers (20, 20) in line 4 to [30, 30].  What effect does this have on the drawing?

• “A” moves diagonally down and to the right.

• Change the number 12 on line 4 to 24.  What effect does this have on the drawing?

• The “A” gets larger.

• Change “canvas” on lines 3, 4, 5 and 6 to “picture”.  Does this have an effect on the drawing?

• No.

• Change “draw_handler” on line 3 and 9 to “drawHandler”, there are two instances of this on line 9.  Does this have an effect on the drawing?

• Changing the first draw_handler on line 9 produces an error.

• Change line 9 to frame.set_draw_handler(drawHandler).  Does this have an effect on the drawing?   Why is this different than the change made in #6?

• “Set_draw_handler” is a built in function so it can’t be changed, but the variable “draw_handler” I created can be changed.

• Create concentric circles (3 of them).  They should have the same center and be a different color.  Does the order matter?  You will need to look in the API (docs).  Write your code below.

• canvas.draw_circle((50, 50), 20, 5, 'Red')
• canvas.draw_circle([50, 50], 30, 5, 'Orange')
• canvas.draw_circle((50, 50), 40, 5, 'Purple')

• Create a pentagon (does NOT have to be regular) that has a blue line for a border.  Write your  code below.

• canvas.draw_polygon([[50, 10], [10, 40], [30, 90], [70, 90], [90, 40]], 5, 'Blue')

•  Look in the codeskulptor docs.  Find the “rainbow canvas” example (below).  Run this program and explain HOW it is making the background change.

• Every 500 milliseconds, the program changes the color than the handler draws.

Introduction to Computer Programming                        

Graphical User Interfaces-Investigation

Frames, Buttons and Input Boxes

A graphical user interface, or GUI, allows code to be visualized and shown to the user.  Further, input can be received from the user in the form of input boxes, mouse clicks or keystrokes.

Type in the following code and answer the questions about what each piece of code does.

Questions to Answer:

• What happens when you change the numbers in line 3 from 500 to 250?  What do you think the numbers stand for?

• It makes the frame smaller, because the numbers represent the dimensions.

• Change the 50 in line 14 to another number, what does this adjust in the screen?

• The length of the input box.

• Comment out line 16, what happens when you run the program?

• Nothing is drawn in the frame.

• What would you change so that the program would determine if the user entered an even number?

• Add a conditional inside input_handler.

• Add an input box that doubles value that is added.  This should be printed to the CONSOLE.  What does this tell you about the data type that comes through the input box?

• It is always a string.

• Add a button (called “Divisible by 6?”) that evaluates if the number entered in the input box is divisible by 6.  This should be printed to the CONSOLE.  You will need to create a global change to a variable within both the input_handler and the button handler that you create.  What happens when “Divisible by 6?” is pressed before a number is entered in the input box?  Add your code below.

• There is an error if you press the button too early.
• def button_handler():
•     global text
•     if int(text) % 6 == 0:
•         print "Yes."
• def input_handler(text_input):
•     global text
•     text = text_input
•     print 2 * text_input

• Can you get the message in #7 to print on the canvas?  Add your code below.
• def button_handler():
•     print "You clicked me woo"
•    
• but = frame.add_button("Button", button_handler)