Deepzoom in Silverlight 2.0

Gestione di informazioni aggiuntive sulle immagini

In fase di design della scena, Deep Zoom Composer consente di specificare un tag testuale per ogni immagine, che viene memorizzata all'interno di un file chiamato Metadata.xml.

In questo modo è possibile, ad esempio, associare ad ognuna di esse una chiave della tabella Prodotti all'interno del database, così che si possano recuperare informazioni aggiuntive sui prodotti della vetrina virtuale realizzata, da mostrare magari a seguito di un click effettuato dall'utente sulla foto corrispondente.

Metadata.Xml ha una collezione di nodi "Image" che, fra gli altri, contengono i sotto nodi Tag e ZOrder. Il primo è ovviamente il dato inserito all'interno in Deep Zoom Composer, mentre il secondo corrisponde all'indice della MultiScaleSubImage all'interno della collection SubImages del MultiScaleImage.

<Image> 
  <FileName>....</FileName> 
  <x>0</x> 
  <y>0</y> 
  <Width>0,3125</Width> 
  <Height>0,294117647058824</Height> 
  <ZOrder>1</ZOrder> 
  <Tag>Bochicchio</Tag> 
</Image>

L'applicazione Silverlight di esempio contiene una classe, denominata ImageTagParser che si occupa di effettuare il download e il parsina dei metadati, esponendo un metodo GetTag per recuperare il tag di una immagine.

Il codice può essere visionato all'interno del progetto, è semplice e non merita molti commenti, se non il fatto che, nel gestore dell'evento MouseLeftButtonUp, la classe ImageHighlighter realizzata per l'esempio precedente si dimostra ancora una volta utile per determinare l'immagine su cui è posizionato il puntatore del mouse al momento del click.

private void msi_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) 
{ 
    if (!moveHandler.MouseIsDragging && this.highLighter.HighlightedImage != null) 
    { 
        handleImageClicked(this.highLighter.HighlightedImage); 
    } 
} 
 
private void handleImageClicked(MultiScaleSubImage image) 
{ 
    // recupero il tag per l'immagine 
    string tag = imageTagParser.GetTag(image); 
     
    if (string.IsNullOrEmpty(tag)) 
        return; 
 
    // il tag rappresenta il nome della persona che preferisce il gioco 
    // evidenziato. Lo visualizzo 
    HtmlPage.Window.Alert(string.Format( 
        "Il gioco selezionato è il preferito di: {0}", tag)); 
} 

l'applicazione completa è visionabile quà

Conclusioni

Gli esempi realizzati, seppur semplici, danno un'idea di come MultiScaleImage e in generale la tecnologia Deep Zoom, rappresentino un vero e proprio gioiellino all'interno della suite di funzionalità a corredo di Silverlight 2: Deep Zoom è infatti semplice e immediato da utilizzare, ma anche dinamico, controllabile a runtime ed estremamente versatile. Pur esponendo poche e semplici API, a patto di metabolizzarne i sistemi di coordinate tutt'altro che banali, è possibile rendere le applicazioni Deep Zoom interattive, realizzando applicazioni innovative e con pochi eguali attualmente nel web: il sito Hard Rock Memorabilia ne è un ottimo esempio.

L'unico limite è rappresentato dalla necessità di un tool (ad es. Deep Zoom Composer) per generare la struttura di cartelle che ne rappresenta la sorgente di immagini, che rappresenta un po' un ostacolo più grande sulla strada di voler realizzare applicazioni veramente dinamiche, in cui l'utente possa caricare autonomamente immagini nella scena; in realtà, all'interno della cartella di installazione di Deep Zoom Composer, è presente un tool a linea di comando, SparseImageTool.exe, che svolge lo stesso lavoro del suo fratello maggiore, ma può essere quantomeno integrato (anche se la cosa non è banalissima) all'interno di un'applicazione web.

Attenzione: Questo articolo contiene un allegato

Sullo stesso argomento

Commenti

Per inserire un commento, devi avere un account.

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

Segnala su: