thebeebs | June 2010
Learn the art of website security

Geocoding using Silverlight

by thebeebs 28. June 2010 09:04

 geocode Last night I was reading through the Vision and Scope document for a project that we are involved in with the British Library, one of the requirements was to geocode a search term. If you are not familiar with the term geocoding then congratulations; you're getting out of the house enough. Geocoding is when you take a string of text like "Leaning Tower of Pisa" and convert it into Latitude and Longitude coordinates.


The British Library would like users who enter a search term into their Silverlight Application to be presented with Documents and Photographs that relate to the search term entered. If the search term is of geographical significance such as "The Baltic Sea" then relevant documents and photos, which have matching Latitude and longitude information in the metadata, should be displayed.


When I saw the requirement it made me think immediately of the an EasyJet accelerator that I had been working on the previous month. In that project I used the Bing web service to Geocode a search term so that we could figure out what the closest airports were to the search term entered. Geocoding using Bing is straight forward and will work on all most any platform as it only requires a post to a RESTful service and then to consume the JSON response.


The method below will work in Silverlight 3, Silverlight 4 and Windows Phone 7, I used a third party JSON library called, this is because some JSON libraries are not present in the Windows Phone version of Silverlight and I thought as this would be a common requirement on the Phone I should make this sample compatible.


Firstly you will need to obtain an App Id which will give you permission to use the service. Go to sign in and Create an App Id by clicking the "Create App ID" link and following the instructions.


By default the bing  service returns JSON, to consume JSON easily (especially in windows phone) we need to download and add the Newtonsoft.Json.Silverlight.dll which you will find in the zip folder Json35r7\Bin\Silverlight.


In my sample application a user enters a search term into a text box and clicks a button. In my button click event logic I save the search term into a local variable and then using string.format I create a URL which is the RESTfull endpoint for the Bing webservice. Using a new Web Client object I make a request to the Bing service URL and delegate the result to the event handler client_DownloadStringCompleted.

The format of the URL is below you just need to replace <<searchQuery>> and <<AppId>> with your own:<<searchQuery>>&key=<<appId>



Inside the method client_DownloadStringCompleted I create a new JObject to parse the returned string and then use the SelectToken method to take the pieces from the JSON that I require and save them to 2 local variables. I then string format these two values into a readable string and then send the result to the text property of a text block.



That’s it… Happy Hacking.

Tags: , , ,

Big brother in Extreme detail

by thebeebs 22. June 2010 07:12

bigbrotherLong gone are the days of the lovely Orlaith McAllister, but the show still goes on. The final series of Big brother has kicked off and whilst the latest group of 13 wannabes - including a Beyonce lookalike, a squatter who lives on discarded food, and a double amputee - enter the house, Shoothill have been busy producing a Deep Zoom of all the Big brother contestants.

Orlaith McAllister - The Daily Nude

Shoothill’s latest project allows you to zoom into a giant image of the Big Brother eye to reveal hundreds of pictures of housemates and sets from the reality TV series. The Deep Zoom contains all of the housemates from all of the series, excluding the First. In my opinion Excluding the first series is a good thing because, Nasty Nick and the the winner of the first series Craig both have faces and personalities that were born to be ignored. If you look closely you should be able to spot the late great, princes Diana of the heat Magazine generation, Jade Goody.

 Jade Goody

Since the First Darwin Deep Zoom produced by Shoothill I've been watching the evolution (excuse the pun) of Shoothill’s Deep Zoom’s with interest. In my time at Microsoft I've seen Shoothill produce the world largest Deep Zoom for Fauna and Flora International, a stunning history of Winston Churchill and now the latest big brother Deep Zoom.


With every new Zoom comes an advancement each with it's own subtle twist. Shoothill don't use the standard Deep Zoom composer instead they use a custom process to create the DZI file used by the Silverlight control. They stitch together the various images subtly changing the hue and opacity of each image to create a mosaic of the larger image. Using their customised process they are able to create much larger Deep Zooms than is possible with the Deep Zoom Composer. They are also able to have much more granular control over the Deep Zoom and through the numerous projects have delivered a number of rather interesting features.



The Big Brother logo contains a lot of black, this creates a problem because if you darken an image to achieve a black spot on the mosaic then when you Zoom into the image it will be too dark to distinguish what's in the image . To solve the problem Shoothill masked sections of the base image and modified their software to avoid placement of images in these masked areas.





In both the the Fauna and Flora International project and the Big Brother Project they offset the images slightly so that they do not line up perfectly, this allows a small section of the base image to shine through the mosaic and produces a clearer image at higher zoom levels it also gives the impression that the pictures are random or being loaded on demand.


