Vorwort
Grundlagen
Layout
Überblick
Das <layout>-Element
Das <root-layout>-Element
Das <region>-Element
Das <topLayout>-Element
Das <regPoint>-Element
Zeit
Bild, Text und Ton
SMIL und HTML
Referenz
Beispiele
Anhang
Quellen
|
2. Layout
2.6. Das <regPoint>-Element
Im letzten Kapitel wurde das MultiWindowLayout-Konzept
dargestellt. In diesem Kapitel wird das hierachische Layout-Konzept
besprochen. Das HierarchicalLayout-Konzept ist eine Erweiterung
des BasicLayout-Konzept und des MultiWindowLayout-Konzept.
Das Konzept erweitert:
- das <region>-Element um die Möglichkeit hierarchischer
Präsentationsfenster,
- führt eine neues Element, das <regPoint>-Element
ein,
- führt für Medienelemente die neuen Attribute top,
bottom, left und right ein.
Im untenstehenden Beispiel wird gezeigt, wie eine
Hierarchie von Präsentationsfenstern definiert werden kann
(Quelle: SMIL, W3C, 2001):
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<topLayout width="640" height="480" id="WinV" title="Video">
<region id="left" top="0%" left="0%" width="50%" height="100%"/>
<region id="right" top="0%" left="50%" width="50%" height="100%">
<region id="inset" top="25%" left="25%" width="50%" height="50%"/>
</region>
</topLayout>
</head>
</layout>
<body>
.......
</body>
</smil>
Als Ergebnis erhält man (Quelle: SMIL, W3C,
2001):
Die Positionierung einzelner Medienobjekte erfolgt
wie üblich mit Hilfe des <region>-Elements; allerdings
kann durch die Verwendung standardisierter Positionsangaben im
Medien-Element, eine Feinpositionierung innerhalb eines Präsentationsfensters
erfolgen. Das obige Beispiel wird wie folgt erweitert:
..........
<body>
<region src="..." region="inset" top="5%" left="3" bottom="10%" right="15%"/>
</body>
</smil>
In dem obenstehenden Beispiel wird durch die Positionsangaben
folgende Feinpositionierung innerhalb des Präsentationsfensters
inset erreicht (Quelle: SMIL, W3C, 2001):
Es ist zu beachten, dass sich Prozentangaben immer
auf das entsprechende top-level-Fenster beziehen, in dem sich
das Präsentationsfenster befindet. Dasselbe gilt für
z-index-Angaben bei der Verwendung überlappender Präsentationsfenster.
Das <regPoint>-Element definiert Positionansgaben,
die später bei der Positionierung eines Medienobjekts benutzt
werden können. Das <regPoint>-Element ist dabei Teil
der Layout-Definition durch das <layout>-Element. Aus diesem
Grund sollte es dem <layout>-Element direkt folgen. Beispiel:
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<regPoint id="midPoint" top="50%" left="50%" regAlign="center" />
<root-layout height="400" width="400" backgrundColor="blue" />
<region id="a" top="0%" left="50%" width="50%" height="100%" />
</region>
</head>
</layout>
<body>
<img src="xy.jpg." region="a" dur="5s" regPoint="midPoint" />
<img src="yz.jpg" region="a" dur="5s" regPoint="midPoint" />
</body>
</smil>
Mit dem <regPoint>-Element wird ein Referenzpunkt
gesetzt, von dem aus die horizontale und vertikale Positionierung
eines Medienobjekts erfolgt. Der Referenzpunkt entspricht einer
vordefinierten Positionsangabe, von der aus die tatsächliche,
aktuelle Positionierung des Medienobjekts errechnet wird. Ein
Referenzpunkt wird von der linken oberen Ecke aus definiert.
Neben den Kernattributen und den Testattributen
kennt das <regPoint>-Element folgende Attribute:
- top Positionsangabe in Prozent oder Pixel vom oberen
Rand (Voreinstellung ist auto).
- bottom Positionsangabe in Prozent oder Pixel vom
unteren Rand Rand (Voreinstellung ist auto).
- left Positionsangabe in Prozent oder Pixel vom linken
Rand Rand (Voreinstellung ist auto).
- right Positionsangabe in Prozent oder Pixel vom rechten
Rand Rand (Voreinstellung ist auto).
- regAlign Positionierungsalgorithmus mit folgenden
Attributwerten: topLeft (0%, 0%), topMid (0%, 50%), topRight
(0%, 100%), midLeft (50%, 0%), center (50%, 50%), midRight (50%,
100%), bottomLeft 100%, 0%), bottomMid (100%, 50%), und bottomRight
(100%, 100%). Voreinstellung ist topLeft.
Auf diese Weise können Medienobjekte, die
nicht dieselbe Größe besitzen, relativ einfach positioniert
werden. So können z.B. Bilder unterschiedlicher Größe
in der Mitte der Playerfenster zentriert werden, ohne dass vorher
die genaue Position jedes einzelnen Bildes bestimmt werden muss.
Die Verwendung von Referenzpunkten und des regAling-Mechanismus
beeinflusst auch die Ergebnisse des fit-Attributs des <region>-Elements.
Wie die Attributewerte des fit-Attribut (fill, hidden, meet, scroll
und slice) des <region>-Elements interpretiert werden, hängt
wie folgt von den Attributwerten des regAling-Attributs des <regPoint>-Elements
ab:
- fill mit topLeft: Höhe und Breite werden
so skaliert, dass der untere und rechte Rand erreicht wird;
- fill mit topMid: Höhe und Breite werden
so skaliert, dass der untere und der am nähsten zum regPonit
liegende rechte oder linke Rand erreicht wird;
- fill mit topRight: Höhe und Breite
werden so skaliert, dass der untere und linke Rand erreicht
wird;
- fill mit midLeft: Höhe und Breite werden
so skaliert, dass der rechte und der nähste zum regPoint
liegende obere oder untere Rand erreicht wird;
- fill mit center: Höhe und Breite werden so skaliert,
dass der nähste zum regPoint liegende obere oder untere
und rechte oder linke Rand erreicht wird;
- fill mit midRight: Höhe und Breite
werden so skaliert, dass der linke und der nähste zum regPoint
liegende obere oder untere Rand erreicht wird;
- fill mit bottomLeft: Höhe und Breite
werden so skaliert, dass der obere und rechte Rand erreicht
wird;
- fill mit bottomMid: Höhe und Breite
werden so skaliert, dass der obere und der am nähsten zum
regPonit liegende rechte oder linke Rand erreicht wird;
- fill mit bottomRight: Höhe und Breite
werden so skaliert, dass der obere und linke Rand erreicht wird;
- hidden: Das Medienobjekt wird nach den regAlign-Angaben
positieniert; wird die Playerfenster nicht ausgefüllt,
tritt an die freie Fläche die Hintergrundfarbe; ist das
Medienobjekt größer als die Playerfenster, wird es
an den Rändern abgeschnitten;
- meet mit topLeft: Höhe und Breite werden
so skaliert, dass das Verhältnis von Höhe zu Breite
erhalten bleibt und der untere und rechte Rand erreicht wird;
- meet mit topMid: Höhe und Breite werden
so skaliert, dass das Verhältnis von Höhe zu Breite
erhalten bleibt und der untere und der am nähsten zum regPonit
liegende rechte oder linke Rand erreicht wird;
- meet mit topRight: Höhe und Breite werden so
skaliert, dass das Verhältnis von Höhe zu Breite erhalten
bleibt und der untere und linke Rand erreicht wird;
- meet mit midLeft: Höhe und Breite werden
so skaliert, dass das Verhältnis von Höhe zu Breite
erhalten bleibt und der rechte und der nähste zum regPoint
liegende obere oder untere Rand erreicht wird;
- meet mit center: Höhe und Breite werden
so skaliert, dass das Verhältnis von Höhe zu Breite
erhalten bleibt und der nähste zum regPoint liegende obere
oder untere und rechte oder linke Rand erreicht wird;
- meet mit midRight: Höhe und Breite
werden so skaliert, dass das Verhältnis von Höhe zu
Breite erhalten bleibt und der linke und der nähste zum
regPoint liegende obere oder untere Rand erreicht wird;
- meet mit bottomLeft: Höhe und Breite
werden so skaliert, dass das Verhältnis von Höhe zu
Breite erhalten bleibt und der obere und rechte Rand erreicht
wird;
- meet mit bottomMid: Höhe und Breite werden so
skaliert, dass das Verhältnis von Höhe zu Breite erhalten
bleibt und der obere und der am nähsten zum regPonit liegende
rechte oder linke Rand erreicht wird;
- meet mit bottomRight: Höhe und Breite
werden so skaliert, dass das Verhältnis von Höhe zu
Breite erhalten bleibt und der obere und linke Rand erreicht
wird;
- scroll: Das Medienobjekt wird nach den regAlign-Angaben
positieniert; wird die Playerfenster nicht ausgefüllt,
tritt an die freie Fläche die Hintergrundfarbe; ist das
Medienobjekt größer als die Playerfenster, werden
Rollbalken eingefügt;
- slice mit topLeft: Höhe und Breite
werden so skaliert, dass das Verhältnis von Höhe zu
Breite erhalten bleibt und der untere oder rechte Rand bei größtmöglicher
Skalierung erreicht wird; überstehende Inhalte werden abgeschnitten;
- slice mit topMid: Höhe und Breite werden
so skaliert, dass das Verhältnis von Höhe zu Breite
erhalten bleibt und der untere und der am nähsten zum regPonit
liegende rechte oder linke Rand mit größtmöglicher
Skalierung erreicht wird; überstehende Inhalte werden abgeschnitten;
- slice mit topRight: Höhe und Breite
werden so skaliert, dass das Verhältnis von Höhe zu
Breite erhalten bleibt und der untere oder linke Rand mit größtmöglicher
Skalierung erreicht wird; überstehende Inhalte werden abgeschnitten;
- slice mit midLeft: Höhe und Breite
werden so skaliert, dass das Verhältnis von Höhe zu
Breite erhalten bleibt und der rechte und der nähste zum
regPoint liegende obere oder untere Rand mit größtmöglicher
Skalierung erreicht wird; überstehende Inhalte werden abgeschnitten;
- slice mit center: Höhe und Breite werden
so skaliert, dass das Verhältnis von Höhe zu Breite
erhalten bleibt und der nähste zum regPoint liegende obere
oder untere oder rechte oder linke Rand mit größtmöglicher
Skalierung erreicht wird; überstehende Inhalte werden abgeschnitten;
- slice mit midRight: Höhe und Breite
werden so skaliert, dass das Verhältnis von Höhe zu
Breite erhalten bleibt und der linke oder der nähste zum
regPoint liegende obere oder untere Rand mit größtmöglicher
Skalierung erreicht wird; überstehende Inhalte werden abgeschnitten;
- slice mit bottomLeft: Höhe und Breite
werden so skaliert, dass das Verhältnis von Höhe zu
Breite erhalten bleibt und der obere oder rechte Rand mit größtmöglicher
Skalierung erreicht wird; überstehende Inhalte werden abgeschnitten;
- slice mit bottomMid: Höhe und Breite
werden so skaliert, dass das Verhältnis von Höhe zu
Breite erhalten bleibt und der obere oder der am nähsten
zum regPonit liegende rechte oder linke Rand mit größtmöglicher
Skalierung erreicht wird; überstehende Inhalte werden abgeschnitten;
- slice mit bottomRight: Höhe und Breite
werden so skaliert, dass das Verhältnis von Höhe zu
Breite erhalten bleibt und der obere oder linke Rand mit größtmöglicher
Skalierung erreicht wird; überstehende Inhalte werden abgeschnitten.
In folgenden Beispielen werden die Präsentationsergebnisse
der einzelnen Attributwerte demonstriert:
Während das BasicLayout-Konzept nur das <region>-Attribut
zur Positionierung eines Medienelements kennt, können mit
Hilfe des HierachicalLayout-Konzepts vordefinierte Angaben zur
Positionierung und Präsentation eines oder mehrere Medienelemente
gemacht werden. Folgende Attribute können bei Medienelementen
zusätzlich benutzt werden:
- backgroundColor - eigene Hintergrundfarbe, die die
im regione-Element spezifizierte Hintegrundfarbe überschreibt;
- top, bottom, left und right - Positionsangaben
zur direkten Positionierung des Medienobjekts;
- regPoint - eigene regPoint-Angaben für das Medienobjekt;
- regAlign - regAling-Angaben für den für
das Medienobjekt mit regPoint definierten Bezugspunkt;
- fit - eigene fit-Angaben für das Medienobjekt,
die die fit-Angaben des region-Elements überschreiben.
|