006-Folien: GUI mit SFML
006-Folien: GUI mit SFML
006-Folien: GUI mit SFML
Erfolgreiche ePaper selbst erstellen
Machen Sie aus Ihren PDF Publikationen ein blätterbares Flipbook mit unserer einzigartigen Google optimierten e-Paper Software.
Fakultät ETIT, Institut für Automatisierungstechnik, Professur für Prozessleittechnik<br />
Grafische<br />
Nutzer-<br />
Interaktion<br />
VL Mikrorechentechnik 2<br />
SS 2013, 8.5.2013<br />
Professur für Prozessleittechnik
Übersicht<br />
• <strong>SFML</strong> - Simple and Fast Multimedia Library Version 1.6<br />
http://www.sfml-dev.org/documentation/1.6/<br />
Multithreading: Threads & Mutexes<br />
Grafikfenster: Window, Event<br />
Grafik: Sprite, Shape, String, View<br />
Audio: Sound, Music<br />
Network: Sockets, HTTP, FTP<br />
• Tutorial<br />
http://www.sfml-dev.org/tutorials/1.6/<br />
• Multi-platform (MS-Win, Linux, Mac OS X) + Multi-Language<br />
C, C++, .Net, Java, Ruby, Phyton, Go, ...<br />
Urbas © 2013 MRT2::<strong>SFML</strong> Folie 2
<strong>SFML</strong> Grundkonzepte<br />
http://www.sfml-dev.org/documentation/1.6/<br />
• Window<br />
verwaltet Fenster zur Darstellung grafischer Inhalte<br />
Empfängt und verwaltet Interaktionsereignisse (Event)<br />
• Pollen von Ereignissen in Ereignisschleife<br />
while (window.IsOpened()) {<br />
}<br />
sf::Event event;<br />
while (window.GetEvent(event)) {<br />
}<br />
if (event.Type == sf::Event::Closed) window.Close();<br />
window.Clear();<br />
// Zeichne alle Objekte<br />
window.Display();<br />
Urbas © 2013 MRT2::<strong>SFML</strong> Folie 3
Event<br />
http://www.sfml-dev.org/tutorials/1.6/window-events.php<br />
• Event<br />
Klasse zur Vereinheitlichung des Zugriffs auf unterschiedliche Ereignisse<br />
Closed, Resized, LostFocus, GainedFocus, TextEntered, KeyPressed,<br />
KeyReleased, MouseWheelMoved, MouseButtonPressed,<br />
MouseButtonReleased, MouseMoved, MouseEntered, MouseLeft,<br />
JoyButtonPressed, JoyButtonReleased, JoyMoved<br />
Je nach Ereignis enthält die Ereignis-Instanz unterschiedliche Daten<br />
• Mouse Button Events (MouseButtonPressed, MouseButtonReleased)<br />
Event.MouseButton.Button – welcher Schalter wurde gedrückt / entlastet<br />
Event.MouseButton.X – an welcher X-Position?<br />
Evvent.MouseButton.Y – an welcher Y-Position?<br />
Urbas © 2013 MRT2::<strong>SFML</strong> Folie 4
Shape<br />
http://www.sfml-dev.org/tutorials/1.6/graphics-shape.php<br />
• Ein Shape ist ein konvexes Polygon<br />
Polygon, Line, Circle, Rect<br />
• Attribute der Punkte können einzeln gesetzt und gelesen werden<br />
Set/GetPointPosition, Set/GetPointColor, Set/GetPointOutlineColor,<br />
• bzw. für das gesamte Shape<br />
Set/GetPosition, Set/GetColor, Set/GetOutlineWidth<br />
EnableFilll(bool), EnableOutline(bool);<br />
• Ein Shape kann verschoben, skaliert und rotiert werden<br />
Move(float,float), Scale(float,float), Rotate(float)<br />
Urbas © 2013 MRT2::<strong>SFML</strong> Folie 5
Einstieg: Interaktives Verschieben eines<br />
Shapes (Projekt SfmlTest)<br />
• Spezifikation<br />
ein Kreis soll durch Anklicken <strong>mit</strong> dem linken Mausknopf aktiviert werden<br />
und <strong>mit</strong> gedrückter Maustaste an einen neuen Ort verschoben werden<br />
• Objektinstanzen<br />
sf::RenderWindow window – für‘s zeichnen<br />
sf::Event event – aktuelles Ereignis<br />
sf::Shape circle – der Kreis<br />
bool captured - haben wir Kreis gefangen?<br />
• Methoden<br />
Ereignisschleife zur Behandlung von Closed, MouseButtonPressed,<br />
MouseButtonReleased und MouseMoved<br />
inside_circle – ist Klick auf Fläche von Kreis erfolgt?<br />
Urbas © 2013 MRT2::<strong>SFML</strong> Folie 6
<strong>SFML</strong>-Libraries verwenden<br />
• Im Kontextmenu des<br />
Projekts im Project<br />
Explorer<br />
properties<br />
C/C++ General<br />
Paths and Symbols<br />
Reiter Libraries<br />
Add...<br />
sfml-graphics<br />
sfml-window<br />
sfml-system<br />
Urbas © 2013 MRT2::<strong>SFML</strong> Folie 7
Kritik an Lösung<br />
• switch-case-struktur ist schnell geschrieben aber schwer zu warten<br />
Verhalten und Grafiklogik sind ineinander verwoben.<br />
Ereignis, Zustand und Verhaltensspzifikation sind nicht sauber getrennt<br />
Lokale Bedingungen (zur Steuerung von lokalem Verhalten) werden in<br />
globalen Variablen gehalten.<br />
captured<br />
• Erweiterung für RobotHMI führt zu Spagetti-Code<br />
Verhalten von Hindernissen<br />
Verhalten des Roboters<br />
Anzeige von internen Variablen<br />
Eingabe von Zuständen<br />
Urbas © 2013 MRT2::<strong>SFML</strong> Folie 8
Stukturierte Analyse Automat<br />
(Projekt SfmlTestAutomaton)<br />
• Zustände: s0: Kein Objekt gefangen; s1: Objekt gefangen<br />
• Transitonen: Ereignisse (+ ggf. komplexe Bedingung)<br />
Urbas © 2013 MRT2::<strong>SFML</strong> Folie 9
Change language