The being loaded on demand effect is subtle but if you Zoom in and out you will see that the images move ever so slightly, this is intended to give an impression that the images are being stitched together on the fly - which of course they aren't -  all of the Shoothill’s Zooms are precompiled and that's purely because of the size of the some of the Images; which brings me to my next observation.


Large Images

The big brother image in total is around 1/2gb of imagery but  the Fauna and Flora International Zoom contains around 18 gigabytes of imagery, in fact it remains the largest Deep Zoom ever produced. Support for extremely large images is important with these Mosaics as the clarity of the image improves with the more images you add; when I first Saw the Zoomed out version of the Tiger I Had no idea it was made up of other images.


Tag Clouds

The Churchill is my personal favourite of all of the Shoothill projects. The software they have used to generate the Deep Zoom rather cleverly tags each Photograph. As the user gains focus on an image a tag cloud appears on the top left hand corner which enables the user to explore other similar images which have the same tag.


An image showing a Tag cloud on the the top right of an image

I was also intrigued to discover that this application now lives inside the Churchill War Rooms in London’s Whitehall as an exhibit which I think makes it the first Silverlight museum exhibit anywhere in the world. The exhibit can be controlled by visitors using a roller ball that’s provided in front of a huge projector screen.


War Rooms

 Silverlight in the War Rooms

Apparently to convert the web project into an exhibit required only minor changes to ensure the project was only ever made full screen and to remove right click and the tag cloud operations.


I’m looking forward to see what the Shoothill team get up to next, I have it on rather good authority that they have something rather big on the horizon that I'll hopefully be able to cover in the next few weeks.


Happy Hacking



IE8 Webslices

by thebeebs 21. June 2010 03:11

Web Slices are small pieces of syndicated content that enable users to subscribe to pieces of Web sites and notify users when these pieces have been updated. This frees the user from having to periodically check the Web site for updates.

Under the hood IE8 uses the Windows RSS Platform and it’s underlying Feed Download Engine to poll the server providing the webslice and compares the last page cached with the data served by the web server. If there is a difference IE8 turns the text bold on the webslice button to signify to the user that something has updated. If users don’t like being popular and want to annoy their co workers they can even hook up a sound to inform them that there has been an update.

Before Update
Before Update

After Update
After Update

Creating a standard webslice is simple we use the following HTMl Markup:

<div class="hslice" id="mywebslice">
<h2 class="entry-title">Web Slice Title</h2>
<p class="entry-content">Sample Content</p>

The following 4 elements are fundamental to the definition:

  • the class tag hslice that alerts IE8 that web slice content is coming.
  • the ID attribute is critical, since multiple slices can be on a page. 
  • the class tag entry-title indicates what the text in the web slice button.
  • the class tag entry-content is more than just telling IE8 the content to show in the preview window, it’s also the data that get’s cached in the Feeds System.

The problem with using the mark-up above is that we can't support JavaScript, Flash or Silverlight, which in most scenarios makes webslices useless. Luckily however we are able to use some slightly modified mark up which tells IE8 to use an Alternative display.

We can tell IE8 to use an alternative display by adding the <a rel="entry-content"/> mark up. The href attribute tells IE8 where to find the content it should display.

<div class="hslice" id="mywebslice">
<span class="entry-title">Web Slice Title</span>
<a rel="entry-content" href="display.aspx" style="display:none;"></a>

Sadly however IE8 won't look to the Alternative Display content and check it is updated, so as far as IE8 is concerned the data is never updated because the Markup never changes. This means the user doesn't get their browser button going bold to signify that new information is available.

We managed to solve this by creating a control and a page base class.

The control not only generates the mark up for the webslice, it also checks the content of the page page and creates a small hash string that represents the page and appends this to the href attribute of the entry-content element.

If their has been a change then the hash string changes which means the actual mark-up is modified and IE8 recognises this as an update. You can see below an example of what the Hash string looks like in action.

<div class="hslice" id="mywebslice">
<span class="entry-title">Web Slice Title</span>
<a rel="entry-content" href="display.aspx?AltSlice=true&Hash=S7MfNEymx0w1" style="display:none;"></a>

To use the control make sure the page you create is inherited from the the class WebSliceBase, then just add the control to your page

<cc1:SlicePlaceHolder ID="NewsDiv" runat="server"  WebSliceTitle="Web Slice Blog" WebSliceRefreshIntervalInMins="15">
Put you dynamic content in here

You can download the project here: