Fortgeschrittene Kapitel: Grafische Ausgabe mit C++ Karl Gmeiner

Transkript

1 Fortgeschrittene Kapitel: Grafische Ausgabe mit C++ Karl Gmeiner 2015

2 1 Software-Frameworks am Beispiel von Qt 1.1 Software-Frameworks Software-Frameworks stellen Datenstrukturen, Algorithmen, Entwurfsmuster etc... Verfügung, aus denen vollwertige Applikationen erstellt werden können. Für C/C++ gibt es viele (freie) Software-Frameworks GTK Qt... zur 1.2 Qt ( cute ) Vor mehr als 20 Jahren entwickelt Plattformübergreifend (Windows, Linux, MacOSX, mobile Plattformen... ) Kommerzielle und freie Lizenzen Basis von KDE und vielen plattformübergreifenden Applikationen Linux-Versionen von Spotify, Skype und VLC GUI von VirtualBox VLC Google Earth Unterstützung für XML, SQL, Webkit (kommt aus Qt/KDE), Netzwerk etc... Viele Sprach-Bindings 1.3 Entwicklungstools für Qt MOC Qt erweitert C++, daher werden Qt-Programme immer zuerst mit dem Meta-Object Compiler compiliert (moc). Daher teilweise erweiterte C++-Syntax (z.b. zusätzlich signals und slots in Klassendefinition) QtCreator Als Bundle mit Qt erhältlich IDE für C++ Guter Support für Qt-Programme Enthält Designer Erzeugt Project-File (Endung.pro) * TEMPLATE: Typ des Projekts * TARGET: Name der Anwendung * QT: verwendete Qt-Komponenten *... 1

3 1.4 Erste Anwendung (Empty QMake-Project) pro-datei TEMPLATE = app TARGET = MyQtProject CONFIG += c++11 QT = core gui widgets SOURCES += myfirstapp.cpp 1.5 Erste Anwendung MyFirstApp.cpp #include <QApplication> int main(int argc, char **argv) { QApplication app (argc, argv); return app.exec(); QApplication Erzeugt eigenen Thread, in dem Events behandelt werden GUI-Events wie z.b. Button wurde geklickt Einzelner Thread um Race-Conditions zu vermeiden 1.6 Ein erstes GUI-Element: QPushButton #include <QApplication> #include <QPushButton> int main(int argc, char **argv) { QApplication app (argc, argv); QPushButton button("click me!"); button.settooltip("do it."); button.show(); return app.exec(); Dokumentation zu Qt zeigt saemtliche Eigenschaften, die geaendert werden koennen. 1.7 Ein zweites GUI-Element: QLabel QLabel label("0", &button); label.show(); 2

4 Label ist nun innerhalb des Buttons Alle GUI-Elemente leiten sich von QWidget ab Dadurch viel gemeinsame Funktionalitaet, u.a, koennen GUI-Elemente allen GUI- Elementen hinzugefuegt werden. 1.8 Label und Button nebeneinander int main(int argc, char**argv) { QApplication app(argc, argv); QWidget widget; widget.setfixedsize(200, 160); QPushButton button("clickme", &widget); button.setgeometry(10, 10, 190, 70); QLabel label("0", &widget); label.setgeometry(10, 80, 190, 150); label.setalignment(qt::aligncenter); widget.show(); return app.exec(); 1.9 Kommunikation zwischen Objekten Observer-Pattern Design-Pattern Frameworks wie Qt haben einen Mechanismus um Benutzereingaben zu erfassen und darauf zu reagieren Observer-Pattern: Objekte enthalten eine Aufzaehlung anderer Objekte und informieren sie ueber Ereignisse Bsp: Klick auf Button soll eine Funktion aufrufen, die den Text eines Labels aendert. In Java ueber Listener (es gibt einen Observer und einen Observee ) In Qt als High-Level-Mechanismus ueber Signals/Slots * Erfordert MOC 1.10 Signals und Slots Objekte koennen Signale ausloesen (emit). Objekte enthalten Slots. Diese koennen mit Signalen gleicher Signatur verbunden werden. QPushButton enthaelt Signal clicked() (wird emmited bei Click auf Button) QLabel enthaelt Slot clear() (loescht den Text). Verbinden mit connect (liefert in Qt5 eine Instanz von Connection ), Aufloesen mit disconnect (in Qt5 return-wert). 3

5 1.11 Signals und Slots Syntax in Qt4 und Qt5 // Qt 4 und davor QObject::connect(&button, SIGNAL(clicked()), &label, SLOT(clear())); Alte Syntax auch in Qt5 unterstuetzt Qt5 erlaubt neue Syntax um auch Lambda-Terme zu erlauben. Siehe Qt-Wiki // Neue Syntax in Qt5 QObject::connect(&button, &QPushButton::clicked, &label, &QLabel::clear); // Neue Syntax in Qt5 erlaubt Lambda-Expressions QObject::connect(&button, &QPushButton::clicked, [&label](){ label.settext("1"); ); 1.12 Mitzaehlen, wie oft geclickt wird Lambda-Term als Slot Zaehlvariable wird als Referenz uebergeben und bei jedem Clicked-Signal erhoeht. int counter = 0; QObject::connect(&button, &QPushButton::clicked, [&counter, &label](){ label.settext(qstring::number(++counter)); ); 1.13 QObject Objekte in Qt leiten sich von QObject ab QObjects haben ein Eltern-QObject Wird Eltern-Objekt geloescht, werden auch die Kind-Objekte geloescht (vergleichbar mit Smart Pointern) Q_OBJECT-Makro wichtig fuer MOC #include <QObject> class MyCounter : public QObject { Q_OBJECT public: MyCounter(QObject* parent = 0);... private: int i; ; 4

6 1.14 Signals und Slots in MyCounter MyCounter soll einen Slot increment enthalten Erhoeht Zaehler Emittiert ein Signal mit einer Zeichenkette, die die Zahl enthaelt * In Qt QString (kann analog zu std::string verwendet werden) Wird der Counter erhoeht, soll ein Signal updated(const QString& s) emittiert werden, das eine Zeichenkette mit der Zahl enthaelt. In Qt QString (erlaubt Unicode, sonst weitgehend gleich wie std::string)... public slots: void increment(); signals: void updated(const QString& s); Implementierung von MyCounter #include "mycounter.h" MyCounter::MyCounter(QObject* parent): QObject(parent), i(0) { void MyCounter::increment() { i++; // create string from number // and send it with the signal emit updated(qstring::number(i)); 1.16 Verbinden der Signale und Slots MyCounter c; QObject::connect(&button, SIGNAL(clicked()), &c, SLOT(increment())); QObject::connect(&c, SIGNAL(updated(QString)), &label, SLOT(setText(QString))); Vorteil: Beliebig viele weitere Verbindungen Signals/Slots Connections werden automatisch aufgeloest, wenn QObject geloescht wird 2 QWidget-Application erstellen 2.1 Ein Programm in einem Fenster Neue Widget-Application 5

7 #include <QApplication> #include <QMainWindow> int main(int argc, char *argv[]) { QApplication a(argc, argv); QMainWindow w(&a); w.show(); return a.exec(); Durch Erweitern von QMainWindow koennen komplexere GUI-Anwendungen erstellt werden. 2.2 Erstellen eines Programms mit GUI in Qt siehe auch Qt-Doc Qt Widgets Application erstellen Base class * QMainWindow: Fenster-Applikation * QWidget: Keine Applikation, sondern ein grafisches Bedienelement (z.b. Color Picker) * QDialog: Dialog-Fenster Source Code fuer bereits lauffaehige Anwendung wird erstellt UI-Editor UI als XML-File Neue GUI-Elemente koennen einfach erstellt werden und Signals und Slots damit verbunden werden. 2.3 Wichtige Klassen QApplication Startet die Anwendung. Das GUI wird zuvor angelegt. QMainWindow Fenster der Anwendung Modale Fenster: Fenster, die nicht unabhaengig von anderen Fenstern existieren (z.b. Datei oeffnen -Dialog) QWidget Basis-Klasse aller GUI-Elemente (z.b. QPushButton, QTextEdit, QLabel, QGraphicsView... ) Layouts: Geben an, wie die GUI-Elemente angeordnet werden 2.4 Ein Widget mit einer Linie Neue C++-Klasse erstellen und QWidget erweitern. Ueberschreiben von void paintevent(qpaintevent *) Promote centralwidget. 6

8 void MyWidget::paintEvent(QPaintEvent *) { double w = width(), h = height(); QPen pen; pen.setwidth(1); QPainter painter(this); for(double d = 0; d <= 1; d += 0.01) { pen.setcolor(qcolor::fromhsvf(d, 1, 1)); painter.setpen(pen); painter.drawline(d * w, 0, 0, h - d * h); painter.drawline(w - d * w, h, w, d * h); 2.5 Eine analoge Uhr Linien fuer Sekundenzeiger, Minutenzeiger und Stundenzeiger. Zur Vereinfachung eigene Methode zum Zeichnen eines Zeigers void ClockWidget::drawDigit(const QPen& pen, double arc, double scale) { QPainter painter(this); painter.setpen(pen); double cx = width() / 2., cy = height() / 2.; painter.setpen(pen); painter.drawline(cx, cy, cx + scale * width() * sin(arc) / 2., cy - scale * height() * cos(arc) / 2.); 2.6 Zugehoerige paintevent-methode void ClockWidget::paintEvent(QPaintEvent *) { QPen secpen(qt::red); secpen.setwidth(1); QPen minpen(qt::blue); minpen.setwidth(2); QPen hourpen(qt::black); hourpen.setwidth(4); QTime time = QTime::currentTime(); double secarc = time.second() * 2 * M_PI / 60., minarc = time.minute() * 2 * M_PI / 60., hourarc = time.hour() * 2 * M_PI / 12.; drawdigit(secpen, secarc, 1); drawdigit(minpen, minarc, 0.8); drawdigit(hourpen, hourarc, 0.5); 2.7 Wann wird das Widget neu gezeichnet? QWidget enthaelt einen Slot update(), der ein neues Zeichnen in der Event-Loop anordnet 7

9 Wird beispielsweise bei Veraendern der Groesse aufgerufen QTimer kann regelmaessig das Widget dazu auffordern, seinen Inhalt neu zu zeichnen QTimer: Methode start(int ms) emittiert alle ms Millisekunden ein timeout()-signal Durch Verbinden des Signals mit update() kann regelmaessig neu gezeichnet werden. Da es mehrere update()-slots gibt brauchen wir einen entsprechenden Cast. 2.8 ctor von ClockWidget ClockWidget::ClockWidget(QWidget *parent) : QWidget(parent) { QTimer* timer = new QTimer(this); connect(timer, &QTimer::timeout, this, (void (QWidget::*)()) (&QWidget::update)); timer->start(1000); timer wird geloescht wenn ClockWidget geloescht wird, da this das Eltern-Objekt ist. 3 Danke fuers Zuhoeren 8