hello the internet!

hello the internet!

Hmm. I’m looking for some code. I could use Krugle but that would mean navigating away from this page and thats a real hassle. If only i could use the firefox search bar to search Krugle for me. Oh well. It doesn’t look like thats possible. Theres no extensions to do that.

But wait.

Fret no more. Phil Roche, programmer extrodinare, Irish guy, and proud owner of a very heavy duty laptop stand (and co-worker) has written a plugin for firefox. That busy little man. He even got a post on the Krugle blog for his troubles. (And rather suspiciously also just completed and external audit for them and got a $50 amazon voucher – bribing maybe?)

So if you want to read his original post, you can get it here. But don’t let him bask in it too much. Hes enjoying the extra traffic a little too much as it is.

Ms. Dewey

Ms. Dewey

So theres search and theres search.

You may favor Google, if you’ve never used this internet thing, you may not. Regardless, you can’t say Microsoft isn’t trying. Hey, they’re version of maps is alot better for North Wales than google maps is, so no complaining.

But this post is about search. More preciesly, Ms. Dewey. What can you do with search – beyond making it more relevant, easier to use and quicker?

Well you could make it funny. And that’s exactly what Ms Dewey does. It’s powered by Microsoft Live Search so it must have had their blessing at some point.

Ms Dewey

There are definitely some funny responses to find. For instances “shooting” brings up a raft of different senarios with guns as props and theres even some google bashing to be had.

If your interested, and I’m certain I have no idea why you possible could be, but the actresses name is Janina Gavankar. If you search for that on Ms Dewey you get a lovely little speech about how great she is. Funny stuff.

Janina Gavankar

sometimes its the small things

sometimes its the small things

While opening an old c# project today it came up with the following error:

Refreshing the project failed. Unable to retrieve folder information from the server.

Now this is rather annoying, but after a quick google session I found the answer.

Rather simply the strange solution is this:

Delete the folder VSWebCache which is in your Documents and Settings folder.

That solved it for me – Go Internet!

seriousbusiness

hello the internet!

hello the internet!

Hmm. I’m looking for some code. I could use Krugle but that would mean navigating away from this page and thats a real hassle. If only i could use the firefox search bar to search Krugle for me. Oh well. It doesn’t look like thats possible. Theres no extensions to do that.

But wait.

Fret no more. Phil Roche, programmer extrodinare, Irish guy, and proud owner of a very heavy duty laptop stand (and co-worker) has written a plugin for firefox. That busy little man. He even got a post on the Krugle blog for his troubles. (And rather suspiciously also just completed and external audit for them and got a $50 amazon voucher – bribing maybe?)

So if you want to read his original post, you can get it here. But don’t let him bask in it too much. Hes enjoying the extra traffic a little too much as it is

Watchmen

Watchmen

From the look of these shots, the new Watchmen movie is going to be brilliant. And I mean that in the most fully sense of the word. Yes, the movie won’t have the depth of the book, but my word, it looks like its just been pulled off the page.

If you havn’t read Watchmen yet I can’t recommend it enough. If you really ask nice I’ll even lend you my copy.

watch-1317 select

Its got everything, right down to the posters on the news stand behind the comic book fan.

WMD-21550 select

 

WMD-22648 select

 

WMD-22669 select

I love the way each shot seems full of detail, just like the novel, enough so that you can spend ages just noticing tiny details. Anyway, long story short, buy the book now before the movie comes out.

blue mug

blue mug

Isn’t tea just great?

..

Oh go on then, if you’re making one.
So, what have you been up to?

..

Really? 6ft and blue you say? Wow. That’s just amazing. And unexpected.
I’ve been busy too. New work, new laptop, new kitchen, new favorite mug. This mug’s a slightly darker shade of blue, fits about 24% more brew, and the handle is slightly larger for a firmer and more satisfying grip.

Oh and I’ve been drawing. Just doodles really, but some of them are ok.

There’s more but hey, I’m not a walking internet gallery. Get your own badly scanned drawings and keep you’re cursor off mine.

But where’s that tea you were talking about? Mine’s the dark blue mug.

flocking autonomous agents

flocking autonomous agents

A while ago I completed my Mathematics BSc from Bangor University. Its a course they’ve stopped doing now, but at the time, it was a most excellent thing. For those that are interested I did my final year dissertation on Flocking Autonomous Agents. That is, the order that appears when groups of supposedly simple agents congregate.

Its the sort of thing that you see in the wild with swallows flying about. Theres no master plan of where they’re going, nor any central command to the system. So how do these simple creatures manage to form cohesive flocks that can travel, with what seems, singular purpose?

It was just this question I proposed to answer in my dissertation (and I thought I did that rather well) as well as explaining the deceptively complex maths behind it.

Long story short. The system works like this:

  1. The individual agents are only aware of whats going on in an area directly around them (their vision range).
  2. The individual agents will try to adjust their direction to that of their neighbors.
  3. They won’t always do this right.
  4. There is 4th rule.

It seems almost counter-intuitive that the fact that a agent makes mistakes in their headings would actually help the flock as a whole but, after some rather intense mathematics, you can prove that, up to a point, it helps the system.

The crux of the matter is this – If there is group of agents flying together in sync and none of them ever makes a mistake as to their heading or position, their relative positions will conceivably never change.

If however they do make mistakes something wonderful happens.

Mistakes that have a negative impact on the flock as a whole get naturally canceled out while mistakes that bring the flock together are reinforced. Over time a very tight, cohesive, resilient flock is formed.

I even wrote a lovely java applet for it and ill post it up here when i figure out how to embed it properly. Ill even give you the source code, cos I’m nice like that.

Ajax fun!!! (Drag and Drop Reordering)

Ajax fun!!! (Drag and Drop Reordering)

Drag and Drop reordering is a really useful thing to have. The original motivation is to let merchants using Karova Store reorder the way in which articles, products display on their sites, but as I was implementing it we found it easier to basically let them reorder anything that could be displayed in a table.

Theres lots of examples and guides online to show you how to us the scriptaculous libraries to do this, but they all seem to deal with li’s within ul’s not tables.

The tech I’m using for this is pretty simple stuff. The html is coming from an xslt, the data’s going to be held in an xml file, the client side scripting is basic javascript and the server side ajax post back is being handled in c#. All of the things we’re going to do here can be done in lots of different languages, as its likely your setup is going to be different from this.

So heres what we want to do:

  • Display the items in a table,
  • Be able to reorder them by just dragging and dropping them
  • Record what the new order is whenever it changes
  • Use this new order when displaying them to the end user

Follow the white rabbit

1. We need libraries

No, we’re not going to be writing this from scratch, so we need the real engines that are going to do most of the work. So run off and get the latest version of the scriptaculous libraries. We’re using version 1.6.5, but anything recent should work.

Assuming you’ve got them now, just include the the prototype and scriptaculous libraries in your header, making sure the prototype reference is before the scriptaculous reference. They’ll import everything else they need as long as they’re in the same directory.

2. Make up your mark up

For the libraries to work properly we need to have our table to have the right id’s and so on. To use the default markup that works with the scriptaculous libraries mark it up with the tbody having an id of ‘item_list’ and the individual tr’s having id’s of ‘item_{ID}‘.

Basically all you need for it to work is the container to have an id of item_list (you can change this later on) and the individual items with and id of the form item_ID. If you really want to change structure of the individual id’s on the ’s you can, but you’ve got to go and change the scriptaculous libraries, so if I were you, I’d stick with this, at least for now.

3. Initial Dragging and Dropping

Before we go ahead and get all the ajax posting sorted, lets just check it works in its current form. Somewhere in your code you need to put the following javascript to tell the libraries to work their magic.

Sortable.create('item_list',{tag:'tr',
ghosting:true,constraint:'vertical'})

Oh, and this needs to be put in AFTER the table. Otherwise it won’t work. Got that? After, as in further down, later, nearer the end. Ok?

Its the Sortable.create() that does the magic, the first argument is just the id of the thing your reordering, while the things inside the braces are optional arguments. You can find a list of the extra options you can add on wiki page for sortable.create.

Basically the three we’ve got here do the following things:

  • ‘tag’ – the tag, by default its taken as li, so this only needed if its different, as it is here for use in a table
  • ‘ghosting’ – setting this to true displays a transparent version of what you are moving under your mouse
  • ‘constraint’ – tells it house we’re moving the elements. Here its up and down, thus vertical, simple really

We’ll add some more later but for we just need to see that it works.

4. Recording the Reordering

What good is it if the user moves all the items around and but we have no record of what’s changed. No good. Thats how much good it’d be. We could have the user hit a confirm button when their done reordering, but thats and extra click. Of course we could just record what the new order as and when it changes.

Which is what we’ll do. Don’t panic, it’s surprisingly easy.

All we need to do is add a new argument to our sortable.create. This ones called ‘onUpdate‘, and we use it like this:

Sortable.create('item_list',{tag:'tr',
ghosting:true,constraint:'vertical',
onUpdate : updateOrder});

With the updateOrder function looking like this:

var options = { method : 'post',
parameters : Sortable.serialize('item_list') };

For some reason this didn’t work for me. It did return a serialized list yes, but not one in a format I could use. But don’t fret. If this has not worked for you either, try this (longer more scary looking) version.

var ampcharcode= '%26';
var serializeOpts = Sortable.serialize('item_list')
+ unescape(ampcharcode)
+"key=item_list;
var options = { method : 'post',
parameters : serializeOpts };

For this to work totally right we also need to add this new part to our sortable.create function…

Sortable.create('item_list',{tag:'tr',
ghosting:true,constraint:'vertical',
onUpdate : updateOrder,
tree:true})

There, that bit at the end. Don’t ask me why it helps it work, but it does. Just take it and be thankful.

Hold Up! Wheres this ajax you were promising? Oh wait, here it comes, I was just building it up a bit.

So, we now have all the information, all we need to do is pass it along to our server so it can do some tricks with it. For this we need to add the line ‘new Ajax.Request(’reorder.aspx’,options);‘. Where ‘reorder.aspx is the name of the this you’re posting to.

This is what our finished bit of javascript should look like:

function updateOrder(){
var ampcharcode= '%26';
var serializeOpts = Sortable.serialize('item_list')
+ unescape(ampcharcode)
+"key=item_list;
var options = { method : 'post',
parameters : serializeOpts };
new Ajax.Request('Reorder.aspx',options); }

Sortable.create('item_list',{tag:'tr',
ghosting:true,constraint:'vertical',
onUpdate : updateOrder,
tree:true})

If you want to debug at this point, all you need to do is add an alert(options.parameters) before the ajax request.

Now – onward onto the server side fun!

6. Actually using this stuff

Remember, we’re doing this in c#, so if you’re not doing it in c#, you don’t really need to follow all this too carefully.

The posted things come through to the c# as a form, but for safety, lets check it the form has keys with a simple test.

if(System.Web.HttpContext.Current.Request.Form.HasKeys())
{
//do some stuff here
}

Simple. Child’s play. Now lets fill it up with everything.

The stuff we get out of the seriazable comes back in the form ‘item_list[1][id]‘ with the key being the position. To get out exactly what we need lets use a regular expression to get out the numbers and leave everything else.

System.Xml.XmlDocument docO
= new System.Xml.XmlDocument();
docO.LoadXml("");
string itemKey
= System.Web.HttpContext.Current.Request.Form.Get("key");

foreach (string key in
System.Web.HttpContext.Current.Request.Form.Keys)
{
if(key.IndexOf(itemKey) > -1)
{
System.Text.RegularExpressions.Match m
=System.Text.RegularExpressions.
Regex.Match(key,itemKey+@"[(?d+)][]");
if(m.Groups["position"]!=null)
{
System.Xml.XmlElement posEl
= docO.CreateElement("position");
String itemOrder
= m.Groups["position"].Value;
posEl.SetAttribute("pos",itemOrder);
Sring itemId
= System.Web.HttpContext.Current.Request.Form.Get(key);
posEl.SetAttribute("id",itemId);
docO.DocumentElement.AppendChild(posEl);
}
}
}

As you can see here, the c# takes the parameters that are passed and puts them into an xml document, ending up with some xml of the form:

7. The Finished product

So we’re done. Quickly, lets go over what we’ve got.

Using the prototype and scriptaculous libraries we can reorder lines in a table. When ever we do, a function called ‘updateOrder‘ gets called. This serializes the new sequence in our table and posts it through to some waiting c# for some server side handling. On the server side we take the serialized sequence, do some reg ex clean up then generate some xml with it, which can then be used however we want.

Its all good.

As ever, if you notice any problems with anything above, let me know and I’ll go through and fix it. Let me know if this was useful to you.

You can a working example of what we’ve done here all packed up nicely for you. Have fun!