[Windows Phone 8] Nokia Imaging SDK 3: Aplicando filtros a imágenes

Hola a todos de nuevo. Vamos a comenzar con la tercera entrega de esta serie de artículos, en los cuales estamos diseccionando el uso del SDK de imágenes de Nokia. Si te has perdido las entradas anteriores, revísalas aquí:

Tras haber pasado ya sobre los conceptos básicos, como la sesión de edición, la aplicación de recorte y rotación y la conversión de formatos, vamos en esta ocasión a centrarnos en, quizás, la parte más vistosa del SDK: Los filtros de imágenes.

El SDK de imágenes de Nokia nos ofrece una variedad de cerca de 50 filtros, listos para aplicar a nuestras fotos. Estos filtros cubren un amplio espectro, desde sketching hasta lomografñia, pasando por desenfoques, reducción de calor, ajustes de color… la verdad es que podemos realizar un bueno número de ajustes en nuestras fotos gracias a ellos. Además, como veremos también en este artículo, son acumulativos, es decir, podemos aplicarlos unos sobre otros de forma aditiva. El propio SDK nos ofrece además funcionalidades para deshacer cambios en la imagen de forma infinita hasta regresar a la toma original.

Para aplicar cualquier filtro, necesitamos crear una sesión de edición. Ya vimos como usar una sesión de edición y como aplicar un filtro de rotación en el artículo anterior. A continuación vamos a examinar los diferentes filtros de los que disponemos.

En total, el SDK de Nokia incorpora más de 40 filtros de imagen distintos. Desde el, típico hoy en día, lomogram hasta filtros de mezcla de varias imágenes, desenfoque, dibujado, o ajustes de color:

image

Para acceder a estos filtros dentro de nuestra sesión de edición, podemos usar la clase FilterFactory, que expone métodos para crear cada uno de ellos y devolvernos la instancia creada, que podremos añadir a nuestra sesión con el método AddFilter de EditingSession, como podemos ver a continuación con el filtro de dibujo animado:

Aplicando un nuevo filtro
this.session.AddFilter(FilterFactory.CreateCartoonFilter(true));

En este caso el método CreateCartoonFilter recibe un parámetro boolean que indica si deseamos dibujar los bordes o no. El resto de filtros se utilizan de la misma forma:

  • Primero creamos una sesión
  • Usamos el método AddFilter y la clase FilterFactory para añadir un nuevo filtro
  • Renderizamos la sesión a un WriteableBitmap
  • Invalidamos el WriteableBitmap para actualizarlo

Además de los filtros, una propiedad muy interesante de la EditingSession es su capacidad de deshacer. Todos los filtros añadidos a una imagen son acumulativos, es decir, se aplican sobre el resultado del filtro anterior, no sobre la imagen original. Con esto un filtro no sustituye al anterior, si no que se añade para formar un efecto diferente:

image

Como podemos observar, el efecto de cada filtro por separado es distinto al resultado de los filtros combinados, especialmente al combinar todos los filtros y por último usar el Sketch, que nos ofrece un efecto bastante sorprendente:

image

Como decíamos, además de añadir filtros a una imagen, podemos querer, en un momento dado, eliminar filtros. Para ello la clase EditingSession nos ofrece dos métodos: Undo y UndoAll. Pero tienen truco. Hasta ahora, cada vez que añadíamos un nuevo efecto, creábamos una sesión de edición nueva, realizábamos el trabajo necesario y la destruíamos. Para que Undo y UndoAll funcionen, todos los efectos deben aplicarle en la misma sesión. Por lo que cambiaremos nuestro código para que se cree una vez la sesión y se elimine al cambiar de foto de origen o al guardar una foto en la galería, de forma que luego podamos ejecutar el Undo siempre que lo necesitemos:

Deshacer el último filtro
public async Task UndoLastFilter(WriteableBitmap filteredImg)
{
    await this.StartEditingSession(filteredImg);

    this.session.Undo();
    await this.session.RenderToWriteableBitmapAsync(filteredImg, OutputOption.PreserveAspectRatio);
    filteredImg.Invalidate();
}

Con este sencillo código, eliminamos el último efecto aplicado, redibujamos la imagen y la invalidamos. Usamos UndoAll cuando queramos terminar la sesión de edición y devolver la imagen a su estado original, de un solo paso:

Deshacer todos los cambios
private async Task EndEditingSession(WriteableBitmap bitmap)
{
    this.session.UndoAll();
    await this.session.RenderToWriteableBitmapAsync(bitmap, OutputOption.PreserveAspectRatio);
    bitmap.Invalidate();
    (this.session as EditingSession).Dispose();
    this.session = null;
}

Y Voilá! con este código devolvemos la imagen a su estado original, destruimos la sesión de edición y la dejamos en estado nulo, para volver a crearla si es necesario.

Y esto es todo por hoy. En la próxima entrega de esta serie investigaremos como aplicar estos efectos en tiempo real a la cámara y grabar un video con efectos aplicados. Por ahora, he creado una aplicación de ejemplo que os permite seleccionar una foto, aplicar varios filtros (cartoon, blur, lomogram, magic pen y sketch), realizar undo de filtros y guardar la imagen final al terminar:

image

A continuación tenéis para descargar el código fuente de la aplicación con el código de los filtros implementado y listo para usar en un servicio, para que podáis jugar con él y entreteneros hasta la próxima entrega.

Un saludo y Happy Coding!

[Windows Phone 8] Microsoft AppStudio

Hola a todos!

Hoy martes Microsoft ha presentado al mundo su última idea: AppStudio, una web con la que dar rienda suelta a nuestra creatividad.

image

Esta plataforma web, nos permite crear aplicaciones para Windows Phone 8 de forma rápida. Podemos usar plantillas ya predefinidas o crear aplicaciones en blanco.

El sistema se basa en 3 sencillo pasos:

App Information: Aquí podremos introducir la información básica de nuestra aplicación: Título, una breve descripción y el icono de la misma.

image

App Content: Donde podremos definir el contenido de nuestra aplicación, esto es, las diferentes páginas, las fuentes de datos de cada una de ellas, su ApplicationBar… incluso varios tipos de templates para las listas, bastante resultones la verdad. En cuanto a las fuentes de datos, en estos momentos podemos escoger varias: contenido estático, definido por nosotros, fuente de datos de un canal de YouTube o una búsqueda en YouTube, consumir un RSS (RSS2.0 y ATOM 1.1) o contenido HTML. Lamentablemente, ahora mismo no puedes usar como contenido HTML una web online, es contenido que creas en un editor de la aplicación, pero seguro que pronto veremos nuevas fuentes de datos.

image

App Style: Nos permite configurar la apariencia general de la aplicación, mediante tres secciones: style, tiles y splash & lock. Style nos permite definir el color de acento, el background de la aplicación, el color de letra y el color de fondo de la applicationbar. Tiles, por su parte permite definir el tipo y estilo de los tiles de la aplicación. Por último Splash & Lock nos permite definir la imagen a usar como SplashScreen y una imagen a usar como LockScreen del dispositivo, ya que una de las funcionalidades que incluye AppStudio es que nuestra aplicación pueda establecer la pantalla de bloqueo.

image

Y voila! el cuarto paso, el resumen, nos muestra la configuración de la aplicación, una preview de la misma,una opción de hacerla pública, de forma que cualquier otra persona pueda usarla como punto de partida, una especie de plantilla, para sus propias apps y una opción de generar la aplicación.

image

Una vez generada la aplicación, nos llegará un correo electrónico con un link para instalarla en nuestro dispositivo. Y no necesitamos que esté desbloqueado para ello!!!. Esto es así gracias a la distribución empresarial. Cuando nos registremos en AppStudio, recibiremos un correo con un certificado que podemos instalar en nuestro dispositivo. Una vez que lo instalemos, podremos instalar nuestras Apps de AppStudio sin tener que tener el dispositivo registrado para desarrollo.

Otra opción interesante es que podremos descargar el código fuente generado con AppStudio, en forma de solución de Visual Studio 2012, para extender la aplicación con nuestro propio código. Esto es realmente sencillo gracias a que, al contrario de lo que muchos pensábamos, el código está realmente bien estructurado: Usa de forma intensiva MVVM, Inyección de dependencias, Servicios, el XAML está muy ordenado. En definitiva es un placer trabajar con él y extenderlo.

Para que veáis lo fácil que es, os dejo una app que he hecho, en la que podéis ver mi blog y los diferentes artículos. Lo he extendido para añadir un servicio de NFC para compartir la URL del artículo mediante NFC a otro dispositivo. Espero que os sirva como ejemplo del buen código que genera la herramienta.

Un saludo y Happy Coding!