Deep Zoom Composer und das MultiScaleImage

Mit Deep Zoom wird in Silverlight die Technologie bezeichnet, die es erlaubt sehr große, hochauflösende Bilder und Bildersammlungen zu betrachten und mit diesen zu arbeiten. Die Betonung liegt hier wirklich auf sehr, sehr, sehr große Bilder und Bildersammlungen. Normalerweise dauert es lange viele hochauflösende Bilder über das Internet zu übertragen. Zusätzlich sind diese Bilder oft nur statisch eingebunden in eine Webseite eingebunden, d.h. sie können nicht einfach vergrößert, verkleinert und leicht bewegt oder interaktiv verwendet werden.

Genau das ermöglicht Deep Zoom. Mittels des Expression Deep Zoom Composers können Bilder beliebig angeordnet und aus verschiedenen Zoomstufen sehr schnell betrachtet werden. Dabei wird sich dem Trick bedient, dass ein großes Bild in verschiedenen Auflösungen in jeweils viele kleine Teile sogenannte Kacheln zerlegt werden, wie es bereits diverse andere Anwendungen, wie z.B. Virtual Earth, machen. Allerdings ist der Aufwand zum Zerlegen dieser großen Bilder in viele kleine Einzelbilder sehr aufwendig und Zeitintensiv. Hier kommt genau der Deep Zoom Composer ins Spiel, der diese Aufgabe übernimmt.

Das Ergebnis des Expression Deep Zoom Composer ist eine Sammlung von Bildern und Informationsdateien, die mit Hilfe des MultiScaleImage-Steuerelementes von Silverlight 2 angezeigt und gesteuert werden können. Das MultiScaleImage-Element ermöglicht es, das der Benutzer diese Bilder sehr interaktiv, z.B. durch Mausbewegung oder Tastatureingaben, steuern kann. Dies geschieht extrem schnell, da nicht alle Bilddaten sofort sondern nur bei tatsächlichen Bedarf geladen werden. Der aktuelle „Bedarf“ ermittelt sich aus der aktuellen Zoomstufe und des sichtbaren Bereichs. Werden alle Bilder der Sammlung gleichzeitig angezeigt, kann dies nur geschehen in dem alle Bilder relativ klein und damit nicht hochauflösend dargestellt werden (Abbildung 7.1).

Abbildung 7 . 1 : 15 Bilder nebeneinander aufgereiht. Es werden nur Daten geladen die für diese Zoomstufe benötigt werden. Hochauflösende Detaildaten fehlen hier völlig.

Deep Zoom beinhaltet einen Mechanismus der je nach Zoomstufe den betrachteten Ausschnitt nach lädt. Dazu muss eine vorbereitete Sammlung von Bildern vorliegen, die vorher mit dem Expression Deep Zoom Composer erstellt wurde. Diese speziell aufbereiteten Bilder bestehen aus einzelne Kacheln die nach Bedarf nachgeladen werden und an sich sehr klein sind. Wäre dies nicht der Fall müsste immer das gesamte Bild nachgeladen werden und der Anwender müsste lange warten.

Abbildung 7 . 2 : Zwei Teilbilder aus der gleichen Sammlung, nur sehr stark herangezoomt. Es werden nur die Detailinformationen geladen die auch darstellbar sind.

In dem Moment in dem gezoomt wird, wird das aktuelle Bildmaterial zunächst vergrößert und erscheint so lange bis die Detailbilder nachgeladen wurden etwas verschwommen. In dem Moment in die Daten angekommen sind, wird sanft übergeblendet.

Expression Deep Zoom Composer

