Windows Técnico : Desarrollo, Windows 7, Microsoft

Análisis de código de aplicaciones ejemplo MS Windows 7 Multitouch: Puzzle Animales III

Jhonattan Fiestas — Thu, 11 Aug 2011 16:17:00 GMT

Con esta entrada se dará conclusión a la serie dedicada al análisis de código realizado sobre el proyecto didáctico “PuzleAnimales” disponible en el Canal Windows 7 Multitouch de Codeplex. En la serie se ha aportado información en mayor detalle para ayudar en la comprensión de los conceptos que son desarrollados a lo largo de toda la aplicación.

Como ya se comentó en la entrada anterior, Análisis de código de aplicaciones ejemplo MS Windows 7 Multitouch: Puzzle Animales II, en esta oportunidad se centrará la atención en el código del control de usuario llamado “UserControl1”, y que lleva consigo todas las funcionalidades importantes para dotar de movimiento a un objeto dentro del lienzo.

Uno de los aspectos más importantes con respecto al concepto anterior es la incorporación de las propiedades “Interactions Behaviors” dentro del código XAML para hacer uso de sus capacidades a la hora de trabajar con objetos con los cuales se van a interactuar.

<i:Interaction.Behaviors>

<ei:TranslateZoomRotateBehavior ConstrainToParentBounds="True">

</ei:TranslateZoomRotateBehavior>

</i:Interaction.Behaviors>

Llegado a este punto y para ver mejor el código que va por detrás de este control de usuario, en la siguiente imagen se muestra el esquema general de la clase que lo implementa.

Esquema de la clase UserControl1

Se puede apreciar que hay un conjunto importante de elementos, a los cuales es conveniente dar una definición para conocer cual es su aporte en el desarrollo de la aplicación.

Cuadro de propiedades y eventos de la clase UserControl1

· Ancho:
Margen de error vertical que se permitirá al intentar encajar una pieza en su lugar.

· Largo:
De forma análoga a la anterior, sería el margen de error horizontal al intentar encajar una pieza en su sitio.

· Handle:
Argumento que será usado por referencia en los métodos “midiOutClose” y “midiOutOpen “y “midiOutShortMsg”.

· Manejador:
Variable que reutiliza el contenido de “Handle” utilizando sus propiedades “Get” y “Set”, para obtener o establecer el valor de dicha variable respectivamente.

· Imagen:
En esta variable puede verse la ruta de la imagen que se muestra para el animal en cuestión, esta imagen está definida por el archivo “configuración.xml” y dispone de tres posibles valores.

· Padre:
Esta variable es quizás la más difícil de explicar, ya que es inicializada en uno de los constructores explícitos de UserControl1, y después cuando se lanza el evento “image1_TouchUp” se cambia el “sender” por el contenido de esta variable.

Sirve para identificar el objeto sobre el cual se está trabajando.

· Sonido:
Sonido que será reproducido cuando una pieza sea encajada en su posición correctamente.

· Sonidofinal:
Variable donde se guarda la localización del sonido que se emitirá cuando la ejecución se termine de forma exitosa.

· X:
Posición en el eje horizontal donde está situada la imagen.

· Y:
Posición en el eje vertical donde está situada la imagen.

· Coincidencia:

Este evento ha sido declarado para ser utilizado principalmente desde la clase que la instancia, para que de forma se sepa en cada momento que objeto se está manipulando en la interfaz.

public event EventHandler Coincidencia;

Después de definir el cometido de cada una de las variables de la clase, ahora toca el turno de las funciones, las cuales están descritas en el siguiente recuadro:

Cuadro de funciones disponibles en UserControl1

Como se puede apreciar existen 3 constructores, declarados en la clase “UserControl1”:

1. El primero es el constructor implícito, que inicializa el origen de la imagen1, con la imagen de un gato. Dicho elemento se encuentra en la carpeta “Images”, que forma parte del árbol de directorios de la aplicación.

public UserControl1()

{

InitializeComponent();

this.image1.Source = new BitmapImage(

new Uri(@"pack://application:,,,/PuzleAnimalTouch;

component/Images/gato.jpg"));

}

2. El segundo es un constructor explicito, que inicializa la fuente de la imagen1 y a su vez también da un valor inicial al sonido.

Al dar valor a “padre”, se está guardando el nombre de la imagen que se está creando, En el desarrollo de la aplicación se han declarado los nombres “imagen1” ,”imagen2”, ”imagen3” e ”imagen4” para las cuatro imágenes con las cuales se interactúa en la aplicación.

Sin duda un aspecto muy importante es la inicialización de las coordenadas X e Y, que identifican el lugar sobre el cual se empezara a dibujar la imagen sobre el lienzo.
Después de describir el constructor solo quedaría verlo en codigo:

public UserControl1(string fotoi, string sonidoi, double x, double y, string padre)

{

InitializeComponent();

this.x = x;

this.y = y;

this.padre = padre;

this.image1.Source = new BitmapImage(new Uri(@fotoi));

this.sonido = sonidoi;

}

3. El tercer constructor es un constructor explicito que requiere como argumento un entero pasado por referencia, con el cual se inicializa el manejador que hará uso este control de usuario a la hora de hacer llamadas a las funciones de sonido.

public UserControl1(ref int manejador)

{

this.handle = manejador;

InitializeComponent();

}

Funciones midiOutOpen, midiOutShortMsg , midiOutClose

Como ya se mencionaron en la entrada anterior, estas funciones son las encargadas de hacer llamadas a la API de Windows en relación con la manipulación de sonidos. Como puede se puede apreciar, es necesario hacer una importación de la librería “winmm.dll” que guarda relación con el Windows Media Player de Windows, ya que dichas funciones están implementadas externamente en dichas librerías.

[DllImport("winmm.dll")]

private static extern int midiOutOpen(ref int handle, int deviceID,

MidiCallback proc, int instance, int flags);

[DllImport("winmm.dll")]

protected static extern int midiOutShortMsg(int handle, int message);

[DllImport("winmm.dll")]

protected static extern int midiOutClose(int handle);

Funciones “Image1_ImageFailed”, “UserControl_loaded”

La primera función se produce cuando hay un error asociado a la recuperación o formato de la imagen. En esta oportunidad ha sido implementada pero se ha dejado vacio, por si se os ocurre capturar el error de recuperación y hacer alguna operación adicional cuando suceda el citado error , o cualquier otra operación que consideréis conveniente.

En el caso del “UserControl_loaded”, es la función principal que se ejecuta cuando se carga un control de usuario, en este caso también se ha dejado en blanco, ya que no era necesario inicializar ningún valor, aparte de los que ya se hacían en el constructor.

Función Image1_touchUp() y función lanza()

Estas funciones son llamadas por el evento “TouchUp” y “MouseLeftButtonUp” respectivamente, y realizan la comprobación de que si la pieza ha sido soltada en las proximidades del lugar correcto (la proximidad se ajusta en las variables “alto” y “ancho”), se desencadena el evento “coincidencia” y se reproduce el sonido final correspondiente a la ruta que se encuentra alojada en la variable “sonidoFinal”.

Apreciar que en el código, se emplea un objeto “WindowsMediaPlayer” que servirá para reproducir el sonido que se le haya pasado a su propiedad URL.

// Si al soltar al animal, la posición del elemento se acerca mucho a la posición

// correcta, entonces se desencadena el evento coincidencia, y se reproduce el

// sonido final

if (((e.GetPosition(null).X > x) && (e.GetPosition(null).X < (x + largo))) && ((e.GetPosition(null).Y > y) && (e.GetPosition(null).Y < (y + ancho))))

{

if (this.Coincidencia != null)

this.Coincidencia(padre, null);

this.image1.Visibility = System.Windows.Visibility.Hidden;

WMPLib.WindowsMediaPlayer Player;

Player = new WindowsMediaPlayer();

// La ruta del sonido tiene origen en la carpeta donde se está ejecutando la

// aplicación, es decir, la carpeta bin, por lo tanto debe tenerse en cuenta

// que los elementos de la carpeta sonido, de la raíz de la aplicación, deben

// ser copiados en la carpeta de resultado del proyecto, sino la ejecución

// fallará, ya que no se habrán encontrado dichos elementos.

string r = System.IO.Directory.GetCurrentDirectory();

r = r + sonidofinal;

string ruta = r;

Player.URL = @ruta; // Se le dice cuál es el archivo a reproducir

Player.controls.play(); // Se da la orden de reproducir el archivo.

}

Con esto se da por finalizado la explicación del código que se encuentra por detrás del proyecto “PuzleAnimales”, con el cual se sigue haciendo hincapié en incentivar la participación de los usuarios en el desarrollo de aplicaciones para MS Windows Multitouch.

Si deseáis ver la aplicación en funcionamiento, no perdáis la oportunidad de visitar Aplicaciones ejemplo para Windows 7 Multitouch: PuzzleAnimalTouch, que forma parte de un nutrido grupo de entradas del área de desarrollo centradas en este tipo de dispositivos.

Para acabar, recuerda que si quieres aprender mucho más sobre los secretos de los sistemas Microsoft Windows, te recomendamos leer el libro de Sergio de los Santos "Máxima Seguridad en Windows: Secretos Técnicos" , o siempre puedes suscribirte al Canal RSS de Windows Técnico para estar al día de las novedades e información técnica de interés.

------------------------------------------------------------------------------------------------------------------------

Análisis de código de aplicaciones ejemplo MS Windows 7 Multitouch: Puzzle Animales I

Análisis de código de aplicaciones ejemplo MS Windows 7 Multitouch: Puzzle Animales II

Análisis de código de aplicaciones ejemplo MS Windows 7 Multitouch: Puzzle Animales III

------------------------------------------------------------------------------------------------------------------------

Desarrollo de aplicaciones con MS Windows 7 Multitouch: Manejador de Gestos. Anexo III . Final

Jhonattan Fiestas — Fri, 29 Jul 2011 12:35:00 GMT

Con la publicación de esta entrada se va a dar por finalizada la serie “Desarrollo de aplicaciones con MS Windows 7 Multitouch: Manejador de Gestos” en la cual se ha descrito completamente el funcionamiento del proyecto “mtGesture” facilitado por Microsoft.

En esta ocasión y con motivo del cierre de la serie, se va a proceder a mostrar el funcionamiento general de la aplicación haciendo uso de las nociones que han sido desarrolladas a lo largo de las diversas entradas que la componen. Por lo cual se derivará la atención a los eventos que se realizan en el proyecto “mtGesture”, es decir, a lo que el usuario de la aplicación observa en el momento de interactuar con el dispositivo tablet a la espera de que sus “gestos” sobre la pantalla tengan el resultado esperado.

Pantalla inicial de la aplicación

Evento de rotación:

Para aplicar rotación a un objeto se pueden aplicar dos metodologías, la primera seria pulsando con un primer dedo sobre un lugar de la pantalla y con otro en una posición diferente, para posteriormente realizar un giro como si de enroscar o desenroscar una botella se tratara, dependiendo de la dirección hacia donde se desee realizar el mismo.

La segunda forma de realizar la rotación es similar a la anterior, pero en lugar de mover los dos dedos del modo anteriormente descrito se deja un dedo pulsado de manera fija la pantalla y con el otro se realiza un movimiento circular como si se quisiera dibujar un círculo alrededor del dedo que mantiene una posición fija.

De esta forma “_rec” que es un objeto de “DrawingObject” dibujará un objeto girándose, enviando los argumentos adecuados de tipo “GestureEventArgs”

private void ProcessRotate(object sender, GestureEventArgs args)

{

_rect.Rotate(args.RotateAngle, args.Center);

Invalidate();

}

Rotación de la figura geométrica hacia la derecha

Evento de cambio de dimensiones o “Zoom”:

Se podría decir que hay dos tipos de “Zoom”, el positivo (+) cuya funcionalidad es la de cambiar las dimensiones de la figura haciéndola sensiblemente más grande. Por el contrario el segundo tipo de “Zoom” es el negativo (-), el cual reduce las dimensiones del objeto sobre el cual se aplica.

Cabe resaltar que el zoom negativo se aplica hasta que la imagen llegue a un mínimo, a partir del cual no se reducirá más.

private void ProcessZoom(object sender, GestureEventArgs args)

{

_rect.Zoom(args.ZoomFactor, args.Center);

Invalidate();

}

Zoom +

Zoom -

Evento de desplazamiento o “Panning”:

Este evento realiza el movimiento de la figura, en este caso el rectángulo, de una forma bastante peculiar, ya que normalmente cuando se deja de pulsar sobre un elemento, éste se queda anclado en la posición donde se produjo el “TouchUp” (“o levantado de pulsado”). Sin embargo en este caso, se aplica la opción de inercia, que fue descrita en la serie previa a esta Tablets MultiTouch con MS Windows 7: Inertia , para que la figura siga en movimiento aun después de dejar de pulsar sobre el elemento.

private void ProcessPan(object sender, GestureEventArgs args)

{

_rect.Move(args.PanTranslation);

//Text = String.Format("{0}", args.DistanceBetweenFingers);

Invalidate();

}

Evento de desplazamiento o acción del efecto “Panning”

Evento de pulsar con dos dedos de forma alternativa

Este evento sirve para cambiar el color del borde de la figura geométrica, y para hacerlo posible se debe pulsar sobre un lugar de la pantalla y posteriormente con otro dedo pulsar sobre un sitio diferente. Se observará el cambio de color cuando ambos dedos dejen de estar situados sobre la pantalla de la aplicación.

private void ProcessRollOver(object sender, GestureEventArgs args)

{

_rect.ShiftColor();

Invalidate();

}

Posibles colores a los que puede cambiar el marco del rectángulo.

Evento de tocar con dos dedos a la vez

Cuando la pantalla táctil reciba la entrada de dos pulsaciones simultáneas, lo que se ejecutará es el pintado de las diagonales de la figura geométrica.

Si se realiza la misma acción cuando la figura ya tiene las diagonales dibujadas, este evento las eliminará.

private void ProcessTwoFingerTap(object sender, GestureEventArgs args)

{

_rect.TogleDrawDiagonals();

Invalidate();

}

Evento de pulsar con dos dedos a la vez sobre la pantalla

Con la descripción de los eventos relacionados con la clase principal de la aplicación “mtGesture” se habría dado por finalizada la explicación del código que se oculta detrás de este interesante proyecto.

Se espera que esta serie haya sido de vuestro completo agrado y que os haya servido para animaros a iniciar el camino del desarrollo de aplicaciones para este tipo de dispositivos.

------------------------------------------------------------------------------------------------------------------------------------------

Desarrollo de aplicaciones con MS Windows 7 Multitouch: Manejador de Gestos (I de IV)
Desarrollo de aplicaciones con MS Windows 7 Multitouch: Manejador de Gestos (II de IV)

Desarrollo de aplicaciones con MS Windows 7 Multitouch: Manejador de Gestos (III de IV)

Desarrollo de aplicaciones con MS Windows 7 Multitouch: Manejador de Gestos (IV de IV)

Desarrollo de aplicaciones con MS Windows 7 Multitouch: Manejador de Gestos (IV de IV) Anexo I

Desarrollo de aplicaciones con MS Windows 7 Multitouch: Manejador de Gestos (IV de IV) Anexo II

Desarrollo de aplicaciones con MS Windows 7 Multitouch: Manejador de Gestos (IV de IV) Anexo III

------------------------------------------------------------------------------------------------------------------------------------------

Desarrollo de aplicaciones con MS Windows 7 Multitouch: Manejador de Gestos. Anexo II

Jhonattan Fiestas — Wed, 27 Jul 2011 12:13:00 GMT

En esta entrada se centrará la atención en la clase “GestureEventArgs” que es utilizada como argumento en su definición por los eventos de la clase “GestureHandler”. Adicionalmente se mencionarán los atributos “LastBeginEvent” y “LastEvent” que son instancias de la clase inicialmente mencionada.

GestureEventArgs

Estructura de “GestureEventsArgs”

“GestureEventArgs”deriva de la clase “EventArgs” que contiene un conjunto de propiedades muy interesantes que se procederán a describir:

Uint GestureId:
Un entero sin signo que identifica un gesto realizado sobre la pantalla táctil.

Point Location:
Coordenadas donde se ubica el gesto sobre la pantalla.

Bool IsBegin:
Valor booleano que indica si el evento actual es el primer evento de un gesto.

Bool IsInertia:
Indica si el gesto transmitido al objeto ha dado lugar a inercia, de esa forma se haría uso de la velocidad de desplazamiento, para mover el objeto sin intervención del usuario de la aplicación.

Double RotateAngle:
El ángulo de giro usado por el evento de rotación.

Point Center:
Coordenadas del centro del gesto.

Double ZoomFactor:
La escala de la imagen, que será utilizado por el evento Zoom para agrandar o reducir la imagen.

Size PanTranslation:
El desplazamiento relativo el cual será utilizado por el evento Pan para aplicar el efecto “panning” al objeto dentro de la aplicación. La clase “Size” se encuentra en el espacio de nombres “System.Drawing”, por lo cual la clase “GestureEventsArgs” debe referenciarla.

Size PanVelocity:
La velocidad del gesto “Pan” que puede ser usado por una inercia personalizada.

LastBeginEvent:
El primer evento en la secuencia de eventos desencadenado por el último gesto.

LastEvent :
El último evento en la secuencia de eventos desencadenado.

Una vez definidos y localizados los atributos de la clase, se continuará describiendo las dos grandes funciones de “GestureEventArgs”: la función constructor y la función de decodificación de gestos.

Constructor:

//Aquí se almacena la información del gesto

internal GestureEventArgs(GestureHandler handler, ref GESTUREINFO gestureInfo)

{

_dwFlags = gestureInfo.dwFlags;

GestureId = gestureInfo.dwID;

GestureArguments = gestureInfo.ullArguments;

//Obtiene el último evento para el manejador

LastEvent = handler.LastEvent;

//Obtiene el primer evento lanzado por el último gesto realizado.

LastBeginEvent = handler.LastBeginEvent;

DecodeGesture(handler.HWndWrapper, ref gestureInfo);

// Cuando se realice un nuevo gesto, se borran los valores

// de LastBeginEvent y LastEvent

if (IsBegin)

{

LastBeginEvent = null;

LastEvent = null;

}

Decodificador de gestos:

private void DecodeGesture(IHwndWrapper hWndWrapper, ref GESTUREINFO gestureInfo)

{

// Localización del gesto sobre la pantalla.

Location = hWndWrapper.PointToClient(

new Point(gestureInfo.ptsLocation.x, gestureInfo.ptsLocation.y));

Center = Location;

// Según el identificador de gestos se llenan los campos con los valores corespondientes

switch (GestureId)

{

case User32.GID_ROTATE:

// Se realiza el evento de rotación, utilizando la función específica de User32

ushort lastArguments = (ushort)(IsBegin ? 0 : LastEvent.GestureArguments);

RotateAngle = User32.GID_ROTATE_ANGLE_FROM_ARGUMENT(

(ushort)(gestureInfo.ullArguments - lastArguments));

break;

case User32.GID_ZOOM:

// Se guarda el valor de la nueva escala a la que se va a dibujar la figura

Point first = IsBegin ? Location : LastBeginEvent.Location;

Center = new Point((Location.X + first.X) / 2, (Location.Y + first.Y) / 2);

ZoomFactor = IsBegin ? 1 :

(double)gestureInfo.ullArguments / LastEvent.GestureArguments;

break;

case User32.GID_PAN:

// Se establece la velocidad de movimiento del objeto al hacer el efecto Panning

PanTranslation = IsBegin ?

new Size(0, 0) :

new Size(Location.X - LastEvent.Location.X,

Location.Y - LastEvent.Location.Y);

int panVelocity = User32.HiDWord((long)(gestureInfo.ullArguments));

PanVelocity = new Size(User32.LoWord(panVelocity), User32.HiWord(panVelocity));

break;

}

En la próxima entrada, y para finalizar la serie de forma apropiada, se va a mostrar todo lo descrito en la misma y en pleno funcionamiento para tener de esta manera una visión completa del trabajo del proyecto “mtGesture” proporcionado por Microsoft, como vía de introducción al mundo del desarrollo de aplicaciones para dispositivos tablet con MS Windows 7 Multitouch.

-------------------------------------------------------------------------------------------------------------------------------------------

Desarrollo de aplicaciones con MS Windows 7 Multitouch: Manejador de Gestos (I de IV)
Desarrollo de aplicaciones con MS Windows 7 Multitouch: Manejador de Gestos (II de IV)

Desarrollo de aplicaciones con MS Windows 7 Multitouch: Manejador de Gestos (III de IV)

Desarrollo de aplicaciones con MS Windows 7 Multitouch: Manejador de Gestos (IV de IV)

Desarrollo de aplicaciones con MS Windows 7 Multitouch: Manejador de Gestos (IV de IV) Anexo I

Desarrollo de aplicaciones con MS Windows 7 Multitouch: Manejador de Gestos (IV de IV) Anexo II

-------------------------------------------------------------------------------------------------------------------------------------------

Kinect controls Windows 7

Sergio San Roman — Tue, 14 Dec 2010 20:25:17 GMT

Hace ya unos años, exactamente en el 2002, todos nos quedamos con la boca abierta cuando vimos a Tom Cruise en Minority Report manejando unos equipos futuristas haciendo simples gestos con sus manos. Pues bien, gracias a Kinect, el nuevo periférico que Microsoft ha lanzado para su Xbox 360, controlar los equipos con simples gestos de nuestras manos es ya una realidad.

Desde el lanzamiento del periférico y mediante ingeniería inversa mentes inquietas han empezado a especular con las posibilidades que podría aportar este periférico en sectores diferentes a los del entretenimiento. Tras un tiempo han llegado a desarrollar plugings que hacen posible controlar Windows 7 mediante el uso de Kinect.

Aquí os dejo unos videos en los cuales podréis ver dicho control, podéis encontrar muchos mas. También podéis encontrar datos muy interesantes, por ejemplo, industrias Adafruit ofreció una recompensa para el creador de un controlador de código abierto para Kinect, el cual fue desarrollado por un español.

Kinect Controls Windows 7

Air Presenter using Kinect

Kinect Trearment of Windows 7

Haciendo eco de ciertos rumores que circulan por la red, decir que es muy posible que Windows 8 tenga soporte nativo para usarlo.

A mi parecer es asombroso como avanza la tecnología, parafraseando a Albert Einstein:

“Si se puede imaginar, puede hacerse”

Cada día vemos cosas impensables y tras el paso de unos pocos años las tenemos en nuestras manos.

Un saludo y espero que esto os resultase tan curioso e interesante como a mí.