Creating an Epic Wedding Reception with Silverlight 4

This might no be very useful information when creating line of business applications, but I thought that it is cool enough that it’s worth sharing.

It all started when my brother decided to get married and organize a party after the ceremony… you know the usual wedding stuff… As a best man i wanted to do something to make this wedding stand out from the rest. Since i pretty much suck at everything not computer related so that’s what I had to go for.

Idea

People will be arriving to the party after church and i wanted to provide them something to do while they are getting seated and waiting for others to arrive. (They are mainly regular Finnish people, so they are not yet drunk enough to actually talk to other people yet). So I’m going to automatically take pictures from people arriving to the party and project them on a wall to a virtual wedding album made with Silverlight.

What do you need

• Server laptop that’s taking the pictures and hosting them on IIS.
• Client laptop that’s getting the images.
• Webcam to take the pictures.
• Router or a hub of some kind to create a network between these machines.
• Bit of craziness to do something like this.

How to do it

The Server laptop was a Macbook with Windows 7 and IIS configured with pretty much the default settings. Only thing i needed to change was some file rights for the client to be able to access the files. It  also needs some software to take the images from the Webcam periodically. I ended up using Yawcam, but i wouldn’t recommend it since it only allows you to take 640×480 images even though my webcams max supported resolution was 1280×800 (1.3MP). I set Yawcam to take images every 10 seconds and put them directly on the folder that was mapped to the IIS.

Client was also a Windows 7 laptop and i was running the Silverlight app directly from Visual Studio development server. For the wedding album i needed ready made control of a popular “Silverlight book implementation” and i found this http://www.rajneeshnoonia.com/blog/2011/06/page-flip-with-deep-zoom/ . There are better looking similar controls but this had a method for turning the page i could call programmatically, which was my only requirement. By default that control looks quite horrible so time for some Photoshop magic :).

Steps

1. Make the huge shadows a lot smaller
2. Add some “weddingish” silk to the background
3. Make the pages look like a stylish paper
4. Start page with the lovely couple and some text to greet the guests
5. Another page to display the images from arriving guests

And here’s how they ended up looking, first the page with the couple and the text’s i but this page to come up every once a while.

And the page to display images from guest’s. The content in them is created during runtime and you can browse trough the album like you would do on an regular photoalbum.

To add the chewing gum code to make it work i used an empty stroryboard that takes 20 seconds to complete and once it completes i get new images from the server and display them on the right position. There’s nothing fancy about the code, but here’s how to do one item:

Storyboard sb = new Storyboard();
        int i = 0;
        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
            sb.Duration = new Duration(new TimeSpan(0, 0, 20));
            sb.Completed += new EventHandler(sb_Completed);
        }
        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            sb.Begin();
        }
        void sb_Completed(object sender, EventArgs e)
        {
            //THE BACKGROUND FOR THE PAGE
            Image recr = new Image();
            BitmapImage bmi = new BitmapImage(new Uri("3 sivu.png", UriKind.Relative));
            recr.Source = bmi;
            //THE LIVE IMAGE FROM GUESTS MARGINS TAKEN FROM BACKGROUND IMAGE
            Image live1 = new Image();
            BitmapImage livebitmap = new BitmapImage(new Uri("http://10.0.1.150/" + i + ".jpg", UriKind.Absolute));
            live1.Source = livebitmap;
            live1.Stretch = Stretch.Fill;
            live1.Margin = new Thickness(27, 156, 26, 163);
            i++;
            Grid newchild = new Grid();
            newchild.Children.Add(recr);
            newchild.Children.Add(live1);
            BookItem newitem = new BookItem();
            newitem.Content = newchild;
            kirja.Items.Add(newitem);
            kirja.TurnPage(true);
            sb.Begin();
            }
        }

All content to the book is created at runtime. The book control accepts a Grid as it’s BookItem’s content so i just created a grid and put my two images inside it. Every time the storyboard ends i start it again and add +1 to the index number so i always get new images from the webcam server. I set up YawCam to take images corresponding to this. My webcam server ended up taking approx. 1500 images from the wedding, in the 4~ hours it was running, and I’m hoping the guests had as much fun looking at them that I had creating this whole thing.

Should you have any questions i would be happy to answer them.

Cheers,

Petteri Lehtonen