PivotViewer e DeepZoom

4/10/2011 19:13:30 - Fábio Ferreira de Souza

Acesse estes sites, navegue e procure enxergar as possibilidades

A primeira vista parece inútil, uma galerias de imagens, com classificação, mas isso vai muito além.
Na verdade o PivotViewer usa o conceito de analise em cubos, ou seja, você seleciona um angulo de vista (uma face), e vai ajustando outros filtros para encontrar seus resultados.
Por ser uma ferramenta gráfica, este usa o recurso de DeepZoom, que gerencia os ícones em todos os níveis de escala de acordo com o Zoom
Segue algumas ideias que estou pensando em utilizar dentro dos ambientes

  • Para usuário Final (Site)
    • Shop Produtos: Comparação de produtos, por marca, cor, material, departamento, marca, nome, valor
    • Site Álbuns: Exibição de Fotos com filtros com DeepZoom
  • Dentro do ambiente Administrativo (ADM)
    • Cash Cobranças: Analise de pagamentos por Ano, Mês, Semana, Valor, Tipo de Pagamento, Conta, Cliente, Assinatura, etc..
    • Cash Assinaturas: Analise de assinaturas por cliente, pagamento, serviços/planos
    • Cash Despesas: Analise de despesas por Tipo, Data, Centro de Custo, Cliente, Cobrança…
    • Shop Produtos: Mais Vendidos, Sem Vendas, Marcas, Departamento
    • Shop Departamento: Analise por Visitas, Vendas, Produtos
    • Site Visitas: Analise dos acessos, por IP, cliente, pedido, origem

Ou seja, dá para cruzar tudo com qualquer coisa…
Meu trabalho são apenas fazer duas coisas:

  • Implementar o PivotViewer e DeepZoom no Produto Certo, e eu já fiz, o básico!
  • Gerar as Listas de consumo – Aqui é o segredo, e o trabalho mais demorado, que pretendo ter alguma coisa funcional até o final do mês.

Veja este breve exemplo

Clique aqui para visualizar o Teste

Entender e Implementar a parte básica não foi tão simples, pois gerar os arquivos de forma estática, é fácil pois já existem vários plug-ins e outros programas que fazem isso, mas gerar tudo dinamicamente é muito mais complexo.
O Silverlight5 irá set lançado em breve e irá facilitar muito parte do processo de renderização.
Na minha versão ainda há alguns bugs no processo de zoom, mas dependendo da demanda e dos patrocínios estarei resolvendo isso depois
Segue alguns links que foram muito útil no processo de desenvolvimento:

O mais legal, foi a parte de cálculos do DeepZoom, que envolve exponencial  e logaritmo

Foto: W / H => 0.75 fator de conversão

2^1 = 2x1
2^2 = 4x3
2^3 = 8x6
2^4 = 16x12
2^5 = 32x24
2^6 = 64x48
2^7 = 128x96
2^8 = 256x192
2^9 = 512x384
2^10 = 1024x768
2^11 = 2048x1536

int maxLevels = (int)Math.Ceiling(Math.Log(Math.Max(i.Width, i.Height), 2));
int columns = (int)Math.Ceiling((double)i.Width / imageTitle);
int rows = (int)Math.Ceiling((double)i.Height / imageTitle);

WidthFinal += 2 * WidthFinal / imageTitle
HeightFinal += 2 * HeightFinal / imageTitle

Para gerar tudo dinamicamente precisei criar geradores de XML e imagens por meio de httpHandlers, que em alguns sites chamam isso de DZI e DZC


  
  

O mais divertido foi fazer os vários testes, de corte, e montagem de imagens
Exemplo de Teste DeepZomm

Em especial quero agradecer @kelps e @rodrigokono pela inspiração com a palestra sobre “Novidades do SilverLight5 TechEd