paulo.arancibia

Una de las nuevas características de WPF 3.5 es Viewport2DVisual3D, esta nos permite tomar un objeto 2D y visualizarlo en un espacio 3D, esto lo podíamos hacer anteriormente con 3D Tools for WPF pero ahora al menos algunas de estas características son parte del framework, para mostrarles su uso voy amigrar la demo que utilice en el Code Camp, cuyo código pueden bajar desde aquí o consultar mas en profundidad en este post, para que pase de usar 3D Tools for WPF por Viewport2DVisual3D.

Pasemos a ver el código, verán que aun sigo usando 3D Tools for WPF, pero tan solo para utilizar el TrackBallDecorator, que es quien me permite mover el modelo utilizando el mouse, el resto del código es muy fácil de seguir, en el resource he creado un mesh, luego configuro la cámara, la luz y por ultimo pinto mi mesh con un MediaElement.

<Window x:Class=”DemoViewport2DVisual3D.Window1″

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

xmlns:local=”clr-namespace:_3DTools;assembly=3DTools”

Title=”Viewport2DVisual3D Demo” Height=”600″ Width=”600″>

<Window.Resources>

<MeshGeometry3D x:Key=”3dMesh” Positions=”-1,1,0 -1,-1,0 1,-1,0 1,1,0″

TextureCoordinates=”0,0 0,1 1,1 1,0″ TriangleIndices=”0 1 2 0 2 3″/>

</Window.Resources>

<local:TrackballDecorator>

<Viewport3D HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch”>

<Viewport3D.Camera>

<PerspectiveCamera Position=”0,0,4″ FieldOfView=”45″ />

</Viewport3D.Camera>

<ModelVisual3D >

<ModelVisual3D.Content>

<AmbientLight Color=”#FFFFFFFF”/>

</ModelVisual3D.Content>

</ModelVisual3D>

<Viewport2DVisual3D Geometry=”{StaticResource 3dMesh}”>

<Viewport2DVisual3D.Visual>

<MediaElement Source=”silverlight.wmv” Stretch=”Uniform” Volume=”0″ LoadedBehavior=”Play” Width=”448″ Height=”256″/>

</Viewport2DVisual3D.Visual>

<Viewport2DVisual3D.Material>

<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial=”true”/>

</Viewport2DVisual3D.Material>

</Viewport2DVisual3D>

</Viewport3D>

</local:TrackballDecorator>

</Window>

Al ejecutar el ejemplo deberíamos de ver algo como lo siguiente.

Tal como prometí ayer, aquí les dejo el código de las demos que estuve presentando y algunos enlaces que les serán de utilidad.

Download Snow Shop

Download Xbox 360 Showcase

Download Flextreme Color Selector

Bea Costa Blog

Download My Printer 3D

Erain ZAM 3D

Download Demo 3D

3D Tools for WPF

Espero la hayan pasado tan bien como yo en el Code Camp y nos vemos el año próximo.

Astoria nos permite exponer facilmente datos a través de un servicio WCF, estos recursos los podemos navegar al estilo REST y para manipularlos utilizamos los verbos HTTP, también tenemos la posibilidad de elegir el formato en el que queremos consumir los datos, que puede ser XML, JSON o RDF.

Para trabajar con Astoria necesitamos tener instalado Visual Studio 2008 Beta 2, ADO.NET Entity Framework Beta 2, ADO.Net Entity Framework Tools August 07 CTP y por supuesto la ultima CTP de Astoria.

Comenzaremos creando un nuevo sitio web, como se ve debajo en la imagen.

A nuestro sitio web le agregaremos un ADO.NET Entity Data Model.

Seleccionamos la opción Generate from Database.

Elegimos la base de datos de la cual obtendremos la data a exponer por el servicio.

Seleccionamos los objetos a utilizar.

Concluidos estos pasos ya tenemos listo nuestro modelo de datos.

Ahora crearemos un nuevo Web Data Service.

Al cual configuraremos para que utilice nuestro modelo de datos.

using System;

using System.Collections.Generic;

using System.Data;

using System.Data.Objects;

using System.ServiceModel.Web;

using System.Linq;

using Microsoft.Astoria;

namespace AstoriaDemo

{

public class OranjeService : WebDataService<OranjeDataModel>

{

}

}

Para finalizar seteamos como Set As Start Page al mismo, luego abrimos el archivo web.config y agregamos la siguiente línea dentro de la sección appSettings, para poder consultar los datos en formato JSON.

<appSettings>

<add key=“EnableAstoriaJSONP“ value=“true“/>

</appSettings>

Presionamos F5 y deberíamos obtener las referencias a nuestras entidades de datos, en este caso Players y Clubs.

Si quisiera ver el listado de todas las jugadoras solo debo ingresar la siguiente Uri.

http://host/OranjeService.svc/Players

También podemos utilizar algunos filtros para procesar los datos, por ejemplo si quisiera obtener el listado de jugadoras ordenadas por posición, solo debo ingresar la siguiente consulta.

http://host/OranjeService.svc/Players?$orderby=Position

Si queremos ver los datos de la jugadora con el PlayerId 11.

http://host/OranjeService.svc/Players[11]

Y por ultimo para obtener datos en formato JSON lo hacemos de la siguiente manera.

http://host/OranjeService.svc/Players[11]?$format=json

[

{

__metadata: {

Type: "Players", Base: "http://localhost:49183/OranjeService.svc", Uri: "Players[11]“

}, Age: 28, Caps: 242, Clubs: {

__metadata: {

Uri: “Players[11]/Clubs”

}

}, Description: “Minke Smabers (born March 22, 1979 in Den Haag, Zuid-Holland) is a field hockey midfielder from the Netherlands, who played more than 200 international matches for the Dutch National Women\’s Team. Her current team is Laren.”, Name: “Minke Smabers”, Number: 13, Picture: “../images/13.jpg”, PlayerId: 11, Position: “MF “

}

]

Esta es solo una pequeña introducción a Astoria si están interesados en seguir investigando sobre el mismo a continuación les dejo algunos enlaces a recursos interesantes.

Microsoft Codename “Astoria”
http://astoria.mslivelabs.com/

Download Microsoft Codename “Astoria” September 2007 CTP
http://www.microsoft.com/downloads/details.aspx?FamilyId=0FA1413C-CB55-4577-960E-0F3491847F58&displaylang=en

Download ADO.NET Entity Framework Beta 2
http://www.microsoft.com/downloads/details.aspx?FamilyId=F1ADC5D1-A42E-40A6-A68C-A42EE11186F7&displaylang=en

Download ADO.Net Entity Framework Tools Aug 07 CTP
http://www.microsoft.com/downloads/details.aspx?familyid=09A36081-5ED1-4648-B995-6239D0B77CB5&displaylang=en

Project Astoria Team Blog
http://blogs.msdn.com/astoriateam/

Pablo Castro’s blog
http://blogs.msdn.com/pablo/

Channel9 - Pablo Castro: Astoria Data Services
http://channel9.msdn.com/Showpost.aspx?postid=305985

Mix07 - XD006 Accessing Data Services in the Cloud
http://sessions.visitmix.com/default.asp?event=1011&session=2011&pid=XD006&disc=&id=1573&year=2007&search=XD006

Hoy veremos cómo rotar elementos en Silverlight 1.0, comenzaremos viendo el código XAML.

<Image Width=“485“ Height=“352“ Canvas.Top=“0“ Canvas.Left=“0“ Source=“images/control.png“/>

<Canvas x:Name=“rotateCanvasDial“ Width=“190“ Height=“190“ Canvas.Left=“180.554“ Canvas.Top=“99.313“ Background=“Transparent“ RenderTransformOrigin=“0.5,0.5“ Canvas.ZIndex=“1“>

<Canvas.RenderTransform>

<TransformGroup>

<RotateTransform x:Name = “canvasRotateDial“ CenterX=“0“ CenterY=“0“ Angle=“0“/>

</TransformGroup>

</Canvas.RenderTransform>

<Image x:Name=“dial“ Width=“190“ Height=“190“ Canvas.Left=“0“ Canvas.Top=“0“ Stretch=“Fill“ Source=“images/dial.png“/>

<Ellipse MouseMove=“rotateMouseMove“ MouseLeftButtonDown=“rotateMouseDown“ MouseLeftButtonUp=“rotateMouseUp“ Cursor=“Hand“ x:Name=“rotateHandleDial“ Width=“190“ Height=“190“ Fill=“Transparent“ Canvas.Left=“0“ Canvas.Top=“0“/>

</Canvas>

En primera instancia creamos un Canvas con una RotateTransform que será la encargada de girar el elemento, luego agregamos una imagen que será el elemento visual a rotar y una elipse que lo cubre, a esta elipse le agregue tres eventos MouseMove, MouseLeftButtonDown y MouseLeftButtonUp.

En la parte JavaScript, lo primero que haremos será declarar unas variables para diferentes parámetros que luego utilizaremos.

var lastPosition = 0;

var beginAngle = 0;

var isMouseDown = false;

var rotateCanvasName;

var rotateTransformName;

var imageZIndex = 0;

var rotateZIndex = 1;

En el evento MouseLeftButtonUp ,cambiamos el valor de la variable rotateMouseUp y liberamos al mouse.

function rotateMouseUp(sender, args)

{

isMouseDown = false;

sender.releaseMouseCapture();

}

En MouseLeftButtonDown, activamos la captura del mouse, cambiamos el valor de la variable isMouseDown y registramos la última posición del cursor del mouse.

function rotateMouseDown(sender, args)

{

sender.captureMouse();

isMouseDown = true;

lastPosition = args.getPosition(null);

objectName = sender.name;

rotateCanvasName = “rotateCanvasDial”;

rotateTransformName = “canvasRotateDial”;

}

Por último en el evento MouseMove capturamos la posición actual del cursor, seleccionamos la RotateTransform a utilizar, calculamos el CenterPoint y el ángulo dependiendo de los movimientos del mouse.

function rotateMouseMove(sender, args)

{

var position = args.getPosition(null);

if (isMouseDown)

{

var rotate = sender.findName(rotateTransformName);

var centerPoint = {};

canvasLeft = sender.findName(rotateCanvasName)["Canvas.Left"];

canvasTop = sender.findName(rotateCanvasName)["Canvas.Top"];

canvasWidth = sender.findName(rotateCanvasName).width;

canvasHeight = sender.findName(rotateCanvasName).height;

centerPoint.X = canvasLeft + canvasWidth/2;

centerPoint.Y = canvasTop + canvasHeight/2;

var radiansToDegrees = 360 / (2 * Math.PI);

var lastAngle = parseInt(Math.atan2(lastPosition.Y - centerPoint.Y, lastPosition.X - centerPoint.X) * radiansToDegrees);

var currentAngle = parseInt(Math.atan2(position.Y - centerPoint.Y, position.X - centerPoint.X) * radiansToDegrees);

var deltaAngle = currentAngle - lastAngle;

rotate.Angle += deltaAngle;

beginAngle += deltaAngle;

lastPosition = position;

}

}

Al ejecutar nuestro ejemplo se debería de ver como en la siguiente imagen.

El próximo 24 de Octubre en las instalaciones de la UADE se estará desarrollando el Code Camp Buenos Aires 2007, en el mismo Southworks va a tener una importante participación, por un lado Johnny Halife y Augusto Alvarez estarán presentando a DinnerNow, por el otro, Alejandro Jack y yo vamos a estar hablando sobre User Experience y Smart Clients.

Esta es una gran oportunidad para que puedan conocer a muchos de los miembros de nuestro equipo y el trabajo que realizamos en Southworks.

A continuación les dejo el enlace a la página del Code Camp donde podrán registrarse, ver la agenda de charlas a realizarse y sus horarios.

Code Camp Buenos Aires 2007