Ingenieurinformatik. GUI-Programmierung. Grafische Benutzeroberflächen WS 2009/2010

Transkript

1 Ingenieurinformatik WS 2009/2010 GUI-Programmierung Grafische Benutzeroberflächen 1

2 bekannte Grafikelemente Linien Polygonzüge Farben Rechtecke Kreise Ellipsen Polygone Text 2

3 Sektoren, Abschnitte, Bögen Aus Ellipsen (und Kreisen) lassen sich durch Angabe eines Startwinkels und eines Überstreichungswinkels Bögen, Sektoren und Abschnitte ableiten. Die x-achse entspricht einem Startwinkel von null. Die Winkel werden in Grad(!) angegeben. Positive Drehrichtung: Gegenuhrzeigersinn. Sektoren und Abschnitte können gefüllt werden, Bögen nicht. Vorgabewerte: Sektor, Startwinkel 0, Überstreichungswinkel 90 3

4 4 Pieslice, Chord, Arc

5 Rasterbilder Rasterbilder können aus einer Grafikdatei geladen und in einer Variablen gespeichert werden. Unterstützte Grafikformate: GIF, PPM, PGM 5

6 Pfeile Pfeile sind Linien (oder Polygonzüge) mit dem Zusatzattribut "arrow" "first": Pfeilspitze am Startpunkt "last": Pfeilspitze am Endpunkt "both": Doppelspitze 6

7 Splines Die Elemente eines Polygonzuges lassen sich durch quadratische Parabeln annähern, dabei bleiben die Tangenten erhalten. Den entstehenden Kurvenzug nennt man "Spline" 7

8 Parabel Aus einem Polygonzug mit nur zwei Elementen lässt sich eine quadratische Parabel ableiten. Der Parabelstich p entspricht der halben Polygonzughöhe h. p h 8

9 gestrichelte Linien Dem Zusatzattribut "dashed" kann eine Liste von Pixelangaben übergeben werden, die abwechselnd für gezeichnete und leere Linienabschnitte stehen. Bei einfachen, symmetrisch gestrichelten Linien entfällt die Angabe der Lückengröße. 9

10 Attributkombinationen Linienattribute können nahezu beliebig kombiniert werden: 10

11 GUI-Programmierung GUI=graphical user interface, grafische Benutzerschnittstelle typische GUI-Elemente: Buttons, Eingabefelder, Menüs GUI-Elemente reagieren auf Ereignisse (events). GUI-Elemente lösen auch selbst Ereignisse aus. Äußere Ereignisse sind beispielsweise Mausklicks oder Tastendrücke. Innere Ereignisse sind in der Regel Funktionsaufrufe. Das Warten auf äußere Ereignisse findet in der tkinter-funktion "mainloop( )" statt. 11

12 pack() Die Funktion pack( ) ordnet GUI-Elemente im tkinter-fenster an. Voreinstellung: horizontal zentriert, untereinander 12

13 pack(side= ) pack( ) schneidet an der angegebenen Seite ein Stück von der verbleibenden Fläche ab und platziert das Element dort mittig. 13

14 Positionsrahmen (Frames) Mehrere tkinter-elemente lassen sich in einem Rahmen zusammenfassen, der dann selbst wieder mittels pack() positioniert wird. 14

15 absolute Positionierung Um auf pack() zu verzichten, kann man tkinter-elemente absolut positionieren. Auch die Höhe und Breite lassen sich festlegen. 15

16 Events Einem Button kann der Name einer Funktion zugewiesen werden. Diese wird beim Anklicken aufgerufen. 16

17 Eingabefelder und Label In Eingabefelder kann Text eingetippt werden. Label sind Textfelder zur Anzeige von (oft statischen) Texten. Der Text eines EF kann mit der Methode "get" gelesen werden. Mit der Methode "insert" kann Text in ein EF eingefügt werden. Die Methode "delete" löscht Text aus einem Eingabefeld. 17

18 18 Eingabefelder und Label

19 eval("pythoncode") Die Funktion eval() gibt das Ergebnis eines Python-Ausdrucks zurück. Der Ausdruck kann Variablen und Funktionen des laufenden Programms verwenden. 19

20 20 Potpourri

21 Praktikum / Hausaufgabe Gestalten Sie den aus drei Labels, drei Eingabefeldern und einem Button bestehenden unteren Interaktionsbereich des abgebildeten Statikprogramms so, dass die für den oberen Ausgabebereich zuständige Funktion berechne_zeichne beim Anklicken des Buttons aufgerufen wird und die benötigten Werte aus den drei Eingabefeldern Eingabe1 bis Eingabe3 auslesen kann! 21

22 from math import sqrt,tan,atan,degrees from tkinter import Tk, Canvas, Entry, Button, Label, Frame def berechne_zeichne(): gra.delete(*gra.find_all()) try: G1=float(Eingabe1.get()) G2=float(Eingabe2.get()) G3=float(Eingabe3.get()) a=(g1**2+g2**2-g3**2)/(2*g2) b=g2-a h=sqrt(g1**2-a**2) alp=atan(a/h) bet=atan(b/h) gra.create_oval(40, 40, 60, 60) gra.create_line(50, 50, 50, 150, fill = "red", width=3, arrow="last") gra.create_text(50, 160, text='g1=%.2f' % G1) gra.create_oval(340, 40, 360, 60) gra.create_line(350, 50, 350, 150, fill = "red", width=3, arrow="last") gra.create_text(350, 160, text='g3=%.2f' % G3) xg2=b/(a+b)*300 yg2=xg2*tan(alp) gra.create_line(50, 50, 50+xG2, 50+yG2, fill = "red", width=3) gra.create_line(50+xg2, 50+yG2, 350, 50, fill = "red", width=3) gra.create_line(50+xg2, 50+yG2, 50+xG2, 150+yG2, fill = "red", width=3, arrow="last") gra.create_text(50+xg2, 160+yG2, text='g2=%.2f' % G2) except: gra.create_line(0,0,400,600,fill="red",width=3) gra.create_line(0,600,400,0,fill="red",width=3) 22 H=Tk() H.title("Seil über 2 Rollen") gra=canvas(width=400, height=600, bg='white') gra.pack()