Scott Logic

Software Tester

admin — Wed, 01 Feb 2012 14:24:58 +0000

Very competitive salary + bonus + benefits; Newcastle Upon Tyne

Scott Logic is a growing software consultancy which provides the very best in bespoke financial software for leading financial institutions.

We have recently won a number of exciting projects and have new tester roles available. You must have commercial experience of testing software in an enterprise application or web environment. It is highly desirable that you will hold a relevant degree from a reputable university and be ISEB certified. The ideal candidate will have the following skill set:

Essential: Solid understanding of testing life cycle in an agile enterprise application development context (large scale systems, real time, multi user etc.)
Essential: Ability to define test cases from business requirements which meet test coverage criteria
Essential: Ability to produce test artefacts & documentation
Highly Desirable: Enterprise web application / portal testing including browser compatibility
Highly Desirable: Automated front end testing experience
Desirable: Mobile platform testing experience (Android, iOS, Windows 7)

All roles are very hands on and at least 90% of your time will be spent testing software – either on client projects or internal R&D initiatives. You will report to the project lead or test lead as appropriate. This role is based in Newcastle upon Tyne. All our offices are in city centre locations enabling an easy, car-free commute.

We offer a highly competitive salary and benefits package, including:

Performance and profit related bonus scheme
25 days holiday per year, growing with length of service up to 30 days
Life assurance
Referral programme – payable to anyone who refers a successful candidate

To apply, email your latest CV and a brief cover note to applications@scottlogic.co.uk quoting reference number SLT12D.

Preference will be given to direct applicants.

Communications Manager

admin — Wed, 01 Feb 2012 14:14:36 +0000

Up to £40k + bonus + benefits; Newcastle Upon Tyne

Scott Logic is a leading UK-based software consultancy with international clients in the financial services sector. The company has also launched a number of technology products in new sectors, which require further development and which represent an exciting growth opportunity for the company.

To date, all external communications have been managed through a combination of inhouse efforts and external consultants. The company now seeks a full-time Communications Manager to look after all aspects of marketing and public relations – for Scott Logic and its product families.

This is an outstanding opportunity to help take a brand that already commands a strong market position and international reputation, and grow it into a truly world-leading brand. It should be assumed that support will be available for the development of long-term brand and marketing strategies; but this role will hold full responsibility for successful delivery of all or most marketing tactics.

We would ideally like candidates to have at least five years marketing / PR experience in the technology sector, but all levels will be considered. Exceptional communication and writing skills are essential, to cover both the online marketing and face-to-face aspects of the role. Key responsibilities are as follows – please note that it may be possible to outsource a small number of these – but candidates should display skills and experience of as many as possible:

Digital marketing delivery: some or all aspects of SEO, PPC, CRO (inc. A/B testing) blogging and social media management.
Content development and management for websites and marketing materials, (eg white papers) including the evolution of key messages and USPs.
Developing and managing relationships with relevant media and blogs (tech and trade), and writing press releases and / or blog articles.
Development and management of wider relationships for the promotion of Scott Logic and products – such as user groups, tech platforms.
Managing prospect and early-stage client relationships for both the consultancy business and those trialling products – including telephone as well as face-to-face meetings, some of which may be overseas.
Improving communications (inc feedback and cross-selling) with existing clients (e.g. newsletters / feedback systems). This again may involve some overseas meetings with clients and prospects in Europe and US.
Managing and attending international exhibitions to represent Scott Logic and product brands – approx 6 – 8 exhibitions per year.
Managing supplier relationships as needed – e.g. designers, web developers.

The role will be based at Scott Logic HQ in Newcastle upon Tyne, and will share a proportion of overall targets for engagement and conversion of new clients, to be discussed with shortlisted candidates. The role will report directly to the Head of Consulting, with regular updates to the MD and senior management team

Interested candidates should apply with CV and covering letter stating current salary and salary expectations, by 29th February 2012 to applications@scottlogic.co.uk

WP7 PhoneGap Backbutton Support Re-visited

Colin Eberhardt — Thu, 19 Jan 2012 11:03:11 +0000

About a month ago I published an article which demonstrated how to create a WP7 application using static HTML pages and PhoneGap. Whilst PhoneGap makes the packaging of HTML / JavaScript / CSS and images into a breeze, one thing it doesn’t do is provide correct back-button support. Correct back-button support is a mandatory requirement for marketplace certification. Hitting the back button should navigate back through the various screens of an application. Hitting the back-button on the first screen should terminate the application.

The solution I published previously handles the WP7 back keypress in order to keep track of the back-stack depth. When the back-stack depth is just one, a back-button press exits the application. This works fine if backwards navigation is always controlled via the hardware back-button, however if your application has HTML anchor elements that navigate back to a previous page, or you use code such as javascript:history.go(-1), this back-stack handling code will not detect that a backwards navigation has occurred.

As an aside, WP7 applications really should use the hardware back-button for navigation. If you are writing a cross-platform PhoneGap application consider adapting your UI for each platform. This means removing the back-button you woudl have in your iOS version when ‘skinning’ for WP7.

In order to solve this issue I have updated the code to inspect the URL that the browser control is navigating to in order to detect backwards navigation. The class now maintains a list of URLs, which represent the navigation stack. This allows it to detect a backwards navigation.

/// 
/// Handles the back-button for a PhoneGap application. When the back-button
/// is pressed, the browser history is navigated. If no history is present,
/// the application will exit.
/// 
public class BackButtonHandler
{
  private WebBrowser _browser;
 
  private List<string> _backStack = new List<string>();
 
  public BackButtonHandler(PhoneApplicationPage page, PGView phoneGapView)
  {
    // subscribe to the hardware back-button
    page.BackKeyPress += Page_BackKeyPress;
 
    _browser = phoneGapView.Browser;
 
    // handle navigation events
    _browser.Navigated += Browser_Navigated;
 
  }
 
  /// 
  /// Handle navigation in order to update our back-stack
  /// 
  private void Browser_Navigated(object sender, NavigationEventArgs e)
  {
    string url = _browser.Source.OriginalString;
 
    // ensure all slashes are the same
    // app\www/index.html
    // see: https://issues.apache.org/jira/browse/CB-184
    url = url.Replace("\\", "/");
 
    if (_backStack.Count < 2)
    {
      _backStack.Add(url);
    }
    else
    {
      // check whether the URL represents a backwards navigation
      string previousPage = _backStack[_backStack.Count - 2];
      if (previousPage == url)
      {
        _backStack.RemoveAt(_backStack.Count - 1);
      }
    }
  }
 
  /// 
  /// Handle the hardware back-button
  /// 
  private void Page_BackKeyPress(object sender, CancelEventArgs e)
  {
    // if we have items in the back-stack, route this event
    // to the browser
    if (_backStack.Count > 1)
    {
      _browser.InvokeScript("eval", "history.go(-1)");
      e.Cancel = true;
    }
  }
}

Note: There use of url.Replace("\\", "/"), this is due to a minor issue with the PhoneGap WP7 native code, which I have raised in the Callback JIRA (CB-184).

To use this code simply create an instance of the class, passing the PGView (the PhoneGap user control) into teh constructor:

public MainPage()
{
  InitializeComponent();
 
  new BackButtonHandler(this, PGView);
}

Because back-button handling is a mandatory requirement for WP7 applications, hopefully Nitobi will incorporate this code (or similar) into the PhoneGap Build service (which I tried earlier this week – it is pretty amazing!)

You can download a working example here: HTML5SandwichFlow.zip

(The first three recipe pages have ‘back’ anchor elements, two use the URL, one uses JavaScript)

Regards,
Colin E.

Windows Phone 7 – Browsing your Photos via Bing Maps

Colin Eberhardt — Mon, 16 Jan 2012 08:27:56 +0000

The Windows Phone 7 camera gives you the option to record the location where a picture was taken (under Settings => applications => pictures+camera). With this feature turned on, each application has their latitude, longitude and altitude stored as part of the standard EXIF data. I thought it would be fun to combine the previous blog post I wrote on pushpin clustering with the photos on my camera, to allow me to explore them via a Bing Maps control. With not much more than 100 lines of code I came up with an application which I think is a lot of fun to use.


Here are all the photos on my phone, note the way the pushpins are clustered.	Here are a few pictures I took in New York, of the One World Trade Centre and the Stock Exchange.

Here are some pictures around Europe, including one of Gergely Orosz waiting for his turn in the Edinburgh Marathon Relay.	And finally, some pictures I took whilst running around Kielder Water during Kielder marathon.

Accessing the EXIF data

You can access the photos on a WP7 device via the XNA MediaLibrary class. The interface that this class provides gives you access to Picture instances which have properties that allow you to access the width / height and a few other basic attributes. They also have methods that return streams which can be used to read the thumbnail and image data, however, they do not expose the picture location. This is ‘hidden’ within the EXIF data.

Fortunately there is a C# implementation of an EXIF decoder available on codeproject, which, with a few tweaks by Tim Heuer works just fine within Silverlight for Windows Phone 7.

With this library, accessing the EXIF data is a one-liner:

JpegInfo info = ExifReader.ReadJpeg(picture.GetImage(), picture.Name);

The JpegInfo class exposes the raw EXIF geolocation data, which is detailed in the EXIF specification as being expressed as separate components of degrees, minutes and seconds together with a reference direction (North / South, East / West). We can convert from the sexagesimal numeric system used in EXIF, to the decimal system as follows:

private static double DecodeLatitude(JpegInfo info)
{
  double degrees = ToDegrees(info.GpsLatitude);
  return info.GpsLatitudeRef == ExifGpsLatitudeRef.North ? degrees : -degrees;
}
 
private static double DecodeLongitude(JpegInfo info)
{
  double degrees = ToDegrees(info.GpsLongitude);
  return info.GpsLongitudeRef == ExifGpsLongitudeRef.East ? degrees : -degrees;
}
 
public static double ToDegrees(double[] data)
{
  return data[0] + data[1] / 60.0 + data[2] / (60.0 * 60.0);
}

Analysing the images

When the application starts a BackgroundWorker is used to read the EXIF data for all of the pictures in the phone’s media library, with those that have geolocation data available being stored in a separate list:

BackgroundWorker bw = new BackgroundWorker();
bw.WorkerReportsProgress = true;
 
// analyse the pictures that reside in the Media Library in a background thread
bw.DoWork += (s, e) =>
{
  var ml = new MediaLibrary();
 
  using (var pics = ml.Pictures)
  {
    int total = pics.Count;
    int index = 0;
    foreach (Picture picture in pics)
    {
      // read the EXIF data for this image
      JpegInfo info = ExifReader.ReadJpeg(picture.GetImage(), picture.Name);
 
      // check if we have co-ordinates
      if (info.GpsLatitude.First() != 0.0)
      {
        _images.Add(new LocatedImage()
        {
          Picture = picture,
          Lat = DecodeLatitude(info),
          Long = DecodeLongitude(info)
        });
      }
 
      // report progress back to the UI thread
      string progress = string.Format("{0} / {1}", index, total);
      bw.ReportProgress((index * 100 / total), progress);
 
      index++;
    }
  }
};
 
// update progress on the UI thread
bw.ProgressChanged += (s, e) =>
  {
    string title = (string)e.UserState;
    ApplicationTitle.Text = title;
  };
 
bw.RunWorkerAsync();
 
// when analysis is complete, add the pushpins
bw.RunWorkerCompleted += (s, e) =>
  {
    ApplicationTitle.Text = "";
    AddPushpins();
  };

When the pictures have all been analysed, a pushpin is created for each image which is then added to the clusterer described in my previous blog post.

private void AddPushpins()
{
  List<Pushpin> pushPins = new List<Pushpin>();
 
  // create a pushpin for each picture
  foreach (var image in _images)
  {
    Location location = new Location()
    {
      Latitude = image.Lat,
      Longitude = image.Long
    };
 
    Pushpin myPushpin = new Pushpin()
    {
      Location = location,
      DataContext = image,
      Content = image,
      ContentTemplate = this.Resources["MarkerTemplate"] as DataTemplate
    };
 
    pushPins.Add(myPushpin);
  }
 
  // add them to the map via a clusterer
  var clusterer = new PushpinClusterer(map, pushPins, this.Resources["ClusterTemplate"] as DataTemplate);
}

The template used for the pushpins simply renders the image thumbnail:

 x:Key="MarkerTemplate">
   BorderBrush="White" BorderThickness="1">
     Source="{Binding Picture, Converter={StaticResource PictureThumbnailConverter}}"
            Width="80" Height="80"/>
  >
>

This makes use of a simple value converter which takes a Picture instance and converts it into a BitmapImage which is used as the Source for the image:

public class PictureThumbnailConverter : IValueConverter
{
  public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  {
    Picture picture = value as Picture;
    BitmapImage src = new BitmapImage();
    src.SetSource(picture.GetThumbnail());
    return src;
  }
 
  public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  {
    return null;
  }
}

The puhspin clusterer allows you to specify a separate template for clustered pushpins. The DataContext for this template is a list of the DataContexts of the clustered pins that it represents. For this application I created a template which renders what looks like a ‘stack’ of images. The number of pictures in the cluster is rendered as a TextBlock and the last image in the cluster rendered.

 x:Key="ClusterTemplate">
   Width="75" Height="75">
    >
       Style="{StaticResource FakePhoto}"
              Canvas.Left="0" Canvas.Top="0"/>
       Style="{StaticResource FakePhoto}"
              Canvas.Left="5" Canvas.Top="5"/>
       BorderBrush="White" BorderThickness="1"
              Canvas.Left="10" Canvas.Top="10"
              DataContext="{Binding Path=., Converter={StaticResource LastConverter}}">
         Source="{Binding Picture, Converter={StaticResource PictureThumbnailConverter}}"
                Width="60" Height="60"/>
      >
       Text="{Binding Count}"
                  Opacity="0.5"
                  Canvas.Left="25" Canvas.Top="15"
                  FontSize="35"/>
    >
  >      
>
 
 TargetType="Border" x:Key="FakePhoto">
   Property="Width" Value="60"/>
   Property="Height" Value="60"/>
   Property="BorderBrush" Value="White"/>
   Property="Background" Value="Black"/>
   Property="BorderThickness" Value="1"/>
>

The code that renders the last image is a bit cunning, it uses a value converter that performs a Linq style ‘last’ operations, extracting the last items from a collection of objects:

public class LastConverter : IValueConverter
{
  public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  {
    IList enumerable = value as IList;
    return enumerable.Cast<object>().Last();
  }
 
  public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  {
    return null;
  }
}

This feels quite neat to me

The clustered pins look like the following, which is a cluster of 5 images around Paris, with the stunning La Grande Arche de la Défense as the image at the top of the cluster:

Despite its simplicity, I have had a lot of fun playing with this application. It has certainly encouraged me to take as many photos as possible whenever I go travelling.

You can download the full sourcecode here: PhotoBrowser.zip

Regards, Colin E.

World-Beating Technical Expertise

admin — Tue, 10 Jan 2012 10:39:25 +0000

Colin Eberhardt, a Senior Technical Architect at Scott Logic, has been awarded MVP status by CodeProject, a leading community site that enables software developers to share expertise. Colin is one of only forty developers worldwide to be given this accolade.

The MVP (Most Valued Professional) awards are given to the best and brightest from technology communities around the world. Colin’s MVP status reflects his outstanding contribution to CodeProject over the past year, including high-quality articles on a variety of topics such as HTML5, Silverlight and Windows Phone 7. Colin also has his own blog, which you can read here.

Scott Logic prides itself on the expertise of its consultants, and is very pleased to see this acknowledged by such a prestigious award. Many congratulations Colin!

Proud to be a CodeProject MVP 2012

Colin Eberhardt — Mon, 09 Jan 2012 20:48:46 +0000

I have just received an email from Chris Maunder, co-founder of CodeProject, informing me that I have been awarded CodeProject MVP status for 2012. I am very pleased to have received this award, which is given to a small handful of individuals each year.

What I like about CodeProject is the fantastic quality of the articles submitted by the thousands of authors that participate in this site, with the only payment being their own please in the writing.

I have not written that many articles throughout the year, just four of them. However, I have put a lot of effort into each one of them – and thankfully they have been very well received. It is great that CodeProject favours quality over quantity. My articles for 2011 were:

I do also circulate some of my blog posts via the CodeProject Associate program..

On that note, it is almost three months since I last wrote an article … fortunately I do have an idea for the next article, so I had better get on with writting it …

Regards, Colin E.

iPad / iPhone Controls Launched

admin — Sun, 08 Jan 2012 14:34:42 +0000

Scott Logic’s product division has launched ShinobiControls, a suite of very high quality native iOS controls for iPad and iPhone.

