Stand-Alone Network Emulator for VS2010 Beta 2

At the “Load Testing SharePoint 2010 with VSTT” presentation at SPC 2009 I’ve learned about the new network emulator, allowing one to model various network latencies and bandwidth values. The emulator is available as a part of Visual Studio 2010. I’ve got excited, and found the following two great blog posts by Lonny Kruger, first one describing how to enable the emulator through the VS2010, and the second one – how to write a stand-alone emulator, which would rely on VS2010 API but not require running a load test to simulate specific network characteristics. Also for reference, here is an MSDN page on the topic: http://msdn.microsoft.com/en-us/library/dd505008(VS.100).aspx 

The only problem was – these 2 blog posts were for the Beta 1 release of Visual Studio 2010, while I already had the Beta 2, and some changes were made in the Beta 2, that are worth to note here. I have written a stand-alone emulator using Lonny’s post as a starting point, but changing a few things to get it working with the Beta 2. The tool can be downloaded here, and its source code - here. Below is a list of pre-requisites to get the emulation tool running, and description of what and why I have changed compared to Lonny’s original post. I recommend reading his two posts first to get a better context.

Pre-Requisites

You would need Visual Studio 2010 Beta 2 installed in order to run the emulator. I’ve tested the tool with VS2010 Beta 2 Ultimate Edition on a 64-bit Windows 7 box. You would also need .NET Framework 4.0, which is installed by default when you install the Visual Studio. Once you have that, you need to install network emulation driver. This is done one time only through the Visual Studio UI. From that point on, you don’t need to start Visual Studio to run the stand-alone emulator.

Enabling the Driver

The driver is accessed via a Test Settings dialog. You need to create test settings first. One way to do it is to create a new Test Project: File >> New Project… >> Test Project. Below is a screen shot of a project type selector dialog.

 

Once you have a test project, you can double-click on the Local.testsettings solution item in Solution Explorer to bring up the Test Settings dialog, then enable Network Emulation as shown on the following screen shot:

Lastly, to enable the driver click on Configure button for selected and checked Network Emulation. Follow the prompts asking to confirm the driver installation:

You can now use the network emulator as a part of Visual Studio for web performance and load tests, or close Visual Studio and use the stand-alone tool, for which you need administrator’s rights.

 

Stand-Alone Network Emulator Source Code

I started off by copying Lonny’s sample code, except that I use a WPF application as opposed to WinForms. Once I built and ran it, I kept getting negative long values returned through interop from the NativeNetworkEmulationAPI class, which is listed in Lonny’s post. Tried running the program as administrator – still same errors. So using reflector I inspected the Visual Studio network emulation classes, and found this type, which appears to serve the same purpose as the NativeNetworkEmulationAPI: Microsoft.VisualStudio.QualityTools.NetworkEmulation.NetworkEmulationDriver. All I needed to do was to change method calls to use this class instead of the NativeNetworkEmulationAPI.

Regarding the network profiles, you have to edit these XML files following Lonny’s instructions to make them work. If you simply use the OOTB profiles, you will not get an error, but the emulation won’t start. I have copied and changed the default network profiles, so you only need to do this if you want to add a new custom profile, in which case just place the profile XML file into Profiles sub-folder and re-start the emulator.

Presentation Deck from January 12 MSPUG Meeting

I wanted to thank people who showed up at yesterday’s Mississauga SharePoint User Group meeting. Also thanks Ray for organizing and Peter for sponsoring it. I think it was a great evening.

Peter’s part of presentation was exciting. Not only he is a good speaker, but Envision IT also has done some great work. Even though I have got through about 40% of what I wanted to cover in my part of presentation before I ran out of time, I hope it was interesting and useful. You can download my deck here. Also according to Ray it will be available at some point on the MSPUG site.

Dynamic Text Highlighting with jQuery

I’ve got my hands dirty with jQuery once again, creating animated text line with dynamic highlighting of its letters. As usual I started by looking for existing plug-ins – didn’t find quite what I needed, so I wrote my own animation. It is possible that there are ones that I just missed, but thanks to jQuery my own animation ended up being pretty simple, which I want to illustrate here.

I was dynamically writing out letters and changing their font-weight CSS property to create the effect of highlighting. I think it worked out nicely. It even works on my iPhone 3G. You can see the page here. Below are a couple of notes on its source code:

It starts with displaying a semi-transparent banner by using jQuery animate function to change its left CSS property. The banner (id=”motto”) is clipped by a surrounding div (id=”mottoclip”), which creates the perception of it appearing out of nothing rather than simply sliding horizontally. With jQuery it is as simple as this:

$("#motto").animate(
    { left: "2px" },
    { duration: rolloverDuration, easing: "linear", complete: showMotto });

Once the banner is in place the showMotto() callback function sets up a recursive output of the letters. The recursion is implemented in writeText() function. It outputs the motto line of text one letter per recursion, setting timeout between them. In order to be able to “highlight” a letter, it needs to be placed in its own span. The letter becomes visible once its span is added to the parent container through jQuery append() method:

var characterSpan = "<span id='mt" + i + "'>" + character + "</span>";
container.append(characterSpan);

Then we construct a jQuery selector object for each character, so that we can easily animate it. Next, call a function animateLetter() where we first hide letter completely, then gradualy show it in bold (font-weight: 700), then return to normal (font-weight: 400):

function animateLetter(jChar, letterShowTimeout, letterResetTimeout)
{
    jChar.hide();
    jChar.css("display", "inline");
    jChar.css("font-weight", 400);
    jChar.show(letterShowTimeout, function() { jChar.css("font-weight", 700); });
    setTimeout(function() { jChar.css("font-weight", 400); }, letterResetTimeout);
}

At this point we move on to writing out and animating the next letter, and so on.

Lastly there is an “artistic touch” on all this – the easing. Easing determines how an animation ends to create a pleasant visual effect. You’ve probably seen menu fly-outs that appear to oscillate slightly at the end of their path, or they simply slow down, etc. By the way one great example of this can be seen in jQuery Scrollable control.

In my case easing was implemented starting at 14th character of the motto text. From that point the timeout between displaying letters increased exponentially, and timeout between making each letter bold and resetting it back to normal – linearly with each iteration:

var letterShowTimeout = 60;
var letterResetTimeout = 90;
var easingStartLength = 14;
 
if ( i > easingStartLength ) 
{
    var easing = Math.ceil((i - easingStartLength) / 3);
    var easingSq = easing * easing;
    letterShowTimeout += easingSq * letterShowTimeout;
    letterResetTimeout += easing * letterResetTimeout;
}

If you think of the animation as of lighting up a string of text with a flashlight, the easing creates an effect of the light spot getting wider towards the end. And yes, all the constants and exponents are empirical. If you want to use something similar, you’ve got to experiment with numbers.