Share via

A better way to visualising media search (Part 1)

  • Article

 

Search... the most important aspect of the internet; without it no one would be able to explore easily the vast amount of content available in an efficient manner, but could it look better?

Over the years search has come a long way, improving its algorithms and search techniques with the addition of other search categories such as image and video. We have reached the point now where the quality of results are sublime yet the search interface is still little different from where we originally started, therefore it’s time for a face lift.

Media Wall

So how do we go about this then? Well most search engines nowadays such as Live Search and Google have their own API sets that allow developers to utilise their search tools, then we need a way to merge the results and then output them in a graphically appealing way. There are several search visualisation plugins available already online but I thought I would try and make my own.

All this as usual I’ll be doing in Silverlight, allowing us to create a very rich and powerful interface. The only problem is that Silverlight doesn’t support much in the way of 3d graphics so we have to create a pseudo 3d impression.

The 3d effect I will be using is a common one that gets used a lot these days; a wall of images that you can scroll along, creating a highly tactile surface. When you click on an image it will scale it later and give more information about it.

Now for the coding...

One of the first problems I had was trying to create the boxes to house each of the image search results in the visualisation. The problem I had was that the shape couldn’t be achieved just by using a rectangle and applying transformations to it, I had to use the Path shape to create the custom shape I required to give the pseudo 3d effect I wanted.

Visual Path

Another problem that I have run into a few times is the quality of image scaling in Silverlight, although in WPF you can adjust these settings it seems locked in Silverlight. In our application this is a problem when the images become smaller as they go off into the pseudo distance, to get round this I altered the opacity of the images as they go further away till they fade out completely just before they hit the scaling problems. Once completely faded or off screen I make the objects visibility collapsed thus to increase rendering performance of the application.

Coming in the next issue I will be adding to the visual effect and adding tagging so you can play with the images in the search that you like along with talking more about what goes into search itself and how for images finding what you want can be even harder. Along with this I will be giving out the source code for you to play with, however for the time being you can see the progress of the application by visiting my blog at www.blogplusequals.blogspot.com

Comments