Der Expression Deep Zoom Composer ist eine Anwendung die vom Expression Studio Team entwickelt wurde und sich der Seadragon-Technologie bedient. Seadragon wurde von den Microsoft Research Live Labs entwickelt und fliest in diverse Microsoft Projekte ein, z.B. Silverlight und PhotoSynth (https://labs.live.com/photosynth).

Der Deep Zoom Composer konvertiert normale und hochauflösende Bilder und Bildersammlungen in sogenannte Deep Zoom Sammlungen, die sich mittels des Silverlight-Steuerelement MultiScaleImage anzeigen und steuern lassen.

Unterschied Deep Zoom Bild und Sammlung erklären

Abbildung 7 . 3 : Das Startlogo von Deep Zoom

Beim Starten der Anwendung hat man im Start-Dialog direkt die Möglichkeit auf bestehende Projekte zuzugreifen oder ein neues Projekt zu beginnen.

Abbildung 7 . 4 : Start-Dialog des Expression Deep Zoom Composer

Erstellen einer Deep Zoom Sammlung

Der Expression Deep Zoom Composer ist sehr einfach aufgebaut. In nur drei Schritten kann damit in kürzester Zeit eine Deep Zoom Sammlung erstellt werden, die dann mit Silverlight und dem MultiScaleImage angezeigt werden kann.

Anlegen eines neuen Projektes

Zum Erstellen einer neuen Deep Zoom Sammlung wird lediglich ein neues Projekt benötigt. Dieses wird über FileàNew Project angelegt.

Abbildung 7 . 5 : Anlegen eines neuen Projektes

Drei Schritte zum fertigen Bild

Der erste Schritt besteht darin, seine eigenen Bilder zu importieren (Import. Der zweite Schritt erlaubt das Arrangieren (Compose) seiner eigenen Bilder in verschiedenen Ebenen (Layern). Im letzten Schritt wird das aktuelle Projekt in eine Deep Zoom Sammlung exportiert (Export).

Abbildung 7 . 6 : Die einzelnen Schritte im Deep Zoom Composer

Diese drei Schritte werden, wie in Abbildung 7.6 zu sehen ist, über eine Art Karteireiter gesteuert.

1. Schritt: Import

2. Schritt: Compose

3. Schritt: Export

Schritt 1: Importieren seiner eigenen Bildern

Über Add Image im ersten Karteireiter können beliebig viele Bilder importiert werden. Derzeit werden die folgenden Datei-Formate unterstützt: tiff, tif, jpg, bmp und png Je nach Anzahl und Größe der Bilder dauert dieser Vorgang einen kleinen Moment

Abbildung 7 . 7 : Importieren der Bilder

Anschließend kann man die importierten Bilder in einer übersichtlichen Liste betrachten und gegebenenfalls wieder entfernen. Dort sieht man ebenfalls genau die Dimensionen und physikalische Größe der Bilder.

Abbildung 7 . 8 : Die importierten Bilder in der Übersicht

Bilder Galerie

Bilder Vorschau

Schritt 2: Arrangieren der Bilder

Im zweiten Reiter (Compose) kann man die importierten Bilder per Doppelklick auf der Arbeitsfläche einfügen.

Layout-Werkzeuge

Wenn die gewünschten Bilder eingefügt sind kann man diese über die Anordnungswerkzeuge im unteren Bereich der Anwendung aneinander verschieben und aneinander ausrichten.

Abbildung 7 . 9 : Werkzeuge zum Arrangieren der Bilder.

Die Werkzeuge zum Arrangieren der Bilder umfassen neben dem Selektionspfeil zu Auswählen von einzelnen oder mehreren Bildern, auch zwei Lupen. Mit Hilfe der beiden Lupen kann in das Bild hinein und wieder heraus zoomen. Zu Beginn befindet man sich in der obersten Zoomebene. Wenn in dieser Ansicht Bilder einfügt, befinden diese sich zusammen in genau dieser Zoomebene. Zoomt man in das Bild weiter hinein oder heraus, geht man entsprechend auf eine andere Zoomebene. Werden dort nun weitere Bilder eingefügt, befinden diese sich wiederum in einer eigenen Zoomebene.

Die weiteren Werkzeuge erlauben das vertikale und horizontale Ausrichten der Bilder aneinander und das gleichmäßige Verteilen der Bilder auf der Arbeitsfläche.

- Align Left

- Align Center

- Align Right

- Align Top

- Align Middle

- Align Bottom

- Distribute Horizontally

- Distribute Vertically

- Make Same Width

- Make Same Height

Im folgenden Bild (Abbildung 7.10) befinden sich in der aktuellen Ansicht acht Bilder. Auf einem dieser Bilder befindet sich eine kleine Lupe. Diese Lupe gibt an das sich dort eine weitere Zoomebene befindet und dort weitere Bilder hinterlegt sind.

Abbildung 7 . 10 : Die Ansicht der Sammlung in der vollen Ansicht, alle Elemente sind in der obersten Zoomstufe zu sehen.Zusätzlich sieht man links in der Mitte eine kleine Lupe, die auf weitere Zoomebenen und Bilder hinweist.

Mit der linken Lupe der Werkzeugleiste lässt sich beliebig in die Sammlung hinein zoomen. Wenn man nun die Lupe oder einen anderen Bereich selektiert, kann in eine tiefere Zoomstufe wandern und dort entweder bereits abgelegte Bilder betrachten oder neue Bilder einfügen. Der Zoomtiefe ist dabei (fast) keine Grenze gesetzt.

Abbildung 7 . 11 : Innerhalb eines Bildes der Gesamtansicht wurde ein weiteres Bild eingefügt.

Alle Bilder - Reiter

This section of the image gallery displays all of the images imported to the project. The images that are being used in the composition have a lower opacity. In the image to the left the top images is transparent meaning it is currently being used in the composition. The bottom image on the other hand is not.

Ebenen Sicht - Reiter

The second tab displays only the images used in the composition. The image on the left shows the Layer View tab. The user can use the arrow buttons to change the z order of the images on the artboard.

Visibility

The eye icon represents the visibility property set for each image on the artboard. This visibility setting can be set in the Layer View Tab.

Arbeitsbereich

The user can create and edit compositions on the artboard in the Compose workspace. This workspace provides the user with a design area with the ability to position and arrange the images, also has a basic set of tools (selection, pan, zoom), as well as basic alignment features (align & distribute). The images in the composition are added to the artboard by dragging/dropping via the image gallery. The user has the ability to arrange elements on the artboard and be able to view the contents through a keyhole navigator and modify with three different tools. The user is also able to manipulate the images with adorners and modify the layout/alignment with the layout buttons described below.

Schritt 3: Exportieren der Deep Zoom Sammlung

Im dritten Reiter Export kann die erstellte Sammlung als Deep Zoom Bild oder Sammlung exportiert werden.

Vorschau / Output Preview

Innerhalb des Arbeitsbereichs wird die erstellte Sammlung in einer Vorschau präsentiert.

Einstellungen / Settings

Der Benutzer hat dieser Stelle die Möglichkeit dem Deep Zoom Bild einen Namen zu geben. Zusätzlich kann er hier festlegen ober er das Bild bzw. die Bilder als Sammlung exportieren möchte.

Abbildung 7 . 12 :

Abbildung 7 . 13 :

Abbildung 7 . 14 :

Abbildung 7 . 15 :

Die Projekt Struktur des Deep Zoom Composer

Jedes Deep Zoom Composer Projekt hat eine festgelegte Struktur und besteht aus einer Reihe von Elementen.

Abbildung 7 . 16 : Die Projektstruktur des Deep Zoom Composer

Im Folgenden werden die einzelnen Elemente genauer beschrieben.

Standard Path / Default Path

Ein Projekt wird standardmäßig in dem folgenden Ordner gespeichert:

C:\Users\<user>\Documents\Expression\Seadragon

Quellbilder / Source Images

Alle Projekte haben einen Ordner in dem die Quellbilder abgelegt werden. Dieser Ordner heißt „Source images“. Von dort werden die weiteren Arbeiten an den Bildern vorgenommen. Dies bedeutet, dass alle Bilder die importiert werden an einem anderen Ort als dem Ursprungsort kopiert (und nicht verschoben) werden.

Arbeitsdaten / Working Data

In dem Ordner „Working Data“ werden alle Daten gespeichert die für das Bearbeiten innerhalb des Deep Zoom Composers benötigt werden. Dazu gehören u.a. die Bilder die für das Zoomen im Arbeitsbereich benötigt werden.

Projektdatei

Alle Deep Composer Projekte haben eine .sdprj-Dateiendung. Diese Datei beinhaltet alle relevanten Daten eines Projektes. Das Dateiformat ist dabei XML und kann mit jedem Text-Werkzeug betrachtet werden.

Ausgabe / Output

Die Ausgabe erfolgt in das Verzeichnis „Output”. Wenn der Benutzer ein Deep Zoom Image exportiert, dann werden die entsprechenden Daten in den Ordner „Source Image\OutputSDI“ gespeichert.

Einbinden in Silverlight mit Visual Studio

Um die Deep Zoom Sammlung in eine Silverlight Anwendung zu integrieren ist nicht viel notwendig. Das Ergebnis das man weiterverwenden muss, befindet sich in einem Ordner unterhalb des OutputSdi-Verzeichnisses. Der Ordnername ist der gleiche wie der Projektname dem man im Deep Zoom Composer bei Export angegeben hat.

Deep Zoom Projekt-Ordner in Web kopieren

Den Ordner mit der Deep Zoom Sammlung muss man in das Web kopieren, das die Silverlight-Anwendung beinhaltet. Der einfachste Weg ist hierbei, das Kopieren in den ClientBin-Ordner, der auch die Silverlight-XAP-Datei befindet. Dadurch vermeidet man Probleme mit relativen und absoluten Pfaden. Ansonsten kann man es prinzipiell auch in jeden anderen Ordner kopieren. Dann muss allerdings sichergestellt werden, das der absolute Pfad zur Items.Bin-Datei angegeben wird.

Abbildung 7 . 17 : Die Visual Studio-Projektstruktur nach dem Importieren der Deep Zoom Daten

Die Silverlight-Anwendung

<UserControl x:Class="DeepZoom.Einfach.Page"

xmlns="https://schemas.microsoft.com/client/2007"

xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"

Width="Auto" Height="Auto">
<Grid x:Name="LayoutRoot" Background="White" Width="Auto" Height="Auto">
<MultiScaleImage x:Name="_myMsi" Source="portugalreise/items.bin" />
</Grid>
</UserControl>

Listing 7 . 1 : Das MultiScaleImage-Steuerelement zum Betrachten von Deep Zoom Sammlungen

Das Ergebnis dieser Anwendung ist in Abbildung 7.18 zu sehen.

Abbildung 7 . 18 : Das Ergebnis

Das MultiScaleImage macht (fast) alles

Das MultiScaleImage sorgt dafür, dass alle benötigten Daten bei Bedarf geladen werden, der Entwickler muss sich um nichts kümmern. Es bringt alle Funktionalitäten zum hinein und heraus zoomen mit. Allerdings muss der Entwickler definieren, wie dies geschehen soll, z.B. durch Tasteneingabe, Mausbewegungen oder programmatisch durch bestimmte Events im Code.

Dazu können entsprechende Funktion von Silverlight und dem MultiScaleImage verwendet werden. Die in den folgenden Abschnitten hinzugefügt werden.

Bewegen der Gesamtansicht per Maus

Um die angezeigte Bildersammlung einfach mit der Maus hin und her bewegen zu können, werden einige Maus-Ereignisse verwendet.

public Page() {

InitializeComponent();
this.Loaded += new RoutedEventHandler(Page_Loaded);
}
bool _mouseButtonPressed = false;
bool _mouseIsDragging = false;
Point _dragOffset;
Point _currentPosition;
Point _lastMousePosition;
void Page_Loaded(object sender, RoutedEventArgs e) {
_myMsi.MouseLeftButtonDown += new
MouseButtonEventHandler(_myMsi_MouseLeftButtonDown);
_myMsi.MouseMove += new MouseEventHandler(_myMsi_MouseMove);
_myMsi.MouseLeftButtonUp += new
MouseButtonEventHandler(_myMsi_MouseLeftButtonUp);
}

Listing 7 . 2 : Initialisierung und Registrierung der Ereignisbehandlungen beim Loaded-Ereignis

Für das Drag&Drop-Verhalten werden drei Ereignisse der Maus benötigt: MouseLeftButtonDown, MouseMove und MouseLeftButtonUp.

void _myMsi_MouseLeftButtonDown(object sender,
MouseButtonEventArgs e) {
_mouseButtonPressed = true;
_mouseIsDragging = false;
_dragOffset = e.GetPosition(_myMsi);
_currentPosition = _myMsi.ViewportOrigin;
}

Listing 7 . 3 : MouseLeftButtonDown – Drücken der Maus

Wenn die linke Maustaste gedrückt, wird die aktuelle Position der Maus in der Variable _currentPosition gespeichert um basierend darauf die Positionsveränderung zu ermitteln.

void _myMsi_MouseMove(object sender, MouseEventArgs e) {
Point mousePosition = e.GetPosition(_myMsi);
if (_mouseButtonPressed) {
_mouseIsDragging = true;
}
_lastMousePosition = mousePosition;
if (_mouseIsDragging) {
Point newOrigin = new Point();
newOrigin.X = _currentPosition.X - (((mousePosition.X - _dragOffset.X)
/ _myMsi.ActualWidth) * _myMsi.ViewportWidth);
newOrigin.Y = _currentPosition.Y - (((mousePosition.Y - _dragOffset.Y)
/ _myMsi.ActualHeight) * _myMsi.ViewportWidth);
_myMsi.ViewportOrigin = newOrigin;
}
}

Listing 7 . 4 : MouseMove – Mausbewegung

Wenn die Maus bewegt wird und vorher die linke Maustaste gedrückt wurde, dann wird die neue Position durch die Differenz der gespeicherten Position und der aktuellen Mausposition ermittelt. Der damit berechnete Weg wird anschließend der Maus wird auf die aktuelle Position des MultiScaleImage addiert bzw. subtrahiert.

void _myMsi_MouseLeftButtonUp(object sender, MouseButtonEventArgs e){
_mouseButtonPressed = false;
_mouseIsDragging = false;
}

Listing 7 . 5 : Drag & Drop-Funktionalität für das MultiScaleImage

Wenn die Maustaste wieder losgelassen wird, werden die Variablen wieder zurückgesetzt, damit bei der Mausbewegung kein automatisches verschieben der MultiScaleImage-Inhalte mehr geschieht.

Zoomen mit Doppelklicken

Um nun praktisch mit einem Mausklick hinein und heraus zoomen kann, benötigt man eine kleine Erweiterung der MouseLeftButtonUp-Ereignisbehandlung. Je nach dem ob gleichzeitig die Shift-Taste gedrückt halt oder nicht wird aus dem Bild heraus oder in das Bild hin gezoomt.

void _myMsi_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
double _zoomFactor;
_mouseButtonPressed = false;
if (_mouseIsDragging == false) {
bool shiftDown = (Keyboard.Modifiers & ModifierKeys.Shift)
== ModifierKeys.Shift;
_zoomFactor = 2.0;
if (shiftDown) {
_zoomFactor = 0.5;
}
Zoom(_zoomFactor, _lastMousePosition);
}
_mouseIsDragging = false;
}

Listing 7 . 6 : Innerhalb MouseLeftButtonUp-Ereignis wird geprüft ob die Shift-Taste gedrückt wird

Wenn die Shift-Taste gedrückt während die linke Maustaste gedrückt wird, wird der Zoomfaktor auf 0,5 bzw. 50 Prozent gesetzt. Falls nicht die gleichzeitig die Shift

private void Zoom(double zoomFactor, Point lastMousePosition)
{
Point logicalPoint =
_myMsi.ElementToLogicalPoint(lastMousePosition);
_myMsi.ZoomAboutLogicalPoint(zoomFactor, logicalPoint.X
, logicalPoint.Y);
}

Listing 7 . 7 : Zoomen basieren auf der aktuellen Mausposition

Das Zoomen geschieht in zwei Schritten. Im ersten Schritt wird die genaue Zoomposition bestimmt (ElementToLogicalPoint). Diese Position legt fest, wo gnau hinein bzw. heraus gezoomt werden soll. Der zweite Schritt zoomt mittels ZoomAboutLogicalPoint und einem bestimmten Zoomfaktor herein bzw. heraus.