ShinobiCharts is the charting consituent of ShinobiControls, and features a wide range of chart types to choose from, so you can choose the best way to present your data. A fully customizable look and feel means you can choose from Shinobi styles or create your own branded charts. ShinobiCharts maintain high levels of interactivity and performance in the face of really big data sets.

If you would like a free trial, you can sign up at ShinobiControls.

FastClick for WP7 – Improving Browser Responsiveness for PhoneGap Apps

Colin Eberhardt — Thu, 05 Jan 2012 10:23:50 +0000

I recently released an update of the HTML5 / PhoneGap application I wrote a few months ago to the marketplace. This update fixed the location detection issue, where the marketplace certification process failed to detect that the application was using geolocation data via the browser (this issue has been fixed in PhoneGap 1.2), plus a few cosmetic improvements.

This application still exhibits a few UI quirks that make it fairly obvious that this is not a native application, the first is the gray box that appears whenever a link is clicked, the second is the overall responsiveness – there is a short delay between clicking on links / buttons and the application responding. It is this responsiveness that I would like to tackle in this blog post. This delay unfortunately gives the impression that your application is less responsive than it actually is!

So where does this delay come from?

Despite the rise in popularity of touch interfaces, much of the web is still designed for interaction with a mouse and keyboard, with the DOM exposing events for mouse-up, mouse-down and click user interactions. The Windows Phone 7 browser control captures touch interactions and translates these into the required mouse events, firing them on the DOM element being interacted with. However, the browser itself also needs to support gestures such as pan, pinch-zoom and double-tap zoom.

If we consider for example the pinch-zoom feature, where the user places two fingers on the screen and moves them apart in order to zoom in. It is highly unlikely they will place both fingers on the screen simultaneously. If, when the first finger was placed, a mouse-down event was fired on the relevant DOM element, there would be no way to ‘cancel’ this event when the user’s second finger made contact with the screen shortly afterwards. For this reason the WP7 mobile browser does not properly support mouse-down / mouse-up events. You will find that mousedown, mouseup then click are always fired immediately in that order regardless of how long you hold your finger on the screen for. Clearly the need to add gesture support to the browser interferes with the way in which native touch events are translated into JavaScript mouse events.

Now consider the double-tap zoom feature, where the user taps twice in quick succession to zoom the web page by some fixed amount. If the DOM click event were fired on the first tap, this would cause a navigation to occur if an anchor element were tapped. This is certainly not the desired behaviour! Again, there is no way to ‘cancel’ an event once it is fired, so the only solution to this problem is, when the user first taps the screen, pause for a few hundred milliseconds to see if they tap a second time. Only after this pause is it safe to pass the interaction onto the DOM, firing a click event on the relevant DOM element.

Stock image courtesy of lovetheson

The need to handle gestures in the native layer causes numerous issues for the browser event handling. Thankfully these issues are relatively minor for most websites, but if your aim is to create a HTML-based application with a native look and feel, these issues become quite major.

Improving responsiveness

The problem I want to tackle in this blog post is that of the click DOM event firing delay to support the double-tap gesture. With HTML5-based applications you will typically want to disable pinch zoom, double-tap zoom and (optionally) scrolling as I described in a previous blog post. As a result your application has no need for the double-tap and pinch gestures and we are safe to short-circuit this behaviour, immediately raising DOM click events when the user taps the screen.

My solution follows a similar approach to the utility class I wrote for suppressing pan / zoom, where event handlers are added to the Border that sits within the WebBrowser control visual tree:

\-WebBrowser
  \-Border
    \-Border
      \-PanZoomContainer
        \-Grid
          \-Border (*)
            \-ContentPresenter
              \-TileHost

In order to forward Tap gestures to the browser, we can add event handlers to the Border element, then use InvokeScript to pass this onto the DOM rendered within the TileHost.

The JavaScript code to achieve this is very simple, the DOM exposes an elementFromPoint function which allows you to hit test the DOM. The IE9 DOM interface also exposes a non-standard click function which invokes any click event handlers, this will cause an anchor element to navigate. Putting it together, if you have an anchor element at (x=100, y=100), you can cause it to navigate using the following simple code:

document.elementFromPoint(100, 100).click()

