Microsoft.Expression.Blend.Silverlight.targets was not found

Recently I encountered the following error when trying to open a Silverlight 3 project:

Unable to read the project file ‘X.csproj’.
The imported project “c:\program files\MSBuild\Microsoft\Expression\Blend\3.0\Silverlight\Microsoft.Expression.Blend.Silverlight.targets” was not found.
Confirm the path in the <Import> declaration is correct, and that the file exists on disk.

The scenario is that I had fired up the new RC of Expression Blend 3.0 and created a Silverlight 3 project. At some point along the way I had also been messing with a TextBlock and I had ticked the ‘Embed’ checkbox to embed the font I selected into the project. Then when I tried to open the project on another machine I was met with the above error and my Silverlight project wouldn’t load.

Unni Ravindranathan was helpful enough to point out that when using Blend 3 features such as embedded fonts you must have the Blend 3.0 SDK installed, and sure enough that’s exactly what I’d done. I had thought I needed to installed Expression Blend 3.0 on my machine in order to open the project, but the SDK was all I needed. Unni is Program Manager on the Expression Blend team and I appreciate his quick and direct help.

I’d like to know why I could always embed fonts in Silverlight projects without needing Blend 3.0 but I’m sure there’s a perfectly reasonable explanation. Not to mention – why is the SDK not an optional part of the Silverlight 3 SDK install? It’s only a 3mb download…

Grab the SDK here: http://www.microsoft.com/downloads/details.aspx?FamilyID=F1AE9A30-4928-411D-970B-E682AB179E17&displaylang=en

Integrating Google Analytics with your Silverlight Streaming application

No dice. Can’t be done. Here’s why.

To track an action you need to invoke the trackPage() function defined in ga.js. The function must be invoked from the same domain registered in your Google Analytics account, in my case that’s “andrewmyhre.com”. So in order to track events from my Silverlight app I need to call up to the parent frame and invoke a function to track the event. Unfortunately, because my Silverlight application is running on an entirely different domain (something like “silverlight.services.live.com”) the browser throws a “Permission denied” error when I try to invoke parent.trackPage().

There is no way around this. That behaviour is by design, in order to prevent cross-site scripting attacks.

So I’ve moved the Silverlight and media files to my hosting account where I can load everything under my own domain. That’s cool because I have 1gb of space there and the total media payload is around 500mb. It’s also a real shame, it was cool to be using a new beta service like Silverlight Streaming, but unfortunately event tracking is a deal breaker for me.

Maybe there are some coders out there who know how to get around this, or maybe the Silverlight Streaming team have a workaround… I can’t really see it happening though. Shame.

On the bright side though, the videos seem to be streaming much more quickly now! :/

Providing custom ‘no-Silverlight’ UI using Silverlight Streaming

When building and hosting your own Silverlight application it’s pretty simple to provide whatever custom UI you want when a user doesn’t have a required version of Silverlight installed. Refer to Tim Heuer’s article on the subject: http://timheuer.com/blog/archive/2008/03/25/creating-a-great-silverlight-deployment-experience.aspx.

When using Silverlight Streaming, however, it’s not that simple. The two methods provided for embedding your Silverlight application don’t provide a neat space to put your own HTML so you can’t easily ‘own’ the experience.  In my case I used the iFrame solution because I couldn’t get the other method to work straight away.

What I did to get around this was to download the latest Silverlight.js from here: http://code.msdn.microsoft.com/silverlightjs, and the latest JQuery from here: http://docs.jquery.com/Downloading_jQuery#Current_Release.

Reference both scripts from your web page and then add the following script:

$(document).ready(function() {

if (Silverlight.isInstalled(‘2.0.30226.2′) == true) {

showSilverlight();

}

else {

showCopy();

}

});

$(document).ready(function() {
    if (Silverlight.isInstalled('2.0.30226.2') == true) {
        showSilverlight(); // function to display the iframe & hide the default copy
    }
    else {
        showCopy(); // function to hide the iframe & show the default copy
    }
});

And that’s it!

Note: there’s a comment on the silverlight.js download page that the script links to an older version of the silverlight player. It seems to be correct but even when I updated my script file I still got the ‘older version of Silverlight’ message when using Chrome. Also I don’t know yet whether the experience works on a Mac – if anyone can let me know I’d really appreciate it!

Giving Silverlight Streaming a go

I’ve been in New Zealand since April undergoing the arduous process of changing my visa to a UK work permit. That’s another story but what’s important is that I wanted to capture some of the scenery on video while I was here, and I figured a cool way to present it would be in a Silverlight application on a website. I didn’t have a personal website yet, so I decided to create http://www.andrewmyhre.com.

