Dr. G. Oevel 22.03.2007Matthias Keller1 Preface. Verschachtelte Visualisierung von Modelle –...

22.03.2007 Matthias Keller 1

Dr. G. Oevel

Preface

Verschachtelte Visualisierung von Modelle – Konzepte und Architektur

Diplomarbeit

Matthias Keller


Dr. G. Oevel

Agenda

Einleitung

Vorstellung Schwerpunkte Weitere Aspekte

Fazit

Demo


Dr. G. Oevel

Informationszeitalter

Unübersichtlich

Informationsverlust

Paderborn - Luftfeuchtigkeit in %


Dr. G. Oevel

Modelle

Platzverbrauch Grafische Aufbereitung,

bessere Lesbarkeit


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


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



Detail

Kontext

Detail

Detail


Dr. G. Oevel

Verschachtelte Modelle

Alternative zum Kontext-Detail-Problem

Kein Lokalitätsverlust


Dr. G. Oevel

Verschachtelte Modelle – Anforderungen

Modelle innerhalb von Modellen

+ Separate Definition von Modellen

+ Austausch von Modellen (zur Laufzeit)

Weiter reichende Aufgabenstellung

=> flexiblere Architektur


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




Dr. G. Oevel

Verschachtelte Modelle – Optimierung

Riesige Meta-Modelle Performance Lazy Evaluation[.]

Szenegraph[.] & Clipping Semantic Zooming[.]

Darstellung Dargestellte


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


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


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


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


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


Dr. G. Oevel

yxz

(a) direkt

(c) ContinousZooming

(b) BogenKontext

Detail

Kontext

Detail

Kontext

Detail

Detail

Kontext

Kontext

Detail

Detail

Widgets

ZUI



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


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.)


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


Dr. G. Oevel

Einsatzgebiete

Kontext-Detail-Darstellungen Informationsdarstellung Tiefe, komplexe Informationsräume

Verschachtelte heterogene Ansichten Strukturübersichten Wissensrepräsentationen

Karte +Niederschlags-

StatistikOrganigrammeEnzyklopädie


Dr. G. Oevel


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


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


Dr. G. Oevel


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

Dr. G. Oevel 22.03.2007Matthias Keller1 Preface. Verschachtelte Visualisierung von Modelle –...

Documents

Transcript of Dr. G. Oevel 22.03.2007Matthias Keller1 Preface. Verschachtelte Visualisierung von Modelle –...