006-Folien: GUI mit SFML

et.tu.dresden.de

006-Folien: GUI mit SFML

Fakultät ETIT, Institut für Automatisierungstechnik, Professur für Prozessleittechnik

Grafische

Nutzer-

Interaktion

VL Mikrorechentechnik 2

SS 2013, 8.5.2013

Professur für Prozessleittechnik


Übersicht

SFML - Simple and Fast Multimedia Library Version 1.6

http://www.sfml-dev.org/documentation/1.6/

Multithreading: Threads & Mutexes

Grafikfenster: Window, Event

Grafik: Sprite, Shape, String, View

Audio: Sound, Music

Network: Sockets, HTTP, FTP

• Tutorial

http://www.sfml-dev.org/tutorials/1.6/

• Multi-platform (MS-Win, Linux, Mac OS X) + Multi-Language

C, C++, .Net, Java, Ruby, Phyton, Go, ...

Urbas © 2013 MRT2::SFML Folie 2


SFML Grundkonzepte

http://www.sfml-dev.org/documentation/1.6/

• Window

verwaltet Fenster zur Darstellung grafischer Inhalte

Empfängt und verwaltet Interaktionsereignisse (Event)

• Pollen von Ereignissen in Ereignisschleife

while (window.IsOpened()) {

}

sf::Event event;

while (window.GetEvent(event)) {

}

if (event.Type == sf::Event::Closed) window.Close();

window.Clear();

// Zeichne alle Objekte

window.Display();

Urbas © 2013 MRT2::SFML Folie 3


Event

http://www.sfml-dev.org/tutorials/1.6/window-events.php

• Event

Klasse zur Vereinheitlichung des Zugriffs auf unterschiedliche Ereignisse

Closed, Resized, LostFocus, GainedFocus, TextEntered, KeyPressed,

KeyReleased, MouseWheelMoved, MouseButtonPressed,

MouseButtonReleased, MouseMoved, MouseEntered, MouseLeft,

JoyButtonPressed, JoyButtonReleased, JoyMoved

Je nach Ereignis enthält die Ereignis-Instanz unterschiedliche Daten

• Mouse Button Events (MouseButtonPressed, MouseButtonReleased)

Event.MouseButton.Button – welcher Schalter wurde gedrückt / entlastet

Event.MouseButton.X – an welcher X-Position?

Evvent.MouseButton.Y – an welcher Y-Position?

Urbas © 2013 MRT2::SFML Folie 4


Shape

http://www.sfml-dev.org/tutorials/1.6/graphics-shape.php

• Ein Shape ist ein konvexes Polygon

Polygon, Line, Circle, Rect

• Attribute der Punkte können einzeln gesetzt und gelesen werden

Set/GetPointPosition, Set/GetPointColor, Set/GetPointOutlineColor,

• bzw. für das gesamte Shape

Set/GetPosition, Set/GetColor, Set/GetOutlineWidth

EnableFilll(bool), EnableOutline(bool);

• Ein Shape kann verschoben, skaliert und rotiert werden

Move(float,float), Scale(float,float), Rotate(float)

Urbas © 2013 MRT2::SFML Folie 5


Einstieg: Interaktives Verschieben eines

Shapes (Projekt SfmlTest)

• Spezifikation

ein Kreis soll durch Anklicken mit dem linken Mausknopf aktiviert werden

und mit gedrückter Maustaste an einen neuen Ort verschoben werden

• Objektinstanzen

sf::RenderWindow window – für‘s zeichnen

sf::Event event – aktuelles Ereignis

sf::Shape circle – der Kreis

bool captured - haben wir Kreis gefangen?

• Methoden

Ereignisschleife zur Behandlung von Closed, MouseButtonPressed,

MouseButtonReleased und MouseMoved

inside_circle – ist Klick auf Fläche von Kreis erfolgt?

Urbas © 2013 MRT2::SFML Folie 6


SFML-Libraries verwenden

• Im Kontextmenu des

Projekts im Project

Explorer

properties

C/C++ General

Paths and Symbols

Reiter Libraries

Add...

sfml-graphics

sfml-window

sfml-system

Urbas © 2013 MRT2::SFML Folie 7


Kritik an Lösung

• switch-case-struktur ist schnell geschrieben aber schwer zu warten

Verhalten und Grafiklogik sind ineinander verwoben.

Ereignis, Zustand und Verhaltensspzifikation sind nicht sauber getrennt

Lokale Bedingungen (zur Steuerung von lokalem Verhalten) werden in

globalen Variablen gehalten.

captured

• Erweiterung für RobotHMI führt zu Spagetti-Code

Verhalten von Hindernissen

Verhalten des Roboters

Anzeige von internen Variablen

Eingabe von Zuständen

Urbas © 2013 MRT2::SFML Folie 8


Stukturierte Analyse Automat

(Projekt SfmlTestAutomaton)

• Zustände: s0: Kein Objekt gefangen; s1: Objekt gefangen

• Transitonen: Ereignisse (+ ggf. komplexe Bedingung)

Urbas © 2013 MRT2::SFML Folie 9

Weitere Magazine dieses Users
Ähnliche Magazine