GUI Applications Announcements for This Lecture Prelim 2 - PowerPoint PPT Presentation

Lecture 24 GUI Applications

Announcements for This Lecture Prelim 2 Assignments • A6 due TOMORROW • Difficulty was reasonable § Complete it by midnight • Mean : 71, Median : 74 § Also, fill out survey • Just 2 points below target • A7 due December 3 • What do grades mean? § Instructions posted today § A : 80s+ (maybe 78+) § Focus of today’s lecture § B : 60s+ § 2.5 weeks including T-Day § C : 30+ § 2 weeks without the break • Final will be about same • Both are very important § Some easier, some harder § Each worth 8% of grade 11/14/17 GUI Applications 2

A Standard GUI Application Animates the application, like a movie 11/14/17 GUI Applications 3

A Standard GUI Application Check for user input Process user input Animates the Update the objects application, like a movie 11/14/17 GUI Applications 4

A Standard GUI Application Check for user input Process user input Animates the Update the objects application, like a movie Update display/view No change to objects 11/14/17 GUI Applications 5

Must We Write this Loop Each Time? while program_is_running: # Get information from mouse/keyboard # Handled by OS/GUI libraries # Your code goes here # Draw stuff on the screen # Handled by OS/GUI libraries 11/14/17 GUI Applications 6

Must We Write this Loop Each Time? while program_is_running: # Get information from mouse/keyboard Would like to # Handled by OS/GUI libraries “plug in” code # Your code goes here Why do we need to write this each time? # Draw stuff on the screen # Handled by OS/GUI libraries 11/14/17 GUI Applications 7

Must We Write this Loop Each Time? while program_is_running: # Get information from mouse/keyboard # Handled by OS/GUI libraries Method call (for loop body) • Write loop body # Your code goes here in an app class. application.update() • OS/GUI handles everything else. # Draw stuff on the screen Custom Application class # Handled by OS/GUI libraries 11/14/17 GUI Applications 8

Loop Invariants Revisited Normal Loops Application Properties of What are the x = 0 “external” vars “external” vars? i = 2 while program_running: # x = sum of squares of 2..i-1 # Get input while i <= 5: # Your code called here x = x + i*i application.update() i = i +1 # Draw # x = sum of squares of 2..5 11/14/17 GUI Applications 9

Loop Invariants Revisited Normal Loops Application Properties of What are the x = 0 “external” vars “external” vars? i = 2 while program_running: # x = sum of squares of 2..i # Get input while i <= 5: # Your code called here x = x + i*i application.update() i = i +1 # Draw # x = sum of squares of 2..5 Application is an object. It will have attributes ! 11/14/17 GUI Applications 10

Attribute Invariants = Loop Invariants # Constructor • Attributes are a way to game = GameApp(…) store value between calls … § Not part of call frame game.start() #Loop initialization § Variables outside loop # inv: game attributes are … • An application needs while program_running: § Loop attributes # Get input § Initialization method # Your code goes here (for loop, not __init__ ) game.update(time_elapsed) § Method for body of loop game.draw() • Attribute descriptions, # post: game attributes are … invariants are important 11/14/17 GUI Applications 11

Example: Animation class Animation(game2d.GameApp): See animation.py """App to animate an ellipse in a circle.""" def start(self): """Initializes the game loop.""" … def update(self,dt): """Changes the ellipse position.""" … def draw(self): """Draws the ellipse""" … 11/14/17 GUI Applications 12

Example: Animation class Animation(game2d.GameApp): See animation.py """App to animate an ellipse in a circle.""" Parent class that does hard stuff def start(self): """Initializes the game loop.""" … def update(self,dt): """Changes the ellipse position.""" … def draw(self): """Draws the ellipse""" … 11/14/17 GUI Applications 13

Example: Animation class Animation(game2d.GameApp): See animation.py """App to animate an ellipse in a circle.""" Parent class that does hard stuff def start(self): """Initializes the game loop.""" … Loop initialization Do NOT use __init__ def update(self,dt): """Changes the ellipse position.""" … Loop body def draw(self): """Draws the ellipse""" Use method draw() … defined in GObject 11/14/17 GUI Applications 14

