22.03.2007 Matthias Keller 1
Dr. G. Oevel
Preface
Verschachtelte Visualisierung von Modelle – Konzepte und Architektur
Diplomarbeit
Matthias Keller
22.03.2007 Matthias Keller 3
Dr. G. Oevel
Agenda
Einleitung
Vorstellung Schwerpunkte Weitere Aspekte
Fazit
Demo
22.03.2007 Matthias Keller 4
Dr. G. Oevel
Informationszeitalter
Unübersichtlich
Informationsverlust
Paderborn - Luftfeuchtigkeit in %
22.03.2007 Matthias Keller 5
Dr. G. Oevel
Modelle
Platzverbrauch Grafische Aufbereitung,
bessere Lesbarkeit
22.03.2007 Matthias Keller 6
Dr. G. Oevel
Weiterführende Modelle
Hierarchische Informationsräume
Weiterführende Informationen
Kontext-Informationen
flach tief
Abs
trak
tions
eben
e
Architektur
Klassen
Anweisungen
Kontext-Detail-Problem
22.03.2007 Matthias Keller 7
Dr. G. Oevel
Kontext-Detail-Problematik[.]
Separate Ansicht für Kontext und Detail
Vergleichsproblem Lokalitätsproblem
KontextDetail
Kontext
Detail
Widgets
Kontext->Detail ->Detail
Kontext->Kontext->Detail
Ko
nte
xt
Detail
Kontext->Detail ->Detail
Kontext->Kontext->Detail
Detail
Kontext
Detail
Detail
22.03.2007 Matthias Keller 8
Dr. G. Oevel
Verschachtelte Modelle
Alternative zum Kontext-Detail-Problem
Kein Lokalitätsverlust
22.03.2007 Matthias Keller 9
Dr. G. Oevel
Verschachtelte Modelle – Anforderungen
Modelle innerhalb von Modellen
+ Separate Definition von Modellen
+ Austausch von Modellen (zur Laufzeit)
Weiter reichende Aufgabenstellung
=> flexiblere Architektur
22.03.2007 Matthias Keller 10
Dr. G. Oevel
Verschachtelte Modelle – Konzepte
Granularität
Grob: pro Modell Fein: pro Visuelles
Muster Vereinfachung
Austausch
Relative Skalierung
M 1
M 2
M 3
M 4
M 5
M 6
Abs
trak
tions
eben
e
innerstesModell
äußerstesModell
VP1
Abstr
aktionsebeneVP2
VP3
VP4
VP5
VP8
VP11
VP12
VP6
VP7
VP9
VP10innerstesModell
äußerstesModell
Agent M1
Agent M2
Agent M5
A.M2
A.M3
Agent M3 Agent M
6
Kontext
Detail
Detail
Kontext
Kontext
Detail
Detail
ZUI
Detail
Kontext->Kontext->Detail
Kontext->Detail ->Detail
22.03.2007 Matthias Keller 11
Dr. G. Oevel
Verschachtelte Modelle – Optimierung
Riesige Meta-Modelle Performance Lazy Evaluation[.]
Szenegraph[.] & Clipping Semantic Zooming[.]
Darstellung Dargestellte
22.03.2007 Matthias Keller 12
Dr. G. Oevel
Semantic Zooming
„Beim Semantic Zooming[.] ändert sich die Repräsentation eines Elements“
„Alter Hase“ Größenveränderungen
Sender: mk
Subjekt: dabla bla bla, bla bla
blub bla blub bla,
nochmehr text...
Send: mkSubj: dabla...blub...
mkda
Arbeitsfläche
Z-Achse
Abstand d.Betrachters
22.03.2007 Matthias Keller 13
Dr. G. Oevel
Semantic Zooming - Konzepte
Größenveränderungen Semantische Positionen der
Elemente
Repräsentationsveränderungen Benutzerdefiniert Generiert Überblenden Mix
Layout und Positionierung
~~~
~~~ ~~~
~~~
~~~~~~
~~~~~~
~~~ ~~~ ~~~
alte Repräsentation
0%
100%50%
neue Repräsentation
Z-Achse
Grö
ße
~~~ ~~~ ~~~0%
100%50%
Z-Achse
Grö
ße
Fort-schritt(a) Animation
(b) Generiert
~~~~~~
0%
100%50% Z-Achse
Grö
ße
(c) Überblendet
~~~~~~
~~~~~~
0% 100%50%
Z-Achse
Grö
ße
(d) weiche Größe
~~~~~~
weicheGrößenver-änderung
Nachbarn
Abstand des Betrachters
Agent
Blatt-Agent
Wurzel-Agent
Layout /Position-ierung
Größe
umgebendesModell
inneresModell
22.03.2007 Matthias Keller 14
Dr. G. Oevel
Aspekt I – Zoom-Interaktion
Schrittweise[.], einfach
Stufenlos[.], kognitiv aufwendiger
Kontrolliert Schrittweise von einer „wichtigen“Repräsentations-
veränderung zur Nächsten
Zoombar statt Scrollbar Intervallgrenzen
22.03.2007 Matthias Keller 15
Dr. G. Oevel
~~~
(a) ohne
(c) Kegel
(b) Bullauge (d) abgeflacht
Aspekt II – Degree of Interest[.]
Fisheye[.]
Verzerrung der Arbeitsfläche (Bullauge) Überlappende Vergrößerung (Lupe)
Allgemein: „Hervorhebung interessanter Elemente Häufige Benutzung, Suchergebniss, Arbeitsprozess
22.03.2007 Matthias Keller 16
Dr. G. Oevel
Vorstellung
Sender: mk
Subjekt: dabla bla bla, bla bla
blub bla blub bla,
nochmehr text...
Send: mkSubj: dabla...blub...
mkda
Arbeitsfläche
Z-Achse
Abstand d.Betrachters
~~~
(a) ohne
(c) Kegel
(b) Bullauge (d) abgeflacht
VerschachtelteModelle
SemanticZooming
Level of DetailZoom-
Interaktion
22.03.2007 Matthias Keller 17
Dr. G. Oevel
yxz
(a) direkt
(c) ContinousZooming
(b) BogenKontext
Detail
Kontext
Detail
Kontext
Detail
Detail
Kontext
Kontext
Detail
Detail
Widgets
ZUI
Kontext->Detail ->Detail
Kontext->Kontext->Detail
Detail
Kontext->Kontext->Detail
Kontext->Detail ->Detail
Über-blenden
Knoten
Rechteck
Überblenden
Knoten
Rechteck
Überblen-dendesRechteck
Wurzel
Rechteck
Überblen-dendes
Rechteck
Polylithic Monolithic
Klassen-hierarchie
Rechteck Rechteck
Über-blenden
Über-blenden
Scene-Graph
Überblen-dendes
Rechteck
Überblen-dendes
Rechteck
Wurzel
Datatypevisualizedby Agent
concret Agent
concret Animations
concretData-Access
Presentation
Control
Abstraction
Semantic-Agent
IDataModel<<interface>>
ClassAgent
ScaleOfDataDOI
SemanticAgent
ManuelDOIStep
PNode
DegreeOfInterest
ScaleFunctionsInvalidateCalcDOIScale
<<interface>>IProvidesDegreeOfInterest
getDegreeOfInterest () : DegreeOfInterest
DOIFunction = f( ) : float
MethodAgent
ScaleOfDataDOI
PNode
PRoot
PLayer
PNode PText
PPath
PCamera
PImage
1
11
0..*
0..*
1
coreframework
PBasicInputEventHandler
OnMouseDown, OnMouseUp
1..*
PDragSquenceEventHandler
OnDragDrop
DragZooming
ViewZoomPoint
StepZooming
intensity : float
ControlledZooming
Set
PCamera PLayer
SmoothPanningZooming
ZoomStepAggregator
Invalidate
T=float
IProvideZoomStep<<interface>>
GlobalZoomsteps : float[]Zoomstep : float[]
InputManagerMyCanvas
1
SemanticAgent
Matrix, Bounds Event-Handling
Tree-Data-Structure
Layout, Draw
Representations
ContextMenu
PresentationControl
Abstraction
Bottom-Level-Agent
Intermediate-Level-Agent
P A
Top-Level-Agent
C
P A
Intermediate-Level-Agent
C P AC
P A
Bottom-Level-Agent
C P AC
Agent
P C A P C A
P C A
Agent
Pact
C A
Pn
P1
P2
R2
R1
(b) Austausch
Pact
->Pnext
C A
Pn
P1
P2
(c) Blenden
C AP
(d) Animation
f1
f2
fn-1
P1
Arbeitsfläche
Z
P2
Pn
P1
Arbeitsfläche
Z
P2
Pn
f1
fn-1
aktuellerAgent
andere Agenten
aktuelleRepräsentation
andere Re-präsentation
aktuellerÜbergang
aktuelleAnimation
fact
P C A
Rn
(a) Simple
Was blieb unerwähnt? Architektur Verschachtelte
Modelle Semantic Zooming
Konzepte Betrachterposition,
„Bookmarks“ Widget vs. ZUI[.]-
Framework Monolithic vs.
Polylithic[.]
Tastatursteuerung …
Software - Struktur
22.03.2007 Matthias Keller 18
Dr. G. Oevel
Weitere Forschungsansätze
Lazy Loading, Ephermeral Objects[.]
Visuelle Muster[.] zur Laufzeit geladenGenerator für RepräsentationsübergängeContinous Zooming[.]
Hervorhebende Visuelle Muster (Degree of Interest[.])Optimierung der Architektur für Spezialfälle (kontrolliertes Zoomen, etc.)
22.03.2007 Matthias Keller 19
Dr. G. Oevel
Fazit
Mensch-Maschine-Wechselwirkung
Modell-getriebene
Architekturen
Computer-grafik
ZoomableUser
Interfaces
SemanticZooming
VisuelleSprachen,
Muster
Szenegraph
Level of Detail
Strukt
ur Optimierung
Usab
ility •Verringerung der
Mensch-Maschine-Grenze•Inuitivität
•Generisch•Einfachheit
•Verringerung der Latenz
22.03.2007 Matthias Keller 20
Dr. G. Oevel
Einsatzgebiete
Kontext-Detail-Darstellungen Informationsdarstellung Tiefe, komplexe Informationsräume
Verschachtelte heterogene Ansichten Strukturübersichten Wissensrepräsentationen
Karte +Niederschlags-
StatistikOrganigrammeEnzyklopädie
22.03.2007 Matthias Keller 21
Dr. G. Oevel
22.03.2007 Matthias Keller 22
Dr. G. Oevel
Referenzen
Degree of InterestFairchild, K.M., Information Management Using Virtual Reality-Based Visualizations, 1993
FisheyeSarkar, M.; Brown, M. H., Graphical Fisheye Views, 1993
Monolithic vs. PolylithicBederson, B.; Grosjean J.; Meyer J.; Toolkit Design forInteractive Structured Graphics. University of Maryland, 2004
Visuelle MusterSchmidt C.; Generierung von Struktureditoren für anspruchsvolle visuelle Sprachen. Universität Paderborn, 2006
Continuous ZoomingPerlin, K.; Fox D., Pad: an alternative approach to the computer interface, 1993
22.03.2007 Matthias Keller 23
Dr. G. Oevel
Referenzen
Lazy Evaluation, Lazy Loading, Ephermeral Objects:Bederson, B.; Hollan J.D., Pad++: a zooming graphical interface for exploring alternate interface physics, 1994
SzenegraphBar-Zeev A.; Scenegraph: Past, Present and Futur. http://www.realityprime.com/scenegraph.php; Zugriff:18.12.2006
Semantic Zooming, ZUIPerlin, K.; Fox D., Pad: an alternative approach to the computer interface, 1993
Schrittweises ZoomenNavigation in diversen Programmen von Office-Anwendungen bis hin zur Grafikbearbeitung
Stufenloses ZoomenStandart-Navigation im Picollo-FrameworkHuman-Computer Interaction Lab: Piccolo Main Page. , http://www.cs.umd.edu/hcil/jazz/; Zugriff:18.12.2006
22.03.2007 Matthias Keller 24
Dr. G. Oevel
22.03.2007 Matthias Keller 25
Dr. G. Oevel
Visuelle Sprache
Strukturierte Beschreibung komplexer Modelle durch Visuelle Muster
elem1
elem2elem3
elem4
Liste
elem1
elem2
elem3
Menge
a11
a21a31
a41
Matrix
a12
a22a32
a42
elem1
elem2 elem3
elem4Baum
if( ) { }x anw Text
elem1elem2
Verbindung