Ampliar la perspectiva de tu Web con Deep Zoom Composer & Silverlight 3

RAÚL MAYO — Mon, 25 Jan 2010 13:59:00 GMT

Todos hemos visitado alguna web, en busca de un catálogo de productos. Cierto es, que a veces, nos gustaría tener de un solo vistazo todos los productos, para que más tarde pudiéramos seleccionar el deseado. Pero esto supondría tener un catálogo de dimensiones considerables.

En este artículo propongo una idea para conseguir que todo un catálogo de artículos esté disponible a la vista del usuario, eso sí, sin ocuparnos la pantalla por completo. Además dando la posibilidad de ver al detalle la imagen de cada uno de los artículos, simplemente con el scroll del ratón. Pero para conseguir este objetivo necesitamos la ayuda de dos brazos fuertes y ágiles, informáticamente hablando claro. Usaremos Silverlight 3 y Deep Zoom Composer.

Comenzamos abriendo Deep Zoom Composer, en la ventana inicial del programa elegimos nuevo proyecto, otorgando el nombre y la ubicación del mismo como podemos observar en la imagen:

Ahora importamos las imágenes, que van a ser el catálogo de los distintos artículos que vamos a ofrecer al usuario. En mi caso he elegido como artículos bicicletas y accesorios de las mismas. Para importar elegimos de las tres pestañas situadas en la parte superior la de Importar.

Luego haremos clic sobre añadir imágenes y seleccionamos las diferentes imágenes.

Una vez tengamos las imágenes seleccionadas vamos a componer nuestra imagen final. Para ellos seleccionamos la pestaña Componer. Seleccionamos las imágenes que se encuentran en la parte inferior de la pantalla y las arrastramos al área de diseño como podemos observar en la siguiente imagen:

Al importar las imágenes al área de diseño de la imagen final, estas se encuentran de forma desorganizada. Afortunadamente las podemos ordenar haciendo clic con el botón derecho sobre ellas y eligiendo Organizar->Organizar en un Grid.

Nos aparecerá una nueva ventana emergente en la que se ofrece la posibilidad de alinear las distintas fotografías. En mi caso elegiré la opción restringir por filas puesto que deseo alinear las diferentes imágenes de forma vertical. El número de filas que utilizo son cinco y el Pading tomará el valor cero, debido que no quiero que haya separación entre las diferentes columnas. Esta configuración la podéis variar a vuestro antojo, además antes de confirmar podéis aplicar las distintas configuraciones y ver de forma previa la composición de las distintas imágenes.

Presionamos ok y se realizarán los correspondientes cambios.

Es hora de realizar la exportación de nuestra composición de imágenes. Seleccionamos la pestaña Exportar de la parte superior del programa. Elegimos la pestaña personalizado en la parte derecha del programa y elegimos el formato Silverlight Deep Zoom. Introducimos un nombre para la composición y la ubicación de la misma. Por otro lado elegimos la plantilla Deep Zoom Navigation, que es la plantilla por defecto del programa. El formato es JPG la calidad 95 y el tamaño es de 800. Presionamos OK y se exportará nuestra composición de imágenes.

También tenemos la posibilidad de pre visualizar la composición final antes de exportarla, si la pre visualización de la composición es correcta, presionamos Exportar y se realizará la acción.

Ahora vamos a realizar la segunda parte del proyecto, que es la creación de una aplicación Silverlight en la que vamos a incluir la composición de imágenes creada con anterioridad. A su vez le otorgaremos las funcionalidades para que el usuario pueda visionar con todo detalle cada producto.

Abrimos Visual Studio 2008, seleccionamos Proyecto->Nuevo Proyecto. En la ventana emergente seleccionamos Silverlight en el área Tipo de Proyecto. Seguidamente en el área de plantillas elegimos Aplicación Silverlight. Introducimos el nombre del proyecto y la ubicación presionamos Aceptar y se creará un nuevo proyecto Silverlight 3.

Una vez construido nuestro proyecto debemos construir una nueva solución F6. De este modo se cargará el archivo .xap del lado del cliente, dentro de la carpeta BIN. Nos situamos en el proyecto creado con anterioridad de Deep Zoom Composer. Copiamos la carpeta GeneratedImages en la carpeta BIN.

Ahora vamos a introducir el objeto que nos permite en .Net escalar las imágenes. Para ello abrimos el archivo MainPage.xaml e introducimos el citado objeto como podemos observar en el siguiente fragmento de código:

Code Snippet
         <UserControl x:Class="CatalogoArticulos.MainPage" 
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> 
        <Grid x:Name="LayoutRoot"> 
            <MultiScaleImage x:Name="Escalar" Source="../GeneratedImages/dzc_output.xml"/> 
        </Grid> 
    </UserControl> 
       

Como podemos observar el origen del objeto que nos permite escalar las diferentes imágenes, lo obtenemos de la carpeta previamente copiada. En concreto del archivo dzc_output.xml. Que es la composición de imágenes exportadas en la primera parte de este artículo.

Si ejecutamos el proyecto (F5), podemos observar como se cargan las imágenes pero lamentablemente no tenemos control sobre los eventos del ratón para poder aumentar las imágenes y verlas con todo detalle.

Es por esta razón que debemos abrir el archivo MainPage.xaml.cs e incluir el siguiente fragmento de código para poder controlar los distintos comportamientos del objetos escalar:

Code Snippet
         using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 
  
namespace CatalogoArticulos 
{ 
    public partial class MainPage : UserControl 
    { 
        double zoom = 1; 
        bool duringDrag = false; 
        bool mouseDown = false; 
        Point lastMouseDownPos = new Point(); 
        Point lastMousePos = new Point(); 
        Point lastMouseViewPort = new Point(); 
  
  
        public double ZoomFactor 
        { 
            //establecimiento del valor de ampliación 
            get { return zoom; } 
            set { zoom = value; } 
        } 
        public MainPage() 
        { 
            InitializeComponent(); 
            //controlar el movimiento decendente del ratón 
            //al presionar el botón izquierdo 
            this.MouseLeftButtonDown += 
        delegate(object sender, MouseButtonEventArgs e) 
        { 
            lastMouseDownPos = e.GetPosition(Escalar); 
            lastMouseViewPort = Escalar.ViewportOrigin; 
  
            mouseDown = true; 
  
            Escalar.CaptureMouse(); 
        }; 
            //controlar el movimiento ascendente del ratón 
            //al presionar el botón izquierdo 
            this.MouseLeftButtonUp += delegate(object sender, MouseButtonEventArgs e) 
            { 
                if (!duringDrag) 
                { 
                    bool shiftDown = 
                      (Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift; 
                    double newzoom = zoom; 
  
                    if (shiftDown) 
                    { 
                        newzoom /= 2; 
                    } 
                    else 
                    { 
                        newzoom *= 2; 
                    } 
  
                    Zoom(newzoom, Escalar.ElementToLogicalPoint(this.lastMousePos)); 
                } 
                duringDrag = false; 
                mouseDown = false; 
  
                Escalar.ReleaseMouseCapture();//actualización del objeto que nos permite escalar las imagenes 
            }; 
            //localizamos la posición del puntero 
            //a trevés del evento MouseMove 
            this.MouseMove += delegate(object sender, MouseEventArgs e) 
            { 
                lastMousePos = e.GetPosition(Escalar); 
                if (mouseDown && !duringDrag) 
                { 
                    duringDrag = true; 
                    double w = Escalar.ViewportWidth; 
                    Point o = new Point(Escalar.ViewportOrigin.X, Escalar.ViewportOrigin.Y); 
                    Escalar.UseSprings = false; 
                    Escalar.ViewportOrigin = new Point(o.X, o.Y); 
                    Escalar.ViewportWidth = w; 
                    zoom = 1 / w; 
                    Escalar.UseSprings = true; 
                } 
  
                if (duringDrag) 
                { 
                    Point newPoint = lastMouseViewPort; 
                    newPoint.X += (lastMouseDownPos.X - lastMousePos.X) / 
                      Escalar.ActualWidth * Escalar.ViewportWidth; 
                    newPoint.Y += (lastMouseDownPos.Y - lastMousePos.Y) / 
                      Escalar.ActualWidth * Escalar.ViewportWidth; 
                    Escalar.ViewportOrigin = newPoint; 
                } 
            }; 
            //llamada a la clase Helper con los paremetros de aumento 
            new MouseWheelHelper(this).Moved += 
              delegate(object sender, MouseWheelEventArgs e) 
              { 
                  e.Handled = true; 
  
                  double newzoom = zoom; 
  
                  if (e.Delta < 0) 
                      newzoom /= 1.3; 
                  else 
                      newzoom *= 1.3; 
  
                  Zoom(newzoom, Escalar.ElementToLogicalPoint(this.lastMousePos)); 
                  Escalar.CaptureMouse(); 
              }; 
        } 
        //rango de aumento 
        private void Zoom(double newzoom, Point p) 
        { 
            if (newzoom < 0.5) 
            { 
                newzoom = 0.5; 
            } 
  
            Escalar.ZoomAboutLogicalPoint(newzoom / zoom, p.X, p.Y); 
            zoom = newzoom; 
        } 
    } 
} 
       

En este fragmento de código se hace una llamada a la clase MouseWheelHelper, que permite realizar el escalado de las diferentes imágenes. El contenido de esta clase lo podéis descargar aquí. Ahora solo tenemos que situarnos en nuestro proyecto, presionar sobre él con el botón derecho y elegir Añadir->Nuevo elemento.

Seguidamente en la ventana emergente en el área de plantillas elegimos la plantilla clase y la nombramos como MouseWheelHelper.cs.

Dentro de la misma incluiremos el contenido de la clase que hemos descargado con anterioridad. De esto modo conseguiremos que nuestro proyecto controle los eventos del ratón de forma correcta.

Finalmente ejecutamos nuestra aplicación F5, podemos observar tenemos todo el catálogo de artículos en una sola vista, si bien es cierto que podemos aumentar cada articulo y verlo con detalle sin perder calidad a la hora de realizar dicha acción.

De este modo podemos crear aplicaciones, en las que necesitemos un reducido espacio a la hora de situarlo en nuestra web. Sin embargo no ofreceremos posibilidad al usuario para poder tener una vista diferente de los distintos artículos que se ofertan en la misma. Todo utilizando la eficiencia de Silverlight 3 y la flexibilidad y creatividad de Deep Zoom Composer.

ILUMINA TU CÓDIGO : DEEP ZOOM

Ampliar la perspectiva de tu Web con Deep Zoom Composer & Silverlight 3