No meu post anterior, Silverlight + DeepZoom = RIA Experiences Parte 1 - Utilizando o Deep Zoom Composer, mostrei como podemos criar experiências simples com o Deep Zoom Composer.
Uma das grandes reclamações que eu costumo ouvir sobre o deep zoom é que não conseguimos criar experiências onde os dados sejam dinamicos, e a obrigatoriedade de utilizar o Deep Zoom Composer.
Esse meu post é dedicado a acabar com essa “crença”. Deep Zoom dinamico? YES WE CAN!!!
Criando o projeto
Para começar vamos precisar das seguintes ferramentas:
Siverlight 2 + Tools (também funciona com o 3, só estou usando o 2 porque estou finalizando um projeto que começou com ele)
Um pouco de conhecimento sobre imagens e tratamento de imagens com C# (google it!!!)
Deep Zoom Composer ( Leitor diz: nããããããõ!!!!…. Dorta diz: Calma!! é só pra pegar uma dll!!!!)
DeepZoomTools.dll
Bom, pra começar, vamos falar dessa dll. Você não vai achar praticamente nenhuma documentação sobre essa dll.
Ela foi criada pela própria equipe do Expression e foi divulgada nesse post do blog deles. Essa dll foi divulgada para que os desenvolvedores pudessem simular o funcionamento do Deep Zoom Composer em suas aplicações.
Abaixo segue os objetos que vamos utilizar e sua função:
ImageCreator: É o objeto de imagem utilizado pelo Deep Zoom.
CollectionCreator: Objeto responsável por criar aquelas diversas imagens para cada nível de zoom do nosso Deep Zoom
O que eu preciso saber de Deep Zoom?
Você deve ter conhecimento de como o Deep Zoom Composer trabalha, sugiro seguir meu post anterior Silverlight + DeepZoom = RIA Experiences Parte 1 - Utilizando o Deep Zoom Composer e criar algumas aplicações estáticas para entender alguns conceitos como:
Ao criar uma composição de Deep Zoom, são gerados inúmeros arquivos, com imagens e xmls que definem o comportamento de zoom da composição. (Pasta GeneratedImages)
Os xmls que são gerados definem os caminhos das imagens que serão utilizadas a cada nível de zoom
Vamos ao que interessa.
Crie um projeto do tipo Silverlight Application no VS 2008 e Peça para que seja criada uma aplicação WEB de testes. (Arquitetura em Siverlight vai dar um excelente post em breve).
Adiciona a sua pasta ClientBin do projeto WEB uma pasta chamada Generated Images
Adicione ao seu projeto WEB uma referencia a dll do DeepZoomTools : [Program Files]\Microsoft Expression\Deep Zoom Composer\DeepZoomTools.dll
O serviço que cria as imagens e xmls
Adicione ao seu projeto web, na pasta ClientBin, um Generic Handler, vamos chama-lo de ImageHandler:
Nosso serviço, vai ler as imagens de uma pasta (poderia ler qualquer imagem) e utiliza-las para montar um composição deep zoom.
O código que utilizei para buscar as imagens é bem simples:
private static List<string> ObterImagensDiretorio(DirectoryInfo pdiInformacaoDiretorio)
{
List<string> lstImagens = new List<string>();
foreach (var finInformacaoImagem in pdiInformacaoDiretorio.GetFiles("*.jpg"))
{
lstImagens.Add(finInformacaoImagem.FullName);
}
return lstImagens;
}
Agora no método ProcessRequest do nosso serviço, vamos inicializar as nossas variáveis:
1)Caminho para onde serão enviadas as imagens e XMLs
string strCaminhoImagensGeradas = context.Server.MapPath("~/ClientBin/GeneratedImages/");
2) Imagens que serão utilizadas no DeepZoom
List<string> lstImagens = ObterImagensDiretorio(new DirectoryInfo(context.Server.MapPath("~/Imagem/")));
3) Lista de XMLs que serão gerados
List<string> lstXMLs = new List<string>();
Por fim, mas não menos importante, criamos os objetos de imagem do Deep Zoom e a coleção:
O objeto ImageCreator e o objeto CollectionCreator possuem propriedades muito parecidas entre as quais podemos destacar:
TileSize – O tamanho que cada “tira” da composição deve assumir
TileFormat – O formato de arquivo de cada “tira” (PNG, JPG, etc…)
ImageQuality – Como qualquer bom editor de imagem, você pode editar qual a qualidade de exportação da imagem, sendo 1 = 100%.
Ambos os objetos também possuem o método create:
ImageCreator.Create([Caminho original da imagem], [Caminho onde a imagem deve ser criada]); - Cria as imagens e xmls referentes as imagens
ColectionCreator.Create([Lista dos caminhos dos xmls que contém as informações das imagens], [Caminho onde ele deve gerar a coleção completa]); Cria a estrutura completa de XML e imagens da composição
Segue o código abaixo:
foreach (string strImagem in lstImagens)
{
ImageCreator ic = new ImageCreator();
ic.TileSize = 256;
ic.TileFormat = ImageFormat.Jpg;
ic.ImageQuality = 1;
string target = strCaminhoImagensGeradas + "output_images\\" + Path.GetFileNameWithoutExtension(strImagem);
ic.Create(strImagem, target);
lstXMLs.Add(Path.ChangeExtension(target, ".xml"));
}
cc.TileSize = 256;
cc.TileFormat = ImageFormat.Jpg;
cc.MaxLevel = 8;
cc.ImageQuality = 1;
cc.Create(lstXMLs, strCaminhoImagensGeradas + "output");
WELL DONE!!! NOSSO SERVIÇO ESTA PRONTO!!! Agora vamos ao Silverlight:
DE VOLTA AO SILVERLIGHT
Agora vamos criar o DeepZoom utilizando o MultiScaleImage, no Silverlight.
Dentro dos seu LayoutRoot na sua Page.xaml crie os seguintes componentes:
<MultiScaleImage x:Name="msi" Height="Auto" Width="589"/>
<Button Content="Embaralhar" HorizontalAlignment="Center" VerticalAlignment="Top" Click="Button_Click"/>
E agora no código Page.xaml.cs no método construtor, vamos invocar nosso serviço de geração de imagens:
WebClient wbc = new WebClient();
wbc.OpenReadAsync(new Uri(“http://localhost:3585/ClientBin/ImageHandler.ashx”));
wbc.OpenReadCompleted += new OpenReadCompletedEventHandler(wbc_OpenReadCompleted);
E ao terminar o serviço vamos popular o nosso MultiScaleImage:
this.msi.Source = new DeepZoomImageTileSource(new Uri("http://localhost:3585/ClientBin/GeneratedImages/output.xml"));
DONE!!!
Espero que essas dicas ajudem a iluminar os passos para nova experiências com Silverlight e Deep Zoom.
Aqui está o link para o código fonte com imagens, um evento para capturar Mouse Wheel muito bom e um efeito de embaralhamento randomico nota 100000:
DeepZoomDinamico.zip (13,36 mb)
Nos vemos na próxima Arqinovação!!!