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

▶
gui applications announcements for this lecture
SMART_READER_LITE
LIVE PREVIEW

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

Jun 04, 2023 134 likes •465 views

Lecture 24 GUI Applications Announcements for This Lecture Prelim 2 Next Week There is no lab next week TONIGHT at 7:30 pm But Tuesday hours are open AF in Uris G01 Open to EVERYONE G-H in Malott 228 Go for help on lab

slide-1
SLIDE 1

GUI Applications

Lecture 24

slide-2
SLIDE 2

Announcements for This Lecture

Prelim 2 Next Week

  • There is no lab next week

§ But Tuesday hours are open § Open to EVERYONE § Go for help on lab or A7

  • But lecture is important

§ Return to topic of invariants § Setting us up for sorting

  • Try to finish lab 11 first

§ Frees remaining time for A7

11/21/19 2 GUI Applications

  • TONIGHT at 7:30 pm

§ A–F in Uris G01 § G-H in Malott 228 § I–L in Ives 305 § M-Z in Statler Aud.

  • All review material online

§ Similar to previous years § Just changed “hard parts”

slide-3
SLIDE 3

Assignment 7

  • Instructions are posted– start work tomorrow
  • Goal: Move the player ship by Tuesday

§ This is where many people get stuck § Use the “lab” next week for help

  • Due Dec 10, but extensions are possible

§ Contact your lab instructor (not me) § No questions-asked for Thursday, Dec 12 § Need a solid excuse for Sunday, Dec 15

11/21/19 GUI Applications 3

slide-4
SLIDE 4

A Standard GUI Application

Animates the application, like a movie

11/21/19 GUI Applications 4

slide-5
SLIDE 5

A Standard GUI Application

Animates the application, like a movie

Check for user input Process user input Update the objects

11/21/19 GUI Applications 5

slide-6
SLIDE 6

A Standard GUI Application

Update display/view No change to objects

Animates the application, like a movie

Check for user input Process user input Update the objects

11/21/19 GUI Applications 6

Restriction set by graphics cards

slide-7
SLIDE 7

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/21/19 GUI Applications 7

slide-8
SLIDE 8

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/21/19 GUI Applications 8

Why do we need to write this each time?

Would like to “plug in” code

slide-9
SLIDE 9

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 application.update() # Draw stuff on the screen # Handled by OS/GUI libraries

11/21/19 GUI Applications 9

Custom Application class with its own attributes Method call (for loop body)

  • Write loop body

in an app class.

  • OS/GUI handles

everything else.

slide-10
SLIDE 10

Programming Animation

Intra-Frame

  • Computation within frame

§ Only need current frame

  • Example: Collisions

§ Need current position § Use to check for overlap

  • Can use local variables

§ All lost at update() end § But no longer need them

11/21/19 GUI Applications 10

slide-11
SLIDE 11

Programming Animation

Inter-Frame

  • Computation across frames

§ Use values from last frame

  • Example: Movement

§ Need old position/velocity § Compute next position

  • Requires attributes

§ Attributes never deleted § Remain after update() ends

11/21/19 GUI Applications 11

Previous frame Current frame

slide-12
SLIDE 12

Variables and the Loop

while program_is_running: # Get information from mouse/keyboard # Handled by OS/GUI libraries # Your code goes here application.update() # Draw stuff on the screen # Handled by OS/GUI libraries

11/21/19 GUI Applications 12

Local variables erased. But attributes persist.

slide-13
SLIDE 13

Programming Animation

Intra-Frame

  • Computation within frame

§ Only need current frame

  • Example: Collisions

§ Need current position § Use to check for overlap

  • Can use local variables

§ All lost at update() end § But no longer need them

Inter-Frame

  • Computation across frames

§ Use values from last frame

  • Example: Movement

§ Need old position/velocity § Compute next position

  • Requires attributes

§ Attributes never deleted § Remain after update() ends

11/21/19 GUI Applications 13

slide-14
SLIDE 14

Attributes = Loop Variables

Normal Loops

x = 0 i = 2 # x = sum of squares of 2..i-1 while i <= 5: x = x + i*i i = i +1 # x = sum of squares of 2..5

Application

while program_running: # Get input # Your code called here application.update() # Draw

11/21/19 GUI Applications 14

Variables “external” to the loop body Attributes are the “external” variables

slide-15
SLIDE 15

Class Invariant = Loop Invariants

  • Look at the game loop

§ Loop body is update() § Loop vars are attributes

  • Class invariant is true

§ At update()/body start § At update()/body end § Just like loop invariants

  • Invariants are important!

§ To reason about game § Help us debug problems

# Constructor game = GameApp(…) … # inv: game attribs are … while program_running: # Get input # Your code goes here game.update() # post: game attribs are …

11/21/19 GUI Applications 15

slide-16
SLIDE 16

The Actual Game Loop

# Constructor game = GameApp(…) … game.start() #Loop initialization while program_running: # Get input # Your code goes here game.update(time_elapsed) game.draw()

11/21/19 GUI Applications 16

To early to initialize everything Actual loop initialization Separate update() and draw() methods

slide-17
SLIDE 17

Designing a Game Class: Animation

class Animation(game2d.GameApp): """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/21/19 GUI Applications 17

See animation.py

slide-18
SLIDE 18

Designing a Game Class: Animation

class Animation(game2d.GameApp): """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/21/19 GUI Applications 18

See animation.py Parent class that does hard stuff

