Programmeren met Grafische Objecten. Inleiding Programmeren II Hoorcollege 1 prof. dr. van Noord en dr. L.M. Bosveld-de Smet

Transcriptie

1 Programmeren met Grafische Objecten Inleiding Programmeren II Hoorcollege 1 prof. dr. van Noord en dr. L.M. Bosveld-de Smet

2 Onderwerpen van vandaag Programming Paradigms Imperatief programmeren Object-georiënteerd programmeren Grafisch objecten in Python grafische module: graphics.py instantievariabelen en methoden Coördinaten Event-driven Programming

3

4

5 Interfaces Command-line versus Graphical User Interface Tekst-gebaseerd versus Graphics-gebaseerd

6 Grafische Objecten

7 Grafische Objecten window

8 Grafische Objecten window combobox

9 Grafische Objecten window combobox text entry

10 Grafische Objecten window combobox text entry button

11 Datatypes en operaties Numbers: optellen Strings en Lists: concatenatie Lists: append(<object>)

12 Datatypes en operaties >>> sum = >>> sum >>> composite = "student" + "en" + "vereniging" >>> composite 'studentenvereniging' >>> word_list = ["aap","noot"] + ["mies","zus"] + ["jet"] >>> word_list

13 Programmeerparadigma s

14 Nieuw datatype en nieuw programmeerparadigma Grafische objecten Object-georiënteerd programmeren Objecten zijn actief Objecten worden verzocht om operaties op zichzelf uit te voeren

15 Objecten in het algemeen Zelle (p 81): Objects know stuf (they contain data) and objects can do stuf (they have operations)

16 Programmeren met grafische objecten vereist een grafische bibliotheek Pythonbibliotheken: Tkinter: standaard PyQt: geavanceerd Zelle s eigen graphics.py: simpel

17 import graphics win = graphics.graphwin("my first window") win.close()

18 from graphics import * win = GraphWin("My first window") win.close()

19 win = GraphWin("Geometric Shapes", 200, 200) center = Point(100, 100) circ = Circle(center, 60) rect = Rectangle(Point(60, 60), Point(140, 140)) line = Line(Point(30, 30), Point(170, 170)) <object name> = <class name>(<instance parameters>)

20 win = GraphWin("Geometric Shapes", 200, 200) center = Point(100, 100) circ = Circle(center, 60) circ.setfill('yellow') circ.draw(win) rect = Rectangle(Point(60, 60), Point(140, 140)) rect.setfill('blue') rect.draw(win) line = Line(Point(30, 30), Point(170, 170)) line.setarrow('first') line.draw(win) win.close() <object name>.<method name>(<method parameters>)

21 win = GraphWin("Geometric Shapes", 200, 200) center = Point(100, 100) circ = Circle(center, 60) circ.setfill('yellow') circ.draw(win) rect = Rectangle(Point(60, 60), Point(140, 140)) rect.setfill('blue') rect.draw(win) line = Line(Point(30, 30), Point(170, 170)) line.setarrow('first') line.draw(win) win.close()

22

23 Objecten en klassen Object = informal def. active data type that knows stuff and can do stuff (Zelle, p. 297) Object = formal def. A collection of related information A set of operations to manipulate that information (Zelle, p. 297) Object attributes = Instance variables: relevant information stored inside the object 23

24 dog object

25 dog class dog object

26 teacher class teacher object

27 GrahpWin objects

28

29 click.py win = GraphWin(" Click me!") for i in range (10): p = win.getmouse() p.draw(win) print("your click {0} was at ({1}, {2}).".format(i+1, p.getx(), p.gety())) win.getmouse() win.close

30 Your click 1 was at (17, 15). Your click 2 was at (32, 32). Your click 3 was at (45, 53). Your click 4 was at (63, 78). Your click 5 was at (84, 101). Your click 6 was at (85, 119). Your click 7 was at (85, 142). Your click 8 was at (118, 125). Your click 9 was at (135, 109). Your click 10 was at (163, 87)

31 Maak je eigen coördinatenstelsel met methode van GraphWin: setcoords(xll, yll, xur, yur)

32 tictactoe.py # create a default sized window with title Tic-Tac-Toe win = GraphWin("Tic-Tac-Toe") # set coordinates that go from (0,0) in lower left corner # to (3,3) in upper right corner of window win.setcoords(0.0, 0.0, 3.0, 3.0) # draw vertical lines Line(Point(1, 0), Point(1, 3)).draw(win) Line(Point(2, 0), Point(2, 3)).draw(win) # draw horizontal lines Line(Point(0, 1), Point(3, 1)).draw(win) Line(Point(0, 2), Point(3, 2)).draw(win) # on mouse click close window win.getmouse() win.close()

33

34 Event-driven Programming Steve Ferg (2006)

35 Event loop algorithm (Ferg, 2006)

36 graphics.py staat slechts afhandeling toe van: mouse clicks text entry

37

38 shapes.py def within_rectangle(point, rect): x1 = rect.getp1().getx() y1 = rect.getp1().gety() x2 = rect.getp2().getx() y2 = rect.getp2().gety() if (x1 > x2) : (x1,x2) = (x2,x1) if (y1 > y2) : (y1,y2) = (y2,y1) return( (x1 < point.getx() < x2) and (y1 < point.gety() < y2))

39 shapes.py def main():... click = win.getmouse() if within_rectangle(click, rect1): rect1.undraw() elif within_rectangle(click, rect2): rect2.undraw() else: output.settext("goodbye.")

40 Weeknumm ers Onderwerp Weekoverzicht Literatuur 1 Grafische klassen en objecten. Zelle, ch. 4 Objects and Graphics. 2 'File handlers', 'decisions' en verschillende soorten 'loops'. 3 Recursie, datastructuren, en Python datacollecties. 4 Simulaties, 'pseudo random numbers', en spelletjes. 5 Klassen en objecten in het algemeen, en OOP. Zelle, ch. 7 Decision Structures; Zelle, ch. 8 Loop Structures and Booleans. Brookshear & Brylow, ch. 8 Data Abstractions, Sections 8.1 and 8.6 Zelle, ch. 9 Simulation and Design (behalve voorbeeld Racquetball). Brookshear & Brylow, ch. 6 Programming Languages; Zelle, ch. 10 Defining Classes (behalve voorbeeld Cannonball) 6 Nogmaals Python datacollecties, en ihb. 'dictionaries'. 7 Course Summary. Voorbeelden van tentamenvragen. Zelle, ch. 11 Data Collections. Voorbereiding tentamen