A couple of weeks and 3 roadtrips later, I’ve got some footage and a Silverlight application. I cut the video up using VirtualDub and encoded it into .wmv using Expression Encoder, which I’m very impressed with. The video and music are a combined total of around 300mb, and while my current hosts offer a minimum 1gb storage space on their hosting server I wanted to try something new. At first I figured Azure would be good to have a go at, but while I was googling Silverlight hosting I came across this: Silverlight Streaming.

Silverlight Streaming is currently in free public beta, and the basic deal is this: register yourself an application account, upload your silverlight application (XAP will do) in a .zip file and any media assets it needs and you’re given a script you can plonk into a web page to present the Silverlight app. They provide up to 10gb storage and they won’t charge you for bandwidth use – sweet!

It took me a couple of attempts to work the thing out, because the documentation seems little vague. I’ll enumerate some of the idiosyncracies I’ve come across.

The way the service works, which took me a little while to work out, is that it hosts your Silverlight XAP file and any media assets it needs. It doesn’t host the website your Silverlight is contained in. It’s up to you to create your website on another web host and reference the Silverlight app. Furthermore you can’t reference the XAP as you would regularly using an <object> tag or the Silverlight .Net control, because all of the files in your Silverlight Streaming account are only accessible from the Silverlight Streaming servers. You’ll just get access denied errors if you try. So the Silverlight Streaming website provides a couple of ways to embed your Silverlight using JavaScript or an iframe, which from my point of view is fine. The HTML for both methods is provided on the page for your application (browse to Manage Applications and select the appropriate application on the next page).

Deploying your application is straight forward when you know how. Create a standard Silverlight project and build it. Now browse to the /ClientBin folder and zip the .xap file. This is the file you upload as the ‘application package’ file. You can optionally include a manifest.xml file which specifies some metadata about your .xap – stuff like Silverlight version, desired width/height and some other guff. Pretty clear why it needs to be specified but including it in your zip file is optional as you can create one manually in the Silverlight Streaming application manager.

When I built my Silverlight website I added the video files to a /Video folder within the host website, and I wanted the same structure in the hosted Silverlight Streaming application. Well it’s not that simple, because Silverlight Streaming doesn’t provide you with a nice RESTful file system API. It’s more like you are given a bucket for your application, and whatever you include in your Zip file gets placed in that bucket in the structure provided.

So I was able to create my structure by including all of the video files within the Zip in a /Video subfolder BUT the Zip file was ~300Mb, so what happens when I want to update the XAP file? I have to update the Zip file and re-upload the whole thing, which on my connection is a 2+ hour operation. This is because every time you upload an application package your whole application bucket is cleared and replaced with the contents of your Zip. So this is not the ideal method for uploading media. Fortunately, there is another method, detailed below, which works for videos. Unfortunately, other types of media, like mp3, wma, jpg etc MUST be uploaded in this way.

An alternative to including the media in the Zip file is to use the Manage Videos function in your Streaming account. Here you can upload individual video files one-by-one into their own seperate little buckets. It’s a matter of clicking Upload Video, Browse for the file on your hard-drive, click the Upload button. You’ll get a nice little progress bar to tell you how the upload is progressing. Once you’ve uploaded your videos, each one is given a unique URL which will be something like http://silverlight.services.live.com/[accountnumber]/[videoname]/video.wmv. This makes it pretty easy to reference the videos from within your silverlight application.

In my case, I have around 100 videos all numbered sequentially. In my silverlight application there’s a For loop which generates the array of filenames to access, so the above pattern works nicely.

I have a couple of little issues with the management interface so far. The nice thing about the application package upload process is that it takes the contents of a Zip file and extracts them to a bucket with the file structure intact. Nice! But why can’t I do this with videos? Or on the other hand, why do I have to upload the entire Zip again when I just update one file? Why can’t I have the option to UPDATE my files, i.e: overwrite anything existing and leave anything else on the server untouched? I either have to spend all day uploading each video one-by-one, or wait all day for a gigantic Zip file to upload. Guys, please, do something about this.

The other issue is regarding non-WMV file formats. While I’m free to upload video files to the service, what about other formats like mp3 and wma? My application is video clips with a seperate audio soundtrack, which I want to keep separate. The audio files are in WMA format there’s about 200Mb of them. But the only way to upload anything other than WMV is to include it in the application package Zip file! WHY?? To get around this issue I used Microsoft Expression Encoder to encode them as WMV with a blank video track – which added about 50% to the total file size. I then uploaded them individually just like all the other videos. I’m not at all happy with the situation but there’s currently nothing I can do about it, I just have to spend hours and hours uploading these things.

So it’s a mixed bag. YAY for free media hosting, that’s awesome. All they need to do is allow for uploading a single Zip with all your videos in it seperately from the application package, OR allow foran application package UPDATE option which preserves files on the server where they’re not included in the zip. Also if they added the same upload progress bar we get for videos to the application package upload, that’d be tops. My website should be online in a few days, once I’ve finished uploading everything. *sigh*

Explanation for a weird Visual Studio 2008 Silverlight 2 issue

I ran into a weird and annoying Silverlight/Visual Studio quirk today which cost me a little bit of time to work out the cause of, so here’s my story in case it helps anyone else out.

If you’re building a Silverlight Page/UserControl and you run it and instead of seeing your lovely application appear you see something like this:

 

 

(line 1, col 26): Unknown attribute xmlns on element WallContentView”]

Sys.InvalidOperationException: Invalid XAML for control 'Xaml1'. [

 

And you notice in the XAML where you have included your control some blue lines:

 

 

 

And when you place your mouse cursor over the lines you see something incomprehensible, like this:

 

 

“]

AG_E_UNKNOWN_ERROR [Line: 49 Position: 51

 

I did today. After trying essentially random and arbitrary things to solve the issue (deleting and recreating the control, renaming the control, removing sections of XAML and code from the control) I finally narrowed it down to this:

 

 

 

In my constructor I was causing an null reference error, but it was being reported as a XAML error! How bloody confusing.  And the reason this didn’t twig immediately is that I didn’t realise the XAML editor actually creates instances of the control tree and invokes the constructors of the controls in the process. Never occurred to me before, but makes total sense.

Anyway, so I fixed my code:

 

Rebuilt the solution and checked the containing control’s XAML:

 

No more blue lines – nice. Finally I ran my test page and lo and behold it worked!

Digital Wall – redux

I posted last week about the release of Digital Wall to the internet – the application that lets you graffiti on our office wall from your browser. Well I was so pleased with how it performed that I scrapped the entire codebase and started again from scratch. Mostly I did it because the original version was the first time I had played with Silverlight, WPF and WCF, so I realised there was a lot that I would do differently a second time around which would make adding cool features easier. So I did it, and I added some cool features.

The new version is up at http://wall.tequila-uk.com. A number of things are different:

 

• I can now write a welcome message on the server which will appear in your browser. I can write the welcome message in XAML. I do that using Mike Snow’s excellent tip for loading XAML into a control at runtime.
• As well as drawing on the wall, you can now add images to it. You have two options for doing this – upload an image from your hard-drive, or provide a link to an image on the internet. Then you get to drag the image around and scale it as you desire. When you’re happy with it just click the Send button or switch to the Brush mode to have the image sent to the server.
• The webcam is still pretty poor, so the Silverlight client will now download the server’s representation of the wall as objects and display it in your browser, overlayed on top of the stream. You can adjust the transparency of the overlay by clicking the button at the bottom of the toolbar. There are three settings: off, transparent and opaque. This way you can draw moustaches and fake wangs on people much more easily.
• You can identify yourself (this is optional) and see who else is using the wall at the bottom-right corner of the screen.

 

And of course the wall is publishing canvases out through a number of different channels:

 

• Twitter: http://twitter.com/DigitalWall
• TwitPic: http://twitpic.com/photos/DigitalWall
• RSS: http://feeds.feedburner.com/DigitalWallPhotoStream

 

Previous posts: Digital Wall Goes Public, Digital Wall (provides a video demonstrating what it basically does)

To talk to me about the wall you can message me on Twitter.

Enjoy!

Digital Wall Goes Public

You can now draw on the wall yourself! Go here to try it out: http://wall.tequila-uk.com/

I explained concept in my previous post, but in a nutshell you can graffiti on one of the walls in our office. Like, the actual wall. Eventually I want to set this up somewhere more interesting, like in our reception area, but there are some logistical issues with that so for now it’s just in the office.

Screen captures are being published via TwitPic, so you can keep up in various ways:

Twitter: http://twitter.com/DigitalWall

TwitPic: http://www.twitpic.com/photos/DigitalWall

RSS: http://feeds.feedburner.com/DigitalWallPhotoStream

There are a couple of obvious things that still kinda, well, suck.

1. You can hardly see what’s on the wall via the webcam feed. This is because we’re just using a £5 logitech quickcam, and because the wall itself is in our office under halogen lights.

2. When you add something to the wall it takes a good 30 seconds before you see it in the webcam feed. I had thought this was because the camera feed was too high-bandwidth, but I’ve done a load of tweaking and I’m convinced now it’s simply because of the latency between our office, StreamWebTown and the browser. Whatever you draw shows up on our wall immediately, trust me.

We’re looking at ways to improve it, but at the moment it seems making it really good will take cash. Unfortunately, because this is just pure folly, it probably won’t improve.

Anyway, enjoy.

Digital Wall

Drawing Something Together

I’ve been working on a cool little project over the last few weeks. The original idea was inspired by the amazing laser-pointer graffiti these guys did, but I wanted to provide more of a collaborative, distributed angle. I wanted to let anyone see a live feed of a real physical wall, and be able to draw on that wall in their browser and have their doodling reflected in the real world.

So I came up with this:

Digital Wall Architecture Diagram - not to scale

I’ll touch on each of the architecture points in turn.

Application Layer

At core the wall relies on a WPF application which is reponsible for actually drawing the current digital wall image on the physical wall using a projector. I used an InkCanvas control to display any drawing data that is ‘current’ (meaning it hasn’t been wiped off the wall yet). The drawing data for the control can be created remotely in Silverlight or directly at the machine using a Wii remote, using Brian Peek’s Managed Library for Nintendo’s Wiimote.

The drawing data is stored in a SQL database, which has a single table Drawings. Each row in that table is a single ’stroke’, in the sense of what you draw between pressing the left mouse button down and lifting it up again on the canvas. Any drawings stored in the table are swept up by the WPF application, added to the InkCanvas’ strokes collection, and then the whole canvas is captured to an image. That image is then applied to the application background and the InkCanvas’ strokes collection is cleared out. Using this technique I was able to get some performance improvements out of the application because keeping loads of Stroke objects in memory was way to intensive.

The application is also encoding a webcam stream of the physical wall, so that anyone connecting in their browser can see actual footage of the wall. I could have just downloaded the drawing data directly to Silverlight and rendered them in the browser using the same method as the WPF application, but I wanted to give remote users a real sense that they’re changing a physical environment. We’re using Windows Media Encoder to encode the stream and a service called Stream Web Town to make the stream available for broadcast. SWT provide a free streaming service which is limited in a couple of ways but dead useful to get a simple proof of concept up and running.

Finally the app is screen capturing the current wall every minute or so and saving out to a predefined network location, so we can see a complete history of what gets drawn. This is essential because currently the wall erases itself every 10 minutes, so it’s the only way people would be able to see what they’ve drawn.

The Browser

The Silverlight application is doing three things. First, the webcam feed is being streamed to the background of the canvas, so a user can see exactly what’s already on the wall. Second, another InkCanvas control allows the user to draw directly on the canvas. Third, when you’re ready the Silverlight app will send the drawing data to the database for the WPF app to pick up.

The communication layer was written in WCF and basically consists of a single method AddGeometry(), which requires some simple data like IP, colour and the actual data, which is just a list of points serialised to comma delimited values. The website that the Silverlight application available at is also hosting the WCF service. It also provides an RSS feed of all the screen grabs saved from the WPF app.

Cool so that’s a brief explanation of what I’ve built, I’ll try to get some more information up at some point, and more pictures and video too.

Howto: “Object not set to an instance of an object” in Visual Studio 2008 when trying to add a Silverlight project to a solution

I installed Visual Studio 2008 SP1 Beta, .Net 3.5 SP1 Beta and the new Silverlight Tools Beta 2, and when I tried to add a new Silverlight project to my solution I got a dialog in Visual Studio with the message “Object not set to an instance of an object”, after which nothing happens and my project was not added.

If you’re having the same problem try these steps:

1. Open Visual Studio Command Prompt
2. devenv /resetskippkgs [return]
3. Close VS
4. devenv /setup [return]
5. devenv [return]

Hopefully now you’ll be able to add a Silverlight project to your solution.

Source of this solution here.

Enabling WCF in IIS 7 on Vista

I created a Silverlight-enabled WCF service which worked perfectly when running my Silverlight app from Visual Studio, but as soon as I deployed to IIS 7 on my machine and opened it outside of VS I received the following error:

Unhandled Error in Silverlight 2 Application Exception has been thrown by the target of an invocation. at System.RuntimeMethodHandle._InvokeMethodFast
…… (there was more

I couldn’t be sure whether this was a Silverlight or a WCF issue so I opened the SVC url in my browser and received a (405) Method Not Allowed response. I checked IIS and discovered there was no HTTP Handler set up for WCF services.

I then managed to find this very helpful post about setting up WCF HTTP Handlers in IIS 7, and the solution described worked perfectly for me. Here are the steps:

1. Open a command prompt as administrator
2. CD to c:\Windows\Microsoft.NET\Framework\v3.0\Windows Communication Foundation
3. Type ServiceModelReg -i and press return
4. A whole load of lines like “Installing: HTTP Handlers” will print out to the console. When it’s finished go into IIS 7 and open the HTTP Handlers list for your website. You should see a couple of new ones for the *.svc extension

Also, another issue I came across while trying to track down how to set these up was where people were deploying their WCF/Silverlight project to IIS 7 without updating their web.config to change the server binding reference. When you add a service reference to your Silverlight project the url is stored in the ServiceReferences.ClientConfig file, but if the WCF project is defined in the same solution then the URL will point to the local Cassini server, which means the service call will fail when you deploy the app to IIS.

One solution to the issue is to override the service URL in code, so that you don’t have to keep updating the .config file when you deploy to a web server.