Interaktive Simulationen Lektion 3/3: Grafische Ausgabe

Transkript

1 MÜNSTER Interaktive Simulationen Lektion 3/3: Grafische Ausgabe Prof. Dr. Christian Engwer & Andreas Buhr 30. April 2014

2 Was ist ein Widget? MÜNSTER Interaktive Simulationen 2 /24 Ein QWidget ist ein QObject welches auf dem Bildschirm sichtbar ist. Qt Documentation The QWidget class is the base class of all user interface objects.

3 MÜNSTER Interaktive Simulationen 3 /24 Widgets im QtCreator

4 MÜNSTER Interaktive Simulationen 4 /24 QWidgets sind QObjects Sie können Signale senden und empfangen. Man kann sie aber nicht aus dem Hauptthread heraus bewegen: Fehlermeldung QObject::moveToThread: Widgets cannot be moved to a new thread Widgets erhalten Events

5 Was ist ein Event? MÜNSTER Interaktive Simulationen 5 /24 Events werden durch Userinteraktion ausgelöst: Maus kommt über Widget (enterevent) Maus bewegt sich (mousemoveevent) Maustaste wird gedrückt (mousepressevent) Maustaste wird losgelassen (mousereleaseevent) Fenstergröße wird geändert (resizeevent) Taste auf Tastatur wird gedrückt (keypressevent) viel mehr...

6 MÜNSTER Interaktive Simulationen 6 /24 Was heißt ein Event erhalten? Einen Event erhalten heißt dass die entsprechende Memberfunktion aufgerufen wird. Beispiel: Maus bewegt sich mousemoveevent des darunter liegenden Widgets wird aufgerufen.

7 MÜNSTER Interaktive Simulationen 7 /24 Wie kommen wir an die Events Wir müssen eine eigene Klasse schreiben die von dem Widget welches wir benutzen ableitet. Livedemo Livedemo: Klasse erstellen Event Handler überschreiben benutzen.

8 MÜNSTER Interaktive Simulationen 8 /24 QGraphicsView und QGraphicsScene QGraphicsView und QGraphicsScene sind das Schweizer Messer zur Visualisierung.

9 MÜNSTER Interaktive Simulationen 8 /24 QGraphicsView und QGraphicsScene QGraphicsView und QGraphicsScene sind das Schweizer Messer zur Visualisierung. QGraphicsScene enthält Items die visualisiert werden. QGraphicsView verhält sich wie ein Fenster durch das man die Scene betrachtet

10 MÜNSTER Interaktive Simulationen 9 /24 Items in der QGraphicsScene Items in der QGraphicsScene können sein: Linien (QGraphicsLineItem) Ellipsen (QGraphicsEllipseItem) Rechtecke (QGraphicsRectItem) Bilder (QGraphicsPixmapItem)... viel mehr

11 MÜNSTER Interaktive Simulationen 10 /24 Eine Scene mit ein paar Items:

12 MÜNSTER Interaktive Simulationen 11 /24 Wer ist für was zuständig? QGraphicsView Zoomen Scrollen QGraphicsScene Items hinzufügen Items bewegen Items entfernen

13 Quick HowTo MÜNSTER Interaktive Simulationen 12 /24 int main(int argc char *argv[]) { QApplication a(argc argv); } QGraphicsView view; view.show(); QGraphicsScene scene; view.setscene(&scene); scene.addrect( ); return a.exec();

14 MÜNSTER Interaktive Simulationen 13 /24 Quick HowTo: Screenshot

15 MÜNSTER Interaktive Simulationen 14 /24 Wir wollen QGraphicsView und Events Lösung: Im QtCreator einen QGraphicsView hinzufügen. Eine neue Klasse anlegen die von QGraphicsView ableitet z.b. MyGraphicsView Den graphicsview zu MyGraphicsView promoten: Rechtsklick dann Promote to...

16 MÜNSTER Interaktive Simulationen 15 /24 Der Weg eines Events Ein mouseevent kann an drei Stellen behandelt werden: Im QGraphicsView: Dort kann man die Position auf dem Bildschirm abfragen. Im QGraphicsScene: Dort kann man die Position in Scene-Koordinaten abfragen Im QGraphicsItem: Dort kann man die Position in Item-Koordinaten abfragen

17 MÜNSTER Interaktive Simulationen 16 /24 MousePressEvent im QGraphicsView protected: virtual void mousepressevent ( QMouseEvent * event ); Man bekommt einen QMouseEvent. Dieser kennt const QPoint &globalpos () const const QPoint &pos () const

18 MÜNSTER Interaktive Simulationen 17 /24 MousePressEvent in QGraphicsScene protected: virtual void mousepressevent( QGraphicsSceneMouseEvent *event); Man bekommt einen QGraphicsSceneMouseEvent. Dieser kennt QPointF pos () const QPointF scenepos () const QPoint screenpos () const

19 MÜNSTER Interaktive Simulationen 18 /24 vier Koordinatensysteme

20 MÜNSTER Interaktive Simulationen 19 /24 vier Koordinatensysteme Bildschirm QGraphicsView Scene-System Item-System

21 MÜNSTER Interaktive Simulationen 20 /24 Item Koordinatensystem Items arbeiten immer in ihrem eigenen Koordinatensystem: QGraphicsRectItem* item = new QGraphicsRectItem( ); item.setpos(100100); Quizfrage: Wo ist das Item jetzt?

22 MÜNSTER Interaktive Simulationen 20 /24 Item Koordinatensystem Items arbeiten immer in ihrem eigenen Koordinatensystem: QGraphicsRectItem* item = new QGraphicsRectItem( ); item.setpos(100100); Quizfrage: Wo ist das Item jetzt? Tipp Items immer an der Stelle (00) erstellen und dann mit setpos verschieben. So liegen alle Koordinatensysteme aufeinander.

23 Gelernt MÜNSTER Interaktive Simulationen 21 /24 Man nehme einen QGraphicsView verbinde ihn mit einer QGraphicsScene und füge QGraphicsItems hinzu fertig ist die Visualisierung.

24 MÜNSTER Interaktive Simulationen 22 /24 Für die Particle- / Schwarm-Simulation Beispiel Partikel könnte man als 1000 QGraphicsEllipseItem visualisieren Beispiel 2 Fische in einer Schwarmsimulation könnte man durch Bilder (QGraphicsPixmapItem) visualisieren

25 MÜNSTER Interaktive Simulationen 23 /24 Für die 2D-Grid Simulation Beispiel Aus 2D-Daten ein Bild (QImage) erzeugen das in ein QPixmap konvertieren und daraus ein QGraphicsPixmapItem machen. (Beispielcode auf der Vorlesungswebseite)

26 MÜNSTER Interaktive Simulationen 24 /24 Bilder zu Projekt hinzufügen Bild in Projektverzeichnis legen Dem Projekt ein Qt Resource File hinzufügen Dem Qt Resource File das Bild hinzufügen Beim Öffnen der Datei (im Code) vor den Pfad ein Doppelpunkt setzen e.g. ":/meinbild.jpg"