Calling this JavaScript from our native C# code in response to Tap events is very easy. I have wrapped it up into a simple utility class:

/// 
/// Captures mouse left button up events, triggering an immediate
/// click event on the clicked DOM element.
/// 
public class BrowserFastClick
{
  private WebBrowser _browser;
 
  private Border _border;
 
  public BrowserFastClick(WebBrowser browser)
  {
    _browser = browser;
    browser.Loaded += new RoutedEventHandler(Browser_Loaded);
  }
 
  private void Browser_Loaded(object sender, RoutedEventArgs e)
  {
    // locate the element used to capture mouse events
    _border = _browser.Descendants<Border>().Last() as Border;
    _border.Tap += Border_Tap;
  }
 
  private void Border_Tap(object sender, GestureEventArgs e)
  {
    //determine the click location
    var pos = e.GetPosition(_border);
 
    // forward to the browser
    _browser.InvokeScript("eval",
      string.Format("document.elementFromPoint({0},{1}).click()", pos.X, pos.Y));      
  }
}

To use it within a PhoneGap application, simply create an instance as follows:

new BrowserFastClick(PGView.Browser);

The net result is that your application becomes more responsive, with the browser immediately navigating links when they are first tapped.

I have updated the HTML5 SandwichFlow application I blogged about a few weeks ago to use this FastClick code. You can download the complete example here: HTML5SandwichFlow.zip

Regards, Colin E.

A Festive and Fun Windows Phone 7 Maze Game

Colin Eberhardt — Thu, 22 Dec 2011 10:01:19 +0000

Last night, with my Christmas presents all wrapped and a lack of any decent programmes (festive or otherwise) on television, I had a few hours to kill, so decided to create a festive-themed WP7 game …

Ever since I first started writing code for Windows Phone 7 I have wanted to do something involving physics and the accelerometer. I finally found a few hours to spare to give it a go. This blog post doesn’t go into too much detail about Farseer, the Physics Engine that I used, I didn’t really have time to learn it in any great detail. This post is more about how quickly you can put together something really quite cool in quite a short space of time using libraries and code grabbed from the internet.

The simple app I created renders a maze that you ‘roll’ a small ball around by tilting your phone:

This works well in the new 7.1 emulator where you can tilt the emulator via the extended controls. However, it works best on a real device, where you can control tilt far more easily. See the video below:

Farseer Physics Engine

The game makes use of the popular Farseer Physics Engine. This library allows you to create a world populated with physics bodies, supporting features such as friction, joints, motors and much much more. As I am a Silverlight developer I made use of the Physics Helper library which allows you to use the Farseer engine within a Silvelight application with very little effort. With the Physics Helper you simply make the Physics Engine ‘aware’ of the objects you wish it to control and it does the rest, animating them as they are subjected to gravity and other interactions.

The simplest way to use Physics Helper is via behaviours, this allows you to create a fully functioning ‘world’ without writing a single line of C# code. For example, you can create a ball and a surface that it will fall towards, eventually coming to rest, with just a few lines of XAML:

<Canvas x:Name="canvas">
  
  <i:Interaction.Behaviors>
    <pb:PhysicsControllerBehavior/>
  i:Interaction.Behaviors>
 
  <Ellipse Width="100" Height="100" Fill="Red"
            Canvas.Left="80" Canvas.Top="100">
    
    <i:Interaction.Behaviors>
      <pb:PhysicsObjectBehavior />
    i:Interaction.Behaviors>
  Ellipse>
 
 
  <Rectangle Width="500" Height="10" Fill="Blue"
              Canvas.Top="500">
    
    <i:Interaction.Behaviors>
      <pb:PhysicsObjectBehavior IsStatic="True"/>
    i:Interaction.Behaviors>
  Rectangle>
Canvas>

I find this pretty amazing!

Physics Helper will do much more, it can handle complex paths and geometries, explosions and collisions with minimal effort. For a greater insight into just how much is possible, I would recommend Andy Beaulieu’s Channel 9 article. Andy is the creator of Farseer, so really knows his stuff!

My maze is generated in C# code, so despite the elegance of using Physics Helper via behaviours, I need to add elements to my canvas programmatically. This means that I have to make the physics engine aware of their existence in code also. To achieve this, I add the behaviour in code as follows:

/// 
/// Uses Physics Helper to create a physics body for the given element
/// 
private void AddPhysicsBody(FrameworkElement element, bool isStatic)
{
  var behaviorCollection = Interaction.GetBehaviors(element);
  behaviorCollection.Add(new PhysicsObjectBehavior()
  {
    IsStatic = isStatic
  });
 
  var physicsObject = element.GetValue(PhysicsObjectMain.PhysicsObjectProperty) as PhysicsObjectMain;
  _physicsController.AddPhysicsBody(physicsObject);
}

Creating a Maze

I found numerous C# maze algorithms on the internet, most of them based on the same random-walk concept. There is a great description of this approach, with animated examples on this blog. Unfortunately every C# implementation I came across was tightly coupled to a specific UI framework, often WinForms or XNA (tut-tut remember to separate your concerns!). So, I took a simple maze algorithm from a software forum and ripped-out the WinForms / GDI rendering code. A new maze is constructed simply by creating an instance of the Maze class, passing it the number of rows and columns.

In order to render the maze using Silverlight elements, I simply took the original maze graphics code:

private void CreateMaze()
{
  // compute the number of rows / cols
  double ratio = mazeContainer.ActualHeight / mazeContainer.ActualWidth;
  int cols = _mazeSize;
  int rows = (int)((double)cols * ratio);
  double cellWidth = mazeContainer.ActualWidth / cols;
 
  // create the maze
  Maze maze = new Maze(rows, cols);
 
  // render the maze
  for (int i = 0; i < cols; ++i)
  {
    for (int j = 0; j < rows; ++j)
    {
      var room = maze.cells[i, j];
      if ((room & Maze.UP) != 0)
        DrawLine(i * cellWidth + cellWidth / 2,
                j * cellWidth,
                i * cellWidth + cellWidth / 2,
                j * cellWidth + cellWidth / 2 - 1);
      if ((room & Maze.DOWN) != 0)
        DrawLine(i * cellWidth + cellWidth / 2,
              j * cellWidth + cellWidth / 2,
              i * cellWidth + cellWidth / 2,
              j * cellWidth + cellWidth - 1);
      if ((room & Maze.RIGHT) != 0)
        DrawLine(i * cellWidth + cellWidth / 2,
              j * cellWidth + cellWidth / 2,
              i * cellWidth + cellWidth - 1,
              j * cellWidth + cellWidth / 2);
      if ((room & Maze.LEFT) != 0)
        DrawLine(i * cellWidth,
              j * cellWidth + cellWidth / 2,
              i * cellWidth + cellWidth / 2 - 1,
              j * cellWidth + cellWidth / 2);
    }
  }
}

And created a method that mimics the behaviour of the System.Drawing.Graphics.DrawLine method which the original maze code depended on:

private void DrawLine(double x1, double y1, double x2, double y2)
{
  double width = x2 - x1 + 2.0;
  if (width == 0.0) width = 2.0;
 
  double height =  y2 - y1+ 2.0;
  if (height == 0.0) height = 2.0;
 
  var rec = new System.Windows.Shapes.Rectangle()
  {
    Fill = new SolidColorBrush(Colors.Red),
    Width = width,
    Height = height
  };
  Canvas.SetLeft(rec, x1);
  Canvas.SetTop(rec, y1);
  mazeContainer.Children.Add(rec);
 
  AddPhysicsBody(rec, true);
}

A bit messy, but gets the job done!

The above code creates a maze comprised of static physics objects, where the _mazeSize field dictates the scale of the maze:

Adding a Rolling Ball

Adding a ball to the maze is simply a matter of creating an ellipse and adding it at the maze entrance. Note, this physics-body is not static, so will move under the influence of gravity:

Ellipse ball = new Ellipse()
{
  Width = cellWidth * 0.7,
  Height = cellWidth * 0.7,
  Fill = this.Resources["brush"] as Brush
};
Canvas.SetLeft(ball, ((cols / 2) + 0.7) * cellWidth);
Canvas.SetTop(ball, 0);
mazeContainer.Children.Add(ball);
 
AddPhysicsBody(ball, false);

By default, the ‘world’ has gravity with a fixed Y component and no X component. This causes all non-static bodies to fall downwards as you might expect. In order to guide the ball around the maze by tilting the phone, we need to adjust gravity based on accelerometer readings. This is achieved by the following code:

private void HandleAccelerometer()
{
  _sensor = new Accelerometer();
  _sensor.Start();
 
  // 10 times a second, update the gravity
  var gtimer = new DispatcherTimer();
  gtimer.Interval = TimeSpan.FromSeconds(0.1);
  gtimer.Tick += (s, e) =>
  {
    if (_physicsController.Simulator != null)
    {
      _physicsController.Simulator.Gravity.Y = 5 * -_sensor.CurrentValue.Acceleration.Y;
      _physicsController.Simulator.Gravity.X = 5 * _sensor.CurrentValue.Acceleration.X;
    }
  };
  gtimer.Start();
}

Note: this uses a timer, rather than updating the simulator every time the accelerometer reading changes. I found that without the timer, I was repeatedly seeing the generic “Element is already a child of another element” exception. You will also notice in the code that the maze is built after a pause of a couple of seconds, again in order to avoid this issue. There’s something funny going on inside the Physics Helper!

Finally, we handle collisions in order to play a simple sounds effect a the ball bounces off each wall:

// locate the physics controller
_physicsController = mazeContainer.GetValue(PhysicsControllerMain.PhysicsControllerProperty) as PhysicsControllerMain;
 
// load the WAV file
Stream stream = TitleContainer.OpenStream("boing1.wav");
_effect = SoundEffect.FromStream(stream);
FrameworkDispatcher.Update();
 
// play on each collision
_physicsController.Collision += (s,e) => _effect.Play();

And there we have it, a simple maze game powered by the Farseer Physics engine. The whole thing only took about an hour to create, with code grabbed from the internet – a bit rough and ready, but I was impressed with how easy it was to create this game. There is much more that could be done, for example detecting when the ball reaches the end of the maze, advancing to a more difficult level, however, my time has run out on this bit of fun … Also, if I were to take this idea further, I would probably use XNA rather than Silverlight. The Physics Helper is great for simple XAML-only physics models, but I feel that it wasn’t really built for programmatic creation of bodies.

You can download the code here: WP7MazeGame.zip

Note, you will have to download and install Physics Helper to run this code.

On another note, Farseer is clearly the result of hundreds of hours of development effort, which makes it easy to create realistic physics-based applications and games. Farseer is free to use under the MS-PL licence. However, I would urge anyone who has used this great library to create a WP7 game to donate via the Farseer codeplex site (scroll to the bottom).

Regards, Colin E.

A Metro Themed PowerPoint Template

Colin Eberhardt — Mon, 19 Dec 2011 17:10:57 +0000

Over the weekend I mentioned on Twitter that I had created a Metro-style PowerPoint template. There were a few requests to share, so hence this blog post. Scroll to the bottom to download the PowerPoint file.

So why create a Metro-style PowerPoint presentation? A couple of reasons, firstly, the templates that come with PowerPoint are absolutely awful!

They look very dated (to put it politely). Secondly, with the Metro Design Language, which was introduced with Windows Phone 7, Microsoft have come up with something surprisingly stylish. Metro is about clarity, readability, simplicity – concepts that map very well to presentations.

The ‘classic’ Metro look, which I have tried to re-produce with this template, includes highly legible san-serif fonts (from the Segoe family), a lack of chrome (i.e. shadows, gradient) and fluid motions. Many metro applications do include background imagery to add ‘warmth’, as I have done here also.

I have created a template with a master and a number of layouts. Each layout includes a number of sequenced animations, mimicking the ‘fast and fluid’ Metro interface:

PowerPoint can be used to create some rather neat sequenced animations, if you ignore the rather garish defaults.

To get a better feel for this template, have a look at it in motion (the quality here is rather poor, I haven’t managed to find a screen capture tool that works well for subtle colours):

If you want to use this template, you might want to change the background image. You can do this via the ‘slide master view’. The background I included is one I found on the free stock imagery site stock.xcnhg, by the user fangol. There are numerous other free images on that site. Please remember to attribute your usage of free stock images.

You might also find that you need to add new layouts based on your content. Again, this is easy to do via the master view.

Anyhow, here is the template, enjoy: MetroStyle.pptx

NOTE: Until I get the mime-types sorted out you might have to right click and select “save as” to save the above PowerPoint file.

Regards, Colin E.