slide-19
SLIDE 19

Designing a Game Class: Animation

class Animation(game2d.GameApp): """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/21/19 GUI Applications 19

See animation.py Loop initialization Do NOT use __init__ Loop body Use method draw() defined in GObject Parent class that does hard stuff

slide-20
SLIDE 20

Comparing Attributes: Touch

  • Attribute touch in GInput

§ The mouse press position § Or None if not pressed § Access with self.input.touch

  • Compare touch, last position

§ Mouse button pressed: last None, touch not None § Mouse button released: last not None, touch None § Mouse dragged: last and touch not None

11/21/19 GUI Applications 20

See touch.py

Previous Touch Current Touch

Line segment = 2 points

slide-21
SLIDE 21

Input and Invariants

  • Attribute input is…

§ A GInput object

  • Attribute input.touch is…

§ Either a Point2 or None § Location of mouse cursor (if it is pressed)

  • Attribute last is…

§ Either a Point2 or None § input.touch in prev. frame See touch.py

Previous Touch Current Touch

Line segment = 2 points

11/21/19 GUI Applications 21

Relationship between two variables.

slide-22
SLIDE 22

State: Changing What the Loop Does

  • State: Current loop activity

§ Playing game vs. pausing § Ball countdown vs. serve

  • Add an attribute state

§ Method update() checks state § Executes correct helper

  • How do we store state?

§ State is an enumeration;

  • ne of several fixed values

§ Implemented as an int

11/21/19 GUI Applications 22

See state.py State ANIMATE_CIRCLE State ANIMATE_HORIZONTAL

slide-23
SLIDE 23

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/21/19 GUI Applications 23

slide-24
SLIDE 24

Triggers: Checking Click Types

  • Double click = 2 fast clicks
  • Count number of fast clicks

§ Add an attribute clicks § Reset to 0 if not fast enough

  • Time click speed

§ Add an attribute time § Set to 0 when mouse released § Increment when not pressed (e.g. in loop method update()) § Check time when next pressed

11/21/19 GUI Applications 24

See touch.py

time pressed released pressed released

Is it fast enough?

slide-25
SLIDE 25

Designing Complex Applications

  • Applications can become

extremely complex

§ Large classes doing a lot § Many states & invariants § Specification unreadable

  • Idea: Break application

up into several classes

§ Start with a “main” class § Other classes have roles § Main class delegates work

11/21/19 GUI Applications 25

MainApp Animation

See subcontroller.py § Processes input § Determines state § Animates (only) Calls the methods of

slide-26
SLIDE 26
  • 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 § Specification for non-hidden methods § Only thing missing is the implementation

How to Break Up: Software Patterns

Just like this course!

11/21/19 26 GUI Applications

slide-27
SLIDE 27

Model

  • Defines and

manages the data

  • Responds to the

controller requests

View

  • Displays the model

to the app user

  • Provides user input

to the controller

Controller

  • Updates model in

response to events

  • Updates view with

model changes

Model-View-Controller Pattern

Calls the methods or functions of

11/21/19 27 GUI Applications

Division can apply to classes

  • r modules
slide-28
SLIDE 28

MVC in this Course Model

  • A3: Color classes

§ RGB, CMYK & HSV

  • A4: Turtle, Pen

§ Window is View

  • A6: Image

§ Data is always in model

  • A7: Ship, Alien, etc..

§ All shapes/geometry

Controller

  • A3: a3app.py

§ Hidden classes

  • A4: Functions in a4.py

§ No need for classes

  • A6: Filter, Encoder
  • Also our custom modules
  • A7: Invaders, Wave

§ Main part of assignment!

11/21/19 GUI Applications 28

slide-29
SLIDE 29

MVC in this Course Model

  • A3: Color classes

§ RGB, CMYK & HSV

  • A4: Turtle, Pen

§ Window is View

  • A6: Image

§ Data is always in model

  • A7: Ship, Alien, etc..

§ All shapes/geometry

Controller

  • A3: a3app.py

§ Hidden classes

  • A4: Functions in a4.py

§ No need for classes

  • A6: Filter, Encoder
  • Also our custom modules
  • A7: Invaders, Wave

§ Main part of assignment!

11/21/19 GUI Applications 29

Why classes sometimes and functions others?

slide-30
SLIDE 30

Model Subclasses of GObject

  • GEllipse, GImage, …
  • Often more than one

View Class GView, GInput

  • Do not subclass!
  • Part of GameApp

Controller

Subclass of GameApp

Model-View-Controller in CS 1110

11/21/19 30 GUI Applications

Classes in game2d Method draw in GObject Attribute view (inherited) Other attributes (defined by you)

slide-31
SLIDE 31

Model Subclasses of GObject

  • GEllipse, GImage, …
  • Often more than one

View Class GView, GInput

  • Do not subclass!
  • Part of GameApp

Controller

Subclass of GameApp

Model-View-Controller in CS 1110

11/21/19 31 GUI Applications

Classes in game2d Method draw in GObject Attribute view (inherited) Other attributes (defined by you)

Neglected for most

  • f this lecture
slide-32
SLIDE 32

Models in Assignment 7

  • Often subclass of GObject

§ Has built-in draw method

  • Includes groups of models

§ Example: rockets in pyro.py § Each rocket is a model § But so is the entire list! § update() will change both

  • A7: Several model classes

§ Ship to animate the player § Alien to represent an alien

11/21/19 GUI Applications 32

See pyro.py rocket sparks