Andy's Blog

More Polygon Physics with Silverlight

andy@beaulieu.com — Thu, 17 Jul 2008 19:28:00 GMT

I’ve souped up my previous demo on Polygon Physics using Silverlight and Farseer to include two improvements. First, I’ve added a utility function to create an approximate Farseer Polygon Geometry from any Silverlight Path object. Also, I’ve added the ability to manipulate the polygons using the mouse (turns out this is pretty easy thanks to Farseer). In this blog post, I’ll explain how I made these enhancements.

[TRY THE DEMO] [DOWNLOAD THE SOURCE]

To begin, if you are new to Farseer Physics and Silverlight, you should start with my first post on Polygon Physics.

Creating a Farseer Polygon Geometry based on a Path

In the demo app, if you type out any letters (A-Z) on the keyboard, then you will see a demo of Path objects being translated to Polygon Physics objects. In the Silverlight Project, these Path objects are pulled from the ucAlphabet.xaml user control.

There is an unfortunate problem in Silverlight 2 Beta 2 (not sure if this will be resolved by release time) with getting the geometry information on a Path object. So let’s say you design a Path using Expression Blend:

…and then you later want to manipulate that Path’s geometry using code –

foreach (PathFigure figure in (pathTest.Data as PathGeometry).Figures)

{

// this won't work in Silverlight 2 Beta 2

// the Figures collection is always empty!

}

…you really can’t do the manipulation in code because the Path.Data property does not get filled.

So, we need another method of getting the Path’s shape so that we can hand it off to Farseer. One way we could do this is by translating the Path “mini-language” which defines the shape. So we could translate this part of the XAML for the Path:

Data="M98,89 L79,122 L117,119 L150,108 L161,58 L102,58 z"

I actually think this would be an ideal approach, but it’s not the one I took. Instead, I used the HitTest method to “scan” the Path for its approximate shape. I did this with a series of loops which scans each side of the Path and tests each x,y point for a hit. If the HitTest succeeds on a point, then I add that point into a list which defines the overall shape. I then give this list of points depicting the shape over to Farseer to define the Polygon Geometry.

Below is an excerpt from the method Utils.GetPointsForPath which scans the left side of the Path to get it’s outline:

// left side

for (double y = top; y < top + height; y++)

{

for (double x = left; x < left + width; x++)

{

Point ptTest = new Point(x,y);

List<UIElement> hits = path.HitTest(ptTest) as List<UIElement>;

if (hits.Contains(path))

{

Point ptHit = new Point(x / scaleX, y / scaleY);

outline.Add(ptHit);

break;

}

I simply repeat this for the bottom, right, and top sides and then I have a list of points representing the approximate outline of the Path.

Manipulating Polygons with the Mouse

This is almost a freebie and can be nearly copy/pasted from the original Silverlight/Farseer demos ported by Bill Reiss. To allow the user to grab onto a Farseer object and move it around the screen, we need to do three basic steps:

1. In the MouseDown event for the polygon, we keep track of the polygon (“sprite”) that was clicked and create a Fixed Linear Spring at the clicked point.

void sprite_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

Vector2 point = new Vector2((float)(e.GetPosition(_parentCanvas).X), (float)(e.GetPosition(_parentCanvas).Y));

_pickedSprite = (sender as SpriteBase);

_pickedSprite.CaptureMouse();

if (_pickedSprite != null)

{

_mousePickSpring = ControllerFactory.Instance.CreateFixedLinearSpring(_physicsSimulator, _pickedSprite.BodyObject, _pickedSprite.BodyObject.GetLocalPosition(point), point, 10, 5);

e.Handled = true;

}

2. In the MouseMove event for the polygon, we adjust the attached point for the Fixed Linear Spring to the mouse move point.

void sprite_MouseMove(object sender, MouseEventArgs e)

{

if (_mousePickSpring != null)

{

Vector2 point = new Vector2((float)(e.GetPosition(_parentCanvas).X), (float)(e.GetPosition(_parentCanvas).Y));

_mousePickSpring.WorldAttachPoint = point;

e.Handled = true;

}

3. In the MouseUp event for the polygon, we dispose of the Fixed Linear Spring.

void sprite_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

{

if (_mousePickSpring != null && _mousePickSpring.IsDisposed == false)

{

_mousePickSpring.Dispose();

_mousePickSpring = null;

_pickedSprite.ReleaseMouseCapture();

e.Handled = true;

}

I also embellished with a Line showing the drag direction of the Spring from the Polygon.

Summary

Note that the “HitTest for Path Outline” method is only giving an approximate Polygon outlining the shape of the Path, but it is pretty close! I think with some further tweaks to the Utils.GetPointsForPath method, it could get even closer.

Finding a XAML Element by Name at Runtime

andy@beaulieu.com — Mon, 14 Jul 2008 21:52:00 GMT

In ASP.NET, it's possible to get a reference to a control by Id at runtime using the FindControl method - something like this:

Label lblCustomerName = (Label) item.FindControl("lblCustomerName");

This can be helpful in dynamic code which might need to iterate through a large collection of elements in XAML.

In Silverlight, there is no FindControl method, but we can still get a reference to an object by name using the FindName method of a container:

TextBlock lblCustomerName = cnvContainer.FindName("lblCustomerName") as TextBlock

We can also access the Children collection of a container and query using a lambda expression:

TextBlock lblCustomerName = (cnvContainer.Children.First<UIElement>(label => label.GetValue(Canvas.NameProperty).ToString() == "lblCustomerName")) as TextBlock;

In the above example, we are getting a reference to an object named lblCustomerName inside a canvas named cnvContainer. We do so by using a lambda expression on the Children property, along with the Canvas.NameProperty which gives the variable (x:Name) property of a UIElement.

Why is my Default.aspx page Always Executed?

andy@beaulieu.com — Mon, 07 Jul 2008 20:53:00 GMT

This is a new Silverlight spin on an old problem. Let's say you have a Default.aspx page with some code behind logic in it. One day you notice using the debugger that the code-behind logic in Default.aspx.cs is always executed - even when accessing a different aspx page.

This problem can arise for a couple of common reasons. One reason is that someone copied the Default.aspx page to a new page and forgot to change the Codebehind and Inherits page directives to a new code-behind class. You can usually solve this by searching other pages for references to _Default in their page header:

<%@ Page language="c#" Codebehind="Default.aspx.cs" AutoEventWireup="false"
Inherits="VersaTrans.GPS.Web.UI._Default" %>

Another more common reason though, is that you have dynamically assigned a Url for a resource, such as an img src, and the src attribute evaluates to an empty string:

... if bound to an empty field, would evaluate to:

When this happens, the Request will go to the root of your website, which in turn will execute the default page of your site - normally Default.aspx. You can use a tool such as Fiddler or Web Development Helper to help troubleshoot this issue. By capturing the http traffic, you will see a request for the root of your site.

A Silverlight Twist
The problem described above is hard enough to track down in an ASP.NET environment. But to make it even more confusing, a Silverlight application within the ASP.NET website can also cause the problem.

A common way to dynamically assign an image source in Silverlight is shown below. We create an ImageSource based on Uri and the set the SourceProperty of the Image to the Uri:

Uri imageUri = new Uri(imageUrl, UriKind.Absolute);
ImageSource imgSource = new System.Windows.Media.Imaging.BitmapImage(imageUri);
img.SetValue(Image.SourceProperty, imgSource);

... but if the variable imageUrl above is an empty string, we are back to the same issue described above for the ASP.NET environment. The browser will request the root of the web site, and the default page will be executed.

To avoid this problem, check for empty Image Source's when assigning Url's to image objects.

I'm All Ported Out

andy@beaulieu.com — Mon, 16 Jun 2008 23:51:00 GMT

I have most of my Silverlight games and demos ported to Silverlight 2 Beta 2. Here are links to the more popular games and demos...

DESTROY ALL INVADERS A scrolling shooter game where the objective is to destroy the invading UFO's flying over a neighborhood of your choosing. Imagery provided by Microsoft Virtual Earth.
PLAY IT	INFO AND CODE

SORT THE FOOBARS A game where you need to sort the good foobars from the bad ones.
PLAY IT	MORE INFO

POLYGON PHYSICS DEMO A demo showing polygon physics where the user draws physics objects with the mouse.
PLAY IT	MORE INFO

SILVERLIGHT ROCKS! Destroy the asteroids before they destroy your ship!
PLAY IT	INFO AND CODE

DEEPZOOM FOR ECOMMERCE A real world example of using DeepZoom for E-Commerce.
VIEW IT	MORE INFO

USING HITTEST METHOD IN SILVERLIGHT 2 FOR COLLISION DETECTION A small sample showing how to use HitTest for accurate collision detection in Silverlight 2. This method is also used in the Silverlight Rocks! sample above.
VIEW IT	INFO AND CODE

Tech Ed Work and Play

andy@beaulieu.com — Fri, 13 Jun 2008 00:36:00 GMT

I had a great time at Tech Ed Orlando where I helped out as a Technical Learning Guide, delivered a couple of Silverlight Instructor-Led Labs, and helped out in the Hands-On Labs area. I have to say though, that my feet have never hurt so bad because of those concrete convention floors! It was great meeting all of the other training folks there and building camaraderie. It kind of felt like summer camp when I was kid! And although I was most excited about delivering the Silverlight training, I was excited to help out with the ASP.NET MVC labs as well.

What happens when you mix free beer with free amusement park rides? Chris Sutton, Me, Laurent Duveau, and Rodrigo Díaz Concha at the new Simpsons ride at Universal.

Trying really hard not to look nervous :)

And the Tweener Event on Saturday, even though I could only stick around for a bit, was a great event. I tried to hold my own, speaking between two renowned Silverlight presenters, Walt Ritscher and Bill Reiss. The real fun with the Tweener event though, was the night-before get-together hosted by Joe Healy at Friday’s.

I'm Out and About

andy@beaulieu.com — Wed, 28 May 2008 23:23:00 GMT

I'll be doing a few Silverlight talks in the coming weeks - if you are in the area, stop by and say hi!

Tuesday, June 3rd - Friday, June 6th
I'll be at Tech-Ed Developers in Orlando leading the Instructor-Led Lab "Microsoft Silverlight 2 Foundations" on 6/3 and 6/5, and also milling about as a Technical Learning Guide throughout the week.

Saturday, June 7th 10:20am - 11:30am
I'll be presenting "Silverlight 2 for Data Applications" at the ]inbetween[ event in Orlando. This is a FREE event and well worth the time.

Wednesday, June 18th
I'll be presenting "Silverlight 2 for Data Applications" at the Western New York .Net Users Group in Buffalo, NY

DeepZoom for eCommerce

andy@beaulieu.com — Wed, 21 May 2008 01:33:00 GMT

It just so happens my father-in-law is a woodworker who creates some really fantastic pieces and has contemplated selling them online for some time. But limiting the shopper to a few small thumbnail images wouldn't do his work justice.

Enter Silverlight's MutliScaleImage class (aka "DeepZoom"). Chances are you've seen DeepZoom in action on sites like the Hardrock Memorabilia site. DeepZoom provides progressive image downloads with an intuitive navigation system that looks like something out of Minority Report.

So here is the site we pulled together using DeepZoom, Silverlight, and some really impressive wood turnings:

One of the irritations with buying stuff on the web is that you can't hold the item in your hand and really check it out before forking over your credit card info. This can be especially irritating if the item you're looking at is hand-made, such as a painting, piece of pottery, or... a bowl turning! I think technologies like DeepZoom can greatly improve this experience over traditional thumbnail images.

Notice how the site also uses a picture-in-picture type view for some of the pieces, to show different views - such as the item with the top removed:

... the neat thing here is that the smaller picture-in-picture image has all of the detail of the main image.

Shameless Plug: If you are looking for a one of a kind, hand-made gift please browse the site!

Lessons Learned:
It turns out there is a surprising amount of code you need to write yourself to get a DeepZoom implementation such as the one at wssmithers.com. You might expect most functionality would be built into the MultiScaleImage class, but it isn't!

One of the key requirements of the site was to be able to tie the product information (item #, price, etc) from a SQL Server db to the Images in the DeepZoom Composer project. In order to create this relationship, you can use the index # of the subimage as a unique key in the composition.

So first, we handle the ImageOpenSucceeded event of the MultiScaleImage Control:

deepZoomObject.ImageOpenSucceeded += new RoutedEventHandler(deepZoomObject_ImageOpenSucceeded);

... and in that handler we can store the image index along with relevant data (perhaps a ProductId) to tie the image to its data:

Dictionary<string, string> _imageData = new Dictionary<string, string>();

private void deepZoomObject_ImageOpenSucceeded(object sender, RoutedEventArgs e)

{

_imageData.Clear();

for (int i = 0; i < deepZoomObject.SubImages.Count; i++)

{

MultiScaleSubImage subImage = deepZoomObject.SubImages[i];

_imageData.Add(i.ToString(), "You can tie data here");

subImage.SetValue(FrameworkElement.NameProperty, i.ToString());

}

There are many other aspects to creating a DeepZoom site such as this which I hope to explain in a future blog post and maybe prepare a talk on the subject!

Where is my Astoria Client for Silverlight 2?

andy@beaulieu.com — Fri, 25 Apr 2008 14:04:00 GMT

According to this post from the Astoria Team Blog, it looks like we won't have a new Astoria (ADO.NET Data Services) client for Silverlight 2 until SL2 Beta 2 is released (perhaps May 2008?)

Many of the data demos for Silverlight 2 have so far used LINQ to SQL for the data access layer. These demos involve creating a LINQ to SQL data model (using a nice drag/drop editor), and then exposing that model through a web service by manually coding a WCF Web Service or .asmx Service.

Don't get me wrong, this is a pretty rapid development method... but what if you didn't need to code the web service for basic CRUD operations and queries on your data? What if it were all exposed for you and you could use LINQ to access the data from the Silverlight client?

This automatic service layer is just one of the advantages that ADO.NET Data Services (Astoria) provides, and since Silverlight 2 has much better support for Data Entry controls, the combination of SL and Astoria should provide a powerful rapid development environment!

Silverlight 2 for Data Apps

andy@beaulieu.com — Sun, 06 Apr 2008 22:59:00 GMT

Thanks to everyone who attended my "Silverlight 2 for Data Applications" talk at Code Camp 9 in Waltham, MA on 4/5/2008! And a big thanks to Chris Bowen and Chris Pels for their hard work organizing this great event time after time. I had a great crowd for my talk, standing room only, and as promised I have some goodies for all:

First, even if you couldn't make it to Code Camp for my talk, I have created a screen cast that walks through the demos. Just click the image below to launch the video:

I also have the Beers Demo Application and Slide Deck available:

DOWNLOAD THE DEMO CODE

DOWNLOAD THE SLIDE DECK (PPT)

Summary of the Presentation

In this talk, I walked through a mult-tier Silverlight Application with the following architecture:

1. A Silverlight 2 Client containing a Master/Detail scenario

2. A WCF Web Service providing communication to the Silverlight Client

3. A Data Accesss Layer using LINQ to SQL

4. A Simple SQL Server Database with (Mmmmm) Beer Data.

We explored how to use LINQ to SQL to expose our database entities through a WCF Web Service, and how Silverlight 2 can communicate with the web service. We also explored formatting a DataGrid and creating User Controls with DataBound UI Elements, and how to do basic CRUD operations from the Silverlight client back to the Web Service.

Here is a shot of the completed demo (download the source code above):

LINQ to SQL CRUD

andy@beaulieu.com — Fri, 28 Mar 2008 17:42:00 GMT

I'm seeing a lot of buzz around LINQ to SQL lately and how it can help to quickly create a Silverlight 2 data app.

I'll be giving a talk around this at the upcoming Code Camp 9 in Waltham, MA, and I wanted to share how I am doing basic CRUD operations in LINQ to SQL, as I've seen this question come up a few times.

You may remember my Silverlight 1.1 Alpha demo app, "Andy's Fridge." I'll be using a similar Beer Database which has a very simple schema containing Beers and Brewers like so:

It's important to note that the RowVersionId columns in the diagram are Timestamp columns. This will allow LINQ to SQL to generate more efficient Update statements, based on the unique Row Id (timestamp) instead of Where clauses with lots of logical "AND's" for each original value.

So, given that schema is like that above, our CRUD operations for the Beer entity would exist in our web service like so:

public class BeerService : IBeerService

{

public List<Beer> GetAllBeers()

{

DataClassesDataContext db = new DataClassesDataContext();

var beers = from b in db.Beers

orderby b.BeerName

select b;

return beers.ToList<Beer>();

}

public void SaveBeer(Beer beer)

{

DataClassesDataContext db = new DataClassesDataContext();

if (beer.BeerId > 0)

{

// this is an update

db.Beers.Attach(beer, true);

}

else

{

// this is an insert

db.Beers.InsertOnSubmit(beer);

}

db.SubmitChanges();

}

public void DeleteBeer(Beer beer)

{

DataClassesDataContext db = new DataClassesDataContext();

db.Beers.Attach(beer, false);

db.Beers.DeleteOnSubmit(beer);

db.SubmitChanges();

}

Note that I piggybacked the SaveBeer method to do either an Insert operation or Update operation, based on whether or not a primary key is available in the passed entity.

I guess until ADO.NET Data Services (Astoria) and the Entity Framework are officially available, we will have to settle with LINQ to SQL for Data Access! But I don't think we will be waiting long :)

What can we look forward to with Astoria and the EF?

no need to write tedious web service methods for CRUD operations like shown above
serialization of Parent and Child records (LINQ to SQL cannot pass related child records across the wire with parent rows)
Access to other Database Providers other than SQL Server.
The ability to flexibly map Conceptual model elements such as class properties to Physical columns in the database (LINQ to SQL provides only a 1-to-1 mapping)