What Attributes to Keep: Touch • Attribute touch in GInput Line segment = 2 points § The mouse press position § Or None if not pressed § Use self.input.touch inside your Current subclass definition Touch • Compare touch , last position § last None, touch not None: Previous Touch Mouse button pressed § last not None, touch None: Mouse button released See touch.py § last and touch both not None: Mouse dragged (button down) 11/14/17 GUI Applications 15

Input and Invariants • Attribute input is… Line segment = 2 points § A GInput object • Attribute input.touch is… § Either a Point2 or None Current § Location of mouse cursor Touch (if it is pressed) Previous • Attribute last is… Touch § Either a Point2 or None § input.touch in prev. frame See touch.py Relationship between two variables.

State: Changing What the Loop Does State ANIMATE_CIRCLE • State : Current loop activity § Playing game vs. pausing § Ball countdown vs. serve • Add an attribute state § Method update() checks state § Executes correct helper State ANIMATE_HORIZONTAL • How do we store state? § State is an enumeration ; one of several fixed values § Implemented as an int See state.py § Global constants are values 11/14/17 GUI Applications 17

Designing States • Each state has its own set of invariants. § Drawing? Then touch and last are not None § Erasing? Then touch is None, but last is not • Need rules for when we switch states § Could just be “check which invariants are true” § Or could be a triggering event (e.g. key press) • Need to make clear in class specification § What are the invariants for each state ? § What are the rules to switch to a new state? 11/14/17 GUI Applications 18

Triggers: Checking Click Types • Double click = 2 fast clicks Is it fast enough? • Count number of fast clicks § Add an attribute clicks pressed released § Reset to 0 if not fast enough • Time click speed pressed released § Add an attribute time § Set to 0 when mouse released time § Increment when not pressed (e.g. in loop method update() ) See touch.py § Check time when next pressed 11/14/17 GUI Applications 19

Designing Complex Applications • Applications can become § Processes input extremely complex MainApp § Determines state § Large classes doing a lot § Many states & invariants Calls the methods of § Specification unreadable • Idea : Break application § Animates (only) Animation up into several classes § Start with a “main” class § Other classes have roles See subcontroller.py § Main class delegates work 11/14/17 GUI Applications 20

How to Break Up: Software Patterns • Pattern : reusable solution to a common problem § Template, not a single program § Tells you how to design your code § Made by someone who ran into problem first • In many cases, a pattern gives you the interface § List of headers for non-hidden methods Just like § Specification for non-hidden methods this course! § Only thing missing is the implementation 11/14/17 GUI Applications 21

Model-View-Controller Pattern Calls the Division Controller methods or can apply • functions of Updates model in to classes response to events or modules • Updates view with model changes Model View • • Defines and Displays the model manages the data to the app user • • Responds to the Provides user input controller requests to the controller 11/14/17 GUI Applications 22

MVC in this Course Model Controller • A3 : a3app.py • A3 : Color classes § RGB , CMYK & HSV § Hidden classes • A4 : Turtle , Pen • A4 : Functions in a4.py § Window is View § No need for classes • A6 : Image , ImageHistory • A6 : Editor § Data is always in model • Also our custom modules • A7 : Ship , Alien , etc.. • A7 : Invaders , Wave § All shapes/geometry § Main part of assignment! 11/14/17 GUI Applications 23

MVC in this Course Model Controller • A3 : a3app.py • A3 : Color classes § RGB , CMYK & HSV § Hidden classes • A4 : Turtle , Pen • A4 : Functions in a4.py § Window is View § No need for classes • A6 : Image , ImageHistory • A6 : Editor Why classes sometimes § Data is always in model and functions others? • Also our custom modules • A7 : Ship , Alien , etc.. • A7 : Invaders , Wave § All shapes/geometry § Main part of assignment! 11/14/17 GUI Applications 24