Deepzoom in Silverlight 2.0

di Marco De Sanctis, in Silverlight 2.0,

Una delle più gradite novità introdotte dal rilascio di Silverlight 2 è la tecnologia Deep Zoom, che consente di visualizzare immagini di grandi dimensioni fornendo unesperienza interattiva decisamente appagante: all'utente viene mostrata una versione ridotta dell'immagine, magari rimpicciolita fino ad essere visibile per intero nello spazio a disposizione nella pagina, che egli può navigare con pochi e intuitivi colpi di mouse, effettuando ingrandimenti o panoramiche, il tutto condito da animazioni che rendono fluido ogni spostamento.

Il tutto avviene ottimizzando al massimo l'utilizzo di banda, il che consente tempi di download estremamente rapidi anche con fotografie ad altissima risoluzione (magari anche di diversi GigaByte), le cui porzioni vengono scaricate e mostrate sullo schermo solo nel caso in cui il livello di zoom impostato lo rendano necessario.

Ciò è possibile grazie alla gestione della cosiddetta Image Pyramid, che consiste nella memorizzazione della medesima immagine a diverse risoluzioni, chiamate livelli, ognuna delle quali suddivisa in sezioni della dimensione indicativa di 256x256 pixel, detti tiles.

L'intera Image Pyramid è memorizzata in una struttura di cartelle ben definita a cui MultiScaleImage, il controllo di Silverlight che implementa la tecnologia DeepZoom, di volta in volta accede per effettuare il download di quelle necessarie per rappresentare la scena.

Primi passi con Deep Zoom

La creazione della Image Pyramid non è sicuramente un compito tra i più agevoli, ma fortunatamente viene assolto da un tool, chiamato Deep Zoom Composer, gratuitamente rilasciato da Microsoft, liberamente utilizzabile e scaricabile a questoindirizzo, che rende veramente semplice la creazione di una prima applicazione.

Durante la fase di import, la prima delle tre da assolvere, è possibile importare le immagini che si desidera mostrare, che poi possono essere assemblate e ridimensionate a piacimento durante la seconda fase, Compose, fino ad ottenere la scena voluta.

A questo punto, selezionando la modalità Export, è possibile generare automaticamente la struttura di file relativa alla scena realizzata.

Come si può notare dallo screenshot, esistono due tipologie di esportazione, Export as Composition e Export as Collection, che si traducono in due modalità di funzionamento differenti una volta referenziate da un controllo MultiScaleImage. In particolare:

  1. Export as Composition considera l'intera scena come una singola immagine, garantendo prestazioni migliori sia in termini di tempi di download che di utilizzo di CPU del client; il limite, però, è la perdita di informazioni relative al singolo elemento, e pertanto non è possibile applicare alcun tipo di logica ad un singolo elemento che la compone.
  2. Export as Collection genera invece una Image Pyramid indipendente per ogni immagine della scena, consentendo quindi operazioni complesse, quali riposizionamento a runtime, modifica dell'ordine o dell'insieme stesso di immagini visualizzate, al prezzo però di una maggiore occupazione di banda e di una superiore complessità elaborativa.

Scegliendo la prima opzione, più che sufficiente per questo primo esempio, ed esportando sia le immagini che il progetto Silverlight, in pochi secondi viene generata un'applicazione Deep Zoom già perfettamente funzionante,visualizzabile da subito nel browser ed integrabile all'interno di una pagina web, ma che può anche essere aperta come progetto all'interno di Visual Studio, per poter apportare eventuali personalizzazioni (o per dare un'occhiata a come funzionano le cose dietro le quinte).

Live Demo
9 pagine in totale: 1 2 3 ... 6 7 8 9

Attenzione: Questo articolo contiene un allegato.

Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Nessuna risorsa collegata